feat: serve full-stack app from single HF Space container

- Dockerfile: add Node 20 build stage to compile React frontend,
copy dist/ into /app/static/ in final Python image
- main.py: mount /assets static dir + root & SPA catch-all routes
that serve index.html so React Router works end-to-end
- useWebSocket.ts: auto-derive WS URL from window.location (wss when
served over HTTPS, e.g. HF Space) — no VITE_WS_URL needed
- requirements.txt: add aiofiles (required by StaticFiles middleware)

Dockerfile

@@ -1,11 +1,23 @@
 # ─────────────────────────────────────────────────────────────────────────────
-# SanketSetu Backend — Dockerfile
+# SanketSetu — Dockerfile (full-stack: React frontend + FastAPI backend)
 # Build context: repo root (SanketSetu/)
 #
-#   docker build -t sanketsetu-backend .
-#   docker run -p 8000:8000 sanketsetu-backend
+#   docker build -t sanketsetu .
+#   docker run -p 7860:7860 sanketsetu
 # ─────────────────────────────────────────────────────────────────────────────
 
+# ── Stage 1: Build React frontend ────────────────────────────────────────────
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /frontend
+COPY frontend/package.json frontend/package-lock.json* ./
+RUN npm ci --prefer-offline
+
+COPY frontend/ ./
+# No VITE_WS_URL — the hook derives it from window.location at runtime
+RUN npm run build
+
+# ── Stage 2: Python backend ───────────────────────────────────────────────────
 FROM python:3.12-slim AS base
 
 # System libraries needed by OpenCV headless + Pillow
@@ -21,6 +33,9 @@ RUN pip install --no-cache-dir -r requirements.txt
 # ── Application source ────────────────────────────────────────────────────────
 COPY backend/app/ ./app/
 
+# ── Frontend static files (built in Stage 1) ─────────────────────────────────
+COPY --from=frontend-builder /frontend/dist ./static/
+
 # ── Model artefacts ───────────────────────────────────────────────────────────
 # Copied to /models so the container is fully self-contained.
 # Override at runtime with -e WEIGHTS_DIR=/mnt/models + bind-mount if preferred.

backend/app/main.py

@@ -31,7 +31,8 @@ except ImportError:
 import numpy as np
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from app import config
 from app.models.loader import load_models, get_model_store
@@ -92,6 +93,11 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# ── Serve React frontend static files (if built into /app/static) ────────────
+_STATIC_DIR = Path(__file__).resolve().parent.parent / "static"
+if _STATIC_DIR.is_dir():
+    app.mount("/assets", StaticFiles(directory=str(_STATIC_DIR / "assets")), name="assets")
+
 
 # ---------------------------------------------------------------------------
 # Global exception handler
@@ -155,6 +161,18 @@ def _available_pipelines() -> list[str]:
 # REST endpoints
 # ---------------------------------------------------------------------------
 
+@app.get("/", include_in_schema=False)
+@app.get("/index.html", include_in_schema=False)
+async def serve_frontend():
+    """Serve the React SPA index for the root and any unknown path."""
+    index = _STATIC_DIR / "index.html"
+    if index.is_file():
+        return FileResponse(str(index), media_type="text/html")
+    # Fallback: redirect to API docs if frontend not bundled
+    from fastapi.responses import RedirectResponse
+    return RedirectResponse(url="/docs")
+
+
 @app.get("/health", response_model=HealthResponse)
 async def health():
     try:
@@ -278,3 +296,16 @@ async def ws_image(ws: WebSocket):
 
     except WebSocketDisconnect:
         logger.info("Image client disconnected: %s", session_id)
+
+
+# ---------------------------------------------------------------------------
+# SPA catch-all — must be LAST so it doesn't shadow API routes
+# ---------------------------------------------------------------------------
+@app.get("/{full_path:path}", include_in_schema=False)
+async def serve_spa(full_path: str):
+    """Return index.html for any unknown path so React Router handles routing."""
+    index = _STATIC_DIR / "index.html"
+    if index.is_file():
+        return FileResponse(str(index), media_type="text/html")
+    from fastapi.responses import RedirectResponse
+    return RedirectResponse(url="/docs")

backend/requirements.txt

@@ -1,6 +1,7 @@
 fastapi>=0.115.0
 uvicorn[standard]>=0.30.0
 websockets>=12.0
+aiofiles>=23.0.0
 xgboost>=2.0.0
 lightgbm>=4.3.0
 scikit-learn>=1.4.0

frontend/src/hooks/useWebSocket.ts

@@ -1,7 +1,14 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 import type { PredictionResponse } from '../types';
 
-const WS_URL = import.meta.env.VITE_WS_URL ?? 'ws://localhost:8080';
+// Derive WebSocket base URL from the current page origin so the hook works
+// on any deployment (HF Space, Vercel + backend, localhost) without extra config.
+function _defaultWsUrl(): string {
+  if (import.meta.env.VITE_WS_URL) return import.meta.env.VITE_WS_URL as string;
+  const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+  return `${proto}://${window.location.host}`;
+}
+const WS_URL = _defaultWsUrl();
 const RECONNECT_BASE_MS    = 1000;
 const MAX_RECONNECT_MS     = 30_000;
 const MAX_SEND_RATE        = 15; // frames/sec — normal