fix: unified deployment fix with flat routing, Suspense boundaries, and forced static export

Dockerfile

@@ -12,14 +12,13 @@ FROM node:20-slim AS frontend-builder
 
 WORKDIR /build/frontend
 COPY frontend/package*.json ./
-RUN npm ci
+# use npm install (more resilient) instead of ci for this setup
+RUN npm install
 
 COPY frontend/ ./
-# Empty API URL → NEXT_PUBLIC_API_URL="" means relative /api/* calls
-# which FastAPI will handle directly (same-origin)
+# We forced output:export in next.config.js, but keeping these for clarity
 ENV NEXT_PUBLIC_API_URL=""
-# Trigger output: 'export' mode in next.config.js
-ENV BUILD_EXPORT=1
+ENV NODE_ENV=production
 RUN npm run build
 
 # ── Stage 2: Runtime (Python only, no nginx, no Node) ───────────────────────

backend/app_hf.py

@@ -197,27 +197,31 @@ if STATIC_DIR.exists():
     async def serve_spa(full_path: str):
         """
         SPA catch-all: try to serve the exact static file, then .html,
-        then fall back to index.html so client-side routing works.
+        then index.html in the folder (trailingSlash support).
         """
-        # Exact file match (images, etc.)
+        # Handle root specially
+        if not full_path or full_path == "/":
+            index = STATIC_DIR / "index.html"
+            if index.is_file(): return FileResponse(str(index))
+            return JSONResponse({"error": "frontend index.html not found"}, status_code=404)
+
+        # 1. Exact file match (images, JS, CSS)
         candidate = STATIC_DIR / full_path
         if candidate.is_file():
             return FileResponse(str(candidate))
 
-        # Next.js static export adds .html per route
+        # 2. Next.js route: try path.html (e.g., /upload -> upload.html)
         html_candidate = STATIC_DIR / f"{full_path}.html"
         if html_candidate.is_file():
             return FileResponse(str(html_candidate))
 
-        # For dynamic segments like /processing/[id], Next.js generates
-        # processing/[id].html — look for that pattern
-        parts = full_path.split("/")
-        if len(parts) == 2:
-            segment_html = STATIC_DIR / parts[0] / "[id].html"
-            if segment_html.is_file():
-                return FileResponse(str(segment_html))
+        # 3. Next.js route with trailingSlash: path/index.html
+        # (e.g., /processing/ -> processing/index.html)
+        index_candidate = STATIC_DIR / full_path / "index.html"
+        if index_candidate.is_file():
+            return FileResponse(str(index_candidate))
 
-        # Final fallback: root index.html (SPA entry)
+        # Final fallback: root index.html (client-side routing)
         index = STATIC_DIR / "index.html"
         if index.is_file():
             return FileResponse(str(index))

frontend/next.config.js

@@ -5,19 +5,14 @@ const nextConfig = {
   },
 
   // Docker/HF Spaces: static export served by FastAPI directly on :7860
-  ...(process.env.BUILD_EXPORT === '1' ? {
-    output: 'export',
-    eslint: { ignoreDuringBuilds: true },
-    typescript: { ignoreBuildErrors: true },
-    images: { unoptimized: true },
-  } : {}),
+  output: 'export',
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+  images: { unoptimized: true },
 
-  // Standalone build (not currently used but kept for reference)
-  ...(process.env.BUILD_STANDALONE === '1' ? {
-    output: 'standalone',
-    eslint: { ignoreDuringBuilds: true },
-    typescript: { ignoreBuildErrors: true },
-  } : {}),
+  // Ensure trailing slashes are consistent for static routing
+  // and Next.js generates processing/index.html instead of processing.html
+  trailingSlash: true,
 }
 
 module.exports = nextConfig

frontend/src/app/page.tsx

