Reports, improvements, fixes..

README.md

@@ -18,15 +18,19 @@ Full-stack traffic analytics dashboard. YOLO + ByteTrack backend processes uploa
 
 ## Stack
 
-- **Backend**: FastAPI, Ultralytics YOLO (ONNX), ByteTrack, OpenCV
+- **Backend**: FastAPI, Ultralytics YOLO (OpenVINO), ByteTrack, OpenCV
 - **Frontend**: Vanilla HTML/JS, TailwindCSS CDN, Chart.js
 - **Infra**: Docker, CPU-only inference
 
 ## Run Locally with Docker
+save tokens in .env 
+```bash
+HF_TOKEN=hf_xxxxx...
+```
 
 ```bash
 docker build -t urbanflow .
-docker run -p 7860:7860 -e HF_TOKEN=hf_your_token_here urbanflow
+docker run -p 7860:7860 --env-file .env urbanflow
 
 ```
 

backend/engine.py

@@ -36,6 +36,7 @@ def run(model, video_path, line, config, on_frame):
     class_out = defaultdict(int)
     congestion = []
     flow_times = []
+    conf_scores = []
 
     start = time.time()
 
@@ -63,6 +64,8 @@ def run(model, video_path, line, config, on_frame):
             xyxy = r.boxes.xyxy.cpu().numpy()
 
             active = len(ids)
+            confs = r.boxes.conf.cpu().numpy().tolist()
+            conf_scores.extend(confs)
 
             for obj_id, c, box in zip(ids, cls, xyxy):
                 cx = int((box[0] + box[2]) / 2)
@@ -114,6 +117,7 @@ def run(model, video_path, line, config, on_frame):
         "class_out": dict(class_out),
         "congestion": congestion,
         "flow_times": flow_times,
+        "conf_scores": conf_scores,
         "processing_time": processing_time,
         "actual_fps": actual_fps,
         "speed_vs_realtime": speed_vs_rt,

backend/server.py

@@ -14,6 +14,7 @@ from model import load_model
 from config import get_optimal_config
 from engine import run
 from constants import MODEL_CLASSES, BUSINESS_MAP
+from visualize import generate_all
 
 app = FastAPI()
 
@@ -21,8 +22,11 @@ BASE = Path(__file__).parent.parent
 FRONTEND = BASE / "frontend"
 UPLOAD_DIR = Path(tempfile.gettempdir()) / "funky_uploads"
 UPLOAD_DIR.mkdir(exist_ok=True)
+REPORT_DIR = Path(tempfile.gettempdir()) / "funky_reports"
+REPORT_DIR.mkdir(exist_ok=True)
 
 videos = {}
+run_results = {}
 model = None
 
 
@@ -69,6 +73,24 @@ def constants():
     return {"classes": MODEL_CLASSES, "business_map": BUSINESS_MAP}
 
 
+@app.post("/reports/{video_id}")
+def generate_reports(video_id: str):
+    data = run_results.get(video_id)
+    if not data:
+        return {"error": "no results", "files": []}
+    out_dir = str(REPORT_DIR / video_id)
+    files = generate_all(data, MODEL_CLASSES, out_dir)
+    return {"files": files}
+
+
+@app.get("/reports/{video_id}/{name}")
+def get_report(video_id: str, name: str):
+    path = REPORT_DIR / video_id / name
+    if not path.exists():
+        return Response(status_code=404)
+    return FileResponse(str(path), media_type="image/png")
+
+
 @app.websocket("/ws/run")
 async def ws_run(ws: WebSocket):
     await ws.accept()
@@ -102,8 +124,10 @@ async def ws_run(ws: WebSocket):
             await asyncio.sleep(0.05)
 
         result = task.result()
