fix

frontend/src/components/HeaderNav.tsx

@@ -9,6 +9,12 @@ import {
   SettingsIcon,
 } from "@ifrc-go/icons";
 
+declare global {
+  interface Window {
+    confirmNavigationIfNeeded?: (to: string) => void;
+  }
+}
+
 const navItems = [
   { to: "/upload",    label: "Upload",    Icon: UploadCloudLineIcon },
   { to: "/explore",   label: "Explore",   Icon: SearchLineIcon },
@@ -30,8 +36,8 @@ export default function HeaderNav() {
           className="flex items-center gap-4 min-w-0 cursor-pointer group transition-all duration-200 hover:scale-105" 
           onClick={() => {
             if (location.pathname === "/upload") {
-              if ((window as any).confirmNavigationIfNeeded) {
-                (window as any).confirmNavigationIfNeeded('/');
+              if (window.confirmNavigationIfNeeded) {
+                window.confirmNavigationIfNeeded('/');
                 return;
               }
               if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
@@ -68,8 +74,8 @@ export default function HeaderNav() {
                     }`}
                                       onClick={() => {
                     if (location.pathname === "/upload") {
-                      if ((window as any).confirmNavigationIfNeeded) {
-                        (window as any).confirmNavigationIfNeeded(to);
+                      if (window.confirmNavigationIfNeeded) {
+                        window.confirmNavigationIfNeeded(to);
                         return;
                       }
                       if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {
@@ -104,8 +110,8 @@ export default function HeaderNav() {
           }`}
           onClick={() => {
             if (location.pathname === "/upload") {
-              if ((window as any).confirmNavigationIfNeeded) {
-                (window as any).confirmNavigationIfNeeded('/help');
+              if (window.confirmNavigationIfNeeded) {
+                window.confirmNavigationIfNeeded('/help');
                 return;
               }
               if (!confirm("You have unsaved changes. Are you sure you want to leave?")) {

frontend/src/pages/AnalyticsPage/AnalyticsPage.tsx

@@ -13,7 +13,7 @@ import {
   createNumberColumn,
   numericIdSelector
 } from '@ifrc-go/ui/utils';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import styles from './AnalyticsPage.module.css';
 
 interface AnalyticsData {
@@ -70,6 +70,18 @@ interface ModelData {
   totalScore: number;
 }
 
+interface MapData {
+  source?: string;
+  event_type?: string;
+  countries?: Array<{ r_code?: string }>;
+  captions?: Array<{
+    model?: string;
+    accuracy?: number;
+    context?: number;
+    usability?: number;
+  }>;
+}
+
 export default function AnalyticsPage() {
   const [data, setData] = useState<AnalyticsData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -83,12 +95,7 @@ export default function AnalyticsPage() {
     { key: 'vlm' as const, label: 'VLM Analytics' }
   ];
 
-  useEffect(() => {
-    fetchAnalytics();
-    fetchLookupData();
-  }, []);
-
-  async function fetchAnalytics() {
+  const fetchAnalytics = useCallback(async () => {
     setLoading(true);
     try {
       const res = await fetch('/api/images/');
@@ -102,11 +109,11 @@ export default function AnalyticsPage() {
         models: {},
       };
 
-      maps.forEach((map: any) => {
+      maps.forEach((map: MapData) => {
         if (map.source) analytics.sources[map.source] = (analytics.sources[map.source] || 0) + 1;
         if (map.event_type) analytics.types[map.event_type] = (analytics.types[map.event_type] || 0) + 1;
         if (map.countries) {
-          map.countries.forEach((c: any) => {
+          map.countries.forEach((c) => {
             if (c.r_code) analytics.regions[c.r_code] = (analytics.regions[c.r_code] || 0) + 1;
           });
         }
@@ -155,15 +162,15 @@ export default function AnalyticsPage() {
       });
 
       setData(analytics);
-    } catch (e) {
+    } catch {
       
       setData(null);
     } finally {
       setLoading(false);
     }
-  }
+  }, [sourcesLookup, typesLookup, regionsLookup]);
 
-  async function fetchLookupData() {
+  const fetchLookupData = useCallback(async () => {
     try {
       const [sourcesRes, typesRes, regionsRes] = await Promise.all([
         fetch('/api/sources'),
@@ -176,20 +183,25 @@ export default function AnalyticsPage() {
       setSourcesLookup(sources);
       setTypesLookup(types);
       setRegionsLookup(regions);
-    } catch (e) {
+    } catch {
       
     }
-  }
+  }, []);
+
+  useEffect(() => {
+    fetchAnalytics();
+    fetchLookupData();
+  }, [fetchAnalytics, fetchLookupData]);
 
-  const getSourceLabel = (code: string) => {
+  const getSourceLabel = useCallback((code: string) => {
     const source = sourcesLookup.find(s => s.s_code === code);
     return source ? source.label : code;
-  };
+  }, [sourcesLookup]);
 
-  const getTypeLabel = (code: string) => {
+  const getTypeLabel = useCallback((code: string) => {
     const type = typesLookup.find(t => t.t_code === code);
     return type ? type.label : code;
-  };
+  }, [typesLookup]);
 
   const regionsTableData = useMemo(() => {
     if (!data || !regionsLookup.length) return [];

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1,6 +1,6 @@
 import { PageContainer, Container, Button, Spinner, SegmentInput, TextInput, SelectInput, MultiSelectInput } from '@ifrc-go/ui';
 import { useParams, useNavigate } from 'react-router-dom';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { ChevronLeftLineIcon, ChevronRightLineIcon } from '@ifrc-go/icons';
 import styles from './MapDetailPage.module.css';
 
@@ -63,17 +63,7 @@ export default function MapDetailPage() {
     { key: 'mapDetails' as const, label: 'Map Details' }
   ];
 
-  useEffect(() => {
-    if (!mapId) {
-      setError('Map ID is required');
-      setLoading(false);
-      return;
-    }
-
-    fetchMapData(mapId);
-  }, [mapId]);
-
-  const fetchMapData = async (id: string) => {
+  const fetchMapData = useCallback(async (id: string) => {
     setIsNavigating(true);
     setLoading(true);
     
@@ -93,7 +83,17 @@ export default function MapDetailPage() {
       setLoading(false);
       setIsNavigating(false);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    if (!mapId) {
+      setError('Map ID is required');
+      setLoading(false);
+      return;
+    }
+
+    fetchMapData(mapId);
+  }, [mapId, fetchMapData]);
 
   const checkNavigationAvailability = async (currentId: string) => {
     try {

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import type { DragEvent } from 'react';
 import {
   PageContainer, Heading, Button,
@@ -80,7 +80,7 @@ export default function UploadPage() {
 
 
 
-  const handleNavigation = (to: string) => {
+  const handleNavigation = useCallback((to: string) => {
     if (uploadedImageIdRef.current) {
       if (confirm("Leave page? Your uploaded image will be deleted.")) {
         fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" })
@@ -92,17 +92,17 @@ export default function UploadPage() {
     } else {
       navigate(to);
     }
-  };
+  }, [navigate]);
 
   useEffect(() => {
-    (window as any).confirmNavigationIfNeeded = (to: string) => {
+    window.confirmNavigationIfNeeded = (to: string) => {
       handleNavigation(to);
     };
     
     return () => {
-      delete (window as any).confirmNavigationIfNeeded;
+      delete window.confirmNavigationIfNeeded;
     };
-  }, []);
+  }, [handleNavigation]);
 
   useEffect(() => {
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {

py_backend/app/main.py

@@ -2,7 +2,7 @@ import os
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse, JSONResponse
+from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
 
 from app.config import settings
 from app.routers import upload, caption, metadata, models
@@ -10,43 +10,53 @@ from app.routers.images import router as images_router
 
 app = FastAPI(title="PromptAid Vision")
 
-# CORS: allow localhost dev and all *.hf.space
+# CORS: localhost dev + *.hf.space
 app.add_middleware(
     CORSMiddleware,
     allow_origins=[
         "http://localhost:3000",
         "http://localhost:5173",
     ],
-    allow_origin_regex=r"https://.*\.hf\.space$",  # Hugging Face subdomains
-    allow_credentials=False,  # must be False if using "*" or regex
+    allow_origin_regex=r"https://.*\.hf\.space$",
+    allow_credentials=False,
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
-# ---- API routers (keep them under /api) ----
-app.include_router(caption.router,    prefix="/api",           tags=["captions"])
-app.include_router(metadata.router,   prefix="/api",           tags=["metadata"])
-app.include_router(models.router,     prefix="/api",           tags=["models"])
-app.include_router(upload.router,     prefix="/api/images",    tags=["images"])
-app.include_router(images_router,     prefix="/api/contribute", tags=["contribute"])
+# API routers
+app.include_router(caption.router,     prefix="/api",            tags=["captions"])
+app.include_router(metadata.router,    prefix="/api",            tags=["metadata"])
+app.include_router(models.router,      prefix="/api",            tags=["models"])
+app.include_router(upload.router,      prefix="/api/images",     tags=["images"])
+app.include_router(images_router,      prefix="/api/contribute", tags=["contribute"])
 
-# Simple health endpoint for HF health checks
+# Health & simple root
 @app.get("/health", include_in_schema=False, response_class=JSONResponse)
 async def health():
     return {"status": "ok"}
 
-# ---- Serve built frontend (Vite) ----
+@app.get("/", include_in_schema=False, response_class=HTMLResponse)
+def root():
+    return """<!doctype html>
+<title>PromptAid Vision</title>
+<h1>PromptAid Vision</h1>
+<p>OK</p>
+<p><a href="/app/">Open UI</a> • <a href="/docs">API Docs</a></p>"""
+
+# Serve built frontend under /app (expects files in py_backend/static)
 STATIC_DIR = os.path.join(os.path.dirname(__file__), "..", "static")
-app.mount("/", StaticFiles(directory=STATIC_DIR, html=True), name="static")
+if os.path.isdir(STATIC_DIR):
+    app.mount("/app", StaticFiles(directory=STATIC_DIR, html=True), name="static")
 
-# SPA fallback for client-side routes; don't intercept API or docs
-@app.get("/{full_path:path}", include_in_schema=False)
+# SPA fallback only for /app/* routes
+@app.get("/app/{full_path:path}", include_in_schema=False)
 def spa_fallback(full_path: str):
-    if full_path.startswith(("api", "docs", "redoc", "openapi")):
-        raise HTTPException(status_code=404, detail="Not Found")
-    return FileResponse(os.path.join(STATIC_DIR, "index.html"))
+    index = os.path.join(STATIC_DIR, "index.html")
+    if os.path.isfile(index):
+        return FileResponse(index)
+    raise HTTPException(status_code=404, detail="Not Found")
 
 print("🚀 PromptAid Vision API server ready")
-print("📊 Available endpoints: /api/images, /api/captions, /api/metadata, /api/models")
+print("📊 Endpoints: /api/images, /api/captions, /api/metadata, /api/models")
 print(f"🌍 Environment: {settings.ENVIRONMENT}")
-print("🔗 CORS enabled for localhost and *.hf.space")
+print("🔗 CORS: localhost + *.hf.space")