fix: resolve 'Failed to fetch' by hardening API URL detection and using same-origin relative paths

backend/app_hf.py

@@ -99,6 +99,7 @@ def _run_inference(job_id: str, input_path: str, output_path: str):
 
 @app.post("/api/upload")
 async def upload_video(file: UploadFile = File(...)):
+    logger.info(f"Incoming upload request: filename='{file.filename}', content_type='{file.content_type}'")
     ext = Path(file.filename or "x.mp4").suffix.lower()
     if ext not in ALLOWED_EXTENSIONS:
         raise HTTPException(400, f"Unsupported format '{ext}'.")

frontend/src/app/page.tsx

@@ -3,7 +3,14 @@
 import { useState, useRef, useCallback, useEffect, DragEvent } from 'react'
 import { useRouter } from 'next/navigation'
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+// Determine API_BASE: if the baked-in env var is defined, use it.
+// Otherwise, in the browser, default to empty string (same-origin).
+const getApiBase = () => {
+  if (process.env.NEXT_PUBLIC_API_URL) return process.env.NEXT_PUBLIC_API_URL;
+  if (typeof window !== 'undefined') return ''; // Production same-origin
+  return 'http://localhost:8000'; // SSR fallback
+};
+const API_BASE = getApiBase();
 
 const VOC_CLASSES = [
   { name: 'aeroplane', color: '#87CEEB' }, { name: 'bicycle', color: '#FFA500' },
@@ -106,7 +113,8 @@ export default function HomePage() {
     setUploading(true); setError(null)
     try {
       const form = new FormData(); form.append('file', file)
-      const res = await fetch(`${API_BASE}/api/upload`, { method: 'POST', body: form })
+      const endpoint = API_BASE ? `${API_BASE}/api/upload` : 'api/upload'
+      const res = await fetch(endpoint, { method: 'POST', body: form })
       if (!res.ok) { const d = await res.json(); throw new Error(d.detail ?? 'Upload failed') }
       const data = await res.json()
       router.push(`/processing?id=${data.job_id}`)

frontend/src/app/processing/page.tsx

@@ -3,7 +3,13 @@
 import { useEffect, useState, useRef, Suspense } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+// Determine API_BASE: if the baked-in env var is defined, use it.
+const getApiBase = () => {
+  if (process.env.NEXT_PUBLIC_API_URL) return process.env.NEXT_PUBLIC_API_URL;
+  if (typeof window !== 'undefined') return ''; // Production same-origin
+  return 'http://localhost:8000'; // SSR fallback
+};
+const API_BASE = getApiBase();
 
 const VOC_COLORS: Record<string, string> = {
   aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
@@ -38,8 +44,10 @@ function ProcessingContent() {
     const start = Date.now()
     timerRef.current = setInterval(() => setElapsed(Math.floor((Date.now()-start)/1000)), 1000)
 
-    const wsUrl = `${API_BASE.replace('https','wss').replace('http','ws')}/ws/${jobId}`
-    const ws = new WebSocket(wsUrl)
+    const apiOrigin = API_BASE || (typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : '');
+    const wsUrl = jobId ? `${apiOrigin.replace('http','ws')}/ws/${jobId}` : '';
+    const ws = wsUrl ? new WebSocket(wsUrl) : null;
+    if (!ws) return;
 
     ws.onmessage = (evt) => {
       const data = JSON.parse(evt.data)
@@ -59,7 +67,8 @@ function ProcessingContent() {
   const pollFallback = () => {
     const iv = setInterval(async () => {
       try {
-        const d = await fetch(`${API_BASE}/api/status/${jobId}`).then(r=>r.json())
+        const endpoint = API_BASE ? `${API_BASE}/api/status/${jobId}` : `api/status/${jobId}`
+        const d = await fetch(endpoint).then(r=>r.json())
         setStatus(d.status)
         if (d.pct !== undefined) setPct(d.pct)
         if (d.detected) setDetected(d.detected)

frontend/src/app/result/page.tsx

@@ -3,7 +3,13 @@
 import { useEffect, useState, useRef, Suspense } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
+// Determine API_BASE: if the baked-in env var is defined, use it.
+const getApiBase = () => {
+  if (process.env.NEXT_PUBLIC_API_URL) return process.env.NEXT_PUBLIC_API_URL;
+  if (typeof window !== 'undefined') return ''; // Production same-origin
+  return 'http://localhost:8000'; // SSR fallback
+};
+const API_BASE = getApiBase();
 
 function ResultContent() {
   const router       = useRouter()
@@ -24,13 +30,14 @@ function ResultContent() {
     const checkStatus = async () => {
       try {
         // 1. Check API status
-        const res = await fetch(`${API_BASE}/api/status/${jobId}`)
+        const statusEndpoint = API_BASE ? `${API_BASE}/api/status/${jobId}` : `api/status/${jobId}`
+        const res = await fetch(statusEndpoint)
         if (!res.ok) throw new Error('Not found')
         const data = await res.json()
 
         if (data.status === 'done') {
           setDetected(data.detected || [])
-          const url = `${API_BASE}/api/video/${jobId}`
+          const url = API_BASE ? `${API_BASE}/api/video/${jobId}` : `api/video/${jobId}`
           
           // 2. Verify file exists with HEAD request
           const head = await fetch(url, { method: 'HEAD' })