png xet enabled

.gitattributes

@@ -1,5 +1,6 @@
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
+*.png filter=xet diff=xet merge=xet -text
 *.bin filter=lfs diff=lfs merge=lfs -text
 *.bz2 filter=lfs diff=lfs merge=lfs -text
 *.ckpt filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1 @@
+.env

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    libgl1 \
+    libglib2.0-0 \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+COPY .env .env
+
+EXPOSE 7860
+
+CMD ["python", "backend/server.py"]

README.md

@@ -10,4 +10,39 @@ short_description: Monitoring Made Easy
 thumbnail: >-
   https://cdn-uploads.huggingface.co/production/uploads/66c6048d0bf40704e4159a23/2EUWmy9YzOM4eHft6E04y.png
 ---
-Monitoring made Easy with Computer Vision
+
+# UrbanFlow 🚛
+Monitoring made Easy with Computer Vision
+
+Full-stack traffic analytics dashboard. YOLO + ByteTrack backend processes uploaded videos, counts vehicles crossing a user-drawn line, and streams results to the browser in real time via WebSocket.
+
+## Stack
+
+- **Backend**: FastAPI, Ultralytics YOLO (ONNX), ByteTrack, OpenCV
+- **Frontend**: Vanilla HTML/JS, TailwindCSS CDN, Chart.js
+- **Infra**: Docker, CPU-only inference
+
+## Run with Docker
+
+```bash
+docker build -t funky .
+docker run -p 7860:7860 funky
+```
+
+Open `http://localhost:7860`
+
+## Run Locally
+
+```bash
+pip install -r requirements.txt
+python backend/server.py
+```
+
+## Flow
+
+1. Select Traffic Analytics module
+2. Upload video file
+3. System auto-calculates optimal inference settings (adjustable)
+4. Draw counting line on first frame
+5. Engine processes frames, dashboard updates in real time
+6. View run details and live analytics

backend/config.py

@@ -0,0 +1,74 @@
+import cv2
+import multiprocessing as mp
+
+BASE_IMG_SIZE = 640
+REF_PIXELS = 640 * 640
+REF_FPS_CPU = 13.0
+TRACK_STABILITY_STRIDE = 3
+
+
+def _cpu_score():
+    return mp.cpu_count()
+
+
+def _video_meta(path):
+    cap = cv2.VideoCapture(path)
+    fps = cap.get(cv2.CAP_PROP_FPS)
+    frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    cap.release()
+
+    duration = frames / fps if fps else 0
+    pixels = w * h
+    return fps, frames, duration, w, h, pixels
+
+
+def _estimate_fps(imgsz, cpu_score):
+    scale = (imgsz * imgsz) / REF_PIXELS
+    return (REF_FPS_CPU * cpu_score / 12) / scale
+
+
+def _select_imgsz(pixels):
+    if pixels >= 3840 * 2160:
+        return 640
+    if pixels >= 2560 * 1440:
+        return 704
+    if pixels >= 1920 * 1080:
+        return 736
+    if pixels >= 1280 * 720:
+        return 800
+    return 960
+
+
+def _select_stride(video_fps, model_fps):
+    if model_fps >= video_fps:
+        return 1
+    ratio = video_fps / model_fps
+    stride = int(round(ratio))
+    return max(1, min(stride, TRACK_STABILITY_STRIDE))
+
+
+def get_optimal_config(video_path):
+    fps, frames, duration, w, h, pixels = _video_meta(video_path)
+    cpu_score = _cpu_score()
+
+    imgsz = _select_imgsz(pixels)
+    model_fps = _estimate_fps(imgsz, cpu_score)
+    detect_stride = _select_stride(fps, model_fps)
+    effective_fps = model_fps / detect_stride
+    realtime_possible = effective_fps >= fps
+
+    return {
+        "video_fps": fps,
+        "frames": frames,
+        "duration": round(duration, 2),
+        "resolution": [w, h],
+        "pixels": pixels,
+        "cpu_score": cpu_score,
+        "imgsz": imgsz,
+        "detect_stride": detect_stride,
+        "model_fps_est": round(model_fps, 2),
+        "effective_fps_est": round(effective_fps, 2),
+        "realtime_possible": realtime_possible
+    }

backend/constants.py

@@ -0,0 +1,14 @@
+MODEL_CLASSES = {
+    0: "Hatchback", 1: "Sedan", 2: "SUV", 3: "MUV", 4: "Bus", 5: "Truck",
+    6: "Three-wheeler", 7: "Two-wheeler", 8: "LCV", 9: "Mini-bus",
+    10: "Tempo-traveller", 11: "Bicycle", 12: "Van", 13: "Others"
+}
+
+BUSINESS_MAP = {
+    "Cars": [0, 1, 2, 3, 12],
+    "Buses": [4, 9, 10],
+    "Two-wheelers": [7, 11],
+    "Three-wheelers": [6],
+    "Trucks": [5, 8],
+    "Others": [13]
+}

backend/engine.py

