Fix hf by merging both service

DOCKER_README.md

@@ -2,35 +2,83 @@
 
 This Docker setup provides a containerized environment that runs both the Python backend and Svelte frontend for LeRobot Arena using modern tools like Bun, uv, and box-packager.
 
+## 🏗️ Architecture
+
+The application consists of:
+- **Svelte Frontend**: Built as static files and served by FastAPI
+- **FastAPI Backend**: WebSocket server with HTTP API for robot control
+- **Single Port**: Both frontend and backend served on port 7860
+
 ## 🚀 Quick Start
 
-### Using Docker Compose (Recommended)
+### Build and Run with Docker
 
 ```bash
-# Build and start both services
-docker-compose up --build
+# Build the image
+docker build -t lerobot-arena .
+
+# Run the container
+docker run -p 7860:7860 lerobot-arena
 
-# Or run in detached mode
-docker-compose up -d --build
+# Access the application
+open http://localhost:7860
 ```
 
-### Using Docker directly
+### Using Docker Compose
 
 ```bash
-# Build the image
-docker build -t lerobot-arena .
+# Start the application
+docker-compose up
 
-# Run the container
-docker run -p 8080:8080 -p 7860:7860 lerobot-arena
+# Access the application
+open http://localhost:7860
 ```
 
-## 🌐 Access the Application
+## 🌐 Deployment
+
+### Hugging Face Spaces
+
+This project is configured for deployment on Hugging Face Spaces:
 
-After starting the container, you can access:
+1. Push to a Hugging Face Space repository
+2. The Dockerfile will automatically build and serve the application
+3. Both frontend and backend run on port 7860 (HF Spaces default)
+4. Environment detection automatically configures URLs for HF Spaces
+
+### Local Development vs Production
+
+- **Local Development**: Frontend dev server on 5173, backend on 7860
+- **Docker/Production**: Both frontend and backend served by FastAPI on 7860
+- **HF Spaces**: Single FastAPI server on 7860 with automatic HTTPS and domain detection
+
+## 🔧 Environment Variables
+
+- `SPACE_HOST`: Set automatically by Hugging Face Spaces for proper URL configuration
+- `PORT`: Override the default port (7860)
+
+## 📡 API Endpoints
+
+- **Frontend**: `http://localhost:7860/` (Served by FastAPI)
+- **API**: `http://localhost:7860/api/*`
+- **WebSocket**: `ws://localhost:7860/ws/*`
+- **Status**: `http://localhost:7860/status`
+
+## 🛠️ Development
+
+For local development without Docker:
+
+```bash
+# Start backend
+cd src-python
+uv sync
+uv run python start_server.py
+
+# Start frontend (in another terminal)
+bun install
+bun run dev
+```
 
-- **Frontend (Svelte)**: http://localhost:7860
-- **Backend (Python/FastAPI)**: http://localhost:8080
-- **Backend API Docs**: http://localhost:8080/docs
+The frontend dev server (port 5173) will automatically proxy API requests to the backend (port 7860).
 
 ## 📋 What's Included
 

Dockerfile

@@ -51,24 +51,11 @@ RUN uv sync
 # Copy built frontend from previous stage with proper ownership
 COPY --chown=user --from=frontend-builder /app/build $HOME/app/static-frontend
 
-# Create a startup script that runs both services
+# Set working directory back to app root
 WORKDIR $HOME/app
-RUN echo '#!/bin/bash\n\
-echo "Starting LeRobot Arena services..."\n\
-echo "🚀 Starting Python backend on port 8080..."\n\
-cd $HOME/app/src-python && uv run python start_server.py &\n\
-echo "🌐 Starting static file server on port 7860..."\n\
-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)
-EXPOSE 7860 8080
-
-# Start both services
-CMD ["./start_services.sh"] 
+
+# Expose port 7860 (HF Spaces default)
+EXPOSE 7860
+
+# Start the FastAPI server (serves both frontend and backend)
+CMD ["sh", "-c", "cd src-python && uv run python start_server.py"] 

docker-compose.yml

@@ -2,13 +2,13 @@ version: '3.8'
 
 services:
   lerobot-arena:
-    build:
-      context: .
-      dockerfile: Dockerfile
+    build: .
     ports:
-      - "8080:8080"  # Python backend
-      - "7860:7860"  # Svelte frontend (HF Spaces default)
+      - "7860:7860"  # FastAPI server serving both frontend and backend
     environment:
       - NODE_ENV=production
