feat: split backend (HF) and frontend (Vercel)

- Backend: remove static file serving, API-only
- Backend: CORS updated to allow Vercel domains
- Dockerfile: remove frontend copy, pure API image
- Frontend: VITE_API_URL env var for HF Space URL
- Frontend: vercel.json with SPA rewrite rules
- Frontend: .env.example with setup instructions

.gitignore

@@ -68,3 +68,4 @@ logs/
 node_modules/
 frontend-react/dist/
 frontend-react/.vite/
+frontend-react/.env.local

Dockerfile

@@ -20,15 +20,14 @@ ENV HOME=/home/user \
 
 WORKDIR /home/user/app
 
-# Copy files
+# Copy only the backend
 COPY --chown=user backend/ ./backend/
-COPY --chown=user frontend-vanilla/ ./frontend-vanilla/
 
 # Install dependencies
 RUN pip install --no-cache-dir --upgrade pip && \
     pip install --no-cache-dir -r backend/requirements.txt
 
-# Pre-cache HuggingFace models
+# Pre-cache HuggingFace models at build time
 RUN python -c "\
 from transformers import ViTForImageClassification, ViTImageProcessor; \
 ViTImageProcessor.from_pretrained('dima806/deepfake_vs_real_image_detection'); \

backend/main.py

@@ -11,8 +11,6 @@ from pathlib import Path
 
 from fastapi import FastAPI, File, UploadFile, HTTPException, Header
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
 from typing import Optional
 
 # ── Logging (must be set up before any logger usage) ─────────────────────────
@@ -94,7 +92,14 @@ app = FastAPI(
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=[
+        "http://localhost:5173",
+        "http://localhost:3000",
+        "https://*.vercel.app",
+        "https://authrix.vercel.app",
+        # Add your custom domain here if you have one
+    ],
+    allow_origin_regex=r"https://.*\.vercel\.app",
     allow_methods=["*"],
     allow_headers=["*"],
 )
@@ -114,7 +119,6 @@ authenticator = None
 async def startup_event():
     global authenticator
     logger.info("Initializing DeepfakeAuthenticator...")
-    logger.info(f"Frontend path: {_vanilla_dir} (exists={_vanilla_dir.exists()})")
     authenticator = DeepfakeAuthenticator()
     logger.info(
         f"DeepfakeAuthenticator ready — model: "
@@ -343,64 +347,6 @@ async def analyze_video(
                     pass
 
 
-# ── Serve frontend ────────────────────────────
-_react_dist  = Path(__file__).parent.parent / "frontend-dist"
-_vanilla_dir = Path(__file__).parent.parent / "frontend-vanilla"
-
-if _react_dist.exists():
-    app.mount("/assets", StaticFiles(directory=str(_react_dist / "assets")), name="assets")
-
-    @app.get("/")
-    async def serve_index():
-        return FileResponse(
-            str(_react_dist / "index.html"),
-            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
-        )
-
-    @app.get("/{full_path:path}")
-    async def spa_fallback(full_path: str):
-        index = _react_dist / "index.html"
-        if index.exists():
-            return FileResponse(str(index))
-        return {"detail": "Not found"}
-
-elif _vanilla_dir.exists():
-    from fastapi.staticfiles import StaticFiles as SF
-
-    @app.get("/script.js")
-    async def serve_script():
-        return FileResponse(
-            str(_vanilla_dir / "script.js"),
-            media_type="application/javascript",
-            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
-        )
-
-    @app.get("/pricing")
-    async def serve_pricing():
-        return FileResponse(
-            str(_vanilla_dir / "pricing.html"),
-            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
-        )
-
-    @app.get("/")
-    async def serve_index():
-        return FileResponse(
-            str(_vanilla_dir / "index.html"),
-            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
-        )
-
-    # Serve any other static file from frontend-vanilla/
-    @app.get("/{filename:path}")
-    async def serve_static(filename: str):
-        file_path = _vanilla_dir / filename
-        if file_path.exists() and file_path.is_file():
-            return FileResponse(str(file_path))
-        return FileResponse(
-            str(_vanilla_dir / "index.html"),
-            headers={"Cache-Control": "no-store, no-cache, must-revalidate"},
-        )
-
-
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=False)

frontend-react/.env.example

@@ -0,0 +1,3 @@
+# Copy to .env.local for local dev (optional — dev proxy handles it automatically)
+# Set this in Vercel dashboard: Settings → Environment Variables
+VITE_API_URL=https://aarav13-authrix.hf.space

frontend-react/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { AnalysisResult, AppState } from './types';
+import { API_BASE } from './api';
 import Background from './components/Background';
 import RadioNav from './components/RadioNav';
 import HeroSection from './components/HeroSection';
@@ -29,7 +30,7 @@ export default function App() {
     const fd = new FormData();
     fd.append('file', file);
     try {
-      const res = await fetch('/analyze', { method: 'POST', body: fd });
+      const res = await fetch(`${API_BASE}/analyze`, { method: 'POST', body: fd });
       if (!res.ok) {
         const e = await res.json().catch(() => ({}));
         throw new Error((e as { detail?: string }).detail || `Server error ${res.status}`);

frontend-react/src/api.ts

@@ -0,0 +1,4 @@
+// In dev: uses Vite proxy (localhost:8000)
+// In production (Vercel): uses VITE_API_URL env var pointing to HF Space
+export const API_BASE =
+  import.meta.env.VITE_API_URL?.replace(/\/$/, '') ?? '';

frontend-react/src/components/Navbar.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+const API_BASE = import.meta.env.VITE_API_URL?.replace(/\/$/, '') ?? '';
+
 interface NavbarProps {
   onDashboard: () => void;
   onGetStarted: () => void;
@@ -10,7 +12,7 @@ export default function Navbar({ onDashboard, onGetStarted, onOpenModal }: Navba
   const [health, setHealth] = useState<'checking' | 'online' | 'offline'>('checking');
 
   useEffect(() => {
-    fetch('/health')
+    fetch(`${API_BASE}/health`)
       .then(r => r.ok ? setHealth('online') : setHealth('offline'))
       .catch(() => setHealth('offline'));
   }, []);

frontend-react/vercel.json

@@ -0,0 +1,8 @@
+{
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "framework": "vite",
+  "rewrites": [
+    { "source": "/(.*)", "destination": "/index.html" }
+  ]
+}