+        run_results[video_id] = result
         await ws.send_text(json.dumps({
             "done": True,
+            "video_id": video_id,
             "processing_time": result["processing_time"],
             "actual_fps": result["actual_fps"],
             "speed_vs_realtime": result["speed_vs_realtime"],

backend/visualize.py

@@ -0,0 +1,177 @@
+import os
+import numpy as np
+import matplotlib
+matplotlib.use("Agg")
+import matplotlib.pyplot as plt
+from matplotlib.ticker import MaxNLocator
+
+# Formal MIS palette
+C_PRIMARY = "#1e293b"
+C_ACCENT = "#334155"
+C_IN = "#059669"
+C_OUT = "#dc2626"
+C_FLOW = "#2563eb"
+C_CONG = "#d97706"
+C_CONF = "#7c3aed"
+C_BAR = "#0f766e"
+C_GRID = "#e2e8f0"
+C_BG = "#ffffff"
+
+def _style(ax, title, xlabel="", ylabel=""):
+    ax.set_title(title, fontsize=13, fontweight="700", color=C_PRIMARY, pad=14)
+    if xlabel:
+        ax.set_xlabel(xlabel, fontsize=9, fontweight="600", color=C_ACCENT)
+    if ylabel:
+        ax.set_ylabel(ylabel, fontsize=9, fontweight="600", color=C_ACCENT)
+    ax.tick_params(labelsize=8, colors=C_ACCENT)
+    ax.spines["top"].set_visible(False)
+    ax.spines["right"].set_visible(False)
+    ax.spines["left"].set_color(C_GRID)
+    ax.spines["bottom"].set_color(C_GRID)
+    ax.yaxis.grid(True, color=C_GRID, linewidth=0.6, alpha=0.8)
+    ax.set_axisbelow(True)
+
+
+def _save(fig, path):
+    fig.savefig(path, dpi=200, bbox_inches="tight", facecolor=C_BG, edgecolor="none")
+    plt.close(fig)
+
+
+def direction_pie(total_in, total_out, out_dir):
+    if total_in + total_out == 0:
+        return None
+    fig, ax = plt.subplots(figsize=(5, 5), facecolor=C_BG)
+    wedges, texts, autotexts = ax.pie(
+        [total_in, total_out],
+        labels=[f"Incoming ({total_in})", f"Outgoing ({total_out})"],
+        autopct="%1.1f%%",
+        startangle=90,
+        colors=[C_IN, C_OUT],
+        wedgeprops={"edgecolor": C_BG, "linewidth": 2.5},
+        textprops={"fontsize": 10, "fontweight": "600", "color": C_PRIMARY},
+    )
+    for t in autotexts:
+        t.set_fontsize(11)
+        t.set_fontweight("700")
+        t.set_color(C_BG)
+    ax.set_title("Directional Split", fontsize=13, fontweight="700", color=C_PRIMARY, pad=16)
+    total = total_in + total_out
+    ax.text(0, -1.35, f"Total: {total} vehicles", ha="center", fontsize=9, color=C_ACCENT, fontweight="500")
+    path = os.path.join(out_dir, "direction_pie.png")
+    _save(fig, path)
+    return "direction_pie.png"
+
+
+def flow_histogram(flow_times, out_dir):
+    if not flow_times:
+        return None
+    fig, ax = plt.subplots(figsize=(9, 4), facecolor=C_BG)
+    bins = min(30, max(5, len(set(flow_times))))
+    counts, edges, patches = ax.hist(flow_times, bins=bins, color=C_FLOW, alpha=0.85, edgecolor=C_BG, linewidth=0.8)
+    ax.yaxis.set_major_locator(MaxNLocator(integer=True))
+    _style(ax, "Traffic Flow Over Time", "Time (seconds)", "Vehicles Crossed")
+    peak_idx = int(np.argmax(counts))
+    peak_time = (edges[peak_idx] + edges[peak_idx + 1]) / 2
+    ax.text(0.98, 0.95, f"Peak: {int(counts[peak_idx])} vehicles at {peak_time:.1f}s",
+            transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
+            bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
+    path = os.path.join(out_dir, "flow_over_time.png")
+    _save(fig, path)
+    return "flow_over_time.png"
+
+
+def congestion_chart(congestion, out_dir):
+    if not congestion:
+        return None
+    fig, ax = plt.subplots(figsize=(10, 4), facecolor=C_BG)
+    x = range(len(congestion))
+    ax.fill_between(x, congestion, alpha=0.08, color=C_CONG)
+    ax.plot(x, congestion, alpha=0.25, color=C_CONG, linewidth=0.5)
+    win = min(30, max(3, len(congestion) // 10))
+    smooth = np.convolve(congestion, np.ones(win) / win, mode="same")
+    ax.plot(x, smooth, linewidth=2, color=C_CONG)
+    ax.yaxis.set_major_locator(MaxNLocator(integer=True))
+    _style(ax, "Congestion Index", "Frame", "Active Vehicles")
+    avg = np.mean(congestion)
+    peak = max(congestion)
+    ax.axhline(avg, color=C_ACCENT, linewidth=0.8, linestyle="--", alpha=0.5)
+    ax.text(0.98, 0.95, f"Peak: {peak}  |  Avg: {avg:.1f}",
+            transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
+            bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
+    path = os.path.join(out_dir, "congestion_index.png")
+    _save(fig, path)
+    return "congestion_index.png"
+
+
+def class_dominance(class_in, class_out, model_classes, out_dir):
+    totals = {}
+    for k in set(list(class_in.keys()) + list(class_out.keys())):
+        totals[k] = class_in.get(k, 0) + class_out.get(k, 0)
+    if not totals or sum(totals.values()) == 0:
+        return None
+    sorted_items = sorted(totals.items(), key=lambda x: x[1], reverse=True)
+    classes = [model_classes.get(int(i), f"cls_{i}") for i, _ in sorted_items]
+    values = [v for _, v in sorted_items]
+
+    fig, ax = plt.subplots(figsize=(10, 4.5), facecolor=C_BG)
+    n = len(classes)
+    bar_width = min(0.45, max(0.15, 0.6 / max(n, 1)))
+    bars = ax.bar(range(n), values, width=bar_width, color=C_BAR, edgecolor=C_BG, linewidth=0.5, zorder=3)
+    ax.set_xticks(range(n))
+    ax.set_xticklabels(classes, rotation=35, ha="right", fontsize=9, fontweight="500")
+    ax.yaxis.set_major_locator(MaxNLocator(integer=True))
+    for bar, v in zip(bars, values):
+        ax.text(bar.get_x() + bar.get_width() / 2, bar.get_height() + 0.15,
+                str(v), ha="center", va="bottom", fontsize=9, fontweight="700", color=C_PRIMARY)
+    _style(ax, "Class Dominance", "", "Vehicle Count")
+    total = sum(values)
+    ax.text(0.98, 0.95, f"Total: {total} vehicles  |  {n} classes detected",
+            transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
+            bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
+    path = os.path.join(out_dir, "class_dominance.png")
+    _save(fig, path)
+    return "class_dominance.png"
+
+
+def confidence_dist(conf_scores, out_dir):
+    if not conf_scores:
+        return None
+    fig, ax = plt.subplots(figsize=(9, 4), facecolor=C_BG)
+    ax.hist(conf_scores, bins=30, color=C_CONF, alpha=0.85, edgecolor=C_BG, linewidth=0.8)
+    ax.yaxis.set_major_locator(MaxNLocator(integer=True))
+    _style(ax, "Detection Confidence Distribution", "Confidence Score", "Detections")
+    mean_c = np.mean(conf_scores)
+    median_c = np.median(conf_scores)
+    ax.axvline(mean_c, color=C_PRIMARY, linewidth=1, linestyle="--", alpha=0.6)
+    ax.text(0.98, 0.95, f"Mean: {mean_c:.3f}  |  Median: {median_c:.3f}  |  N={len(conf_scores)}",
+            transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
+            bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
+    path = os.path.join(out_dir, "confidence_dist.png")
+    _save(fig, path)
+    return "confidence_dist.png"
+
+
+def generate_all(data, model_classes, out_dir):
+    os.makedirs(out_dir, exist_ok=True)
+
+    plt.rcParams.update({
+        "font.family": "sans-serif",
+        "font.sans-serif": ["DejaVu Sans", "Arial", "Helvetica"],
+        "axes.unicode_minus": False,
+    })
+
+    total_in = sum(data["class_in"].values())
+    total_out = sum(data["class_out"].values())
+
+    files = []
+    for fn in [
+        lambda: direction_pie(total_in, total_out, out_dir),
+        lambda: flow_histogram(data.get("flow_times", []), out_dir),
+        lambda: congestion_chart(data.get("congestion", []), out_dir),
+        lambda: class_dominance(data["class_in"], data["class_out"], model_classes, out_dir),
+        lambda: confidence_dist(data.get("conf_scores", []), out_dir),
+    ]:
+        name = fn()
+        if name:
+            files.append(name)
+    return files

frontend/initial.html

@@ -106,55 +106,55 @@
             <!-- STEP: Module Select -->
             <div id="step-modules" class="w-full flex flex-col fade-in justify-center">
                 <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Select AI Module</h2>
-                <p class="text-[13px] font-medium text-slate-400 mb-6 text-center">Choose an intelligence pipeline for
+                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-6 text-center">Choose an intelligence pipeline for
                     your media
                     stream.</p>
 
                 <div class="grid grid-cols-2 gap-4">
                     <div onclick="showStep('upload')"
-                        class="group relative bg-white border-2 border-slate-900 rounded-[1.5rem] p-6 cursor-pointer hover:shadow-2xl hover:-translate-y-1 transition-all duration-300">
+                        class="group relative bg-white border-2 border-slate-900 rounded-[1.5rem] p-6 cursor-pointer hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 text-center">
                         <div
                             class="absolute top-4 right-4 bg-slate-900 text-white text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                             Active</div>
-                        <i class="fa-solid fa-car-side text-3xl text-slate-900 mb-4 block"></i>
+                        <i class="fa-solid fa-car-side text-3xl text-slate-900 mb-4 block mx-auto"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight">Traffic <br>Analytics</h3>
-                        <p class="text-[10px] text-slate-500 font-medium">Detect, track, and analyze vehicles in
+                        <p class="text-[10px] text-slate-500 font-montserrat font-medium">Detect, track, and analyze vehicles in
                             real-world environments using state-of-the-art vision models.</p>
                     </div>
                     <div
-                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed">
+                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed text-center">
                         <div
                             class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                             Coming Soon</div>
-                        <i class="fa-solid fa-layer-group text-3xl text-slate-300 mb-4 block"></i>
+                        <i class="fa-solid fa-layer-group text-3xl text-slate-300 mb-4 block mx-auto"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Semantic
                             <br>Segmentation
                         </h3>
-                        <p class="text-[10px] text-slate-400 font-medium">Pixel-perfect instance segmentation for
+                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">Pixel-perfect instance segmentation for
                             complex spatial scene understanding.</p>
                     </div>
                     <div
-                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed">
+                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed text-center">
                         <div
                             class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                             Coming Soon</div>
-                        <i class="fa-solid fa-tags text-3xl text-slate-300 mb-4 block"></i>
+                        <i class="fa-solid fa-tags text-3xl text-slate-300 mb-4 block mx-auto"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Image
                             <br>Classification
                         </h3>
-                        <p class="text-[10px] text-slate-400 font-medium">High-speed categorical labeling for vast and
+                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">High-speed categorical labeling for vast and
                             diverse image datasets.</p>
                     </div>
                     <div
-                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed">
+                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed text-center">
                         <div
                             class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                             Coming Soon</div>
-                        <i class="fa-solid fa-expand text-3xl text-slate-300 mb-4 block"></i>
+                        <i class="fa-solid fa-expand text-3xl text-slate-300 mb-4 block mx-auto"></i>
                         <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Custom
                             <br>Detection
                         </h3>
-                        <p class="text-[10px] text-slate-400 font-medium">Deploy proprietary neural networks for highly
+                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">Deploy proprietary neural networks for highly
                             specialized edge inference.</p>
                     </div>
                 </div>
@@ -168,7 +168,7 @@
                 </button>
                 <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Initialize Media Source
                 </h2>
-                <p class="text-[13px] font-medium text-slate-400 mb-8 text-center">Provide the target video footage to
+                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-8 text-center">Provide the target video footage to
                     configure the
                     Traffic Analytics pipeline.</p>
 

frontend/vehicles.html

@@ -104,11 +104,9 @@
                 class="flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer">
                 <i class="fa-solid fa-microchip w-6"></i> <span class="font-medium">Run Details</span>
             </a>
-            <a
-                class="flex items-center justify-between px-4 py-2.5 text-slate-400 bg-slate-50 rounded-lg opacity-60 cursor-not-allowed">
-                <div class="flex items-center"><i class="fa-solid fa-file-lines w-6"></i> <span
-                        class="font-medium">Reports</span></div>
-                <i class="fa-solid fa-lock text-[10px]"></i>
+            <a onclick="switchTab('reports')" id="nav-reports"
+                class="flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer">
+                <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Reports</span>
             </a>
             <a
                 class="flex items-center justify-between px-4 py-2.5 text-slate-400 bg-slate-50 rounded-lg opacity-60 cursor-not-allowed">
@@ -297,6 +295,15 @@
             </div>
         </div>
 
+        <!-- TAB: Reports -->
+        <div id="tab-reports" 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>
+            </div>
+            <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
+        </div>
+
     </main>
 
     <script>
@@ -321,17 +328,18 @@
         function switchTab(tab) {
             document.getElementById('tab-overview').classList.toggle('hidden', tab !== 'overview');
             document.getElementById('tab-run-details').classList.toggle('hidden', tab !== 'run-details');
+            document.getElementById('tab-reports').classList.toggle('hidden', tab !== 'reports');
 
             const navO = document.getElementById('nav-overview');
             const navR = document.getElementById('nav-run-details');
+            const navRp = document.getElementById('nav-reports');
 
-            if (tab === 'overview') {
-                navO.className = 'flex items-center px-4 py-2.5 bg-slate-900 text-white rounded-lg shadow-md transition cursor-pointer';
-                navR.className = 'flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer';
-            } else {
-                navR.className = 'flex items-center px-4 py-2.5 bg-slate-900 text-white rounded-lg shadow-md transition cursor-pointer';
-                navO.className = 'flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer';
-            }
+            const active = 'flex items-center px-4 py-2.5 bg-slate-900 text-white rounded-lg shadow-md transition cursor-pointer';
+            const idle = 'flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer';
+
+            navO.className = tab === 'overview' ? active : idle;
+            navR.className = tab === 'run-details' ? active : idle;
+            navRp.className = tab === 'reports' ? active : idle;
         }
 
         // =========== Run Details helpers ===========
@@ -389,7 +397,7 @@
             document.getElementById('panel-model').innerHTML =
                 `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
                     <span class="text-xs font-medium text-slate-500 mono-font">model</span>
-                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font hover:bg-blue-100 transition">Perception365/VehicleNet-Y26s <i class="fa-solid fa-arrow-up-right-from-square text-[9px] ml-1"></i></a>
+                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font hover:bg-blue-100 transition">Perception365/VehicleNet-Y26s</a>
                 </div>` +
                 detailRow('task', 'detect') +
                 detailRow('format', 'OpenVINO') +
@@ -561,6 +569,8 @@
                         detailRow('processing_time', d.processing_time + ' sec') +
                         infoRow('actual_fps', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
                         infoRow('speed_vs_realtime', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
+
+                    if (d.video_id) loadReports(d.video_id);
                     return;
                 }
 
@@ -586,6 +596,48 @@
             };
         }
 
+        const REPORT_LABELS = {
+            'direction_pie.png': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
+            'flow_over_time.png': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
+            'congestion_index.png': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
+            'class_dominance.png': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
+            'confidence_dist.png': { title: 'Confidence Distribution', desc: 'Detection confidence histogram' },
+        };
+
+        async function loadReports(videoId) {
+            const res = await fetch(`/reports/${videoId}`, { method: 'POST' });
+            const data = await res.json();
+            if (!data.files || !data.files.length) return;
+
+            document.getElementById('reports-pending').classList.add('hidden');
+            const grid = document.getElementById('reports-grid');
+            grid.classList.remove('hidden');
+            grid.innerHTML = '';
+
+            data.files.forEach(name => {
+                const info = REPORT_LABELS[name] || { title: name, desc: '' };
+                const url = `/reports/${videoId}/${name}`;
+                const card = document.createElement('div');
+                card.className = 'bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden';
+                card.innerHTML = `
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
+                        <div>
+                            <h3 class="font-bold text-slate-800 text-sm">${info.title}</h3>
+                            <p class="text-[10px] text-slate-400 mt-0.5">${info.desc}</p>
+                        </div>
+                        <a href="${url}" download="${name}"
+                           class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-900 text-white text-[10px] font-bold rounded-lg hover:bg-slate-700 transition uppercase tracking-wider">
+                            <i class="fa-solid fa-download text-[9px]"></i> Download
+                        </a>
+                    </div>
+                    <div class="p-4 flex items-center justify-center bg-slate-50/30">
+                        <img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+        }
+
         init();
     </script>
 </body>

requirements.txt

@@ -2,6 +2,7 @@ fastapi==0.104.1
 uvicorn[standard]==0.24.0
 python-multipart==0.0.6
 opencv-python-headless==4.8.1.78
+matplotlib
 ultralytics>=8.3.0
 numpy==1.24.3
 python-dotenv==1.0.0