add file

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# System deps for OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY backend/ ./backend/
+COPY frontend/ ./frontend/
+
+WORKDIR /app/backend
+
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AIMS Senegal — Computer Vision Project 2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,222 @@
 ---
-title: Traffic Tracker
-emoji: 🐠
+title: Computer Vison | Traffic Tracker
 colorFrom: blue
-colorTo: gray
-sdk: gradio
-sdk_version: 6.13.0
-app_file: app.py
+colorTo: purple
+sdk: docker
+app_port: 7860
 pinned: false
 ---
+# TrafficSense — Road Traffic Object Counting & Tracking
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+> AIMS Senegal · Computer Vision Project 2 · April 2026
+
+A real-time computer vision system for detecting, tracking, and counting road-traffic objects across multiple video scenes. Built with **YOLOv8** + **ByteTrack**, deployed via **FastAPI**, with a live web dashboard.
+
+![License](https://img.shields.io/badge/license-MIT-blue)
+![Python](https://img.shields.io/badge/python-3.10%2B-green)
+![YOLO](https://img.shields.io/badge/model-YOLOv8-red)
+
+---
+
+## Features
+
+| Feature | Details |
+|---|---|
+| **Detection** | YOLOv8n/s/m/l via Ultralytics — supports nano to large |
+| **Tracking** | ByteTrack (built into Ultralytics) — persistent unique IDs |
+| **Classes** | person, bicycle, car, motorbike, bus, truck |
+| **Counting** | Virtual counting line — counts unique crossings + direction |
+| **Logging** | JSONL detections, JSON summary, CSV frame stats per scene |
+| **Web UI** | Upload video, select classes, view live annotated stream |
+| **Dashboard** | Compare scenes, bar charts, timeline, global stats |
+| **CLI** | Run without server for batch processing |
+| **Fine-tuning** | Script to train on custom labeled dataset |
+
+---
+
+## Project Structure
+
+```
+traffic-tracker/
+├── backend/
+│   ├── main.py           # FastAPI REST + SSE server
+│   ├── tracker.py        # YOLOv8 + ByteTrack engine
+│   ├── run_tracker.py    # CLI: process video without server
+│   ├── finetune.py       # Fine-tune on custom dataset
+│   ├── extract_frames.py # Extract frames for labeling
+│   └── requirements.txt
+├── frontend/
+│   └── index.html        # Full web interface (single file)
+├── logs/                 # Auto-created: JSONL + JSON + CSV logs
+├── uploads/              # Auto-created: uploaded videos
+├── output/               # Auto-created: annotated output videos
+└── README.md
+```
+
+---
+
+## Quick Start
+
+### 1. Install dependencies
+
+```bash
+cd backend
+pip install -r requirements.txt
+```
+
+> GPU users: `pip install torch torchvision --index-url https://download.pytorch.org/whl/cu118`
+
+### 2. Start the API server
+
+```bash
+cd backend
+uvicorn main:app --host 0.0.0.0 --port 8000 --reload
+```
+
+### 3. Open the web interface
+
+Open `frontend/index.html` in your browser, **or** visit `http://localhost:8000` (the server serves it automatically).
+
+### 4. Analyse a video
+
+1. Drop a traffic video into the upload zone
+2. Give the scene a name (e.g. `intersection_A`)
+3. Select classes to track
+4. Choose model (YOLOv8n is fastest; YOLOv8s balances speed/accuracy)
+5. Click **START ANALYSIS**
+6. Watch the annotated live stream and live counters
+
+---
+
+## CLI Usage (no server needed)
+
+```bash
+# Basic run (display window)
+python run_tracker.py --video traffic.mp4 --scene roundabout_1 --show
+
+# Save output video + logs
+python run_tracker.py --video traffic.mp4 --scene highway_cam --classes car truck bus --save
+
+# Custom confidence + model
+python run_tracker.py --video traffic.mp4 --model yolov8m.pt --conf 0.45 --show --save
+```
+
+---
+
+## API Endpoints
+
+| Method | Endpoint | Description |
+|---|---|---|
+| `POST` | `/upload` | Upload video, start processing |
+| `GET` | `/stream/{sid}` | SSE stream of annotated frames |
+| `GET` | `/status/{sid}` | Processing progress + live stats |
+| `GET` | `/summary/{sid}` | Final summary JSON |
+| `GET` | `/dashboard` | Aggregated multi-scene stats |
+| `GET` | `/logs` | List all saved log files |
+| `GET` | `/classes` | Available traffic classes |
+
+---
+
+## Log File Schema (shared data format)
+
+All groups must follow this schema for dashboard merging.
+
+### `*_detections.jsonl` — one JSON per line
+
+```json
+{
+  "frame":       1234,
+  "timestamp":   41.13,
+  "scene":       "intersection_A",
+  "track_id":    7,
+  "class":       "car",
+  "confidence":  0.872,
+  "bbox":        [120, 340, 280, 450],
+  "center":      [200, 395],
+  "crossed_line": true,
+  "direction":   "down"
+}
+```
+
+### `*_summary.json`
+
+```json
+{
+  "scene":                "intersection_A",
+  "session_id":           "abc123",
+  "processed_at":         "2026-04-25T14:30:00",
+  "total_frames":         1800,
+  "duration_sec":         60.0,
+  "fps":                  30.0,
+  "resolution":           [1920, 1080],
+  "selected_classes":     ["car", "bus", "truck", "person"],
+  "total_unique_objects": 142,
+  "count_per_class":      {"car": 98, "bus": 12, "truck": 17, "person": 15},
+  "direction_counts":     {"car": {"up": 43, "down": 55}},
+  "temporal_distribution": [
+    {"bucket_10s": 0, "detections": 34},
+    {"bucket_10s": 1, "detections": 51}
+  ]
+}
+```
+
+---
+
+## Fine-tuning on Custom Data
+
+```bash
+# 1. Extract frames from your traffic videos
+python extract_frames.py --video traffic1.mp4 --out frames/ --every 10
+
+# 2. Label with Roboflow (free) → export as YOLO format
+#    https://roboflow.com
+
+# 3. Fine-tune
+python finetune.py --data dataset.yaml --model yolov8s.pt --epochs 50 --device 0
+
+# 4. Use your fine-tuned model
+python run_tracker.py --video test.mp4 --model runs/traffic/finetune/weights/best.pt
+```
+
+---
+
+## Video Sources
+
+- [Pexels Traffic Videos](https://www.pexels.com/search/videos/traffic/) (free, no attribution required)
+- Record your own: 1 min minimum, distinct scenes (intersection, roundabout, highway, urban)
+
+---
+
+## Deliverables Checklist
+
+- [x] Detection model (YOLOv8 pre-trained)
+- [x] Fine-tuning script + instructions
+- [x] ByteTrack tracking with persistent IDs
+- [x] Virtual counting line + direction detection
+- [x] Unique object counting (not per-frame)
+- [x] Detailed detection logs (JSONL + JSON + CSV)
+- [x] Shared data schema across groups
+- [x] Web interface (upload, class selection, live display)
+- [x] Bounding boxes, labels, IDs, live counters
+- [x] "No object detected" indicator
+- [x] Multi-scene dashboard with comparisons
+- [x] GitHub-ready structure
+
+### Bonus features implemented
+- [x] Direction tracking (up/down crossing)
+- [x] Visual trail per tracked object
+- [x] Temporal traffic intensity chart
+- [x] Scene comparison table
+- [x] CSV frame statistics export
+
+---
+
+## License
+
+MIT — see [LICENSE](LICENSE)
+
+---
+
+## Authors
+
+*AIMS Senegal — Computer Vision 2026*

backend/dataset.yaml

@@ -0,0 +1,34 @@
+# dataset.yaml — YOLO training dataset configuration
+# Edit the `path` field to match your dataset directory
+# Annotate using Roboflow (https://roboflow.com) and export as YOLOv8 format
+
+path: /path/to/your/dataset    # root directory
+train: images/train            # training images (relative to path)
+val:   images/val              # validation images (relative to path)
+test:  images/test             # (optional) test images
+
+# Number of classes
+nc: 6
+
+# Class names — must match COCO traffic subset indices used in tracker.py
+names:
+  0: person
+  1: bicycle
+  2: car
+  3: motorbike
+  5: bus
+  7: truck
+
+# ── Notes ──────────────────────────────────────────────────────────────────
+# When exporting from Roboflow or Label Studio, remap your class indices
+# to match the COCO indices above (0,1,2,3,5,7) if needed.
+#
+# Recommended dataset size per scene:
+#   - ≥ 500 annotated frames
+#   - Mix of day/night, weather conditions
+#   - Multiple angles and zoom levels
+#
+# Labeling tips:
+#   - Label ALL visible objects, including partially occluded ones
+#   - Use tight bounding boxes
+#   - Consistent class names (lowercase, no spaces)

backend/extract_frames.py

@@ -0,0 +1,38 @@
+"""
+extract_frames.py — Extract frames from videos for dataset creation
+Usage:
+    python extract_frames.py --video traffic.mp4 --out frames/ --every 15
+"""
+import cv2
+import argparse
+from pathlib import Path
+
+
+def extract_frames(video_path: str, out_dir: str, every: int = 10, max_frames: int = 5000):
+    cap  = cv2.VideoCapture(video_path)
+    out  = Path(out_dir)
+    out.mkdir(parents=True, exist_ok=True)
+    n, saved = 0, 0
+
+    while True:
+        ret, frame = cap.read()
+        if not ret or saved >= max_frames:
+            break
+        if n % every == 0:
+            fp = out / f"frame_{saved:06d}.jpg"
+            cv2.imwrite(str(fp), frame)
+            saved += 1
+        n += 1
+
+    cap.release()
+    print(f"Saved {saved} frames to {out_dir}")
+
+
+if __name__ == "__main__":
+    p = argparse.ArgumentParser()
+    p.add_argument("--video",  required=True)
+    p.add_argument("--out",    default="frames")
+    p.add_argument("--every",  type=int, default=10)
+    p.add_argument("--max",    type=int, default=5000)
+    args = p.parse_args()
+    extract_frames(args.video, args.out, args.every, args.max)

backend/finetune.py

@@ -0,0 +1,87 @@
+"""
+finetune.py — Fine-tune YOLOv8 on a custom traffic dataset
+Usage:
+    python finetune.py --data dataset.yaml --model yolov8s.pt --epochs 30
+
+dataset.yaml format (create yours):
+    path: /path/to/dataset
+    train: images/train
+    val: images/val
+    nc: 6
+    names: ['person','bicycle','car','motorbike','bus','truck']
+
+You can prepare a dataset by:
+  1. Downloading Pexels traffic videos
+  2. Extracting frames with extract_frames.py
+  3. Labeling with Roboflow or Label Studio
+  4. Exporting in YOLO format
+"""
+
+import argparse
+from pathlib import Path
+from ultralytics import YOLO
+
+
+def parse_args():
+    p = argparse.ArgumentParser(description="Fine-tune YOLOv8 for traffic detection")
+    p.add_argument("--data",    type=str, default="dataset.yaml",     help="Path to dataset YAML")
+    p.add_argument("--model",   type=str, default="yolov8s.pt",       help="Base model weights")
+    p.add_argument("--epochs",  type=int, default=30,                 help="Training epochs")
+    p.add_argument("--imgsz",   type=int, default=640,                help="Image size")
+    p.add_argument("--batch",   type=int, default=16,                 help="Batch size")
+    p.add_argument("--device",  type=str, default="0",                help="Device: 0 (GPU) or cpu")
+    p.add_argument("--project", type=str, default="runs/traffic",     help="Save directory")
+    p.add_argument("--name",    type=str, default="finetune",         help="Experiment name")
+    return p.parse_args()
+
+
+def main():
+    args = parse_args()
+
+    print(f"[INFO] Loading base model: {args.model}")
+    model = YOLO(args.model)
+
+    print(f"[INFO] Starting fine-tuning on: {args.data}")
+    results = model.train(
+        data=args.data,
+        epochs=args.epochs,
+        imgsz=args.imgsz,
+        batch=args.batch,
+        device=args.device,
+        project=args.project,
+        name=args.name,
+        # Augmentation (good for traffic)
+        hsv_h=0.015,   # hue shift
+        hsv_s=0.7,     # saturation
+        hsv_v=0.4,     # brightness
+        fliplr=0.5,    # horizontal flip
+        mosaic=1.0,    # mosaic augmentation
+        mixup=0.1,     # mixup
+        # Optimizer
+        optimizer="AdamW",
+        lr0=0.001,
+        lrf=0.01,
+        momentum=0.937,
+        weight_decay=0.0005,
+        warmup_epochs=3,
+        # Early stopping
+        patience=10,
+        # Logging
+        plots=True,
+        verbose=True,
+    )
+
+    best_weights = Path(args.project) / args.name / "weights" / "best.pt"
+    print(f"\n[INFO] Training complete!")
+    print(f"[INFO] Best weights saved to: {best_weights}")
+    print(f"[INFO] Use in tracker: --model {best_weights}")
+
+    # Validate
+    print("\n[INFO] Running validation...")
+    val_results = model.val()
+    print(f"[INFO] mAP50:    {val_results.box.map50:.4f}")
+    print(f"[INFO] mAP50-95: {val_results.box.map:.4f}")
+
+
+if __name__ == "__main__":
+    main()

backend/main.py

@@ -0,0 +1,318 @@
+"""
+main.py — FastAPI backend for Traffic Monitoring System
+Endpoints:
+  POST /upload        → upload video, start processing
+  GET  /stream/{sid}  → SSE stream of annotated frames (base64 JPEG)
+  GET  /status/{sid}  → processing status + live stats
+  GET  /summary/{sid} → final summary JSON
+  GET  /logs          → list all saved log files
+  GET  /dashboard     → aggregated stats across all sessions
+"""
+
+import asyncio
+import base64
+import json
+import os
+import time
+import uuid
+import threading
+from collections import defaultdict
+from pathlib import Path
+from typing import Optional
+
+import cv2
+import numpy as np
+from fastapi import FastAPI, File, Form, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import (
+    FileResponse, HTMLResponse, JSONResponse, StreamingResponse
+)
+from fastapi.staticfiles import StaticFiles
+
+from tracker import TrafficTracker, TRAFFIC_CLASSES, DEFAULT_CLASSES
+
+# ─── App setup ──────────────────────────────────────────────────────────────
+app = FastAPI(title="Traffic Monitoring API", version="1.0.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+BASE_DIR   = Path(__file__).parent.parent
+UPLOAD_DIR = BASE_DIR / "uploads";   UPLOAD_DIR.mkdir(exist_ok=True)
+LOG_DIR    = BASE_DIR / "logs";      LOG_DIR.mkdir(exist_ok=True)
+OUTPUT_DIR = BASE_DIR / "output";    OUTPUT_DIR.mkdir(exist_ok=True)
+STATIC_DIR = BASE_DIR / "frontend"
+
+if STATIC_DIR.exists():
+    app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+
+# ─── In-memory session store ─────────────────────────────────────────────────
+sessions: dict[str, dict] = {}
+# Each session: {
+#   "status": "processing" | "done" | "error",
+#   "frames": deque of base64 JPEG strings (latest N),
+#   "stats":  latest frame stat dict,
+#   "summary": full summary dict (when done),
+#   "tracker": TrafficTracker instance,
+#   "error":  str | None,
+#   "scene_name": str,
+# }
+
+from collections import deque
+SESSION_FRAME_BUFFER = 2   # keep only last N frames in memory
+
+# ─── Routes ──────────────────────────────────────────────────────────────────
+
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    index = STATIC_DIR / "index.html"
+    if index.exists():
+        return HTMLResponse(index.read_text())
+    return HTMLResponse("<h1>Traffic Monitoring API</h1><p>Frontend not found.</p>")
+
+
+@app.get("/health")
+async def health():
+    return {"status": "ok", "sessions": len(sessions)}
+
+
+@app.get("/classes")
+async def get_classes():
+    """Return all supported traffic object classes."""
+    return {"classes": DEFAULT_CLASSES, "all": list(TRAFFIC_CLASSES.values())}
+
+
+@app.post("/upload")
+async def upload_video(
+    file: UploadFile = File(...),
+    scene_name: str  = Form("scene_01"),
+    classes: str     = Form(""),           # comma-separated class names
+    conf: float      = Form(0.35),
+    model: str       = Form("yolov8n.pt"), # yolov8n/s/m/l/x
+    save_output: bool = Form(False),
+):
+    """Upload a video file and start processing in a background thread."""
+    sid = str(uuid.uuid4())[:12]
+
+    # Save uploaded file
+    suffix = Path(file.filename).suffix or ".mp4"
+    video_path = UPLOAD_DIR / f"{sid}{suffix}"
+    content = await file.read()
+    video_path.write_bytes(content)
+
+    selected = [c.strip() for c in classes.split(",") if c.strip()] or DEFAULT_CLASSES
+
+    sessions[sid] = {
+        "status":     "processing",
+        "frames":     deque(maxlen=SESSION_FRAME_BUFFER),
+        "stats":      None,
+        "summary":    None,
+        "tracker":    None,
+        "error":      None,
+        "scene_name": scene_name,
+        "video_path": str(video_path),
+        "progress":   0,
+        "total_frames": 0,
+    }
+
+    # Start background processing thread
+    thread = threading.Thread(
+        target=_process_video_thread,
+        args=(sid, str(video_path), scene_name, selected, conf, model, save_output),
+        daemon=True,
+    )
+    thread.start()
+
+    return {"session_id": sid, "scene_name": scene_name, "status": "processing"}
+
+
+def _process_video_thread(
+    sid: str,
+    video_path: str,
+    scene_name: str,
+    selected_classes: list,
+    conf: float,
+    model_name: str,
+    save_output: bool,
+):
+    """Run YOLO+ByteTrack in a background thread, push frames to session."""
+    session = sessions[sid]
+    try:
+        cap = cv2.VideoCapture(video_path)
+        if not cap.isOpened():
+            session["status"] = "error"
+            session["error"]  = "Could not open video file."
+            return
+
+        total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        session["total_frames"] = total
+
+        tracker = TrafficTracker(
+            model_path=model_name,
+            selected_classes=selected_classes,
+            conf_threshold=conf,
+            scene_name=scene_name,
+            output_dir=str(LOG_DIR),
+        )
+        tracker.setup_video(cap)
+        session["tracker"] = tracker
+
+        # Optional video writer
+        out_writer = None
+        out_path = None
+        if save_output:
+            out_path = str(OUTPUT_DIR / f"{sid}_output.mp4")
+            fourcc = cv2.VideoWriter_fourcc(*"mp4v")
+            out_writer = cv2.VideoWriter(
+                out_path, fourcc, tracker.fps,
+                (tracker.frame_width, tracker.frame_height)
+            )
+
+        while True:
+            ret, frame = cap.read()
+            if not ret:
+                break
+
+            annotated, frame_stat = tracker.process_frame(frame)
+            session["stats"]    = frame_stat
+            session["progress"] = tracker.frame_index
+
+            # Encode frame to JPEG base64 for SSE streaming
+            _, buf = cv2.imencode(".jpg", annotated, [cv2.IMWRITE_JPEG_QUALITY, 75])
+            b64 = base64.b64encode(buf).decode()
+            session["frames"].append(b64)
+
+            if out_writer:
+                out_writer.write(annotated)
+
+        cap.release()
+        if out_writer:
+            out_writer.release()
+
+        # Save logs + build summary
+        log_paths = tracker.save_logs()
+        summary   = tracker.get_summary()
+        summary["log_files"] = log_paths
+        if out_path:
+            summary["output_video"] = out_path
+
+        session["summary"] = summary
+        session["status"]  = "done"
+
+    except Exception as e:
+        sessions[sid]["status"] = "error"
+        sessions[sid]["error"]  = str(e)
+        raise
+
+
+@app.get("/stream/{sid}")
+async def stream_frames(sid: str):
+    """Server-Sent Events stream of annotated frames (base64 JPEG)."""
+    if sid not in sessions:
+        raise HTTPException(404, "Session not found")
+
+    async def event_generator():
+        last_sent_index = 0
+        while True:
+            session = sessions[sid]
+            frames = list(session["frames"])
+            if frames:
+                for frame_b64 in frames[last_sent_index:]:
+                    stats = json.dumps(session.get("stats") or {})
+                    data = json.dumps({"frame": frame_b64, "stats": stats})
+                    yield f"data: {data}\n\n"
+                last_sent_index = len(frames)
+
+            if session["status"] in ("done", "error"):
+                yield f"data: {json.dumps({'event': 'done', 'status': session['status']})}\n\n"
+                break
+
+            await asyncio.sleep(0.04)  # ~25fps cap
+
+    return StreamingResponse(event_generator(), media_type="text/event-stream")
+
+
+@app.get("/status/{sid}")
+async def get_status(sid: str):
+    if sid not in sessions:
+        raise HTTPException(404, "Session not found")
+    s = sessions[sid]
+    return {
+        "session_id":   sid,
+        "status":       s["status"],
+        "scene_name":   s["scene_name"],
+        "progress":     s["progress"],
+        "total_frames": s["total_frames"],
+        "stats":        s["stats"],
+        "error":        s["error"],
+    }
+
+
+@app.get("/summary/{sid}")
+async def get_summary(sid: str):
+    if sid not in sessions:
+        raise HTTPException(404, "Session not found")
+    s = sessions[sid]
+    if s["status"] != "done":
+        return JSONResponse({"detail": "Processing not complete yet."}, status_code=202)
+    return s["summary"]
+
+
+@app.get("/logs")
+async def list_logs():
+    """List all saved log files."""
+    files = [
+        {
+            "name":     f.name,
+            "size_kb":  round(f.stat().st_size / 1024, 1),
+            "modified": f.stat().st_mtime,
+        }
+        for f in sorted(LOG_DIR.glob("*"), key=lambda x: x.stat().st_mtime, reverse=True)
+    ]
+    return {"logs": files}
+
+
+@app.get("/dashboard")
+async def dashboard_data():
+    """Aggregate all completed session summaries into a dashboard payload."""
+    completed = [
+        s["summary"] for s in sessions.values()
+        if s["status"] == "done" and s["summary"]
+    ]
+
+    # Also load from saved JSON files
+    for p in sorted(LOG_DIR.glob("*_summary.json")):
+        try:
+            data = json.loads(p.read_text())
+            # Avoid duplicates by session_id
+            if not any(c.get("session_id") == data.get("session_id") for c in completed):
+                completed.append(data)
+        except Exception:
+            pass
+
+    if not completed:
+        return {"scenes": [], "global": {}}
+
+    global_counts: dict[str, int] = defaultdict(int)
+    for s in completed:
+        for cls_, cnt in s.get("count_per_class", {}).items():
+            global_counts[cls_] += cnt
+
+    return {
+        "scenes":        completed,
+        "global_counts": dict(global_counts),
+        "total_scenes":  len(completed),
+        "total_objects": sum(global_counts.values()),
+    }
+
+
+@app.get("/log/{filename}")
+async def download_log(filename: str):
+    p = LOG_DIR / filename
+    if not p.exists():
+        raise HTTPException(404)
+    return FileResponse(str(p), filename=filename)

backend/requirements.txt

@@ -0,0 +1,7 @@
+ultralytics>=8.3.0
+opencv-python>=4.9.0
+fastapi>=0.111.0
+uvicorn[standard]>=0.30.0
+python-multipart>=0.0.9
+numpy>=1.26.0
+lapx>=0.5.5          # ByteTrack dependency

backend/run_tracker.py

@@ -0,0 +1,102 @@
+"""
+run_tracker.py — Command-line video processing (no server needed)
+Usage:
+    python run_tracker.py --video traffic.mp4 --scene intersection_A --show
+    python run_tracker.py --video traffic.mp4 --classes car truck bus --conf 0.4 --save
+"""
+import cv2
+import argparse
+from pathlib import Path
+from tracker import TrafficTracker, DEFAULT_CLASSES
+
+
+def parse_args():
+    p = argparse.ArgumentParser(description="TrafficSense CLI Tracker")
+    p.add_argument("--video",   required=True,             help="Path to input video")
+    p.add_argument("--model",   default="yolov8s.pt",      help="YOLO model weights")
+    p.add_argument("--scene",   default="scene_01",        help="Scene name for logs")
+    p.add_argument("--classes", nargs="+", default=DEFAULT_CLASSES, help="Classes to track")
+    p.add_argument("--conf",    type=float, default=0.35,  help="Confidence threshold")
+    p.add_argument("--show",    action="store_true",       help="Display video window")
+    p.add_argument("--save",    action="store_true",       help="Save annotated output video")
+    p.add_argument("--logs",    default="logs",            help="Directory to save logs")
+    p.add_argument("--out",     default="output",          help="Directory for output video")
+    p.add_argument("--line",    type=float, default=0.55,  help="Counting line position (0-1)")
+    return p.parse_args()
+
+
+def main():
+    args = parse_args()
+
+    cap = cv2.VideoCapture(args.video)
+    if not cap.isOpened():
+        print(f"[ERROR] Cannot open video: {args.video}")
+        return
+
+    tracker = TrafficTracker(
+        model_path=args.model,
+        selected_classes=args.classes,
+        conf_threshold=args.conf,
+        scene_name=args.scene,
+        output_dir=args.logs,
+        counting_line_ratio=args.line,
+    )
+    tracker.setup_video(cap)
+
+    out_writer = None
+    if args.save:
+        Path(args.out).mkdir(parents=True, exist_ok=True)
+        out_path = str(Path(args.out) / f"{args.scene}_output.mp4")
+        fourcc   = cv2.VideoWriter_fourcc(*"mp4v")
+        out_writer = cv2.VideoWriter(
+            out_path, fourcc, tracker.fps,
+            (tracker.frame_width, tracker.frame_height)
+        )
+        print(f"[INFO] Saving to: {out_path}")
+
+    total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    print(f"[INFO] Processing {total} frames  |  Scene: {args.scene}  |  Classes: {args.classes}")
+
+    while True:
+        ret, frame = cap.read()
+        if not ret:
+            break
+
+        annotated, stats = tracker.process_frame(frame)
+
+        if out_writer:
+            out_writer.write(annotated)
+
+        if args.show:
+            cv2.imshow(f"TrafficSense — {args.scene}", annotated)
+            if cv2.waitKey(1) & 0xFF == ord('q'):
+                break
+
+        # Progress
+        if tracker.frame_index % 50 == 0:
+            pct = tracker.frame_index / max(total, 1) * 100
+            print(f"  [{pct:5.1f}%] frame {tracker.frame_index}/{total}  "
+                  f"counts: {dict(tracker.count_per_class)}")
+
+    cap.release()
+    if out_writer:
+        out_writer.release()
+    if args.show:
+        cv2.destroyAllWindows()
+
+    print("\n[INFO] Processing complete.")
+    log_paths = tracker.save_logs()
+    summary   = tracker.get_summary()
+
+    print("\n── SUMMARY ──────────────────────────────────")
+    print(f"  Scene:          {summary['scene']}")
+    print(f"  Duration:       {summary['duration_sec']}s")
+    print(f"  Total frames:   {summary['total_frames']}")
+    print(f"  Unique objects: {summary['total_unique_objects']}")
+    print(f"  Per class:      {summary['count_per_class']}")
+    print(f"\n  Logs saved to:  {log_paths}")
+    print("─────────────────────────────────────────────")
+
+
+if __name__ == "__main__":
+    main()

backend/tracker.py

@@ -0,0 +1,292 @@
+"""
+tracker.py — Core detection + tracking engine
+Uses YOLOv8 (ultralytics) with ByteTrack built-in tracker.
+Supports: cars, buses, trucks, motorbikes, bicycles, pedestrians
+"""
+
+import cv2
+import json
+import time
+import uuid
+import numpy as np
+from pathlib import Path
+from datetime import datetime
+from collections import defaultdict
+from ultralytics import YOLO
+
+# ─── Class configuration ────────────────────────────────────────────────────
+TRAFFIC_CLASSES = {
+    0:  "person",
+    1:  "bicycle",
+    2:  "car",
+    3:  "motorbike",
+    5:  "bus",
+    7:  "truck",
+}
+
+CLASS_COLORS = {
+    "person":    (0,   200, 255),
+    "bicycle":   (50,  255, 50),
+    "car":       (255, 165, 0),
+    "motorbike": (255, 50,  200),
+    "bus":       (0,   100, 255),
+    "truck":     (180, 0,   255),
+}
+
+DEFAULT_CLASSES = list(TRAFFIC_CLASSES.values())
+
+
+# ─── Counting line helper ────────────────────────────────────────────────────
+def crosses_line(prev_center, curr_center, line_y):
+    """Returns True + direction when a track crosses a horizontal counting line."""
+    if prev_center is None:
+        return False, None
+    py, cy = prev_center[1], curr_center[1]
+    if py < line_y <= cy:
+        return True, "down"
+    if py > line_y >= cy:
+        return True, "up"
+    return False, None
+
+
+# ─── TrafficTracker ──────────────────────────────────────────────────────────
+class TrafficTracker:
+    def __init__(
+        self,
+        model_path: str = "yolov8n.pt",
+        selected_classes: list[str] = None,
+        conf_threshold: float = 0.35,
+        scene_name: str = "scene_01",
+        output_dir: str = "logs",
+        counting_line_ratio: float = 0.55,   # fraction of frame height
+    ):
+        self.model = YOLO(model_path)
+        self.selected_classes = selected_classes or DEFAULT_CLASSES
+        self.conf = conf_threshold
+        self.scene_name = scene_name
+        self.output_dir = Path(output_dir)
+        self.output_dir.mkdir(parents=True, exist_ok=True)
+        self.counting_line_ratio = counting_line_ratio
+
+        # State
+        self.session_id = str(uuid.uuid4())[:8]
+        self.frame_index = 0
+        self.fps = 30.0
+        self.frame_width = 0
+        self.frame_height = 0
+        self.counting_line_y = 0
+
+        # Tracking state
+        self.track_history: dict[int, list] = defaultdict(list)   # id -> [centers]
+        self.counted_ids: set[int] = set()
+        self.count_per_class: dict[str, int] = defaultdict(int)
+        self.direction_counts: dict[str, dict[str, int]] = defaultdict(
+            lambda: {"up": 0, "down": 0}
+        )
+
+        # Per-frame detection log
+        self.detection_log: list[dict] = []
+        self.frame_stats: list[dict] = []   # aggregated per frame
+
+        # Class filter (COCO indices)
+        self._class_ids = [
+            cid for cid, name in TRAFFIC_CLASSES.items()
+            if name in self.selected_classes
+        ]
+
+    # ── Setup ────────────────────────────────────────────────────────────────
+    def setup_video(self, cap: cv2.VideoCapture):
+        self.fps         = cap.get(cv2.CAP_PROP_FPS) or 30.0
+        self.frame_width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+        self.frame_height= int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+        self.counting_line_y = int(self.frame_height * self.counting_line_ratio)
+
+    # ── Process one frame ────────────────────────────────────────────────────
+    def process_frame(self, frame: np.ndarray) -> tuple[np.ndarray, dict]:
+        self.frame_index += 1
+        timestamp = self.frame_index / self.fps
+
+        results = self.model.track(
+            frame,
+            persist=True,
+            conf=self.conf,
+            classes=self._class_ids,
+            tracker="bytetrack.yaml",
+            verbose=False,
+        )
+
+        annotated   = frame.copy()
+        frame_detections = []
+        per_class_in_frame = defaultdict(int)
+        any_object_visible = False
+
+        result = results[0]
+
+        if result.boxes is not None and len(result.boxes) > 0:
+            boxes  = result.boxes
+            for box in boxes:
+                # Extract fields
+                cls_id  = int(box.cls[0])
+                cls_name = TRAFFIC_CLASSES.get(cls_id, "unknown")
+                if cls_name not in self.selected_classes:
+                    continue
+
+                conf_val = float(box.conf[0])
+                x1, y1, x2, y2 = map(int, box.xyxy[0])
+                track_id = int(box.id[0]) if box.id is not None else -1
+                cx = (x1 + x2) // 2
+                cy = (y1 + y2) // 2
+                center = (cx, cy)
+
+                any_object_visible = True
+                per_class_in_frame[cls_name] += 1
+
+                # Counting logic
+                prev_center = (
+                    self.track_history[track_id][-1]
+                    if self.track_history[track_id] else None
+                )
+                crossed, direction = crosses_line(prev_center, center, self.counting_line_y)
+                self.track_history[track_id].append(center)
+
+                if crossed and track_id not in self.counted_ids:
+                    self.counted_ids.add(track_id)
+                    self.count_per_class[cls_name] += 1
+                    self.direction_counts[cls_name][direction] += 1
+
+                # Log entry
+                det = {
+                    "frame":      self.frame_index,
+                    "timestamp":  round(timestamp, 3),
+                    "scene":      self.scene_name,
+                    "track_id":   track_id,
+                    "class":      cls_name,
+                    "confidence": round(conf_val, 3),
+                    "bbox":       [x1, y1, x2, y2],
+                    "center":     [cx, cy],
+                    "crossed_line": crossed,
+                    "direction":  direction,
+                }
+                frame_detections.append(det)
+                self.detection_log.append(det)
+
+                # Draw bounding box
+                color = CLASS_COLORS.get(cls_name, (255, 255, 255))
+                cv2.rectangle(annotated, (x1, y1), (x2, y2), color, 2)
+                label = f"{cls_name} #{track_id}  {conf_val:.2f}"
+                (tw, th), _ = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, 0.55, 1)
+                cv2.rectangle(annotated, (x1, y1 - th - 8), (x1 + tw + 4, y1), color, -1)
+                cv2.putText(annotated, label, (x1 + 2, y1 - 4),
+                            cv2.FONT_HERSHEY_SIMPLEX, 0.55, (0, 0, 0), 1)
+
+                # Trail
+                trail = self.track_history[track_id][-20:]
+                for i in range(1, len(trail)):
+                    alpha = i / len(trail)
+                    tc = tuple(int(c * alpha) for c in color)
+                    cv2.line(annotated, trail[i - 1], trail[i], tc, 2)
+
+        # Draw counting line
+        cv2.line(annotated, (0, self.counting_line_y),
+                 (self.frame_width, self.counting_line_y), (0, 255, 255), 2)
+        cv2.putText(annotated, "COUNT LINE", (10, self.counting_line_y - 6),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 255), 1)
+
+        # Overlay counters
+        self._draw_counters(annotated, any_object_visible)
+
+        # Frame stats
+        frame_stat = {
+            "frame":        self.frame_index,
+            "timestamp":    round(timestamp, 3),
+            "scene":        self.scene_name,
+            "detections":   len(frame_detections),
+            "per_class":    dict(per_class_in_frame),
+            "any_visible":  any_object_visible,
+            "cumulative":   dict(self.count_per_class),
+        }
+        self.frame_stats.append(frame_stat)
+
+        return annotated, frame_stat
+
+    # ── Overlay ──────────────────────────────────────────────────────────────
+    def _draw_counters(self, frame: np.ndarray, any_visible: bool):
+        overlay = frame.copy()
+        cv2.rectangle(overlay, (0, 0), (260, 30 + 22 * len(self.selected_classes) + 30),
+                      (20, 20, 20), -1)
+        cv2.addWeighted(overlay, 0.6, frame, 0.4, 0, frame)
+
+        cv2.putText(frame, "TRAFFIC COUNTER", (10, 20),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.6, (0, 255, 255), 2)
+
+        y = 42
+        for cls_name in self.selected_classes:
+            count = self.count_per_class.get(cls_name, 0)
+            color = CLASS_COLORS.get(cls_name, (255, 255, 255))
+            label = f"  {cls_name:<12} {count:>4}"
+            cv2.putText(frame, label, (8, y),
+                        cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 1)
+            y += 22
+
+        if not any_visible:
+            cv2.putText(frame, "NO OBJECTS DETECTED", (10, y + 10),
+                        cv2.FONT_HERSHEY_SIMPLEX, 0.5, (80, 80, 80), 1)
+
+    # ── Save logs ─────────────────────────────────────────────────────────────
+    def save_logs(self) -> dict:
+        ts = datetime.now().strftime("%Y%m%d_%H%M%S")
+        prefix = f"{self.scene_name}_{ts}"
+
+        # Detection log (JSONL)
+        log_path = self.output_dir / f"{prefix}_detections.jsonl"
+        with open(log_path, "w") as f:
+            for entry in self.detection_log:
+                f.write(json.dumps(entry) + "\n")
+
+        # Summary JSON
+        summary = self.get_summary()
+        sum_path = self.output_dir / f"{prefix}_summary.json"
+        with open(sum_path, "w") as f:
+            json.dump(summary, f, indent=2)
+
+        # Frame stats CSV
+        import csv
+        csv_path = self.output_dir / f"{prefix}_frame_stats.csv"
+        if self.frame_stats:
+            with open(csv_path, "w", newline="") as f:
+                writer = csv.DictWriter(f, fieldnames=self.frame_stats[0].keys())
+                writer.writeheader()
+                writer.writerows(self.frame_stats)
+
+        return {
+            "detection_log": str(log_path),
+            "summary":       str(sum_path),
+            "frame_stats":   str(csv_path),
+        }
+
+    # ── Summary ───────────────────────────────────────────────────────────────
+    def get_summary(self) -> dict:
+        total_duration = self.frame_index / self.fps
+        total_objects  = sum(self.count_per_class.values())
+
+        # Traffic intensity over time (10-second buckets)
+        buckets: dict[int, int] = defaultdict(int)
+        for stat in self.frame_stats:
+            bucket = int(stat["timestamp"] // 10)
+            buckets[bucket] += stat["detections"]
+        temporal = [{"bucket_10s": k, "detections": v} for k, v in sorted(buckets.items())]
+
+        return {
+            "scene":           self.scene_name,
+            "session_id":      self.session_id,
+            "processed_at":    datetime.now().isoformat(),
+            "total_frames":    self.frame_index,
+            "duration_sec":    round(total_duration, 2),
+            "fps":             round(self.fps, 2),
+            "resolution":      [self.frame_width, self.frame_height],
+            "selected_classes":self.selected_classes,
+            "total_unique_objects": total_objects,
+            "count_per_class": dict(self.count_per_class),
+            "direction_counts":dict(self.direction_counts),
+            "temporal_distribution": temporal,
+        }

frontend/index.html

@@ -0,0 +1,916 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>TrafficSense — Road Traffic Monitor</title>
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  :root {
+    --bg:       #080c10;
+    --surface:  #0d1218;
+    --panel:    #111820;
+    --border:   #1e2d3d;
+    --accent:   #00e5ff;
+    --amber:    #ffb300;
+    --green:    #00ff88;
+    --red:      #ff3860;
+    --text:     #c8d8e8;
+    --dim:      #4a6070;
+    --mono:     'Share Tech Mono', monospace;
+    --head:     'Barlow Condensed', sans-serif;
+    --body:     'Barlow', sans-serif;
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--body);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* ── SCANLINE overlay ── */
+  body::before {
+    content: '';
+    position: fixed; inset: 0;
+    background: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 2px,
+      rgba(0,0,0,0.07) 2px,
+      rgba(0,0,0,0.07) 4px
+    );
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* ── HEADER ── */
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 28px;
+    height: 58px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+    position: sticky; top: 0; z-index: 100;
+  }
+
+  .logo {
+    display: flex; align-items: center; gap: 12px;
+  }
+
+  .logo-icon {
+    width: 32px; height: 32px;
+    border: 2px solid var(--accent);
+    display: grid; place-items: center;
+    font-family: var(--mono);
+    font-size: 14px;
+    color: var(--accent);
+    position: relative;
+  }
+  .logo-icon::after {
+    content: '';
+    position: absolute; inset: 3px;
+    border: 1px solid var(--accent);
+    opacity: 0.4;
+  }
+
+  .logo-text { font-family: var(--head); font-weight: 700; font-size: 22px; letter-spacing: 2px; }
+  .logo-text span { color: var(--accent); }
+
+  .header-status {
+    display: flex; align-items: center; gap: 20px;
+    font-family: var(--mono); font-size: 12px; color: var(--dim);
+  }
+
+  .status-dot {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--dim);
+    display: inline-block; margin-right: 6px;
+  }
+  .status-dot.live { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.4s ease infinite; }
+  .status-dot.proc { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: pulse 0.8s ease infinite; }
+  .status-dot.err  { background: var(--red); }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
+  }
+
+  nav { display: flex; gap: 4px; }
+  .nav-btn {
+    background: none; border: none; cursor: pointer;
+    font-family: var(--head); font-weight: 600; font-size: 13px;
+    letter-spacing: 1.5px; color: var(--dim); padding: 6px 14px;
+    border-bottom: 2px solid transparent; transition: all .2s;
+  }
+  .nav-btn.active, .nav-btn:hover { color: var(--accent); border-color: var(--accent); }
+
+  /* ── MAIN LAYOUT ── */
+  main { display: flex; gap: 0; height: calc(100vh - 58px); }
+
+  /* ── SIDEBAR ── */
+  aside {
+    width: 300px; min-width: 300px;
+    background: var(--surface);
+    border-right: 1px solid var(--border);
+    display: flex; flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .sidebar-section {
+    padding: 20px;
+    border-bottom: 1px solid var(--border);
+  }
+  .sidebar-section:last-child { border-bottom: none; }
+
+  .section-label {
+    font-family: var(--head);
+    font-weight: 700; font-size: 11px;
+    letter-spacing: 2.5px;
+    color: var(--dim);
+    text-transform: uppercase;
+    margin-bottom: 14px;
+  }
+
+  /* Upload zone */
+  .upload-zone {
+    border: 2px dashed var(--border);
+    border-radius: 4px;
+    padding: 24px 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all .2s;
+    position: relative;
+  }
+  .upload-zone:hover, .upload-zone.drag-over {
+    border-color: var(--accent);
+    background: rgba(0,229,255,0.04);
+  }
+  .upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
+  .upload-icon { font-size: 28px; margin-bottom: 8px; }
+  .upload-text { font-size: 13px; color: var(--dim); }
+  .upload-text b { color: var(--text); }
+  .upload-name { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 8px; word-break: break-all; }
+
+  /* Form inputs */
+  .field { margin-bottom: 14px; }
+  .field label { display: block; font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-bottom: 6px; font-family: var(--mono); }
+  .field input[type=text], .field input[type=number], .field select {
+    width: 100%; background: var(--panel); border: 1px solid var(--border);
+    color: var(--text); font-family: var(--mono); font-size: 13px;
+    padding: 8px 10px; outline: none; border-radius: 2px;
+    transition: border-color .2s;
+  }
+  .field input:focus, .field select:focus { border-color: var(--accent); }
+
+  /* Class checkboxes */
+  .class-grid {
+    display: grid; grid-template-columns: 1fr 1fr;
+    gap: 6px;
+  }
+  .cls-check {
+    display: flex; align-items: center; gap: 8px;
+    background: var(--panel); border: 1px solid var(--border);
+    padding: 7px 10px; cursor: pointer; transition: all .2s;
+    border-radius: 2px;
+  }
+  .cls-check input { display: none; }
+  .cls-check.active { border-color: var(--accent); background: rgba(0,229,255,0.07); }
+  .cls-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .cls-name { font-size: 12px; font-family: var(--mono); }
+
+  /* Buttons */
+  .btn {
+    display: block; width: 100%;
+    font-family: var(--head); font-weight: 700; font-size: 14px;
+    letter-spacing: 2px; text-transform: uppercase;
+    padding: 12px; border: none; cursor: pointer;
+    transition: all .2s; border-radius: 2px;
+  }
+  .btn-primary {
+    background: var(--accent); color: var(--bg);
+  }
+  .btn-primary:hover { background: #33eeff; box-shadow: 0 0 20px rgba(0,229,255,0.35); }
+  .btn-primary:disabled { background: var(--dim); color: var(--bg); cursor: not-allowed; box-shadow: none; }
+  .btn-secondary {
+    background: transparent; color: var(--dim);
+    border: 1px solid var(--border); margin-top: 8px;
+  }
+  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+
+  /* Progress */
+  .progress-bar { height: 3px; background: var(--border); margin-top: 12px; border-radius: 2px; overflow: hidden; }
+  .progress-fill { height: 100%; background: var(--accent); transition: width .3s; width: 0%; }
+
+  /* Counter cards */
+  .counter-grid { display: flex; flex-direction: column; gap: 6px; }
+  .counter-card {
+    display: flex; align-items: center; justify-content: space-between;
+    background: var(--panel); border: 1px solid var(--border);
+    padding: 8px 12px; border-radius: 2px;
+  }
+  .counter-card .cls-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-family: var(--mono); }
+  .counter-card .cls-count { font-family: var(--mono); font-size: 16px; color: var(--accent); font-weight: bold; }
+
+  /* ── CONTENT AREA ── */
+  .content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+  /* View tabs */
+  .view-tabs {
+    display: flex; gap: 0;
+    background: var(--surface); border-bottom: 1px solid var(--border);
+    padding: 0 20px;
+  }
+  .view-tab {
+    font-family: var(--head); font-weight: 600; font-size: 12px;
+    letter-spacing: 1.5px; color: var(--dim); padding: 10px 20px;
+    border: none; background: none; cursor: pointer;
+    border-bottom: 2px solid transparent;
+    text-transform: uppercase; transition: all .2s;
+  }
+  .view-tab.active { color: var(--accent); border-color: var(--accent); }
+
+  /* Video panel */
+  #view-video { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #030608; position: relative; overflow: hidden; }
+
+  .video-canvas-wrap { position: relative; max-width: 100%; max-height: 100%; }
+
+  #liveCanvas {
+    max-width: 100%; max-height: calc(100vh - 160px);
+    display: block;
+    border: 1px solid var(--border);
+  }
+
+  .no-signal {
+    display: flex; flex-direction: column; align-items: center; gap: 16px;
+    opacity: 0.35;
+  }
+  .no-signal-icon { font-size: 48px; }
+  .no-signal-text { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; }
+
+  /* Dashboard panel */
+  #view-dashboard {
+    flex: 1; overflow-y: auto; padding: 24px;
+    display: none;
+  }
+
+  .dash-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .stat-card {
+    background: var(--surface); border: 1px solid var(--border);
+    padding: 20px; border-radius: 2px;
+  }
+  .stat-card .sc-label { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 1.5px; margin-bottom: 10px; }
+  .stat-card .sc-value { font-family: var(--head); font-size: 36px; font-weight: 900; color: var(--accent); }
+  .stat-card .sc-unit  { font-family: var(--mono); font-size: 12px; color: var(--dim); }
+
+  .chart-card {
+    background: var(--surface); border: 1px solid var(--border);
+    padding: 20px; border-radius: 2px;
+    margin-bottom: 16px;
+  }
+  .chart-card h3 { font-family: var(--head); font-size: 13px; letter-spacing: 2px; color: var(--dim); margin-bottom: 16px; text-transform: uppercase; }
+
+  /* Bar chart */
+  .bar-chart { display: flex; flex-direction: column; gap: 10px; }
+  .bar-row { display: flex; align-items: center; gap: 10px; }
+  .bar-label { font-family: var(--mono); font-size: 12px; color: var(--dim); width: 90px; flex-shrink: 0; }
+  .bar-track { flex: 1; height: 20px; background: var(--panel); border-radius: 2px; overflow: hidden; position: relative; }
+  .bar-fill   { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
+  .bar-count  { font-family: var(--mono); font-size: 12px; color: var(--text); width: 36px; text-align: right; }
+
+  /* Timeline chart */
+  #timelineCanvas {
+    width: 100%; height: 120px; display: block;
+    border: 1px solid var(--border);
+  }
+
+  /* Scene table */
+  .scene-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .scene-table th {
+    font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
+    color: var(--dim); padding: 8px 12px; text-align: left;
+    border-bottom: 1px solid var(--border);
+  }
+  .scene-table td { padding: 10px 12px; border-bottom: 1px solid rgba(30,45,61,0.5); }
+  .scene-table tr:hover td { background: var(--panel); }
+  .badge {
+    display: inline-block; padding: 2px 8px;
+    font-family: var(--mono); font-size: 11px;
+    border-radius: 2px; background: rgba(0,229,255,0.1);
+    color: var(--accent); border: 1px solid rgba(0,229,255,0.25);
+  }
+
+  /* Logs view */
+  #view-logs { flex: 1; overflow-y: auto; padding: 24px; display: none; }
+  .log-entry {
+    background: var(--surface); border: 1px solid var(--border);
+    padding: 14px 16px; margin-bottom: 8px; border-radius: 2px;
+    display: flex; align-items: center; justify-content: space-between;
+    font-family: var(--mono); font-size: 12px;
+  }
+  .log-entry:hover { border-color: var(--accent); }
+  .log-filename { color: var(--text); }
+  .log-meta { color: var(--dim); font-size: 11px; }
+  .log-dl { color: var(--accent); text-decoration: none; font-size: 11px; }
+  .log-dl:hover { text-decoration: underline; }
+
+  /* Toast */
+  #toast {
+    position: fixed; bottom: 24px; right: 24px;
+    background: var(--panel); border: 1px solid var(--border);
+    color: var(--text); font-family: var(--mono); font-size: 12px;
+    padding: 12px 20px; border-radius: 2px;
+    transform: translateY(80px); opacity: 0;
+    transition: all .3s; z-index: 9000;
+  }
+  #toast.show { transform: translateY(0); opacity: 1; }
+  #toast.success { border-color: var(--green); color: var(--green); }
+  #toast.error   { border-color: var(--red); color: var(--red); }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 4px; height: 4px; }
+  ::-webkit-scrollbar-track { background: var(--bg); }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+  .hidden { display: none !important; }
+  .mt8 { margin-top: 8px; }
+</style>
+</head>
+<body>
+
+<!-- ══ HEADER ══════════════════════════════════════════════════════════════ -->
+<header>
+  <div class="logo">
+    <div class="logo-icon">TS</div>
+    <div class="logo-text">TRAFFIC<span>SENSE</span></div>
+  </div>
+
+  <nav>
+    <button class="nav-btn active" onclick="showView('video')">LIVE</button>
+    <button class="nav-btn" onclick="showView('dashboard')">DASHBOARD</button>
+    <button class="nav-btn" onclick="showView('logs')">LOGS</button>
+  </nav>
+
+  <div class="header-status">
+    <span><span class="status-dot" id="connDot"></span><span id="connLabel">IDLE</span></span>
+    <span id="clockDisplay" style="font-size:11px">--:--:--</span>
+  </div>
+</header>
+
+<!-- ══ MAIN ════════════════════════════════════════════════════════════════ -->
+<main>
+
+  <!-- ── SIDEBAR ── -->
+  <aside>
+    <!-- Upload -->
+    <div class="sidebar-section">
+      <div class="section-label">Video Source</div>
+      <label class="upload-zone" id="uploadZone">
+        <input type="file" id="videoFile" accept="video/*"/>
+        <div class="upload-icon">📹</div>
+        <div class="upload-text"><b>Drop video here</b><br>or click to browse</div>
+        <div class="upload-name" id="fileName"></div>
+      </label>
+    </div>
+
+    <!-- Config -->
+    <div class="sidebar-section">
+      <div class="section-label">Configuration</div>
+      <div class="field">
+        <label>SCENE NAME</label>
+        <input type="text" id="sceneName" value="scene_01" placeholder="e.g. intersection_A"/>
+      </div>
+      <div class="field">
+        <label>MODEL</label>
+        <select id="modelSelect">
+          <option value="yolov8n.pt">YOLOv8n — nano (fastest)</option>
+          <option value="yolov8s.pt" selected>YOLOv8s — small</option>
+          <option value="yolov8m.pt">YOLOv8m — medium</option>
+          <option value="yolov8l.pt">YOLOv8l — large</option>
+          <option value="yolov11n.pt">YOLOv11n — nano</option>
+          <option value="yolov11s.pt">YOLOv11s — small</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>CONFIDENCE THRESHOLD</label>
+        <input type="number" id="confThresh" value="0.35" min="0.1" max="0.95" step="0.05"/>
+      </div>
+    </div>
+
+    <!-- Classes -->
+    <div class="sidebar-section">
+      <div class="section-label">Track Classes</div>
+      <div class="class-grid" id="classGrid"></div>
+    </div>
+
+    <!-- Controls -->
+    <div class="sidebar-section">
+      <div class="section-label">Actions</div>
+      <button class="btn btn-primary" id="startBtn" onclick="startProcessing()">▶ START ANALYSIS</button>
+      <button class="btn btn-secondary hidden" id="stopBtn" onclick="stopProcessing()">■ STOP</button>
+      <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+      <div style="font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:6px;text-align:center" id="progressLabel"></div>
+    </div>
+
+    <!-- Live counters -->
+    <div class="sidebar-section">
+      <div class="section-label">Live Counts (Unique)</div>
+      <div class="counter-grid" id="counterGrid">
+        <div style="font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;padding:12px">
+          No data yet
+        </div>
+      </div>
+    </div>
+
+    <!-- Frame info -->
+    <div class="sidebar-section" id="frameInfoPanel" style="display:none">
+      <div class="section-label">Frame Info</div>
+      <div id="frameInfo" style="font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.8"></div>
+    </div>
+  </aside>
+
+  <!-- ── CONTENT ── -->
+  <div class="content">
+    <div class="view-tabs">
+      <button class="view-tab active" onclick="switchTab('video', this)">VIDEO FEED</button>
+      <button class="view-tab" onclick="switchTab('dashboard', this)">ANALYTICS</button>
+      <button class="view-tab" onclick="switchTab('logs', this)">LOG FILES</button>
+    </div>
+
+    <!-- VIDEO VIEW -->
+    <div id="view-video" style="flex:1;display:flex;align-items:center;justify-content:center;background:#030608;overflow:hidden">
+      <div id="noSignal" class="no-signal">
+        <div class="no-signal-icon">📡</div>
+        <div class="no-signal-text">AWAITING VIDEO FEED</div>
+        <div style="font-family:var(--mono);font-size:11px;color:var(--dim)">Upload a video and click START</div>
+      </div>
+      <canvas id="liveCanvas" class="hidden"></canvas>
+    </div>
+
+    <!-- DASHBOARD VIEW -->
+    <div id="view-dashboard" style="flex:1;overflow-y:auto;padding:24px;display:none">
+      <div class="dash-grid" id="dashStats"></div>
+
+      <div class="chart-card">
+        <h3>Objects by Class — All Scenes</h3>
+        <div class="bar-chart" id="barChart"></div>
+      </div>
+
+      <div class="chart-card">
+        <h3>Traffic Intensity Timeline (10s buckets)</h3>
+        <canvas id="timelineCanvas"></canvas>
+      </div>
+
+      <div class="chart-card">
+        <h3>Scene Comparison</h3>
+        <table class="scene-table">
+          <thead>
+            <tr>
+              <th>SCENE</th><th>DURATION</th><th>TOTAL OBJECTS</th>
+              <th>CARS</th><th>PEDESTRIANS</th><th>TRUCKS/BUS</th>
+            </tr>
+          </thead>
+          <tbody id="sceneTable"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- LOGS VIEW -->
+    <div id="view-logs" style="flex:1;overflow-y:auto;padding:24px;display:none">
+      <div id="logList"><div style="font-family:var(--mono);font-size:13px;color:var(--dim)">No logs yet.</div></div>
+    </div>
+  </div>
+</main>
+
+<div id="toast"></div>
+
+<script>
+// ══ CONFIG ════════════════════════════════════════════════════════════════
+const API_BASE = 'http://localhost:8000';
+
+const CLASS_COLORS = {
+  person:    '#00e5ff',
+  bicycle:   '#00ff88',
+  car:       '#ffb300',
+  motorbike: '#ff6eb4',
+  bus:       '#4fc3f7',
+  truck:     '#ce93d8',
+};
+
+const ALL_CLASSES = ['person','bicycle','car','motorbike','bus','truck'];
+
+// ══ STATE ═════════════════════════════════════════════════════════════════
+let currentSid    = null;
+let sseSource     = null;
+let activeTab     = 'video';
+let selectedFile  = null;
+let cumulativeCounts = {};
+let pollInterval  = null;
+
+// ══ INIT ══════════════════════════════════════════════════════════════════
+window.onload = () => {
+  buildClassGrid();
+  setInterval(updateClock, 1000);
+  updateClock();
+  checkHealth();
+
+  document.getElementById('videoFile').addEventListener('change', e => {
+    selectedFile = e.target.files[0];
+    document.getElementById('fileName').textContent = selectedFile ? selectedFile.name : '';
+  });
+
+  // Drag-and-drop on upload zone
+  const zone = document.getElementById('uploadZone');
+  zone.addEventListener('dragover', ev => { ev.preventDefault(); zone.classList.add('drag-over'); });
+  zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
+  zone.addEventListener('drop', ev => {
+    ev.preventDefault(); zone.classList.remove('drag-over');
+    if (ev.dataTransfer.files[0]) {
+      selectedFile = ev.dataTransfer.files[0];
+      document.getElementById('fileName').textContent = selectedFile.name;
+    }
+  });
+};
+
+function buildClassGrid() {
+  const grid = document.getElementById('classGrid');
+  grid.innerHTML = '';
+  ALL_CLASSES.forEach(cls => {
+    const label = document.createElement('label');
+    label.className = 'cls-check active';
+    label.innerHTML = `
+      <input type="checkbox" value="${cls}" checked/>
+      <span class="cls-dot" style="background:${CLASS_COLORS[cls]}"></span>
+      <span class="cls-name">${cls}</span>
+    `;
+    label.querySelector('input').addEventListener('change', function() {
+      label.classList.toggle('active', this.checked);
+    });
+    grid.appendChild(label);
+  });
+}
+
+function updateClock() {
+  const now = new Date();
+  document.getElementById('clockDisplay').textContent =
+    now.toLocaleTimeString('en-GB', {hour12: false});
+}
+
+async function checkHealth() {
+  try {
+    const r = await fetch(`${API_BASE}/health`);
+    if (r.ok) setConnected(true);
+    else setConnected(false);
+  } catch { setConnected(false); }
+}
+
+function setConnected(ok) {
+  const dot   = document.getElementById('connDot');
+  const label = document.getElementById('connLabel');
+  dot.className   = 'status-dot ' + (ok ? 'live' : '');
+  label.textContent = ok ? 'CONNECTED' : 'SERVER OFFLINE';
+}
+
+// ══ NAV / TAB ════════════════════════════════════════════════════════════
+function showView(v) { switchTab(v, null); }
+
+function switchTab(tab, btn) {
+  activeTab = tab;
+  document.querySelectorAll('.view-tab').forEach(b => b.classList.remove('active'));
+  if (btn) btn.classList.add('active');
+
+  document.getElementById('view-video').style.display     = (tab==='video')     ? 'flex' : 'none';
+  document.getElementById('view-dashboard').style.display = (tab==='dashboard') ? 'block' : 'none';
+  document.getElementById('view-logs').style.display      = (tab==='logs')      ? 'block' : 'none';
+
+  if (tab === 'dashboard') loadDashboard();
+  if (tab === 'logs')      loadLogs();
+}
+
+// ══ PROCESSING ════════════════════════════════════════════════════════════
+async function startProcessing() {
+  if (!selectedFile) { toast('Please upload a video file first.', 'error'); return; }
+
+  const selected = [...document.querySelectorAll('#classGrid input:checked')].map(i => i.value);
+  if (!selected.length) { toast('Select at least one class.', 'error'); return; }
+
+  const formData = new FormData();
+  formData.append('file',        selectedFile);
+  formData.append('scene_name',  document.getElementById('sceneName').value || 'scene_01');
+  formData.append('classes',     selected.join(','));
+  formData.append('conf',        document.getElementById('confThresh').value);
+  formData.append('model',       document.getElementById('modelSelect').value);
+  formData.append('save_output', 'false');
+
+  document.getElementById('startBtn').disabled = true;
+  document.getElementById('stopBtn').classList.remove('hidden');
+  setStatus('proc', 'PROCESSING');
+  cumulativeCounts = {};
+
+  try {
+    const r = await fetch(`${API_BASE}/upload`, { method:'POST', body: formData });
+    if (!r.ok) throw new Error(await r.text());
+    const data = await r.json();
+    currentSid = data.session_id;
+    toast(`Session started: ${currentSid}`, 'success');
+    startSSE(currentSid);
+    startPoll(currentSid);
+  } catch(e) {
+    toast('Upload failed: ' + e.message, 'error');
+    resetUI();
+  }
+}
+
+function stopProcessing() {
+  if (sseSource) { sseSource.close(); sseSource = null; }
+  if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
+  resetUI();
+  toast('Processing stopped.', '');
+}
+
+function resetUI() {
+  document.getElementById('startBtn').disabled = false;
+  document.getElementById('stopBtn').classList.add('hidden');
+  document.getElementById('progressFill').style.width = '0%';
+  document.getElementById('progressLabel').textContent = '';
+  setStatus('', 'IDLE');
+}
+
+function setStatus(cls, label) {
+  document.getElementById('connDot').className = 'status-dot ' + cls;
+  document.getElementById('connLabel').textContent = label;
+}
+
+// ══ SSE STREAM ════════════════════════════════════════════════════════════
+const canvas = document.getElementById('liveCanvas');
+const ctx     = canvas.getContext('2d');
+let imgObj    = new Image();
+
+function startSSE(sid) {
+  if (sseSource) sseSource.close();
+  document.getElementById('noSignal').classList.add('hidden');
+  canvas.classList.remove('hidden');
+
+  sseSource = new EventSource(`${API_BASE}/stream/${sid}`);
+  sseSource.onmessage = ev => {
+    const msg = JSON.parse(ev.data);
+
+    if (msg.event === 'done') {
+      sseSource.close();
+      setStatus('live', 'DONE');
+      document.getElementById('startBtn').disabled = false;
+      document.getElementById('stopBtn').classList.add('hidden');
+      document.getElementById('progressFill').style.width = '100%';
+      toast('Processing complete!', 'success');
+      fetchAndShowSummary(sid);
+      return;
+    }
+
+    if (msg.frame) {
+      imgObj.onload = () => {
+        canvas.width  = imgObj.naturalWidth  || imgObj.width;
+        canvas.height = imgObj.naturalHeight || imgObj.height;
+        ctx.drawImage(imgObj, 0, 0);
+      };
+      imgObj.src = 'data:image/jpeg;base64,' + msg.frame;
+    }
+
+    if (msg.stats) {
+      const stats = typeof msg.stats === 'string' ? JSON.parse(msg.stats) : msg.stats;
+      updateSidebarStats(stats);
+    }
+  };
+
+  sseSource.onerror = () => {
+    if (currentSid) checkStatus(currentSid);
+  };
+}
+
+function startPoll(sid) {
+  if (pollInterval) clearInterval(pollInterval);
+  pollInterval = setInterval(() => checkStatus(sid), 2000);
+}
+
+async function checkStatus(sid) {
+  try {
+    const r = await fetch(`${API_BASE}/status/${sid}`);
+    const d = await r.json();
+    if (d.total_frames > 0) {
+      const pct = Math.min(100, Math.round(d.progress / d.total_frames * 100));
+      document.getElementById('progressFill').style.width = pct + '%';
+      document.getElementById('progressLabel').textContent = `${d.progress} / ${d.total_frames} frames (${pct}%)`;
+    }
+    if (d.status === 'done' || d.status === 'error') {
+      clearInterval(pollInterval);
+    }
+  } catch {}
+}
+
+function updateSidebarStats(stats) {
+  if (!stats || !stats.cumulative) return;
+  cumulativeCounts = stats.cumulative;
+
+  // Update counter cards
+  const grid = document.getElementById('counterGrid');
+  grid.innerHTML = '';
+  for (const [cls, cnt] of Object.entries(cumulativeCounts)) {
+    if (cnt === 0) continue;
+    const card = document.createElement('div');
+    card.className = 'counter-card';
+    card.innerHTML = `
+      <div class="cls-label">
+        <span class="cls-dot" style="background:${CLASS_COLORS[cls]||'#fff'}"></span>
+        ${cls}
+      </div>
+      <div class="cls-count">${cnt}</div>
+    `;
+    grid.appendChild(card);
+  }
+  if (!grid.children.length) grid.innerHTML = '<div style="font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;padding:12px">No crossings yet</div>';
+
+  // Frame info
+  document.getElementById('frameInfoPanel').style.display = 'block';
+  document.getElementById('frameInfo').innerHTML = `
+    FRAME: ${stats.frame || '--'}<br>
+    TIME: ${stats.timestamp || '--'}s<br>
+    SCENE: ${stats.scene || '--'}<br>
+    DETECTIONS: ${stats.detections || 0}<br>
+    VISIBLE: ${stats.any_visible ? '<span style="color:var(--green)">YES</span>' : '<span style="color:var(--dim)">NO</span>'}
+  `;
+}
+
+async function fetchAndShowSummary(sid) {
+  try {
+    const r = await fetch(`${API_BASE}/summary/${sid}`);
+    if (!r.ok) return;
+    const summary = await r.json();
+    updateSidebarStats({ cumulative: summary.count_per_class, frame: summary.total_frames });
+    toast(`Total: ${summary.total_unique_objects} unique objects counted.`, 'success');
+  } catch {}
+}
+
+// ══ DASHBOARD ════════════════════════════════════════════════════════════
+async function loadDashboard() {
+  try {
+    const r = await fetch(`${API_BASE}/dashboard`);
+    const d = await r.json();
+    renderDashboard(d);
+  } catch(e) {
+    document.getElementById('dashStats').innerHTML =
+      '<div style="font-family:var(--mono);font-size:12px;color:var(--dim)">Server not reachable.</div>';
+  }
+}
+
+function renderDashboard(d) {
+  const { global_counts={}, total_scenes=0, total_objects=0, scenes=[] } = d;
+
+  // Stat cards
+  const statsEl = document.getElementById('dashStats');
+  const allDuration = scenes.reduce((s,sc) => s + (sc.duration_sec||0), 0);
+  statsEl.innerHTML = `
+    ${statCard('SCENES', total_scenes, 'videos')}
+    ${statCard('TOTAL OBJECTS', total_objects, 'unique crossings')}
+    ${statCard('TOTAL DURATION', Math.round(allDuration), 'seconds')}
+    ${statCard('AVG/SCENE', total_scenes ? Math.round(total_objects/total_scenes) : 0, 'objects')}
+  `;
+
+  // Bar chart
+  const barEl = document.getElementById('barChart');
+  const max = Math.max(...Object.values(global_counts), 1);
+  barEl.innerHTML = Object.entries(global_counts).map(([cls, cnt]) => `
+    <div class="bar-row">
+      <div class="bar-label">${cls}</div>
+      <div class="bar-track">
+        <div class="bar-fill" style="width:${(cnt/max*100).toFixed(1)}%;background:${CLASS_COLORS[cls]||'#888'}"></div>
+      </div>
+      <div class="bar-count">${cnt}</div>
+    </div>
+  `).join('') || '<div style="color:var(--dim);font-family:var(--mono);font-size:12px">No data</div>';
+
+  // Timeline
+  renderTimeline(scenes);
+
+  // Scene table
+  const tbody = document.getElementById('sceneTable');
+  tbody.innerHTML = scenes.map(sc => `
+    <tr>
+      <td><span class="badge">${sc.scene}</span></td>
+      <td>${sc.duration_sec}s</td>
+      <td style="color:var(--accent);font-family:var(--mono)">${sc.total_unique_objects}</td>
+      <td>${sc.count_per_class?.car||0}</td>
+      <td>${sc.count_per_class?.person||0}</td>
+      <td>${(sc.count_per_class?.truck||0)+(sc.count_per_class?.bus||0)}</td>
+    </tr>
+  `).join('') || '<tr><td colspan="6" style="color:var(--dim);font-family:var(--mono);padding:20px">No scenes processed yet.</td></tr>';
+}
+
+function statCard(label, value, unit) {
+  return `<div class="stat-card">
+    <div class="sc-label">${label}</div>
+    <div class="sc-value">${value}</div>
+    <div class="sc-unit">${unit}</div>
+  </div>`;
+}
+
+function renderTimeline(scenes) {
+  const c = document.getElementById('timelineCanvas');
+  const ctx2 = c.getContext('2d');
+  c.width  = c.offsetWidth || 800;
+  c.height = 120;
+
+  // Merge all temporal distributions
+  const merged = {};
+  for (const sc of scenes) {
+    for (const t of (sc.temporal_distribution||[])) {
+      merged[t.bucket_10s] = (merged[t.bucket_10s]||0) + t.detections;
+    }
+  }
+
+  const keys = Object.keys(merged).map(Number).sort((a,b)=>a-b);
+  if (!keys.length) { ctx2.fillStyle='#1e2d3d'; ctx2.fillRect(0,0,c.width,c.height); return; }
+
+  const vals = keys.map(k=>merged[k]);
+  const maxV = Math.max(...vals, 1);
+
+  ctx2.clearRect(0,0,c.width,c.height);
+  ctx2.fillStyle='#0d1218'; ctx2.fillRect(0,0,c.width,c.height);
+
+  // Grid lines
+  ctx2.strokeStyle = '#1e2d3d'; ctx2.lineWidth = 1;
+  [0.25,0.5,0.75,1].forEach(f => {
+    const y = c.height - f*c.height*0.9 - 10;
+    ctx2.beginPath(); ctx2.moveTo(0,y); ctx2.lineTo(c.width,y); ctx2.stroke();
+  });
+
+  // Area fill
+  const pad = 10;
+  const w   = (c.width - pad*2) / Math.max(keys.length-1,1);
+  const pts = keys.map((k,i) => [pad + i*w, c.height - pad - (merged[k]/maxV)*(c.height-pad*2)]);
+
+  ctx2.beginPath();
+  ctx2.moveTo(pts[0][0], c.height - pad);
+  pts.forEach(([x,y]) => ctx2.lineTo(x,y));
+  ctx2.lineTo(pts[pts.length-1][0], c.height - pad);
+  ctx2.closePath();
+  const grad = ctx2.createLinearGradient(0,0,0,c.height);
+  grad.addColorStop(0, 'rgba(0,229,255,0.4)');
+  grad.addColorStop(1, 'rgba(0,229,255,0)');
+  ctx2.fillStyle = grad; ctx2.fill();
+
+  ctx2.beginPath(); ctx2.strokeStyle='#00e5ff'; ctx2.lineWidth=2;
+  pts.forEach(([x,y],i) => i===0 ? ctx2.moveTo(x,y) : ctx2.lineTo(x,y));
+  ctx2.stroke();
+
+  // X axis labels
+  ctx2.fillStyle='#4a6070'; ctx2.font='10px Share Tech Mono'; ctx2.textAlign='center';
+  keys.forEach((k,i) => {
+    if (i % Math.ceil(keys.length/8) === 0)
+      ctx2.fillText(`${k*10}s`, pad+i*w, c.height-1);
+  });
+}
+
+// ══ LOGS ══════════════════════════════════════════════════════════════════
+async function loadLogs() {
+  try {
+    const r = await fetch(`${API_BASE}/logs`);
+    const d = await r.json();
+    const el = document.getElementById('logList');
+    if (!d.logs.length) {
+      el.innerHTML = '<div style="font-family:var(--mono);font-size:12px;color:var(--dim)">No log files yet.</div>';
+      return;
+    }
+    el.innerHTML = d.logs.map(f => `
+      <div class="log-entry">
+        <div>
+          <div class="log-filename">${f.name}</div>
+          <div class="log-meta">${f.size_kb} KB · ${new Date(f.modified*1000).toLocaleString()}</div>
+        </div>
+        <a class="log-dl" href="${API_BASE}/log/${f.name}" download>⬇ Download</a>
+      </div>
+    `).join('');
+  } catch {
+    document.getElementById('logList').innerHTML = '<div style="font-family:var(--mono);font-size:12px;color:var(--dim)">Server not reachable.</div>';
+  }
+}
+
+// ══ TOAST ════════════════════════════════════════════════════════════════
+function toast(msg, type='') {
+  const el = document.getElementById('toast');
+  el.textContent = msg;
+  el.className   = 'show ' + type;
+  clearTimeout(el._t);
+  el._t = setTimeout(() => el.className='', 3500);
+}
+</script>
+</body>
+</html>