build: prepare Dockerfile and FastAPI adjustments for Hugging Face Spaces deployment

Dockerfile

@@ -0,0 +1,40 @@
+# Stage 1: Build the React Frontend
+FROM node:20-alpine AS build-step
+
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+
+COPY frontend/ ./
+RUN npm run build
+
+# Stage 2: Serve with Python FastAPI
+FROM python:3.10-slim
+
+# Set up a new user named "user" with user ID 1000 (Required by Hugging Face Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /home/user/app
+
+# Copy requirement files and install Python dependencies
+COPY --chown=user:user requirements.txt ./
+# We install torch CPU version to save space/memory if GPU is unavailable, though HF Spaces gives regular instances depending on config
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the entire project code into the container
+COPY --chown=user:user . .
+
+# Copy the compiled React frontend from the build stage into the backend's reach
+COPY --from=build-step --chown=user:user /app/frontend/dist ./frontend/dist
+
+# Expose the standard port Hugging Face Spaces expects
+EXPOSE 7860
+
+# We mount the HF Spaces cache directory for transformers to avoid downloading models on every restart
+ENV TRANSFORMERS_CACHE="/home/user/app/.cache/huggingface"
+
+# Run the FastAPI app on port 7860
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "7860"]

backend/main.py

@@ -5,6 +5,8 @@ from pathlib import Path
 import pandas as pd
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from src.app.schemas import (
     CompareRequest,
@@ -160,3 +162,21 @@ def compare(request: CompareRequest):
         return CompareResponse(dataset_track=request.dataset_track, items=items)
     except Exception as exc:
         raise HTTPException(status_code=500, detail=str(exc)) from exc
+
+# ── Serve React Frontend (Single-Container Deployment e.g., Hugging Face) ──
+_DIST_PATH = Path(__file__).parent.parent / "frontend" / "dist"
+
+if _DIST_PATH.exists() and _DIST_PATH.is_dir():
+    # Mount static assets first (CSS/JS files inside /assets)
+    app.mount("/assets", StaticFiles(directory=str(_DIST_PATH / "assets")), name="assets")
+
+    # Catch-all route for Single Page Application (React Router)
+    @app.get("/{full_path:path}", response_class=FileResponse)
+    async def serve_frontend(full_path: str):
+        # Prevent accessing files outside dist/
+        req_path = _DIST_PATH / full_path
+        if req_path.exists() and req_path.is_file():
+            return FileResponse(req_path)
+        # Otherwise, fall back to React's index.html
+        return FileResponse(_DIST_PATH / "index.html")
+

frontend/src/api/client.js

@@ -1,7 +1,9 @@
 import axios from "axios";
 
 const api = axios.create({
-  baseURL: "http://127.0.0.1:8000"
+  // Use relative paths in production (Hugging Face) so it hits the same domain.
+  // In local dev, continue reaching out to FastAPI on port 8000.
+  baseURL: import.meta.env.PROD ? "" : "http://127.0.0.1:8000"
 });
 
 export async function summarizeText(payload) {