Fix HF Spaces

Dockerfile

@@ -62,6 +62,9 @@ cd $HOME/app/static-frontend && python -m http.server 7860 --bind 0.0.0.0 &\n\
 echo "✅ Both services started!"\n\
 echo "Backend: http://localhost:8080"\n\
 echo "Frontend: http://localhost:7860"\n\
+if [ ! -z "$SPACE_HOST" ]; then\n\
+  echo "🌐 Hugging Face Space: https://$SPACE_HOST"\n\
+fi\n\
 wait' > start_services.sh && chmod +x start_services.sh
 
 # Expose both ports (7860 is default for HF Spaces)

src-python/src/main.py

@@ -1,5 +1,6 @@
 import asyncio
 import logging
+import os
 import uuid
 from datetime import UTC, datetime
 
@@ -24,14 +25,32 @@ app = FastAPI(
     version="1.0.0",
 )
 
+# Dynamic CORS origins based on environment
+cors_origins = [
+    "http://localhost:5173",
+    "http://localhost:5174",
+    "http://localhost:7860",
+    "http://localhost:3000",
+    "https://*.hf.space",
+    "https://hf.space",
+    "https://huggingface.co",
+]
+
+# Add SPACE_HOST if running in Hugging Face Spaces
+space_host = os.environ.get("SPACE_HOST")
+if space_host:
+    cors_origins.extend([
+        f"https://{space_host}",
+        f"http://{space_host}",
+    ])
+    logger.info(f"🌐 Running in Hugging Face Spaces: {space_host}")
+
+logger.info(f"🔒 CORS origins: {cors_origins}")
+
 # CORS middleware for web frontend
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=[
-        "http://localhost:5173",
-        "http://localhost:5174",
-        "http://localhost:3000",
-    ],  # Add your frontend URLs
+    allow_origins=cors_origins,
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],

src/lib/components/panel/RobotControlPanel.svelte

@@ -2,6 +2,7 @@
     import { robotManager } from "$lib/robot/RobotManager.svelte";
     import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
     import type { Robot } from "$lib/robot/Robot.svelte";
+    import { getApiBaseUrl, getWebSocketBaseUrl, getEnvironmentInfo } from "$lib/utils/config";
 
     interface Props {}
     
@@ -23,6 +24,13 @@
     const robotsWithSlaves = $derived(robotManager.robotsWithSlaves.length);
     const robotsWithMaster = $derived(robotManager.robotsWithMaster.length);
 
+    // Get URLs from configuration
+    const apiBaseUrl = getApiBaseUrl();
+    const wsBaseUrl = getWebSocketBaseUrl();
+    
+    // Log environment info for debugging
+    console.log('Environment info:', getEnvironmentInfo());
+
     async function createRobot() {
         if (isCreating) return;
         
@@ -50,9 +58,9 @@
     }
 
     // Master connection functions
-    async function connectMockSequenceMaster(robot: Robot) {
+    async function connectDemoSequences(robot: Robot) {
         try {
-            await robotManager.connectDemoSequences(robot.id, true);
+            await robotManager.connectDemoSequences(robot.id);
         } catch (err) {
             error = `Failed to connect demo sequences: ${err}`;
             console.error(err);
@@ -63,7 +71,7 @@
         try {
             const config: import('$lib/types/robotDriver').MasterDriverConfig = {
                 type: "remote-server",
-                url: "ws://localhost:8080",
+                url: wsBaseUrl,
                 apiKey: undefined,
                 pollInterval: 100
             };
@@ -105,8 +113,7 @@
     async function connectRemoteServerSlave(robot: Robot) {
         try {
             // First, fetch available robots from the server
-            const serverUrl = "http://localhost:8080";
-            const response = await fetch(`${serverUrl}/api/robots`);
+            const response = await fetch(`${apiBaseUrl}/api/robots`);
             
             if (!response.ok) {
                 throw new Error(`Server responded with ${response.status}: ${response.statusText}`);
@@ -137,7 +144,7 @@
         try {
             await robotManager.connectRemoteServerSlave(
                 pendingLocalRobot.id, 
-                "ws://localhost:8080", 
+                wsBaseUrl, 
                 undefined, 
                 selectedServerRobotId
             );
@@ -332,7 +339,7 @@
                     <div class="flex flex-wrap gap-2">
                         <button
                             class="px-3 py-1.5 bg-orange-500 text-white rounded text-sm hover:bg-orange-600 transition-colors disabled:bg-slate-600 disabled:cursor-not-allowed"
-                            onclick={() => connectMockSequenceMaster(robot)}
+                            onclick={() => connectDemoSequences(robot)}
                             disabled={robot.controlState.hasActiveMaster}
                         >
                             Demo Sequences

src/lib/utils/config.ts

@@ -0,0 +1,96 @@
+/**
+ * Configuration utilities for environment-specific URLs
+ */
+
+// Check if we're running in browser
+const isBrowser = typeof window !== 'undefined';
+
+/**
+ * Get the SPACE_HOST from various sources
+ */
+function getSpaceHost(): string | undefined {
+    if (!isBrowser) return undefined;
+    
+    // Check window.SPACE_HOST (injected by container)
+    if ((window as unknown as { SPACE_HOST?: string }).SPACE_HOST) {
+        return (window as unknown as { SPACE_HOST: string }).SPACE_HOST;
+    }
+    
+    // Check if current hostname looks like HF Spaces
+    const hostname = window.location.hostname;
+    if (hostname.includes('hf.space') || hostname.includes('huggingface.co')) {
+        return hostname;
+    }
+    
+    return undefined;
+}
+
+/**
+ * Get the base URL for API requests
+ */
+export function getApiBaseUrl(): string {
+    if (!isBrowser) return 'http://localhost:8080';
+    
+    // Check for Hugging Face Spaces
+    const spaceHost = getSpaceHost();
+    if (spaceHost) {
+        return `https://${spaceHost}`;
+    }
+    
+    // In browser, check current location
+    const { protocol, hostname } = window.location;
+    
+    // If we're on localhost or serving from file, use localhost:8080
+    if (hostname === 'localhost' || hostname === '127.0.0.1' || protocol === 'file:') {
+        return 'http://localhost:8080';
+    }
+    
+    // Default fallback - same origin but port 8080
+    return `${protocol}//${hostname}:8080`;
+}
+
+/**
+ * Get the WebSocket URL for real-time connections
+ */
+export function getWebSocketBaseUrl(): string {
+    if (!isBrowser) return 'ws://localhost:8080';
+    
+    // Check for Hugging Face Spaces
+    const spaceHost = getSpaceHost();
+    if (spaceHost) {
+        return `wss://${spaceHost}`;
+    }
+    
+    const { protocol, hostname } = window.location;
+    
+    // If we're on localhost, use ws://localhost:8080
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+        return 'ws://localhost:8080';
+    }
+    
+    // For HTTPS sites, use WSS; for HTTP sites, use WS
+    const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
+    
+    // Default fallback - same origin but port 8080
+    return `${wsProtocol}//${hostname}:8080`;
+}
+
+/**
+ * Get environment info for debugging
+ */
+export function getEnvironmentInfo() {
+    if (!isBrowser) return { env: 'server', hostname: 'unknown' };
+    
+    const { protocol, hostname, port } = window.location;
+    const spaceHost = getSpaceHost();
+    
+    return {
+        env: spaceHost ? 'huggingface-spaces' : hostname === 'localhost' ? 'local' : 'production',
+        hostname,
+        port,
+        protocol,
+        spaceHost,
+        apiBaseUrl: getApiBaseUrl(),
+        wsBaseUrl: getWebSocketBaseUrl()
+    };
+}