new feat: dynamic rolling counters, theme switch, heatmap and csv for raw data

backend/engine.py

@@ -101,6 +101,8 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
     congestion = []
     flow_times = []
     conf_scores = []
+    heatmap_points = []
+    raw_events = [["frame_index", "timestamp_sec", "vehicle_id", "class_name", "direction"]]
 
     start = time.time()
 
@@ -154,6 +156,8 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
                 cx = int((box[0] + box[2]) / 2)
                 cy = int((box[1] + box[3]) / 2)
 
+                heatmap_points.append([cx, cy])
+
                 current = _side((cx, cy), a, b)
 
                 # Skip if centroid is exactly on the line (cross-product == 0)
@@ -170,8 +174,10 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
 
                             if current > 0:
                                 class_in[int(c)] += 1
+                                raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "IN"])
                             else:
                                 class_out[int(c)] += 1
+                                raw_events.append([frame_idx + 1, round(t, 2), int(obj_id), MODEL_CLASSES.get(int(c), f"cls_{int(c)}"), "OUT"])
 
                             counted_ids.add(obj_id)
 
@@ -216,6 +222,8 @@ def run(model, video_path, line, config, on_frame, save_annotated=False, annotat
         "congestion": congestion,
         "flow_times": flow_times,
         "conf_scores": conf_scores,
+        "heatmap_points": heatmap_points,
+        "raw_events": raw_events,
         "processing_time": processing_time,
         "actual_fps": actual_fps,
         "speed_vs_realtime": speed_vs_rt,

backend/server.py

@@ -177,6 +177,7 @@ async def ws_run(ws: WebSocket):
 
         result = task.result()  # re-raises any exception from the engine
         result["report_format"] = report_format
+        result["video_path"] = path
         run_results[video_id] = result
         await ws.send_text(json.dumps({
             "done": True,

backend/visualize.py

@@ -1,5 +1,7 @@
 import os
 import numpy as np
+import cv2
+import csv
 import matplotlib
 matplotlib.use("Agg")
 import matplotlib.pyplot as plt
@@ -158,6 +160,51 @@ def confidence_dist(conf_scores, out_dir, fmt="png"):
     return f"confidence_dist.{ext}"
 
 
+def export_csv(raw_events, out_dir):
+    if not raw_events or len(raw_events) <= 1:
+        return None
+    path = os.path.join(out_dir, "raw_data.csv")
+    with open(path, mode="w", newline="") as f:
+        writer = csv.writer(f)
+        writer.writerows(raw_events)
+    return "raw_data.csv"
+
+def spatial_heatmap(heatmap_points, video_path, out_dir):
+    if not heatmap_points or not video_path or not os.path.exists(video_path):
+        return None
+    
+    cap = cv2.VideoCapture(video_path)
+    ret, frame = cap.read()
+    cap.release()
+    if not ret:
+        return None
+
+    h, w = frame.shape[:2]
+    density = np.zeros((h, w), dtype=np.float32)
+    
+    for pt in heatmap_points:
+        cx, cy = int(pt[0]), int(pt[1])
+        if 0 <= cx < w and 0 <= cy < h:
+            cv2.circle(density, (cx, cy), 15, 1.0, -1)
+    
+    density = cv2.GaussianBlur(density, (75, 75), 0)
+    
+    max_val = np.max(density)
+    if max_val > 0:
+        density = (density / max_val) * 255.0
+    density = density.astype(np.uint8)
+
+    heatmap = cv2.applyColorMap(density, cv2.COLORMAP_JET)
+    mask = density > 10
+    
+    overlay = frame.copy()
+    overlay[mask] = cv2.addWeighted(frame[mask], 0.3, heatmap[mask], 0.7, 0).squeeze()
+
+    path = os.path.join(out_dir, "heatmap.png")
+    cv2.imwrite(path, overlay)
+    return "heatmap.png"
+
+
 def generate_all(data, model_classes, out_dir, report_format="png"):
     os.makedirs(out_dir, exist_ok=True)
 
@@ -172,6 +219,10 @@ def generate_all(data, model_classes, out_dir, report_format="png"):
 
     fmt = report_format
 
+    video_path = data.get("video_path")
+    heatmap_points = data.get("heatmap_points", [])
+    raw_events = data.get("raw_events", [])
+
     files = []
     for fn in [
         lambda: direction_pie(total_in, total_out, out_dir, fmt),
@@ -179,6 +230,8 @@ def generate_all(data, model_classes, out_dir, report_format="png"):
         lambda: congestion_chart(data.get("congestion", []), out_dir, fmt),
         lambda: class_dominance(data["class_in"], data["class_out"], model_classes, out_dir, fmt),
         lambda: confidence_dist(data.get("conf_scores", []), out_dir, fmt),
+        lambda: spatial_heatmap(heatmap_points, video_path, out_dir),
+        lambda: export_csv(raw_events, out_dir),
     ]:
         name = fn()
         if name:

frontend/vehicles.html

@@ -26,6 +26,37 @@
             --cocoa: #8b5e3c;
             --cocoa-l: #c89a6c;
             --cocoa-xl: #d4b08a;
+            --chart-grid: #2a2a2a;
+        }
+
+        :root[data-theme="neon"] {
+            --bg-primary: #090014;
+            --bg-secondary: #090014;
+            --text-primary: #ffffff;
+            --text-secondary: #b399ff;
+            --border-color: #3b0086;
+            --sidebar-bg: #090014;
+            --card-bg: #12002b;
+            --input-bg: #1a0040;
+            --cocoa: #ff00ff;
+            --cocoa-l: #00ffff;
+            --cocoa-xl: #00ffff;
+            --chart-grid: #2a005e;
+        }
+
+        :root[data-theme="glass"] {
+            --bg-primary: #f8fafc;
+            --bg-secondary: #f8fafc;
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --border-color: #cbd5e1;
+            --sidebar-bg: #f8fafc;
+            --card-bg: #ffffff;
+            --input-bg: #f1f5f9;
+            --cocoa: #2563eb;
+            --cocoa-l: #3b82f6;
+            --cocoa-xl: #1d4ed8;
+            --chart-grid: #e2e8f0;
         }
 
         body {
@@ -137,14 +168,14 @@
         .bg-slate-50,
         .bg-slate-900,
         .bg-neutral-900 {
-            background-color: #0c0c0c !important;
+            background-color: var(--input-bg) !important;
         }
 
         .text-slate-900,
         .text-slate-800,
         .text-slate-700,
         .text-neutral-900 {
-            color: #ffffff !important;
+            color: var(--text-primary) !important;
         }
 
         .text-slate-600,
@@ -152,7 +183,7 @@
         .text-slate-400,
         .text-neutral-500,
         .text-neutral-400 {
-            color: #888888 !important;
+            color: var(--text-secondary) !important;
         }
 
         .shadow-sm {
@@ -342,17 +373,17 @@
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-circle-info w-6"></i> <span class="font-medium">About</span>
             </a>
-            <a onclick="switchTab('overview')" id="nav-overview"
+            <a onclick="switchTab('stats')" id="nav-stats"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
+                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Stats</span>
             </a>
             <a onclick="switchTab('run-details')" id="nav-run-details"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
                 <i class="fa-solid fa-microchip w-6"></i> <span class="font-medium">Run</span>
             </a>
-            <a onclick="switchTab('reports')" id="nav-reports"
+            <a onclick="switchTab('intelligence')" id="nav-intelligence"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
-                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Reports</span>
+                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Intelligence</span>
             </a>
             <a onclick="switchTab('settings')" id="nav-settings"
                 class="flex items-center px-4 py-2.5 rounded-lg transition cursor-pointer nav-item-inactive">
@@ -635,8 +666,8 @@
 
 
 
-        <!-- TAB: Reports -->
-        <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
+        <!-- TAB: Intelligence -->
+        <div id="tab-intelligence" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending" class="flex flex-col items-center justify-center h-full">
                 <i class="fa-solid fa-hourglass-half text-4xl text-slate-300 mb-4"></i>
                 <p class="text-sm font-medium text-slate-400">Reports will be available after processing completes.</p>
@@ -647,6 +678,23 @@
         <!-- TAB: Settings -->
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div class="grid grid-cols-3 gap-6 w-full">
+                <!-- Output Format & Themes -->
+                <div class="col-span-1 flex flex-col gap-6">
+                    <!-- Themes Card -->
+                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+                            <h3 class="font-bold text-slate-800 text-sm">Dashboard Theme</h3>
+                            <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">Select aesthetic</p>
+                        </div>
+                        <div class="p-6">
+                            <select id="theme-selector" class="custom-select w-full" onchange="setTheme(this.value)">
+                                <option value="cocoa" selected>Cocoa & Slate (Classic)</option>
+                                <option value="neon">Neon Cyberpunk</option>
+                                <option value="glass">Arctic Glass (Light)</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
 
                 <!-- Processing Parameters -->
                 <div class="col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
@@ -741,39 +789,7 @@
                     </div>
                 </div>
 
-                <!-- Display Preferences -->
-                <div
-                    class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
-                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
-                        <h3 class="font-bold text-slate-800 text-sm">Display Preferences</h3>
-                    </div>
-                    <div class="px-5 py-4 flex-1 flex flex-col">
-                        <div class="s-row">
-                            <div>
-                                <div class="text-xs font-semibold text-slate-700">Chart Color Palette</div>
-                                <div class="text-[10px] text-slate-400">Color scheme for all charts</div>
-                            </div>
-                            <select class="custom-select" id="live-palette-select" onchange="applyPalette(this.value)">
-                                <option value="default">Default</option>
-                                <option value="vibrant">Vibrant</option>
-                                <option value="corporate">Corporate</option>
-                            </select>
-                        </div>
-                        <div class="s-row hidden">
-                            <div>
-                                <div class="text-xs font-semibold text-slate-700">Interface Mode</div>
-                                <div class="text-[10px] text-slate-400">Locked to Professional Dark</div>
-                            </div>
-                            <div class="text-xs font-bold text-white px-3 py-1 bg-slate-800 rounded-full">Dark Mode Only
-                            </div>
-                        </div>
-                        <div class="mt-3">
-                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Palette
-                                Preview</div>
-                            <div class="flex gap-1.5" id="live-palette-preview"></div>
-                        </div>
-                    </div>
-                </div>
+
 
                 <!-- Start Button -->
                 <div class="col-span-3 pb-4" id="settings-start-wrap">
@@ -800,6 +816,34 @@
 
     <script>
         // =========== Theme Management ===========
+        function setTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            if (window.pieChart) window.pieChart.update();
+            if (window.domChart) window.domChart.update();
+            if (window.flowChart) window.flowChart.update();
+            if (window.congChart) window.congChart.update();
+            if (window.confChart) window.confChart.update();
+        }
+
+        // =========== Rolling Counter ===========
+        function animateValue(obj, start, end, duration) {
+            let startTimestamp = null;
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                // easeOutQuad
+                const ease = progress * (2 - progress);
+                const current = Math.floor(ease * (end - start) + start);
+                obj.innerText = typeof end === 'string' && end.includes('%') ? current + '%' : current;
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                } else {
+                    obj.innerText = end;
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+
         // =========== Tooltip ===========
         // Position and toggle tooltip visibility
         document.addEventListener('mouseover', e => {
@@ -1404,11 +1448,17 @@
                 const pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
                 document.getElementById('proc-bar').style.width = pct + '%';
                 document.getElementById('proc-frames').innerText = `${d.frame_index} / ${d.total_iters} Frames`;
-                document.getElementById('proc-pct').innerText = pct + '%';
+                
+                const procPctEl = document.getElementById('proc-pct');
+                const currPct = parseFloat(procPctEl.innerText) || 0;
+                animateValue(procPctEl, currPct, pct + '%', 300);
 
                 const totalIn = sumValues(d.class_in);
                 const totalOut = sumValues(d.class_out);
-                document.getElementById('cnt-total').innerText = totalIn + totalOut;
+                
+                const cntTotalEl = document.getElementById('cnt-total');
+                const currTotal = parseInt(cntTotalEl.innerText) || 0;
+                animateValue(cntTotalEl, currTotal, totalIn + totalOut, 300);
 
                 // Update doughnut
                 doughChart.data.datasets[0].data = [totalIn, totalOut];
@@ -1434,9 +1484,11 @@
             'congestion_index.pdf': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
             'class_dominance.png': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
             'class_dominance.pdf': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
-            'confidence_dist.png': { title: 'Confidence Distribution', desc: 'Detection confidence histogram' },
-            'confidence_dist.pdf': { title: 'Confidence Distribution', desc: 'Detection confidence histogram' },
-            'annotated.mp4': { title: 'Annotated Video', desc: 'Video with custom diagnostic overlays (Boxes, Names, IDs, etc.)' },
+            'confidence_dist.png': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
+            'confidence_dist.pdf': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
+            'annotated.mp4': { title: 'Annotated Video Export', desc: 'Rendered video with tracking overlays' },
+            'heatmap.png': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
+            'raw_data.csv': { title: 'Raw Analytics Export', desc: 'Comma-separated values of all crossings' }
         };
 
         async function loadReports(videoId) {