dynamic config

src/lib/config.ts

@@ -0,0 +1,52 @@
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/public';
+
+export interface ApiConfig {
+    baseUrl: string;
+    isLocal: boolean;
+}
+
+/**
+ * Get API configuration based on environment
+ */
+export function getApiConfig(): ApiConfig {
+    // Check for explicit environment variable first
+    const apiUrl = env.PUBLIC_API_URL;
+    
+    if (apiUrl) {
+        return {
+            baseUrl: apiUrl,
+            isLocal: apiUrl.includes('localhost') || apiUrl.includes('127.0.0.1')
+        };
+    }
+    
+    // Default behavior: use localhost in dev, production URL in prod
+    if (dev) {
+        return {
+            baseUrl: 'http://localhost:8000',
+            isLocal: true
+        };
+    }
+    
+    return {
+        baseUrl: 'https://dylanebert-3d-arena-backend.hf.space',
+        isLocal: false
+    };
+}
+
+/**
+ * Get full API endpoint URL
+ */
+export function getApiEndpoint(path: string): string {
+    const config = getApiConfig();
+    return `${config.baseUrl}${path}`;
+}
+
+/**
+ * Public API endpoints
+ */
+export const ApiEndpoints = {
+    PAIR: '/pair',
+    VOTE: '/vote',
+    LEADERBOARD: '/leaderboard',
+} as const;

src/routes/+page.svelte

@@ -4,9 +4,11 @@
     import Viewer from "./Viewer.svelte";
     import Vote from "./Vote.svelte";
     import About from "./About.svelte";
-    import { Filter, CheckmarkOutline } from "carbon-icons-svelte";
+    import { Filter } from "carbon-icons-svelte";
     import { onMount } from "svelte";
-    import { CaretDown, Code } from "carbon-icons-svelte";
+    import { CaretDown, Code, Development } from "carbon-icons-svelte";
+    import { dev } from '$app/environment';
+    import { getApiConfig } from '$lib/config';
 
     interface Scene {
         name: string;
@@ -20,6 +22,9 @@
     let showOnlyOpenSource = false;
     let showFilter = false;
     let filterContainer: HTMLDivElement;
+    
+    $: apiConfig = getApiConfig();
+    $: isDevelopment = dev || apiConfig.isLocal;
 
     function handleClickOutside(event: MouseEvent) {
         if (filterContainer && !filterContainer.contains(event.target as Node)) {
@@ -50,6 +55,13 @@
 </script>
 
 <div class="container">
+    {#if isDevelopment}
+        <div class="dev-banner">
+            <Development size={16} />
+            <span>Development Mode - Backend: {apiConfig.baseUrl}</span>
+        </div>
+    {/if}
+    
     <div on:pointerdown={goHome} class="banner">
         <h1>3D Arena</h1>
         <p>Generative 3D Leaderboard</p>

src/routes/Vote.svelte

@@ -100,7 +100,6 @@
             window.addEventListener("resize", handleResize);
             handleResize();
         } catch (error) {
-            console.log(error);
             errorMessage = "Failed to load scenes.";
         }
 
@@ -144,7 +143,6 @@
 
             if (response.ok) {
                 const result = await response.json();
-                console.log(result);
                 setTimeout(() => {
                     voteOverlayA.classList.remove("show");
                     voteOverlayB.classList.remove("show");
@@ -197,9 +195,6 @@
         }
     });
 
-    $: if (data && data.input_path) {
-        console.log("Input path changed:", data.input_path);
-    }
 </script>
 
 {#if errorMessage}

src/routes/api/fetchScenes/+server.ts

@@ -1,4 +1,5 @@
 import { RequestHandler } from "@sveltejs/kit";
+import { getApiEndpoint, ApiEndpoints } from "$lib/config";
 
 export const GET: RequestHandler = async ({ request }) => {
     const authHeader = request.headers.get("authorization");
@@ -7,8 +8,9 @@ export const GET: RequestHandler = async ({ request }) => {
         accessToken = authHeader.substring("Bearer ".length);
     }
 
-    const url = `https://dylanebert-3d-arena-backend.hf.space/pair?access_token=${accessToken}`;
-    // const url = `http://localhost:8000/pair?access_token=${access_token}`;
+    const url = accessToken 
+        ? `${getApiEndpoint(ApiEndpoints.PAIR)}?access_token=${accessToken}`
+        : getApiEndpoint(ApiEndpoints.PAIR);
 
     try {
         const response = await fetch(url, {

src/routes/api/leaderboard/+server.ts

@@ -1,5 +1,7 @@
+import { getApiEndpoint, ApiEndpoints } from "$lib/config";
+
 export const GET = async () => {
-    const url = `https://dylanebert-3d-arena-backend.hf.space/leaderboard`;
+    const url = getApiEndpoint(ApiEndpoints.LEADERBOARD);
 
     try {
         const response = await fetch(url, {

src/routes/api/vote/+server.ts

@@ -1,4 +1,5 @@
 import type { RequestHandler } from "@sveltejs/kit";
+import { getApiEndpoint, ApiEndpoints } from "$lib/config";
 
 export const POST: RequestHandler = async ({ request }) => {
     const authHeader = request.headers.get("authorization");
@@ -11,8 +12,7 @@ export const POST: RequestHandler = async ({ request }) => {
     const payload = await request.json();
     payload.access_token = accessToken;
 
-    const url = `https://dylanebert-3d-arena-backend.hf.space/vote`;
-    // const url = `http://localhost:8000/vote`;
+    const url = getApiEndpoint(ApiEndpoints.VOTE);
 
     try {
         const response = await fetch(url, {

static/global.css

@@ -614,3 +614,22 @@ body {
     letter-spacing: 0.5px;
     margin-bottom: 4px;
 }
+
+.dev-banner {
+    background-color: #ff6b35;
+    color: #fff;
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    border-bottom: 1px solid #e55a2b;
+    margin: -10px -10px 10px -10px;
+    text-align: center;
+    justify-content: center;
+}
+
+.dev-banner span {
+    margin: 0;
+}