@@ -0,0 +1,120 @@
+import time
+import numpy as np
+import cv2
+from collections import defaultdict
+
+
+def _side(p, a, b):
+    return np.sign((b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]))
+
+
+def _point_to_segment_dist(px, py, ax, ay, bx, by):
+    A = np.array([ax, ay], dtype=float)
+    B = np.array([bx, by], dtype=float)
+    P = np.array([px, py], dtype=float)
+    AB = B - A
+    t = np.clip(np.dot(P - A, AB) / np.dot(AB, AB), 0, 1)
+    return np.linalg.norm(P - (A + t * AB))
+
+
+def run(model, video_path, line, config, on_frame):
+    """
+    Runs YOLO tracking on video. Calls on_frame(update_dict) after each processed frame.
+    line: [[x1,y1], [x2,y2]]
+    """
+    cap = cv2.VideoCapture(video_path)
+    fps = cap.get(cv2.CAP_PROP_FPS)
+    total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    cap.release()
+
+    stride = config["detect_stride"]
+    total_iters = total // stride
+
+    prev_side = {}
+    counted_ids = set()
+    class_in = defaultdict(int)
+    class_out = defaultdict(int)
+    congestion = []
+    flow_times = []
+
+    start = time.time()
+
+    results = model.track(
+        source=video_path,
+        tracker="bytetrack.yaml",
+        imgsz=config["imgsz"],
+        conf=config.get("conf", 0.12),
+        iou=config.get("iou", 0.6),
+        vid_stride=stride,
+        stream=True,
+        verbose=False,
+        persist=True
+    )
+
+    a = line[0]
+    b = line[1]
+
+    for frame_idx, r in enumerate(results):
+        active = 0
+
+        if r.boxes.id is not None:
+            ids = r.boxes.id.cpu().numpy()
+            cls = r.boxes.cls.cpu().numpy()
+            xyxy = r.boxes.xyxy.cpu().numpy()
+
+            active = len(ids)
+
+            for obj_id, c, box in zip(ids, cls, xyxy):
+                cx = int((box[0] + box[2]) / 2)
+                cy = int((box[1] + box[3]) / 2)
+
+                current = _side((cx, cy), a, b)
+
+                if obj_id in prev_side and obj_id not in counted_ids:
+                    if prev_side[obj_id] != current:
+                        dist = _point_to_segment_dist(cx, cy, a[0], a[1], b[0], b[1])
+                        if dist < 12:
+                            t = frame_idx * stride / fps
+                            flow_times.append(round(t, 2))
+
+                            if current > 0:
+                                class_in[int(c)] += 1
+                            else:
+                                class_out[int(c)] += 1
+
+                            counted_ids.add(obj_id)
+
+                prev_side[obj_id] = current
+
+        congestion.append(active)
+
+        elapsed = time.time() - start
+
+        update = {
+            "frame_index": frame_idx + 1,
+            "total_iters": total_iters,
+            "total_frames": total,
+            "active": active,
+            "congestion": congestion.copy(),
+            "class_in": {str(k): v for k, v in class_in.items()},
+            "class_out": {str(k): v for k, v in class_out.items()},
+            "flow_times": flow_times.copy(),
+            "elapsed": round(elapsed, 2),
+            "fps": round((frame_idx + 1) / elapsed, 2) if elapsed > 0 else 0,
+        }
+
+        on_frame(update)
+
+    processing_time = round(time.time() - start, 2)
+    actual_fps = round(config["frames"] / processing_time, 2) if processing_time > 0 else 0
+    speed_vs_rt = round(actual_fps / fps, 2) if fps > 0 else 0
+
+    return {
+        "class_in": dict(class_in),
+        "class_out": dict(class_out),
+        "congestion": congestion,
+        "flow_times": flow_times,
+        "processing_time": processing_time,
+        "actual_fps": actual_fps,
+        "speed_vs_realtime": speed_vs_rt,
+    }

backend/model.py

@@ -0,0 +1,33 @@
+import os
+from pathlib import Path
+from dotenv import load_dotenv
+from ultralytics import YOLO
+
+load_dotenv()
+
+MODEL_DIR = Path(__file__).parent / "weights"
+PT_PATH = MODEL_DIR / "best.pt"
+ONNX_PATH = MODEL_DIR / "best.onnx"
+
+
+def ensure_onnx():
+    MODEL_DIR.mkdir(exist_ok=True)
+
+    if not PT_PATH.exists():
+        token = os.getenv("HF_TOKEN")
+        os.system(
+            f'curl -L -H "Authorization: Bearer {token}" '
+            f'-o {PT_PATH} '
+            f'https://huggingface.co/Perception365/VehicleNet-Y26s/resolve/main/weights/best.pt'
+        )
+
+    if not ONNX_PATH.exists():
+        YOLO(str(PT_PATH)).export(format="onnx", dynamic=True)
+        exported = PT_PATH.with_suffix(".onnx")
+        if exported != ONNX_PATH:
+            exported.rename(ONNX_PATH)
+
+
+def load_model():
+    ensure_onnx()
+    return YOLO(str(ONNX_PATH), task="detect")

backend/server.py

