fix: split dynamic routes into server+client components for static export

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

@@ -0,0 +1,223 @@
+'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,223 +1,15 @@
-'use client'
+// Server component — can export generateStaticParams (required for output: 'export')
+// The actual UI lives in client.tsx which is a 'use client' component.
 
-import { useEffect, useState, useRef } from 'react'
-import { useRouter, useParams } from 'next/navigation'
+import ProcessingClient from './client'
 
-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',
+// 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 []
 }
 
-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>
-  )
+  return <ProcessingClient />
 }

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

@@ -0,0 +1,274 @@
+'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,274 +1,15 @@
-'use client'
+// Server component — can export generateStaticParams (required for output: 'export')
+// The actual UI lives in client.tsx which is a 'use client' component.
 
-import { useEffect, useState, useRef } from 'react'
-import { useParams } from 'next/navigation'
+import ResultClient from './client'
 
-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])
+// 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() {
-  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>
-  )
+  return <ResultClient />
 }