@@ -109,7 +109,7 @@ export default function HomePage() {
       const res = await fetch(`${API_BASE}/api/upload`, { 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/${data.job_id}`)
+      router.push(`/processing?id=${data.job_id}`)
     } catch (e: any) {
       setError(e.message ?? 'Upload failed. Is the backend running?')
       setUploading(false)

frontend/src/app/processing/[id]/client.tsx

@@ -1,223 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { useRouter, useParams } from 'next/navigation'
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
-
-const VOC_COLORS: Record<string, string> = {
-  aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
-  bottle:'#9400D3', bus:'#FF1493', car:'#DC143C', cat:'#FF8C00',
-  chair:'#8B4513', cow:'#D4A017', diningtable:'#D2691E', dog:'#BA55D3',
-  horse:'#FF69B4', motorbike:'#22c55e', person:'#FF4500',
-  'potted plant':'#228B22', sheep:'#B8A40A', sofa:'#00CED1',
-  train:'#3b82f6', 'tv/monitor':'#0D9488',
-}
-
-const STEPS = ['Queued', 'Inferring Frames', 'Encoding H.264', 'Complete']
-
-export default function ProcessingPage() {
-  const router  = useRouter()
-  const params  = useParams()
-  const jobId   = params?.id as string
-  const cardRef = useRef<HTMLDivElement>(null)
-
-  const [pct,      setPct]      = useState(0)
-  const [status,   setStatus]   = useState('queued')
-  const [detected, setDetected] = useState<string[]>([])
-  const [error,    setError]    = useState<string | null>(null)
-  const [elapsed,  setElapsed]  = useState(0)
-  const timerRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    // Animate card in
-    setTimeout(() => cardRef.current?.classList.add('scroll-visible'), 50)
-  }, [])
-
-  useEffect(() => {
-    if (!jobId) return
-    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)
-
-    ws.onmessage = (evt) => {
-      const data = JSON.parse(evt.data)
-      setStatus(data.status)
-      if (data.pct !== undefined) setPct(data.pct)
-      if (data.detected) setDetected(data.detected)
-      if (data.status === 'done') {
-        setPct(100); clearInterval(timerRef.current!)
-        setTimeout(() => router.push(`/result/${jobId}`), 1200)
-      }
-      if (data.status === 'error') { setError(data.error ?? 'Failed'); clearInterval(timerRef.current!) }
-    }
-    ws.onerror = () => pollFallback()
-    return () => { ws.close(); clearInterval(timerRef.current!) }
-  }, [jobId])
-
-  const pollFallback = () => {
-    const iv = setInterval(async () => {
-      try {
-        const d = await fetch(`${API_BASE}/api/status/${jobId}`).then(r=>r.json())
-        setStatus(d.status)
-        if (d.pct !== undefined) setPct(d.pct)
-        if (d.detected) setDetected(d.detected)
-        if (d.status === 'done') {
-          clearInterval(iv); clearInterval(timerRef.current!)
-          setTimeout(() => router.push(`/result/${jobId}`), 1200)
-        }
-        if (d.status === 'error') { setError(d.error); clearInterval(iv) }
-      } catch {}
-    }, 1200)
-  }
-
-  const fmtTime = (s: number) => `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`
-  const currentStep = status==='queued' ? 0 : status==='processing' ? 1 : status==='done' ? 3 : 2
-
-  return (
-    <div className="max-w-xl mx-auto px-5 py-20">
-      <div
-        ref={cardRef}
-        className="scroll-hidden card p-8 border border-slate-200 shadow-sm"
-        style={{ borderRadius: '20px' }}
-      >
-        {/* Head */}
-        <div className="text-center mb-8">
-          {/* Icon */}
-          <div className={`w-20 h-20 rounded-2xl mx-auto mb-5 flex items-center justify-center
-            ${status==='done'  ? 'bg-green-50 border border-green-200'
-            : status==='error' ? 'bg-red-50 border border-red-200'
-            : 'bg-orange-50 border border-orange-200'}`}>
-            {status==='done' ? (
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-            ) : status==='error' ? (
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
-                <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
-              </svg>
-            ) : (
-              <svg className="animate-spin" width="30" height="30" viewBox="0 0 24 24" fill="none" strokeWidth="2">
-                <defs>
-                  <linearGradient id="spin-g" x1="0%" y1="0%" x2="100%" y2="100%">
-                    <stop offset="0%" stopColor="#f97316"/>
-                    <stop offset="100%" stopColor="#fbbf24"/>
-                  </linearGradient>
-                </defs>
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#spin-g)"/>
-              </svg>
-            )}
-          </div>
-
-          <h1 className="text-xl font-bold text-slate-900 mb-1">
-            {status==='queued'     ? 'In Queue'
-           : status==='processing' ? 'Segmenting…'
-           : status==='done'       ? 'Complete!'
-           : status==='error'      ? 'Failed' : status}
-          </h1>
-          <p className="text-sm text-slate-400">
-            Job <code className="text-orange-500 font-mono text-xs">{jobId?.slice(0,8)}…</code>
-            {status==='processing' && <span className="ml-2 text-slate-400">· {fmtTime(elapsed)}</span>}
-          </p>
-        </div>
-
-        {/* Progress */}
-        {status !== 'error' && (
-          <div className="mb-7">
-            <div className="flex justify-between text-xs font-medium text-slate-500 mb-2">
-              <span>Progress</span>
-              <span className={pct>=100 ? 'text-green-600' : 'text-orange-500'}>{pct.toFixed(1)}%</span>
-            </div>
-            <div className="progress-track h-2">
-              <div className="progress-fill h-full" style={{ width:`${pct}%` }} />
-            </div>
-          </div>
-        )}
-
-        {/* Steps */}
-        {status !== 'error' && (
-          <div className="mb-7">
-            <div className="flex items-center gap-0">
-              {STEPS.map((s, i) => (
-                <div key={i} className="flex items-center flex-1">
-                  <div className="flex flex-col items-center gap-1">
-                    <div className={`step-dot ${i < currentStep ? 'done' : i === currentStep ? 'active' : 'pending'}`}>
-                      {i < currentStep
-                        ? <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#15803d" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
-                        : i+1}
-                    </div>
-                    <p className={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap
-                      ${i===currentStep ? 'text-orange-500' : i<currentStep ? 'text-green-600' : 'text-slate-300'}`}>
-                      {s}
-                    </p>
-                  </div>
-                  {i < STEPS.length-1 && (
-                    <div className={`h-px flex-1 mx-1 mb-4 ${i < currentStep ? 'bg-green-300' : 'bg-slate-200'}`} />
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Error */}
-        {error && (
-          <div className="p-4 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm mb-6">
-            <strong>Error:</strong> {error}
-          </div>
-        )}
-
-        {/* Stats */}
-        {status === 'processing' && (
-          <div className="grid grid-cols-3 gap-3 mb-7">
-            {[
-              { label:'Progress', val:`${pct.toFixed(0)}%`, color:'text-orange-500' },
-              { label:'Objects',  val:`${detected.length}`, color:'text-slate-800'  },
-              { label:'Elapsed',  val:fmtTime(elapsed),     color:'text-slate-800'  },
-            ].map(s => (
-              <div key={s.label} className="text-center p-4 rounded-xl bg-slate-50 border border-slate-100">
-                <p className="text-[10px] text-slate-400 uppercase tracking-widest mb-1">{s.label}</p>
-                <p className={`text-lg font-bold ${s.color}`} style={{fontVariantNumeric:'tabular-nums'}}>{s.val}</p>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Queue dots */}
-        {status === 'queued' && (
-          <div className="flex items-center gap-3 p-4 rounded-xl bg-orange-50 border border-orange-100 mb-6">
-            <div className="flex gap-1.5">
-              <span className="bounce-dot bg-orange-400" />
-              <span className="bounce-dot bg-amber-400"  />
-              <span className="bounce-dot bg-yellow-400" />
-            </div>
-            <p className="text-sm text-orange-700">Waiting for a worker to pick up this job…</p>
-          </div>
-        )}
-
-        {/* Detected classes */}
-        {detected.length > 0 && (
-          <div className="pt-4 border-t border-slate-100">
-            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">
-              Detected Objects · {detected.length}
-            </p>
-            <div className="flex flex-wrap gap-1.5">
-              {detected.map(cls => (
-                <span key={cls} className="class-pill">
-                  <span className="w-2 h-2 rounded-full" style={{ backgroundColor: VOC_COLORS[cls]??'#888' }} />
-                  {cls}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Back link */}
-        <a href="/" className="mt-8 flex items-center justify-center gap-1.5 text-xs text-slate-400 hover:text-slate-600 transition-colors">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
-          Back to upload
-        </a>
-      </div>
-    </div>
-  )
-}

frontend/src/app/processing/[id]/page.tsx

@@ -1,15 +0,0 @@
-// Server component — can export generateStaticParams (required for output: 'export')
-// The actual UI lives in client.tsx which is a 'use client' component.
-
-import ProcessingClient from './client'
-
-// Return empty array: no paths are pre-rendered at build time.
-// The static export still emits processing/[id]/index.html as a shell;
-// routing is handled client-side via app_hf.py SPA fallback.
-export function generateStaticParams() {
-  return []
-}
-
-export default function ProcessingPage() {
-  return <ProcessingClient />
-}

frontend/src/app/result/[id]/client.tsx

@@ -1,274 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { useParams } from 'next/navigation'
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:8000'
-
-const VOC_COLORS: Record<string, string> = {
-  aeroplane:'#87CEEB', bicycle:'#FFA500', bird:'#FFD700', boat:'#00BFFF',
-  bottle:'#9400D3', bus:'#FF1493', car:'#DC143C', cat:'#FF8C00',
-  chair:'#8B4513', cow:'#D4A017', diningtable:'#D2691E', dog:'#BA55D3',
-  horse:'#FF69B4', motorbike:'#22c55e', person:'#FF4500',
-  'potted plant':'#228B22', sheep:'#B8A40A', sofa:'#00CED1',
-  train:'#3b82f6', 'tv/monitor':'#0D9488',
-}
-
-function useScrollReveal(status: string) {
-  useEffect(() => {
-    if (status !== 'ready') return
-    // Small delay to ensure the DOM has fully updated
-    const timer = setTimeout(() => {
-      const targets = document.querySelectorAll('.scroll-hidden, .scroll-left, .scroll-right, .scroll-scale')
-      const obs = new IntersectionObserver(
-        entries => entries.forEach(e => {
-          if (e.isIntersecting) {
-            e.target.classList.add('scroll-visible')
-            obs.unobserve(e.target)
-          }
-        }),
-        { threshold: 0.05 }
-      )
-      targets.forEach(t => obs.observe(t))
-    }, 100)
-    return () => clearTimeout(timer)
-  }, [status])
-}
-
-export default function ResultPage() {
-  const params   = useParams()
-  const jobId    = params?.id as string
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  // 'loading' → 'ready' or 'error'
-  const [status,      setStatus]      = useState<'loading'|'ready'|'error'>('loading')
-  const [detected,    setDetected]    = useState<string[]>([])
-  const [videoReady,  setVideoReady]  = useState(false)   // video URL responded 200
-  const [isPlaying,   setIsPlaying]   = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration,    setDuration]    = useState(0)
-  const [volume,      setVolume]      = useState(1)
-  const [copied,      setCopied]      = useState(false)
-  const [retries,     setRetries]     = useState(0)
-
-  const videoUrl = `${API_BASE}/api/video/${jobId}`
-
-  useScrollReveal(status)
-
-  useEffect(() => {
-    if (!jobId) return
-
-    const fetchStatus = async () => {
-      try {
-        const res  = await fetch(`${API_BASE}/api/status/${jobId}`)
-        if (!res.ok) throw new Error()
-        const data = await res.json()
-
-        if (data.status === 'done') {
-          setDetected(data.detected ?? [])
-          setStatus('ready')
-          return
-        }
-        await probeVideo()
-      } catch {
-        await probeVideo()
-      }
-    }
-
-    const probeVideo = async () => {
-      try {
-        // Explicitly use HEAD; backend now supports this
-        const res = await fetch(videoUrl, { method: 'HEAD' })
-        if (res.ok) {
-          setStatus('ready')
-        } else if (retries < 6) {
-          setTimeout(() => setRetries(r => r + 1), 1500)
-        } else {
-          setStatus('error')
-        }
-      } catch {
-        setStatus('error')
-      }
-    }
-
-    fetchStatus()
-  }, [jobId, retries, videoUrl])
-
-  const togglePlay = () => {
-    const v = videoRef.current; if (!v) return
-    if (v.paused) { v.play(); setIsPlaying(true) }
-    else          { v.pause(); setIsPlaying(false) }
-  }
-
-  const fmtTime = (s: number) =>
-    `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`
-
-  const copyLink = async () => {
-    await navigator.clipboard.writeText(window.location.href)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  if (status === 'loading') return (
-    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
-      <div className="w-16 h-16 rounded-2xl bg-orange-50 border border-orange-200 flex items-center justify-center mx-auto mb-5">
-        <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24" fill="none" strokeWidth="2">
-          <defs>
-            <linearGradient id="sg-spin" x1="0%" y1="0%" x2="100%" y2="100%">
-              <stop offset="0%" stopColor="#f97316"/>
-              <stop offset="100%" stopColor="#fbbf24"/>
-            </linearGradient>
-          </defs>
-          <path d="M21 12a9 9 0 1 1-6.219-8.56" stroke="url(#sg-spin)"/>
-        </svg>
-      </div>
-      <p className="text-sm font-medium text-slate-600">Loading your result…</p>
-      {retries > 0 && (
-        <p className="text-xs text-slate-400 mt-2">Connecting… (Attempt {retries})</p>
-      )}
-    </div>
-  )
-
-  if (status === 'error') return (
-    <div className="max-w-4xl mx-auto px-5 py-32 text-center">
-      <div className="w-16 h-16 rounded-2xl bg-red-50 border border-red-200 flex items-center justify-center mx-auto mb-5">
-        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2">
-          <circle cx="12" cy="12" r="10"/>
-          <line x1="15" y1="9" x2="9" y2="15"/>
-          <line x1="9" y1="9" x2="15" y2="15"/>
-        </svg>
-      </div>
-      <p className="font-semibold text-slate-800 mb-1">Result not available</p>
-      <p className="text-sm text-slate-500 mb-6">The job might still be processing or the file has expired.</p>
-      <div className="flex items-center justify-center gap-3">
-        <button onClick={() => { setStatus('loading'); setRetries(0) }} className="btn-outline px-5 py-2.5 text-sm">Retry</button>
-        <a href="/" className="btn-primary px-5 py-2.5 text-sm">New Upload</a>
-      </div>
-    </div>
-  )
-
-  return (
-    <div className="bg-white max-w-5xl mx-auto px-5 py-12">
-      {/* Header — No animation for immediate layout stability */}
-      <div className="flex items-start justify-between mb-10 flex-wrap gap-4">
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-            <span className="text-xs font-bold text-green-600 uppercase tracking-widest">Segmentation Finished</span>
-          </div>
-          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Your AI Result</h1>
-          <p className="text-sm text-slate-500 mt-1">
-            Job ID: <code className="text-orange-500 font-mono">{jobId?.slice(0, 12)}</code>
-          </p>
-        </div>
-
-        <div className="flex gap-2">
-          <button onClick={copyLink} className="btn-outline px-4 py-2.5 text-sm flex items-center gap-2">
-            {copied ? 'Link Copied!' : 'Copy Result Link'}
-          </button>
-          <a href={videoUrl} download className="btn-primary px-5 py-2.5 text-sm flex items-center gap-2">
-            Download MP4
-          </a>
-        </div>
-      </div>
-
-      {/* Video Player Card */}
-      <div className="card border border-slate-200 overflow-hidden mb-8 scroll-scale">
-        <div className="flex border-b border-slate-100 bg-slate-50/50">
-          <div className="flex-1 py-3 text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest border-r border-slate-100">Original</div>
-          <div className="flex-1 py-3 text-center text-[10px] font-bold text-orange-500 uppercase tracking-widest">Segmented Overlay</div>
-        </div>
-
-        <div className="bg-black relative aspect-video">
-          <video
-            ref={videoRef}
-            src={videoUrl}
-            className="w-full h-full"
-            playsInline
-            preload="auto"
-            onTimeUpdate={() => videoRef.current && setCurrentTime(videoRef.current.currentTime)}
-            onLoadedMetadata={() => {
-              if (videoRef.current) {
-                setDuration(videoRef.current.duration)
-                setVideoReady(true)
-              }
-            }}
-            onEnded={() => setIsPlaying(false)}
-            onError={() => setTimeout(() => setRetries(r => r + 1), 2000)}
-          />
-          {!videoReady && (
-            <div className="absolute inset-0 flex items-center justify-center bg-slate-900/40 backdrop-blur-sm">
-              <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin" />
-            </div>
-          )}
-        </div>
-
-        <div className="px-6 py-5 bg-slate-50 border-t border-slate-100">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-xs text-slate-400 font-mono w-10">{fmtTime(currentTime)}</span>
-            <div className="flex-1 h-1.5 rounded-full bg-slate-200 relative group cursor-pointer">
-              <div className="h-full rounded-full bg-gradient-to-r from-orange-500 to-amber-400" style={{ width: `${(currentTime/duration)*100}%` }} />
-              <input
-                type="range" min={0} max={duration || 1} step={0.1} value={currentTime}
-                onChange={e => {
-                  const t = +e.target.value
-                  if (videoRef.current) { videoRef.current.currentTime = t; setCurrentTime(t) }
-                }}
-                className="absolute inset-0 w-full opacity-0 cursor-pointer"
-              />
-            </div>
-            <span className="text-xs text-slate-400 font-mono w-10 text-right">{fmtTime(duration)}</span>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <button onClick={togglePlay} className="w-12 h-12 rounded-2xl bg-slate-900 flex items-center justify-center hover:bg-slate-800 transition-all active:scale-95 shadow-lg">
-                {isPlaying ? <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg> : <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><polygon points="5 3 19 12 5 21 5 3"/></svg>}
-              </button>
-              <div className="flex items-center gap-2 group">
-                <div className="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
-                </div>
-                <input
-                  type="range" min={0} max={1} step={0.05} value={volume}
-                  onChange={e => {
-                    const v = +e.target.value
-                    if (videoRef.current) videoRef.current.volume = v
-                    setVolume(v)
-                  }}
-                  className="w-24 h-1.5"
-                />
-              </div>
-            </div>
-            <div className="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">H.264 High Profile · 30 FPS</div>
-          </div>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="md:col-span-2 card p-8 scroll-hidden">
-          <div className="flex items-center justify-between mb-6">
-            <h3 className="text-sm font-bold text-slate-800 uppercase tracking-widest">AI Detections</h3>
-            <span className="badge">{detected.length} Objects</span>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {detected.length > 0 ? detected.map(cls => (
-              <span key={cls} className="class-pill">
-                <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: VOC_COLORS[cls] ?? '#888' }} />
-                {cls}
-              </span>
-            )) : <span className="text-sm text-slate-400">Processing detailed labels...</span>}
-          </div>
-        </div>
-
-        <div className="card p-8 bg-slate-900 border-slate-800 text-white scroll-hidden">
-          <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4">Quick Actions</h3>
-          <div className="space-y-3">
-            <a href="/" className="flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-white/10 hover:bg-white/20 text-sm font-medium transition-all">New Segmentation</a>
-            <a href={videoUrl} download className="flex items-center justify-center gap-2 w-full py-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-sm font-bold transition-all shadow-lg shadow-orange-500/20">Save Result</a>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/app/result/[id]/page.tsx

@@ -1,15 +0,0 @@
-// Server component — can export generateStaticParams (required for output: 'export')
-// The actual UI lives in client.tsx which is a 'use client' component.
-
-import ResultClient from './client'
-
-// Return empty array: no paths are pre-rendered at build time.
-// The static export still emits result/[id]/index.html as a shell;
-// routing is handled client-side via app_hf.py SPA fallback.
-export function generateStaticParams() {
-  return []
-}
-
-export default function ResultPage() {
-  return <ResultClient />
-}