@@ -0,0 +1,120 @@
+import os
+import json
+import uuid
+import asyncio
+import tempfile
+from pathlib import Path
+
+import cv2
+from fastapi import FastAPI, WebSocket, UploadFile, File
+from fastapi.responses import FileResponse, Response
+from fastapi.staticfiles import StaticFiles
+
+from model import load_model
+from config import get_optimal_config
+from engine import run
+from constants import MODEL_CLASSES, BUSINESS_MAP
+
+app = FastAPI()
+
+BASE = Path(__file__).parent.parent
+FRONTEND = BASE / "frontend"
+UPLOAD_DIR = Path(tempfile.gettempdir()) / "funky_uploads"
+UPLOAD_DIR.mkdir(exist_ok=True)
+
+videos = {}
+model = None
+
+
+@app.on_event("startup")
+def startup():
+    global model
+    model = load_model()
+
+
+@app.get("/")
+def index():
+    return FileResponse(FRONTEND / "initial.html")
+
+
+@app.post("/upload")
+async def upload(file: UploadFile = File(...)):
+    video_id = str(uuid.uuid4())[:8]
+    path = UPLOAD_DIR / f"{video_id}.mp4"
+    with open(path, "wb") as f:
+        f.write(await file.read())
+    videos[video_id] = str(path)
+    return {"video_id": video_id}
+
+
+@app.get("/config/{video_id}")
+def config_endpoint(video_id: str):
+    path = videos.get(video_id)
+    cfg = get_optimal_config(path)
+    return cfg
+
+
+@app.get("/first-frame/{video_id}")
+def first_frame(video_id: str):
+    path = videos.get(video_id)
+    cap = cv2.VideoCapture(path)
+    ret, frame = cap.read()
+    cap.release()
+    _, buf = cv2.imencode(".jpg", frame)
+    return Response(content=buf.tobytes(), media_type="image/jpeg")
+
+
+@app.get("/constants")
+def constants():
+    return {"classes": MODEL_CLASSES, "business_map": BUSINESS_MAP}
+
+
+@app.websocket("/ws/run")
+async def ws_run(ws: WebSocket):
+    await ws.accept()
+    data = json.loads(await ws.receive_text())
+
+    video_id = data["video_id"]
+    line = data["line"]
+    cfg = data["config"]
+
+    path = videos.get(video_id)
+
+    loop = asyncio.get_event_loop()
+
+    queue = asyncio.Queue()
+
+    def on_frame(update):
+        loop.call_soon_threadsafe(queue.put_nowait, update)
+
+    task = loop.run_in_executor(None, run, model, path, line, cfg, on_frame)
+
+    try:
+        while True:
+            done = task.done()
+            while not queue.empty():
+                update = queue.get_nowait()
+                await ws.send_text(json.dumps(update))
+
+            if done:
+                break
+
+            await asyncio.sleep(0.05)
+
+        result = task.result()
+        await ws.send_text(json.dumps({
+            "done": True,
+            "processing_time": result["processing_time"],
+            "actual_fps": result["actual_fps"],
+            "speed_vs_realtime": result["speed_vs_realtime"],
+        }))
+        await ws.close()
+    except Exception:
+        pass
+
+
+app.mount("/", StaticFiles(directory=str(FRONTEND)), name="frontend")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

frontend/initial.html