-      - PYTHONUNBUFFERED=1
+    # volumes:
+    #   # Optional: Mount local development files for debugging
+    #   - ./src-python:/home/user/app/src-python
+    #   - ./static-frontend:/home/user/app/static-frontend
     restart: unless-stopped 

src-python/src/main.py

@@ -6,6 +6,8 @@ from datetime import UTC, datetime
 
 from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from .connection_manager import ConnectionManager
 from .models import (
@@ -60,6 +62,51 @@ app.add_middleware(
 connection_manager = ConnectionManager()
 robot_manager = RobotManager()
 
+# Mount static files for the frontend
+# Try different possible locations for the static frontend
+static_dir_candidates = [
+    os.path.join(
+        os.path.dirname(os.path.dirname(__file__)), "..", "static-frontend"
+    ),  # From src-python/src
+    os.path.join(
+        os.path.dirname(os.path.dirname(os.path.dirname(__file__))), "static-frontend"
+    ),  # From src-python
+    "/home/user/app/static-frontend",  # HF Spaces absolute path
+    "static-frontend",  # Relative to working directory
+]
+
+static_dir = None
+for candidate in static_dir_candidates:
+    if os.path.exists(candidate):
+        static_dir = candidate
+        break
+
+if static_dir:
+    app.mount("/static", StaticFiles(directory=static_dir), name="static")
+    logger.info(f"📁 Serving static files from: {static_dir}")
+else:
+    logger.warning(f"⚠️ Static directory not found in any of: {static_dir_candidates}")
+
+
+def get_static_dir() -> str | None:
+    """Get the static directory path"""
+    static_dir_candidates = [
+        os.path.join(
+            os.path.dirname(os.path.dirname(__file__)), "..", "static-frontend"
+        ),  # From src-python/src
+        os.path.join(
+            os.path.dirname(os.path.dirname(os.path.dirname(__file__))),
+            "static-frontend",
+        ),  # From src-python
+        "/home/user/app/static-frontend",  # HF Spaces absolute path
+        "static-frontend",  # Relative to working directory
+    ]
+
+    for candidate in static_dir_candidates:
+        if os.path.exists(candidate):
+            return candidate
+    return None
+
 
 @app.on_event("startup")
 async def startup_event():
@@ -73,15 +120,65 @@ async def startup_event():
 
 
 @app.get("/")
-async def root():
+async def serve_frontend():
+    """Serve the main frontend page"""
+    static_dir = get_static_dir()
+    if not static_dir:
+        return {
+            "message": "Frontend not built. Run 'bun run build' to build the frontend."
+        }
+
+    index_file = os.path.join(static_dir, "index.html")
+    if os.path.exists(index_file):
+        return FileResponse(index_file)
+    return {"message": "Frontend not built. Run 'bun run build' to build the frontend."}
+
+
+@app.get("/status")
+async def get_status():
+    """Get server status for health checks"""
     return {
         "message": "LeRobot Arena Server",
         "version": "1.0.0",
         "robots_connected": len(robot_manager.robots),
         "active_connections": connection_manager.get_connection_count(),
+        "status": "healthy",
     }
 
 
+# Serve static assets from the _app directory
+@app.get("/_app/{path:path}")
+async def serve_app_assets(path: str):
+    """Serve Svelte app assets"""
+    static_dir = get_static_dir()
+    if not static_dir:
+        raise HTTPException(status_code=404, detail="Frontend not found")
+
+    file_path = os.path.join(static_dir, "_app", path)
+    if os.path.exists(file_path) and os.path.isfile(file_path):
+        return FileResponse(file_path)
+    raise HTTPException(status_code=404, detail="File not found")
+
+
+# Catch-all route for client-side routing (SPA fallback)
+@app.get("/{path:path}")
+async def serve_spa_fallback(path: str):
+    """Serve the frontend for client-side routing"""
+    # If it's an API or WebSocket path, let it pass through to other handlers
+    if path.startswith(("api/", "ws/")):
+        raise HTTPException(status_code=404, detail="Not found")
+
+    # For all other paths, serve the index.html (SPA)
+    static_dir = get_static_dir()
+    if not static_dir:
+        raise HTTPException(status_code=404, detail="Frontend not found")
+
+    index_file = os.path.join(static_dir, "index.html")
+    if os.path.exists(index_file):
+        return FileResponse(index_file)
+    raise HTTPException(status_code=404, detail="Frontend not found")
+
+
 # ============= ROBOT MANAGEMENT API =============
 
 
@@ -563,11 +660,11 @@ if __name__ == "__main__":
     logger = logging.getLogger("lerobot-arena")
     logger.info("🚀 Starting LeRobot Arena WebSocket Server...")
 
-    # Start the server
+    # Start the server on port 7860 for HF Spaces compatibility
     uvicorn.run(
         app,
         host="0.0.0.0",
-        port=8080,
+        port=7860,
         log_level="info",
-        reload=False,  # Auto-reload on code changes
+        reload=False,
     )

src-python/start_server.py

@@ -5,34 +5,37 @@ LeRobot Arena WebSocket Server
 Run with: python start_server.py
 """
 
-import uvicorn
 import logging
 import sys
 from pathlib import Path
 
+import uvicorn
+
 # Add src to path
 sys.path.insert(0, str(Path(__file__).parent / "src"))
 
 from src.main import app
 
+
 def main():
     """Start the LeRobot Arena server"""
     logging.basicConfig(
         level=logging.INFO,
-        format="%(asctime)s - %(name)s - %(levelname)s - %(message)s"
+        format="%(asctime)s - %(name)s - %(levelname)s - %(message)s",
     )
-    
+
     logger = logging.getLogger("lerobot-arena")
     logger.info("🚀 Starting LeRobot Arena WebSocket Server...")
-    
-    # Start the server
+
+    # Start the server on port 7860 for HF Spaces compatibility
     uvicorn.run(
-        app, 
-        host="0.0.0.0", 
-        port=8080,
+        app,
+        host="0.0.0.0",
+        port=7860,
         log_level="info",
-        reload=False  # Auto-reload on code changes
+        reload=False,  # Auto-reload on code changes
     )
 
+
 if __name__ == "__main__":
-    main() 
+    main()

src/lib/utils/config.ts

@@ -29,7 +29,7 @@ function getSpaceHost(): string | undefined {
  * Get the base URL for API requests
  */
 export function getApiBaseUrl(): string {
-    if (!isBrowser) return 'http://localhost:8080';
+    if (!isBrowser) return 'http://localhost:7860';
     
     // Check for Hugging Face Spaces
     const spaceHost = getSpaceHost();
@@ -38,22 +38,27 @@ export function getApiBaseUrl(): string {
     }
     
     // In browser, check current location
-    const { protocol, hostname } = window.location;
+    const { protocol, hostname, port } = 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';
+    // If we're on the same host and port, use same origin (both frontend and backend on same server)
+    if (hostname === 'localhost' || hostname === '127.0.0.1') {
+        // In development, frontend might be on 5173 and backend on 7860
+        if (port === '5173') {
+            return 'http://localhost:7860';
+        }
+        // If frontend is served from backend (port 7860), use same origin
+        return `${protocol}//${hostname}:${port}`;
     }
     
-    // Default fallback - same origin but port 8080
-    return `${protocol}//${hostname}:8080`;
+    // For production, use same origin (both served from same FastAPI server)
+    return `${protocol}//${hostname}${port ? `:${port}` : ''}`;
 }
 
 /**
  * Get the WebSocket URL for real-time connections
  */
 export function getWebSocketBaseUrl(): string {
-    if (!isBrowser) return 'ws://localhost:8080';
+    if (!isBrowser) return 'ws://localhost:7860';
     
     // Check for Hugging Face Spaces
     const spaceHost = getSpaceHost();
@@ -61,18 +66,24 @@ export function getWebSocketBaseUrl(): string {
         return `wss://${spaceHost}`;
     }
     
-    const { protocol, hostname } = window.location;
+    const { protocol, hostname, port } = window.location;
     
-    // If we're on localhost, use ws://localhost:8080
+    // If we're on localhost
     if (hostname === 'localhost' || hostname === '127.0.0.1') {
-        return 'ws://localhost:8080';
+        // In development, frontend might be on 5173 and backend on 7860
+        if (port === '5173') {
+            return 'ws://localhost:7860';
+        }
+        // If frontend is served from backend (port 7860), use same origin
+        const wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
+        return `${wsProtocol}//${hostname}:${port}`;
     }
     
     // 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`;
+    // For production, use same origin (both served from same FastAPI server)
+    return `${wsProtocol}//${hostname}${port ? `:${port}` : ''}`;
 }
 
 /**