Run FastAPI in Space and use relative API URLs

Dockerfile

@@ -1,4 +1,4 @@
-# Multi-stage build for Vite React app served as static site
+# Multi-stage build: frontend + FastAPI backend in one container
 
 FROM node:18-alpine AS build
 WORKDIR /app
@@ -13,18 +13,22 @@ COPY . .
 # Build static assets
 RUN npm run build
 
-FROM node:18-alpine AS runtime
+FROM python:3.10-slim AS runtime
 WORKDIR /app
 
-# Install a lightweight static file server
-RUN npm install -g serve
+ENV PYTHONUNBUFFERED=1
+
+RUN apt-get update \
+	&& apt-get install -y --no-install-recommends libgl1 libglib2.0-0 \
+	&& rm -rf /var/lib/apt/lists/*
+
+COPY backend/ ./backend/
+COPY backend/requirements.txt ./backend/requirements.txt
+RUN pip install --no-cache-dir -r backend/requirements.txt
 
-# Copy build output from previous stage
 COPY --from=build /app/dist ./dist
 
-# Spaces sets PORT; default to 7860 for local runs
 ENV PORT=7860
 EXPOSE 7860
 
-# Serve the built app
-CMD ["sh", "-c", "serve -s dist -l ${PORT}"]
+CMD ["uvicorn", "backend.app:app", "--host", "0.0.0.0", "--port", "7860"]

backend/app.py

@@ -1,6 +1,7 @@
 from fastapi import FastAPI, File, UploadFile, HTTPException
 from fastapi.responses import JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 import cv2
 import numpy as np
 import tempfile
@@ -22,6 +23,14 @@ app.add_middleware(
 )
 
 
+class SPAStaticFiles(StaticFiles):
+    async def get_response(self, path: str, scope):
+        response = await super().get_response(path, scope)
+        if response.status_code == 404:
+            return await super().get_response("index.html", scope)
+        return response
+
+
 @app.get("/health")
 async def health_check():
     """Health check endpoint"""
@@ -214,5 +223,11 @@ async def infer_video(file: UploadFile = File(...)):
         raise HTTPException(status_code=500, detail=str(e))
 
 
+# Serve the built frontend if present (Space/Docker runtime)
+frontend_dist = os.path.join(os.path.dirname(__file__), "..", "dist")
+if os.path.isdir(frontend_dist):
+    app.mount("/", SPAStaticFiles(directory=frontend_dist, html=True), name="frontend")
+
+
 if __name__ == "__main__":
     uvicorn.run(app, host="0.0.0.0", port=8000)

src/components/AceticAnnotator.tsx

@@ -210,7 +210,7 @@ const AceticAnnotatorComponent = forwardRef<AceticAnnotatorHandle, AceticAnnotat
 
       console.log('🚀 Sending to backend with image dimensions:', imageDimensions);
 
-      const backendResponse = await fetch('http://localhost:8000/api/infer-aw-contour', {
+      const backendResponse = await fetch('/api/infer-aw-contour', {
         method: 'POST',
         body: formData,
       });

src/pages/AcetowhiteExamPage.tsx

@@ -178,7 +178,7 @@ export function AcetowhiteExamPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+      const backendResponse = await fetch('/infer/image', {
         method: 'POST',
         body: formData,
       });

src/pages/GreenFilterPage.tsx

@@ -231,7 +231,7 @@ export function GreenFilterPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+      const backendResponse = await fetch('/infer/image', {
         method: 'POST',
         body: formData,
       });

src/pages/GuidedCapturePage.tsx

@@ -243,7 +243,7 @@ export function GuidedCapturePage({ onNext, onGoToPatientRecords, initialMode, o
             const formData = new FormData();
             formData.append('file', blob, 'frame.jpg');
 
-            const response = await fetch('http://localhost:8000/infer/image', {
+            const response = await fetch('/infer/image', {
               method: 'POST',
               body: formData,
             });

src/pages/LugolExamPage.tsx

@@ -149,7 +149,7 @@ export function LugolExamPage({ goBack, onNext }: Props) {
 
       const formData = new FormData();
       formData.append('file', blob, 'image.jpg');
-      const backendResponse = await fetch('http://localhost:8000/infer/image', {
+      const backendResponse = await fetch('/infer/image', {
         method: 'POST',
         body: formData,
       });