@@ -0,0 +1,447 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UrbanFlow - Enterprise Setup</title>
+    <link rel="icon" type="image/svg+xml" href="uf.svg">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .font-montserrat {
+            font-family: 'Montserrat', sans-serif;
+        }
+
+        .mono-font {
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .fade-in {
+            animation: fadeIn 0.4s ease-in-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .bg-glow {
+            position: absolute;
+            width: 600px;
+            height: 600px;
+            background: radial-gradient(circle, rgba(241, 245, 249, 1) 0%, rgba(255, 255, 255, 0) 70%);
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            z-index: -1;
+            pointer-events: none;
+        }
+    </style>
+</head>
+
+<body
+    class="bg-white text-slate-900 min-h-screen w-full overflow-x-hidden flex flex-col items-center selection:bg-black selection:text-white relative z-0">
+
+    <div class="bg-glow"></div>
+
+    <header class="mt-8 flex flex-col items-center flex-shrink-0 w-full z-10">
+        <img src="uf_logo.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
+        <div class="flex items-center space-x-3">
+            <span class="w-12 h-[1px] bg-slate-200"></span>
+            <p class="font-montserrat font-bold tracking-[0.25em] uppercase text-[10px] text-slate-400 text-center">
+                Enterprise AI Pipeline
+            </p>
+            <span class="w-12 h-[1px] bg-slate-200"></span>
+        </div>
+    </header>
+
+    <main
+        class="flex-1 w-full max-w-[90rem] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 px-10 py-6 items-center z-10">
+
+        <div class="lg:col-span-7 flex flex-col justify-center xl:pl-10 pb-10 lg:pb-0">
+            <h1
+                class="text-5xl xl:text-[4.5rem] font-montserrat font-extrabold mb-4 leading-[1.1] text-slate-900 tracking-tight">
+                Automated <br>Vision Intelligence
+            </h1>
+            <p
+                class="font-montserrat font-bold mb-8 text-sm uppercase tracking-[0.2em] text-slate-400 flex items-center">
+                <span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-[10px] mr-3">v1.0 CORE</span>
+                Powered by Deep Learning Inference
+            </p>
+            <ul class="space-y-4 xl:space-y-5 text-base xl:text-lg font-montserrat font-medium text-slate-700">
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> Real-time
+                    spatial detection and tracking</li>
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> Multi-class
+                    object categorization</li>
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> Bidirectional
+                    movement analysis</li>
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> High-performance
+                    multi-object tracking</li>
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> Intelligent
+                    processing optimization</li>
+                <li class="flex items-center"><i class="fa-solid fa-check text-black mr-5 text-xl"></i> Comprehensive
+                    analytics reporting</li>
+            </ul>
+        </div>
+
+        <div
+            class="lg:col-span-5 flex flex-col justify-center w-full max-w-[32rem] mx-auto min-h-[450px] mb-12 lg:mb-0">
+
+            <!-- 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">Select AI Module</h2>
+                <p class="text-[13px] font-medium text-slate-400 mb-6">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">
+                        <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>
+                        <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
+                            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">
+                        <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>
+                        <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
+                            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">
+                        <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>
+                        <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
+                            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">
+                        <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>
+                        <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
+                            specialized edge inference.</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- STEP: Upload -->
+            <div id="step-upload" class="hidden w-full flex flex-col fade-in justify-center">
+                <button onclick="showStep('modules')"
+                    class="text-slate-400 hover:text-black transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit">
+                    <i class="fa-solid fa-arrow-left mr-2"></i> Back to Modules
+                </button>
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">Initialize Media Source</h2>
+                <p class="text-[13px] font-medium text-slate-400 mb-8">Provide the target video footage to configure the
+                    Traffic Analytics pipeline.</p>
+
+                <div id="dropzone"
+                    class="border border-dashed border-slate-300 rounded-[2rem] p-12 flex flex-col items-center justify-center cursor-pointer hover:border-black hover:bg-slate-50 transition-all duration-300 group">
+                    <i
+                        class="fa-solid fa-arrow-up-from-bracket text-4xl text-slate-300 group-hover:text-black transition mb-5"></i>
+                    <span class="font-montserrat font-semibold text-slate-800 text-lg mb-2 text-center">Select or drop
+                        media file to proceed</span>
+                    <span class="text-[10px] font-bold uppercase tracking-widest text-slate-400 text-center">Accepted
+                        formats: MP4, AVI, MOV</span>
+                    <input id="file-input" type="file" accept="video/*" class="hidden">
+                </div>
+
+                <div id="upload-progress-container" class="hidden mt-10 w-full">
+                    <div
+                        class="flex justify-between text-[11px] font-montserrat font-bold uppercase tracking-widest mb-3 text-slate-900">
+                        <span id="upload-text">Uploading...</span>
+                        <span id="upload-percentage">0%</span>
+                    </div>
+                    <div class="w-full h-1 bg-slate-100 rounded-full overflow-hidden">
+                        <div id="upload-bar"
+                            class="h-full bg-black w-0 transition-all duration-75 ease-linear rounded-full"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- STEP: Config -->
+            <div id="step-config" class="hidden w-full flex flex-col fade-in justify-center">
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">System Configuration</h2>
+                <p class="text-[11px] font-montserrat font-bold text-slate-400 mb-8 uppercase tracking-widest">
+                    Optimal values auto-configured for performance
+                </p>
+
+                <div class="space-y-4 xl:space-y-5 mb-8" id="config-fields"></div>
+
+                <button onclick="showStep('draw')"
+                    class="w-full py-3.5 bg-black text-white rounded-full font-montserrat font-semibold hover:bg-slate-800 transition-all text-base xl:text-lg flex justify-center items-center">
+                    Continue <i class="fa-solid fa-arrow-right ml-3 text-sm"></i>
+                </button>
+            </div>
+
+            <!-- STEP: Draw Line -->
+            <div id="step-draw" class="hidden w-full flex flex-col fade-in justify-center">
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900">Define Boundary</h2>
+                <p class="text-[11px] font-montserrat font-bold uppercase tracking-widest text-slate-400 mb-6">Click two
+                    points to establish counting threshold</p>
+
+                <div
+                    class="relative w-full aspect-video bg-slate-900 rounded-3xl overflow-hidden cursor-crosshair mb-6 shadow-inner">
+                    <img id="frame-img" class="absolute inset-0 w-full h-full object-contain" style="display:none;">
+                    <div id="frame-placeholder"
+                        class="absolute inset-0 flex flex-col items-center justify-center text-slate-500 pointer-events-none select-none">
+                        <i class="fa-solid fa-video text-4xl mb-3 opacity-30"></i>
+                        <span
+                            class="font-montserrat font-semibold text-[10px] uppercase tracking-widest opacity-50">Media
+                            Frame Preview</span>
+                    </div>
+                    <canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas>
+                </div>
+
+                <div class="flex space-x-3">
+                    <button onclick="resetCanvas()"
+                        class="w-1/3 py-3.5 bg-white border border-slate-200 text-slate-800 rounded-full font-montserrat font-semibold hover:border-black hover:text-black transition-all text-sm xl:text-base">
+                        Reset
+                    </button>
+                    <button id="btn-proceed" onclick="startRun()"
+                        class="w-2/3 py-3.5 bg-black text-white rounded-full font-montserrat font-semibold hover:bg-slate-800 transition-all text-center text-sm xl:text-base">
+                        Proceed
+                    </button>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <script>
+        let videoId = null;
+        let runConfig = {};
+
+        const configParams = [
+            { key: "imgsz", label: "Image Size", step: 32, min: 320, max: 1280 },
+            { key: "conf", label: "Confidence", step: 0.01, min: 0.01, max: 1.0, decimals: 2 },
+            { key: "iou", label: "IoU Threshold", step: 0.05, min: 0.1, max: 1.0, decimals: 2 },
+            { key: "detect_stride", label: "Frame Stride", step: 1, min: 1, max: 10 }
+        ];
+
+        function showStep(name) {
+            ['modules', 'upload', 'config', 'draw'].forEach(s => {
+                document.getElementById('step-' + s).classList.add('hidden');
+            });
+            document.getElementById('step-' + name).classList.remove('hidden');
+
+            if (name === 'config') renderConfig();
+            if (name === 'draw') loadFirstFrame();
+        }
+
+        // Upload
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('file-input');
+
+        dropzone.addEventListener('click', () => fileInput.click());
+        dropzone.addEventListener('dragover', e => { e.preventDefault(); dropzone.classList.add('border-black', 'bg-slate-50'); });
+        dropzone.addEventListener('dragleave', () => dropzone.classList.remove('border-black', 'bg-slate-50'));
+        dropzone.addEventListener('drop', e => {
+            e.preventDefault();
+            dropzone.classList.remove('border-black', 'bg-slate-50');
+            if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
+        });
+        fileInput.addEventListener('change', () => { if (fileInput.files.length) uploadFile(fileInput.files[0]); });
+
+        function uploadFile(file) {
+            dropzone.classList.add('hidden');
+            const prog = document.getElementById('upload-progress-container');
+            const bar = document.getElementById('upload-bar');
+            const pct = document.getElementById('upload-percentage');
+            const txt = document.getElementById('upload-text');
+            prog.classList.remove('hidden');
+
+            const form = new FormData();
+            form.append('file', file);
+
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', '/upload');
+
+            xhr.upload.onprogress = e => {
+                if (e.lengthComputable) {
+                    const p = Math.round(e.loaded / e.total * 100);
+                    bar.style.width = p + '%';
+                    pct.innerText = p + '%';
+                }
+            };
+
+            xhr.onload = () => {
+                const res = JSON.parse(xhr.responseText);
+                videoId = res.video_id;
+                txt.innerText = 'Extracting Metadata...';
+                bar.style.width = '100%';
+                pct.innerText = '100%';
+
+                fetch('/config/' + videoId)
+                    .then(r => r.json())
+                    .then(cfg => {
+                        runConfig = cfg;
+                        runConfig.conf = 0.12;
+                        runConfig.iou = 0.60;
+                        txt.innerText = 'Initialization Complete';
+                        setTimeout(() => showStep('config'), 400);
+                    });
+            };
+
+            xhr.send(form);
+        }
+
+        // Config
+        function renderConfig() {
+            const container = document.getElementById('config-fields');
+            container.innerHTML = '';
+
+            configParams.forEach(p => {
+                let val = runConfig[p.key];
+                const d = p.decimals || 0;
+
+                const row = document.createElement('div');
+                row.className = 'flex items-center justify-between border-b border-slate-100 pb-3';
+                row.innerHTML = `
+                    <span class="font-montserrat font-medium text-slate-700 text-sm xl:text-base">${p.label}</span>
+                    <div class="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-200 shadow-sm">
+                        <button class="text-slate-400 hover:text-black transition p-1" data-dir="-1" data-key="${p.key}">
+                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
+                        </button>
+                        <span class="font-mono font-bold w-12 text-center text-slate-900 text-base" id="cfg-${p.key}">${d ? val.toFixed(d) : val}</span>
+                        <button class="text-slate-400 hover:text-black transition p-1" data-dir="1" data-key="${p.key}">
+                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
+                        </button>
+                    </div>
+                `;
+                container.appendChild(row);
+            });
+
+            container.querySelectorAll('button').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const key = btn.dataset.key;
+                    const dir = parseInt(btn.dataset.dir);
+                    const param = configParams.find(p => p.key === key);
+                    let val = runConfig[key] + dir * param.step;
+                    val = Math.max(param.min, Math.min(param.max, val));
+                    val = param.decimals ? parseFloat(val.toFixed(param.decimals)) : Math.round(val);
+                    runConfig[key] = val;
+                    const d = param.decimals || 0;
+                    document.getElementById('cfg-' + key).innerText = d ? val.toFixed(d) : val;
+                });
+            });
+        }
+
+        // Draw line
+        const canvas = document.getElementById('drawing-canvas');
+        const ctx = canvas.getContext('2d');
+        let points = [];
+        let imgNatW = 0, imgNatH = 0;
+
+        function loadFirstFrame() {
+            const img = document.getElementById('frame-img');
+            img.src = '/first-frame/' + videoId;
+            img.onload = () => {
+                imgNatW = img.naturalWidth;
+                imgNatH = img.naturalHeight;
+                img.style.display = 'block';
+                document.getElementById('frame-placeholder').style.display = 'none';
+                initCanvas();
+            };
+        }
+
+        function initCanvas() {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+        }
+
+        window.addEventListener('resize', () => {
+            if (!document.getElementById('step-draw').classList.contains('hidden')) {
+                initCanvas();
+                points.forEach(p => drawDot(p.cx, p.cy));
+                if (points.length === 2) drawLine();
+            }
+        });
+
+        canvas.addEventListener('mousedown', e => {
+            if (points.length >= 2) return;
+
+            const rect = canvas.getBoundingClientRect();
+            const cx = e.clientX - rect.left;
+            const cy = e.clientY - rect.top;
+
+            const rx = cx / canvas.width * imgNatW;
+            const ry = cy / canvas.height * imgNatH;
+
+            points.push({ cx, cy, rx: Math.round(rx), ry: Math.round(ry) });
+            drawDot(cx, cy);
+            if (points.length === 2) drawLine();
+        });
+
+        function drawDot(x, y) {
+            ctx.beginPath();
+            ctx.arc(x, y, 5, 0, Math.PI * 2);
+            ctx.fillStyle = '#10b981';
+            ctx.fill();
+            ctx.strokeStyle = '#ffffff';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+
+        function drawLine() {
+            ctx.beginPath();
+            ctx.moveTo(points[0].cx, points[0].cy);
+            ctx.lineTo(points[1].cx, points[1].cy);
+            ctx.strokeStyle = '#10b981';
+            ctx.lineWidth = 3;
+            ctx.stroke();
+        }
+
+        function resetCanvas() {
+            points = [];
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+
+        function startRun() {
+            if (points.length < 2) return;
+
+            const line = [[points[0].rx, points[0].ry], [points[1].rx, points[1].ry]];
+
+            sessionStorage.setItem('funky_run', JSON.stringify({
+                video_id: videoId,
+                line: line,
+                config: runConfig
+            }));
+
+            window.location.href = 'vehicles.html';
+        }
+    </script>
+</body>
+
+</html>

frontend/run_details.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="refresh" content="0;url=vehicles.html">
+</head>
+
+</html>

frontend/vehicles.html

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UrbanFlow - Dashboard</title>
+    <link rel="icon" type="image/svg+xml" href="uf.svg">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+
+        .mono-font {
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: #f1f5f9;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+    </style>
+</head>
+
+<body class="bg-[#F3F4F8] text-slate-900 h-screen w-screen overflow-hidden flex">
+
+    <!-- Sidebar -->
+    <aside class="w-60 bg-white shadow-xl flex flex-col z-20 flex-shrink-0 border-r border-slate-200 relative">
+        <div class="h-28 bg-white flex items-center justify-center px-4 my-2 border-b border-slate-100 flex-shrink-0">
+            <img src="uf_logo.png" alt="UrbanFlow Logo" class="h-24 w-auto object-contain">
+        </div>
+        <nav class="flex-1 px-4 py-4 space-y-1.5 overflow-y-auto text-sm">
+            <a onclick="switchTab('overview')" id="nav-overview"
+                class="flex items-center px-4 py-2.5 bg-slate-900 text-white rounded-lg shadow-md transition cursor-pointer">
+                <i class="fa-solid fa-desktop w-6"></i> <span class="font-medium">Overview</span>
+            </a>
+            <a onclick="switchTab('run-details')" id="nav-run-details"
+                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>
+            <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-chart-line w-6"></i> <span
+                        class="font-medium">Analytics</span></div>
+                <i class="fa-solid fa-lock text-[10px]"></i>
+            </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-video w-6"></i> <span class="font-medium">RTSP
+                        Feed</span></div>
+                <i class="fa-solid fa-lock text-[10px]"></i>
+            </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-gear w-6"></i> <span
+                        class="font-medium">Settings</span></div>
+                <i class="fa-solid fa-lock text-[10px]"></i>
+            </a>
+        </nav>
+        <div class="mt-auto border-t border-slate-100 p-4 flex items-center justify-center bg-white flex-shrink-0">
+            <img src="uf_logo.png" alt="UrbanFlow Bottom Logo" class="h-20 w-auto object-contain opacity-80">
+        </div>
+    </aside>
+
+    <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
+
+        <!-- Progress Bar (shared) -->
+        <div
+            class="bg-white rounded-xl px-6 py-4 border border-slate-200 shadow-sm flex items-center justify-between flex-shrink-0">
+            <div class="flex items-center space-x-4 w-3/4">
+                <span class="text-[11px] font-black text-slate-900 uppercase tracking-wider"
+                    id="proc-label">Processing</span>
+                <div class="flex-1 h-1.5 bg-slate-200 rounded-full overflow-hidden relative">
+                    <div id="proc-bar" class="h-full bg-slate-900 rounded-full transition-all duration-500 ease-out"
+                        style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="flex items-center space-x-6 text-xs font-bold text-slate-900">
+                <span id="proc-frames">0 / 0 Frames</span>
+                <span id="proc-pct">0%</span>
+            </div>
+        </div>
+
+        <!-- TAB: Overview -->
+        <div id="tab-overview" class="grid grid-cols-4 gap-4 flex-1 min-h-0 grid-rows-2">
+
+            <!-- Congestion Index -->
+            <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-slate-900 text-sm">Congestion Index <span
+                            class="text-[10px] font-normal text-slate-500 ml-1">(Active Vehicles per Frame)</span></h3>
+                </div>
+                <div class="flex-1 relative w-full min-h-0">
+                    <canvas id="congestionChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Counters -->
+            <div class="col-span-1 flex flex-col gap-4">
+                <div
+                    class="bg-white rounded-xl p-4 border border-slate-200 shadow-sm flex-1 flex flex-col items-center justify-center">
+                    <div class="text-slate-500 text-[10px] font-bold uppercase tracking-wide text-center">Total Vehicles
+                    </div>
+                    <div class="flex items-center justify-center mt-1">
+                        <span class="text-3xl font-black text-slate-900" id="cnt-total">0</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-white rounded-xl p-4 border border-slate-200 shadow-sm flex-1 flex flex-col items-center justify-center">
+                    <div class="text-slate-500 text-[10px] font-bold uppercase tracking-wide text-center">Incoming
+                        (Crossed)</div>
+                    <div class="flex items-center justify-center mt-1">
+                        <span class="text-3xl font-black text-slate-900" id="cnt-in">0</span>
+                    </div>
+                </div>
+                <div
+                    class="bg-white rounded-xl p-4 border border-slate-200 shadow-sm flex-1 flex flex-col items-center justify-center">
+                    <div class="text-slate-500 text-[10px] font-bold uppercase tracking-wide text-center">Outgoing
+                        (Crossed)</div>
+                    <div class="flex items-center justify-center mt-1">
+                        <span class="text-3xl font-black text-slate-900" id="cnt-out">0</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Vehicle Classification Breakdown -->
+            <div
+                class="col-span-1 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                <div class="flex justify-between items-center mb-1">
+                    <h3 class="font-bold text-slate-900 text-sm">Vehicle Classification Breakdown</h3>
+                </div>
+                <div class="text-[10px] text-slate-400 mb-3">Detailed distribution by vehicle subclass</div>
+                <div class="flex-1 overflow-y-auto pr-3 space-y-2" id="class-breakdown"></div>
+            </div>
+
+            <!-- Class Dominance -->
+            <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-slate-900 text-sm">Class Dominance</h3>
+                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Grouped
+                        Categories</span>
+                </div>
+                <div class="flex-1 w-full relative min-h-0">
+                    <canvas id="dominanceChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Traffic Flow Over Time -->
+            <div class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-bold text-slate-900 text-sm">Traffic Flow Over Time</h3>
+                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Vehicles / Sec</span>
+                </div>
+                <div class="flex-1 w-full relative min-h-0">
+                    <canvas id="flowChart"></canvas>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- TAB: Run Details -->
+        <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <div class="grid grid-cols-2 gap-4 h-full">
+                <!-- Video Input -->
+                <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm"><i
+                                class="fa-solid fa-film mr-2 text-slate-400"></i> Video Input</h3>
+                    </div>
+                    <div class="p-5 space-y-3" id="panel-video"></div>
+                </div>
+
+                <!-- Performance -->
+                <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm"><i
+                                class="fa-solid fa-gauge-high mr-2 text-slate-400"></i> Performance</h3>
+                    </div>
+                    <div class="p-5 space-y-3" id="panel-perf"></div>
+                </div>
+
+                <!-- Model Config -->
+                <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm"><i
+                                class="fa-solid fa-cube mr-2 text-slate-400"></i> Model Config</h3>
+                    </div>
+                    <div class="p-5 space-y-3" id="panel-model"></div>
+                </div>
+
+                <!-- Inference Settings -->
+                <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm"><i
+                                class="fa-solid fa-sliders mr-2 text-slate-400"></i> Inference Settings</h3>
+                    </div>
+                    <div class="p-5 grid grid-cols-2 gap-x-8 gap-y-3" id="panel-infer"></div>
+                </div>
+
+                <!-- Processing Results -->
+                <div
+                    class="col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm"><i
+                                class="fa-solid fa-stopwatch mr-2 text-slate-400"></i> Processing Results</h3>
+                    </div>
+                    <div class="p-5 space-y-3" id="panel-proc-results">
+                        <div class="text-xs text-slate-400 italic">Waiting for processing to complete...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </main>
+
+    <script>
+        // =========== Tab switching ===========
+        function switchTab(tab) {
+            document.getElementById('tab-overview').classList.toggle('hidden', tab !== 'overview');
+            document.getElementById('tab-run-details').classList.toggle('hidden', tab !== 'run-details');
+
+            const navO = document.getElementById('nav-overview');
+            const navR = document.getElementById('nav-run-details');
+
+            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';
+            }
+        }
+
+        // =========== Run Details panel ===========
+        function detailRow(label, value, extra) {
+            extra = extra || '';
+            return `<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">${label}</span>
+                <span class="text-sm font-bold text-slate-800">${value}${extra}</span>
+            </div>`;
+        }
+
+        function boolBadge(val) {
+            if (val) return `<span class="inline-flex items-center bg-green-50 text-green-700 text-[10px] font-bold px-2 py-0.5 rounded border border-green-200"><i class="fa-solid fa-check mr-1"></i>TRUE</span>`;
+            return `<span class="text-[10px] font-bold text-slate-300">FALSE</span>`;
+        }
+
+        function populateRunDetails(c) {
+            const res = c.resolution || [0, 0];
+
+            document.getElementById('panel-video').innerHTML =
+                detailRow('video_fps', c.video_fps) +
+                detailRow('frames', c.frames) +
+                detailRow('duration', c.duration + ' sec') +
+                detailRow('resolution', res[0] + ' <span class="text-slate-400 text-xs">x</span> ' + res[1]) +
+                detailRow('pixels', (c.pixels || 0).toLocaleString());
+
+            const cpuPct = Math.min(100, Math.round((c.cpu_score / 10) * 100));
+            document.getElementById('panel-perf').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">cpu_score</span>
+                    <div class="flex items-center">
+                        <span class="text-sm font-bold text-slate-800 mr-2">${c.cpu_score}</span>
+                        <div class="w-16 h-1.5 bg-slate-100 rounded-full overflow-hidden">
+                            <div class="h-full bg-emerald-500" style="width:${cpuPct}%"></div>
+                        </div>
+                    </div>
+                </div>` +
+                detailRow('model_fps_est', c.model_fps_est, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                detailRow('effective_fps', c.effective_fps_est, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                `<div class="flex justify-between items-center pt-1">
+                    <span class="text-xs font-medium text-slate-500 mono-font">realtime_possible</span>
+                    ${boolBadge(c.realtime_possible)}
+                </div>`;
+
+            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>
+                    <span class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font">Perception365/VehicleNet-Y26s</span>
+                </div>` +
+                detailRow('task', 'detect') +
+                detailRow('tracker', 'ByteTrack');
+
+            document.getElementById('panel-infer').innerHTML =
+                detailRow('imgsz', c.imgsz) +
+                detailRow('detect_stride', c.detect_stride) +
+                detailRow('conf', c.conf || 0.12) +
+                detailRow('iou', c.iou || 0.60) +
+                `<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">stream</span>
+                    <span class="text-[10px] font-bold text-slate-400">TRUE</span>
+                </div>` +
+                `<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">verbose</span>
+                    ${boolBadge(false)}
+                </div>`;
+        }
+
+        // =========== Charts ===========
+        Chart.defaults.font.family = "'Inter', sans-serif";
+        Chart.defaults.color = '#64748b';
+
+        let MODEL_CLASSES = {};
+        let BUSINESS_MAP = {};
+
+        const congChart = new Chart(document.getElementById('congestionChart').getContext('2d'), {
+            type: 'line',
+            data: { labels: [], datasets: [{ data: [], borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.08)', fill: true, tension: 0.2, borderWidth: 1.5, pointRadius: 0 }] },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 } }, title: { display: true, text: 'Frame Index', font: { size: 11, weight: '600' }, color: '#475569' } },
+                    y: { grid: { color: '#e2e8f0' }, beginAtZero: true, ticks: { font: { size: 10 } }, title: { display: true, text: 'Active Vehicles', font: { size: 11, weight: '600' }, color: '#475569' } }
+                },
+                animation: { duration: 0 }
+            }
+        });
+
+        const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
+            type: 'bar',
+            data: { labels: [], datasets: [{ data: [], backgroundColor: '#14b8a6', borderRadius: 2 }] },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { font: { size: 10, weight: '500' } } },
+                    y: { grid: { color: '#e2e8f0' }, beginAtZero: true, ticks: { font: { size: 10 } }, title: { display: true, text: 'Total Vehicle Count', font: { size: 11, weight: '600' }, color: '#475569' } }
+                },
+                animation: { duration: 0 }
+            }
+        });
+
+        const flowChart = new Chart(document.getElementById('flowChart').getContext('2d'), {
+            type: 'bar',
+            data: { labels: [], datasets: [{ data: [], backgroundColor: '#3b82f6', borderColor: '#ffffff', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: { grid: { display: false }, ticks: { maxTicksLimit: 10, font: { size: 10 } }, title: { display: true, text: 'Time (seconds)', font: { size: 11, weight: '600' }, color: '#475569' } },
+                    y: { grid: { color: '#e2e8f0' }, beginAtZero: true, ticks: { font: { size: 10 } }, title: { display: true, text: 'Vehicles Crossed', font: { size: 11, weight: '600' }, color: '#475569' } }
+                },
+                animation: { duration: 0 }
+            }
+        });
+
+        // =========== Update functions ===========
+        function sumValues(obj) { return Object.values(obj).reduce((a, b) => a + b, 0); }
+
+        function updateBreakdown(classIn, classOut) {
+            const container = document.getElementById('class-breakdown');
+            const totalAll = sumValues(classIn) + sumValues(classOut);
+            container.innerHTML = '';
+
+            Object.keys(MODEL_CLASSES).map(Number).sort((a, b) => a - b).forEach(id => {
+                const inC = classIn[String(id)] || 0;
+                const outC = classOut[String(id)] || 0;
+                const total = inC + outC;
+                const pct = totalAll > 0 ? ((total / totalAll) * 100).toFixed(1) : '0.0';
+
+                const row = document.createElement('div');
+                row.className = 'flex items-center justify-between text-xs py-2 border-b border-slate-50';
+                row.innerHTML = `
+                    <div class="w-[30%] font-bold text-slate-800 truncate" title="${MODEL_CLASSES[id]}">${MODEL_CLASSES[id]}</div>
+                    <div class="w-[20%] text-slate-500 text-[11px]">${total} total</div>
+                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-down text-[9px] mr-1"></i>${inC}</div>
+                    <div class="w-[15%] text-slate-500 text-[11px]"><i class="fa-solid fa-arrow-up text-[9px] mr-1"></i>${outC}</div>
+                    <div class="w-[20%] text-right font-bold text-slate-900">${pct}%</div>
+                `;
+                container.appendChild(row);
+            });
+        }
+
+        function updateDominance(classIn, classOut) {
+            const labels = [], values = [];
+            for (const [group, ids] of Object.entries(BUSINESS_MAP)) {
+                let total = 0;
+                ids.forEach(id => { total += (classIn[String(id)] || 0) + (classOut[String(id)] || 0); });
+                labels.push(group);
+                values.push(total);
+            }
+            domChart.data.labels = labels;
+            domChart.data.datasets[0].data = values;
+            domChart.update();
+        }
+
+        function buildFlowHistogram(flowTimes, videoDuration) {
+            const binCount = Math.max(1, Math.ceil(videoDuration));
+            const bins = new Array(binCount).fill(0);
+            const labels = [];
+            for (let i = 0; i < binCount; i++) labels.push(i);
+            flowTimes.forEach(t => { bins[Math.min(Math.floor(t), binCount - 1)]++; });
+            flowChart.data.labels = labels;
+            flowChart.data.datasets[0].data = bins;
+            flowChart.update();
+        }
+
+        function updateCongestion(congestion, stride) {
+            const len = congestion.length;
+            if (len <= 200) {
+                congChart.data.labels = congestion.map((_, i) => i * stride);
+                congChart.data.datasets[0].data = congestion;
+            } else {
+                const step = 10;
+                const sampled = [], labels = [];
+                for (let i = 0; i < len; i += step) { labels.push(i * stride); sampled.push(congestion[i]); }
+                congChart.data.labels = labels;
+                congChart.data.datasets[0].data = sampled;
+            }
+            congChart.update();
+        }
+
+        // =========== Main ===========
+        async function init() {
+            const raw = sessionStorage.getItem('funky_run');
+            if (!raw) { window.location.href = '/'; return; }
+
+            const params = JSON.parse(raw);
+
+            const cRes = await fetch('/constants');
+            const cData = await cRes.json();
+            MODEL_CLASSES = cData.classes;
+            BUSINESS_MAP = cData.business_map;
+
+            populateRunDetails(params.config);
+
+            const videoDuration = params.config.duration || 10;
+            const stride = params.config.detect_stride || 1;
+
+            const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+            const ws = new WebSocket(`${proto}://${location.host}/ws/run`);
+
+            ws.onopen = () => {
+                ws.send(JSON.stringify({
+                    video_id: params.video_id,
+                    line: params.line,
+                    config: params.config
+                }));
+            };
+
+            let lastUIUpdate = 0;
+
+            ws.onmessage = e => {
+                const d = JSON.parse(e.data);
+
+                if (d.done) {
+                    document.getElementById('proc-label').innerText = 'Complete';
+                    document.getElementById('proc-bar').style.width = '100%';
+                    document.getElementById('proc-pct').innerText = '100%';
+
+                    document.getElementById('panel-proc-results').innerHTML =
+                        detailRow('processing_time', d.processing_time + ' sec') +
+                        detailRow('actual_fps', d.actual_fps, ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                        detailRow('speed_vs_realtime', d.speed_vs_realtime + 'x');
+                    return;
+                }
+
+                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 totalIn = sumValues(d.class_in);
+                const totalOut = sumValues(d.class_out);
+                document.getElementById('cnt-total').innerText = totalIn + totalOut;
+                document.getElementById('cnt-in').innerText = totalIn;
+                document.getElementById('cnt-out').innerText = totalOut;
+
+                const now = performance.now();
+                if (now - lastUIUpdate < 300) return;
+                lastUIUpdate = now;
+
+                updateCongestion(d.congestion, stride);
+                updateBreakdown(d.class_in, d.class_out);
+                updateDominance(d.class_in, d.class_out);
+                buildFlowHistogram(d.flow_times, videoDuration);
+            };
+        }
+
+        init();
+    </script>
+</body>
+
+</html>

requirements.txt

@@ -0,0 +1,15 @@
+fastapi==0.104.1
+uvicorn[standard]==0.24.0
+python-multipart==0.0.6
+opencv-python-headless==4.8.1.78
+ultralytics>=8.3.0
+numpy==1.24.3
+python-dotenv==1.0.0
+websockets==12.0
+onnxruntime
+onnx>=1.12.0
+onnxslim>=0.1.71
+lap>=0.5.12
+torch==2.1.0+cpu
+torchvision==0.16.0+cpu
+--extra-index-url https://download.pytorch.org/whl/cpu