Update frontend/src/pages/Dashboard.jsx

frontend/src/pages/Dashboard.jsx

@@ -41,9 +41,9 @@ const REFRESH_MS      = Number(import.meta.env.VITE_DASH_REFRESH_MS || 1000);
 const SMOOTH_WINDOW   = 3; // rolling average over last N frames
 
 // ── Demo mode constants (PRESENTATION SAFETY — DO NOT CHANGE) ──────────
-const DEMO_FRAME_COUNT  = 17;   // hard limit: only frames 0–16 are valid
-const DEMO_MAX_INDEX    = 16;   // = DEMO_FRAME_COUNT - 1
-const DEMO_INTERVAL_MS  = 1500; // auto-play speed (ms per frame)
+const DEMO_FRAME_COUNT  = 691;  // hard limit: frames 0–690 are valid
+const DEMO_MAX_INDEX    = 690;  // = DEMO_FRAME_COUNT - 1
+const DEMO_INTERVAL_MS  = 100;  // auto-play speed (ms per frame)
 
 // ── Unique-ID window constant ────────────────────────────────────────────
 const ID_WINDOW_SIZE = 6;   // frames per unique-ID window (real YOLO track_ids)
@@ -148,7 +148,7 @@ function RiskGauge({ riskScore = 0, densityPct = 0 }) {
   const strokeOff  = strokeLen - (strokeLen * percentage) / 100;
 
   // Derive level purely from score thresholds
-  const levelKey = clamped >= 0.65 ? 'HIGH' : clamped >= 0.35 ? 'MEDIUM' : 'LOW';
+  const levelKey = clamped > 0.80 ? 'HIGH' : clamped > 0.20 ? 'MEDIUM' : 'LOW';
   const meta     = RISK_LEVEL_META[levelKey];
 
   return (
@@ -603,23 +603,26 @@ function Dashboard() {
   // ── Derived values ────────────────────────────────────────────────
   // risk_score → level (used for "مستوى المخاطر" KPI + RiskGauge)
   const riskScore    = Number(state.risk_score || 0);
-  const riskLevelKey = riskScore >= 0.65 ? 'HIGH' : riskScore >= 0.35 ? 'MEDIUM' : 'LOW';
+  const riskLevelKey = state.risk_level || (riskScore > 0.80 ? 'HIGH' : riskScore > 0.20 ? 'MEDIUM' : 'LOW');
   const kpiRiskMeta  = RISK_LEVEL_META[riskLevelKey] ?? RISK_LEVEL_META['LOW'];
 
   // Density % — computed by backend (density_pct = peak_ema / 50 * 100)
   const densityPct = Math.round(state.density_pct ?? 0);
 
-  // Current demo frame (clamped strictly to 0–16)
-  const safeIndex    = Math.min(Math.max(demoIndex, 0), DEMO_MAX_INDEX);
-  const currentFrame = frameBuffer[safeIndex] ?? null;
+  // Current frame progress from backend
+  const backendFrame = state.frame_id ?? 0;
+  const safeIndex    = Math.min(Math.max(backendFrame, 0), DEMO_MAX_INDEX);
 
-  // The frame image to display — always from demo buffer, never live stream
+  // Display the latest frame from buffer (last element = most recent)
+  const currentFrame = frameBuffer.length > 0 ? frameBuffer[frameBuffer.length - 1] : null;
+
+  // The frame image to display — always the latest annotated frame
   const displayedSrc = currentFrame
     ? `data:image/jpeg;base64,${currentFrame.annotated}`
-    : null;
+    : (state.annotated ? `data:image/jpeg;base64,${state.annotated}` : null);
 
   // Per-frame person count (for the KPI card "عدد الأشخاص")
-  const demoPersonCount = currentFrame?.person_count ?? 0;
+  const demoPersonCount = currentFrame?.person_count ?? (state.person_count ?? 0);
 
   const computedActions = useMemo(() => state.proposed_actions || [], [state.proposed_actions]);
 
@@ -911,38 +914,25 @@ function Dashboard() {
             )}
           </div>
 
-          {/* ── Frame scrubber — demo mode, locked 0–16 ── */}
+          {/* ── Frame progress bar ── */}
           <div
             className="shrink-0 px-3 py-2 flex flex-col gap-1"
             style={{ backgroundColor: COLORS.navDark, borderTop: `1px solid ${COLORS.borderMint}` }}
           >
-            {frameBuffer.length > 0 ? (
-              <>
-                {/* Nav buttons + slider */}
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => { setDemoPaused(true); setDemoIndex((i) => Math.max(i - 1, 0)); }}
-                    className="text-[11px] px-2 py-0.5 rounded border font-bold shrink-0"
-                    style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}
-                  >→</button>
-                  <input
-                    type="range"
-                    min={0}
-                    max={DEMO_MAX_INDEX}
-                    step={1}
-                    value={safeIndex}
-                    onChange={(e) => { setDemoPaused(true); setDemoIndex(Number(e.target.value)); }}
-                    className="flex-1 cursor-pointer"
-                    style={{ accentColor: COLORS.mint }}
-                  />
-                  <button
-                    onClick={() => { setDemoPaused(true); setDemoIndex((i) => Math.min(i + 1, DEMO_MAX_INDEX)); }}
-                    className="text-[11px] px-2 py-0.5 rounded border font-bold shrink-0"
-                    style={{ borderColor: COLORS.borderMint, color: COLORS.textMuted }}
-                  >←</button>
-                </div>
-              </>
-            ) : null}
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] shrink-0" style={{ color: COLORS.textMuted }}>
+                {backendFrame} / {DEMO_FRAME_COUNT}
+              </span>
+              <div className="flex-1 h-2 rounded-full overflow-hidden" style={{ backgroundColor: `${COLORS.borderMint}44` }}>
+                <div
+                  className="h-full rounded-full transition-all duration-300"
+                  style={{
+                    width: `${Math.min((backendFrame / DEMO_FRAME_COUNT) * 100, 100)}%`,
+                    backgroundColor: COLORS.mint,
+                  }}
+                />
+              </div>
+            </div>
           </div>
         </main>
 
@@ -1024,4 +1014,4 @@ function Dashboard() {
   );
 }
 
-export default Dashboard;
+export default Dashboard;