Release: Optimized Processing Engine

Dockerfile

@@ -6,6 +6,7 @@ RUN apt-get update && apt-get install -y \
     libgl1 \
     libglib2.0-0 \
     curl \
+    ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
 COPY requirements.txt .

backend/engine.py

@@ -1,4 +1,6 @@
+import os
 import time
+import tempfile
 import numpy as np
 import cv2
 from collections import defaultdict
@@ -17,19 +19,53 @@ def _point_to_segment_dist(px, py, ax, ay, bx, by):
     return np.linalg.norm(P - (A + t * AB))
 
 
-def run(model, video_path, line, config, on_frame):
+# Lightweight drawing colors (BGR for OpenCV)
+_CLR_BOX = (230, 180, 50)     # teal-ish
+_CLR_LINE = (80, 220, 100)    # green
+_CLR_TEXT_BG = (30, 30, 30)   # dark bg for text
+
+
+def _draw_annotations(frame, boxes, ids, line_pts):
+    """Draw bounding boxes, track IDs, and counting line on frame in-place."""
+    # Counting line
+    cv2.line(frame, tuple(line_pts[0]), tuple(line_pts[1]), _CLR_LINE, 3, cv2.LINE_AA)
+
+    if boxes is not None and ids is not None:
+        for box, obj_id in zip(boxes, ids):
+            x1, y1, x2, y2 = map(int, box)
+            cv2.rectangle(frame, (x1, y1), (x2, y2), _CLR_BOX, 2)
+            label = f"ID:{int(obj_id)}"
+            (tw, th), _ = cv2.getTextSize(label, cv2.FONT_HERSHEY_SIMPLEX, 0.4, 1)
+            cv2.rectangle(frame, (x1, y1 - th - 6), (x1 + tw + 6, y1), _CLR_TEXT_BG, -1)
+            cv2.putText(frame, label, (x1 + 3, y1 - 4), cv2.FONT_HERSHEY_SIMPLEX, 0.4, (255, 255, 255), 1, cv2.LINE_AA)
+
+
+def run(model, video_path, line, config, on_frame, save_annotated=False):
     """
     Runs YOLO tracking on video. Calls on_frame(update_dict) after each processed frame.
     line: [[x1,y1], [x2,y2]]
+    save_annotated: if True, writes annotated MP4 with boxes + IDs + counting line
     """
     cap = cv2.VideoCapture(video_path)
     fps = cap.get(cv2.CAP_PROP_FPS)
     total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+    out_w = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    out_h = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
     cap.release()
 
     stride = config["detect_stride"]
     total_iters = total // stride
 
+    # Annotated video writer (temp directory — auto-cleaned on container shutdown)
+    annotated_path = None
+    writer = None
+    if save_annotated:
+        annotated_dir = os.path.join(tempfile.gettempdir(), "funky_reports")
+        os.makedirs(annotated_dir, exist_ok=True)
+        annotated_path = os.path.join(annotated_dir, "annotated.mp4")
+        fourcc = cv2.VideoWriter_fourcc(*"mp4v")
+        writer = cv2.VideoWriter(annotated_path, fourcc, fps / stride, (out_w, out_h))
+
     prev_side = {}
     counted_ids = set()
     class_in = defaultdict(int)
@@ -57,6 +93,8 @@ def run(model, video_path, line, config, on_frame):
 
     for frame_idx, r in enumerate(results):
         active = 0
+        cur_boxes = None
+        cur_ids = None
 
         if r.boxes.id is not None:
             ids = r.boxes.id.cpu().numpy()
@@ -67,6 +105,9 @@ def run(model, video_path, line, config, on_frame):
             confs = r.boxes.conf.cpu().numpy().tolist()
             conf_scores.extend(confs)
 
+            cur_boxes = xyxy
+            cur_ids = 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)
@@ -89,6 +130,12 @@ def run(model, video_path, line, config, on_frame):
 
                 prev_side[obj_id] = current
 
+        # Write annotated frame (only for frames we already process)
+        if writer is not None:
+            frame = r.orig_img.copy()
+            _draw_annotations(frame, cur_boxes, cur_ids, [a, b])
+            writer.write(frame)
+
         congestion.append(active)
 
         elapsed = time.time() - start
@@ -108,11 +155,14 @@ def run(model, video_path, line, config, on_frame):
 
         on_frame(update)
 
+    if writer is not None:
+        writer.release()
+
     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 {
+    result = {
         "class_in": dict(class_in),
         "class_out": dict(class_out),
         "congestion": congestion,
@@ -122,3 +172,8 @@ def run(model, video_path, line, config, on_frame):
         "actual_fps": actual_fps,
         "speed_vs_realtime": speed_vs_rt,
     }
+
+    if annotated_path and os.path.exists(annotated_path):
+        result["annotated_video"] = annotated_path
+
+    return result

backend/server.py

@@ -79,7 +79,16 @@ def generate_reports(video_id: str):
     if not data:
         return {"error": "no results", "files": []}
     out_dir = str(REPORT_DIR / video_id)
-    files = generate_all(data, MODEL_CLASSES, out_dir)
+    report_format = data.get("report_format", "png")
+    files = generate_all(data, MODEL_CLASSES, out_dir, report_format)
+    # Include annotated video if it exists
+    annotated_src = data.get("annotated_video")
+    if annotated_src and os.path.exists(annotated_src):
+        import shutil
+        dest = os.path.join(out_dir, "annotated.mp4")
+        if not os.path.exists(dest):
+            shutil.copy2(annotated_src, dest)
+        files.append("annotated.mp4")
     return {"files": files}
 
 
@@ -88,7 +97,12 @@ def get_report(video_id: str, name: str):
     path = REPORT_DIR / video_id / name
     if not path.exists():
         return Response(status_code=404)
-    return FileResponse(str(path), media_type="image/png")
+    media = "image/png"
+    if name.endswith(".pdf"):
+        media = "application/pdf"
+    elif name.endswith(".mp4"):
+        media = "video/mp4"
+    return FileResponse(str(path), media_type=media)
 
 
 @app.websocket("/ws/run")
@@ -99,6 +113,8 @@ async def ws_run(ws: WebSocket):
     video_id = data["video_id"]
     line = data["line"]
     cfg = data["config"]
+    save_annotated = data.get("annotated_video", False)
+    report_format = data.get("report_format", "png")
 
     path = videos.get(video_id)
 
@@ -109,7 +125,9 @@ async def ws_run(ws: WebSocket):
     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)
+    task = loop.run_in_executor(
+        None, run, model, path, line, cfg, on_frame, save_annotated
+    )
 
     try:
         while True:
@@ -124,6 +142,7 @@ async def ws_run(ws: WebSocket):
             await asyncio.sleep(0.05)
 
         result = task.result()
+        result["report_format"] = report_format
         run_results[video_id] = result
         await ws.send_text(json.dumps({
             "done": True,

backend/visualize.py

@@ -32,12 +32,14 @@ def _style(ax, title, xlabel="", ylabel=""):
     ax.set_axisbelow(True)
 
 
-def _save(fig, path):
+def _save(fig, path, fmt="png"):
+    if fmt == "pdf":
+        path = path.rsplit(".", 1)[0] + ".pdf"
     fig.savefig(path, dpi=200, bbox_inches="tight", facecolor=C_BG, edgecolor="none")
     plt.close(fig)
 
 
-def direction_pie(total_in, total_out, out_dir):
+def direction_pie(total_in, total_out, out_dir, fmt="png"):
     if total_in + total_out == 0:
         return None
     fig, ax = plt.subplots(figsize=(5, 5), facecolor=C_BG)
@@ -47,7 +49,7 @@ def direction_pie(total_in, total_out, out_dir):
         autopct="%1.1f%%",
         startangle=90,
         colors=[C_IN, C_OUT],
-        wedgeprops={"edgecolor": C_BG, "linewidth": 2.5},
+        wedgeprops={"edgecolor": C_BG, "linewidth": 2.5 if (total_in > 0 and total_out > 0) else 0},
         textprops={"fontsize": 10, "fontweight": "600", "color": C_PRIMARY},
     )
     for t in autotexts:
@@ -58,11 +60,12 @@ def direction_pie(total_in, total_out, out_dir):
     total = total_in + total_out
     ax.text(0, -1.35, f"Total: {total} vehicles", ha="center", fontsize=9, color=C_ACCENT, fontweight="500")
     path = os.path.join(out_dir, "direction_pie.png")
-    _save(fig, path)
-    return "direction_pie.png"
+    _save(fig, path, fmt)
+    ext = fmt if fmt == "pdf" else "png"
+    return f"direction_pie.{ext}"
 
 
-def flow_histogram(flow_times, out_dir):
+def flow_histogram(flow_times, out_dir, fmt="png"):
     if not flow_times:
         return None
     fig, ax = plt.subplots(figsize=(9, 4), facecolor=C_BG)
@@ -76,11 +79,12 @@ def flow_histogram(flow_times, out_dir):
             transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
             bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
     path = os.path.join(out_dir, "flow_over_time.png")
-    _save(fig, path)
-    return "flow_over_time.png"
+    _save(fig, path, fmt)
+    ext = fmt if fmt == "pdf" else "png"
+    return f"flow_over_time.{ext}"
 
 
-def congestion_chart(congestion, out_dir):
+def congestion_chart(congestion, out_dir, fmt="png"):
     if not congestion:
         return None
     fig, ax = plt.subplots(figsize=(10, 4), facecolor=C_BG)
@@ -99,11 +103,12 @@ def congestion_chart(congestion, out_dir):
             transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
             bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
     path = os.path.join(out_dir, "congestion_index.png")
-    _save(fig, path)
-    return "congestion_index.png"
+    _save(fig, path, fmt)
+    ext = fmt if fmt == "pdf" else "png"
+    return f"congestion_index.{ext}"
 
 
-def class_dominance(class_in, class_out, model_classes, out_dir):
+def class_dominance(class_in, class_out, model_classes, out_dir, fmt="png"):
     totals = {}
     for k in set(list(class_in.keys()) + list(class_out.keys())):
         totals[k] = class_in.get(k, 0) + class_out.get(k, 0)
@@ -129,11 +134,12 @@ def class_dominance(class_in, class_out, model_classes, out_dir):
             transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
             bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
     path = os.path.join(out_dir, "class_dominance.png")
-    _save(fig, path)
-    return "class_dominance.png"
+    _save(fig, path, fmt)
+    ext = fmt if fmt == "pdf" else "png"
+    return f"class_dominance.{ext}"
 
 
-def confidence_dist(conf_scores, out_dir):
+def confidence_dist(conf_scores, out_dir, fmt="png"):
     if not conf_scores:
         return None
     fig, ax = plt.subplots(figsize=(9, 4), facecolor=C_BG)
@@ -147,11 +153,12 @@ def confidence_dist(conf_scores, out_dir):
             transform=ax.transAxes, ha="right", va="top", fontsize=8, color=C_ACCENT,
             bbox=dict(boxstyle="round,pad=0.4", facecolor="#f8fafc", edgecolor=C_GRID))
     path = os.path.join(out_dir, "confidence_dist.png")
-    _save(fig, path)
-    return "confidence_dist.png"
+    _save(fig, path, fmt)
+    ext = fmt if fmt == "pdf" else "png"
+    return f"confidence_dist.{ext}"
 
 
-def generate_all(data, model_classes, out_dir):
+def generate_all(data, model_classes, out_dir, report_format="png"):
     os.makedirs(out_dir, exist_ok=True)
 
     plt.rcParams.update({
@@ -163,13 +170,15 @@ def generate_all(data, model_classes, out_dir):
     total_in = sum(data["class_in"].values())
     total_out = sum(data["class_out"].values())
 
+    fmt = report_format
+
     files = []
     for fn in [
-        lambda: direction_pie(total_in, total_out, out_dir),
-        lambda: flow_histogram(data.get("flow_times", []), out_dir),
-        lambda: congestion_chart(data.get("congestion", []), out_dir),
-        lambda: class_dominance(data["class_in"], data["class_out"], model_classes, out_dir),
-        lambda: confidence_dist(data.get("conf_scores", []), out_dir),
+        lambda: direction_pie(total_in, total_out, out_dir, fmt),
+        lambda: flow_histogram(data.get("flow_times", []), out_dir, fmt),
+        lambda: congestion_chart(data.get("congestion", []), out_dir, fmt),
+        lambda: class_dominance(data["class_in"], data["class_out"], model_classes, out_dir, fmt),
+        lambda: confidence_dist(data.get("conf_scores", []), out_dir, fmt),
     ]:
         name = fn()
         if name:

frontend/initial.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UrbanFlow - Enterprise Setup</title>
+    <title>UrbanFlow</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">
@@ -14,7 +14,7 @@
     <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-family: 'Montserrat', sans-serif;
         }
 
         .font-montserrat {
@@ -62,13 +62,6 @@
 
     <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
@@ -82,7 +75,7 @@
             <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
+                Powered by High-Density Vision Metrics
             </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
@@ -104,59 +97,25 @@
             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 text-center">Select AI Module</h2>
-                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-6 text-center">Choose an intelligence pipeline for
-                    your media
-                    stream.</p>
+            <div id="step-modules" class="w-full flex flex-col fade-in justify-center items-center">
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">UrbanFlow
+                </h2>
+                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-10 text-center">Active Analytical
+                    Environment: Traffic Dynamics</p>
 
-                <div class="grid grid-cols-2 gap-4">
+                <div class="flex justify-center w-full">
                     <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 text-center">
+                        class="group relative bg-white border-2 border-slate-900 rounded-[2rem] p-8 cursor-pointer hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full">
                         <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">
+                            class="absolute top-4 right-6 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 mx-auto"></i>
-                        <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight">Traffic <br>Analytics</h3>
-                        <p class="text-[10px] text-slate-500 font-montserrat font-medium">Detect, track, and analyze vehicles in
+                        <i class="fa-solid fa-car-side text-4xl text-slate-900 mb-4 block mx-auto"></i>
+                        <h3 class="font-montserrat font-bold text-lg mb-2 leading-tight">Traffic <br>Dynamics</h3>
+                        <p class="text-[10px] text-slate-500 font-montserrat font-medium leading-relaxed">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 text-center">
-                        <div
-                            class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
-                            Coming Soon</div>
-                        <i class="fa-solid fa-layer-group text-3xl text-slate-300 mb-4 block mx-auto"></i>
-                        <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Semantic
-                            <br>Segmentation
-                        </h3>
-                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">Pixel-perfect instance segmentation for
-                            complex spatial scene understanding.</p>
-                    </div>
-                    <div
-                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed text-center">
-                        <div
-                            class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
-                            Coming Soon</div>
-                        <i class="fa-solid fa-tags text-3xl text-slate-300 mb-4 block mx-auto"></i>
-                        <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Image
-                            <br>Classification
-                        </h3>
-                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">High-speed categorical labeling for vast and
-                            diverse image datasets.</p>
-                    </div>
-                    <div
-                        class="relative bg-slate-50 border border-slate-100 rounded-[1.5rem] p-6 opacity-60 cursor-not-allowed text-center">
-                        <div
-                            class="absolute top-4 right-4 bg-white border border-slate-200 text-slate-400 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
-                            Coming Soon</div>
-                        <i class="fa-solid fa-expand text-3xl text-slate-300 mb-4 block mx-auto"></i>
-                        <h3 class="font-montserrat font-bold text-sm mb-2 leading-tight text-slate-700">Custom
-                            <br>Detection
-                        </h3>
-                        <p class="text-[10px] text-slate-400 font-montserrat font-medium">Deploy proprietary neural networks for highly
-                            specialized edge inference.</p>
-                    </div>
                 </div>
             </div>
 
@@ -164,13 +123,14 @@
             <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
+                    <i class="fa-solid fa-arrow-left mr-2"></i> Back to Suite
                 </button>
-                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Initialize Media Source
+                <h2 class="text-3xl font-montserrat font-bold mb-2 text-slate-900 text-center">Define Media Source
                 </h2>
-                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-8 text-center">Provide the target video footage to
+                <p class="text-[13px] font-montserrat font-medium text-slate-400 mb-8 text-center">Provide the target
+                    video footage to
                     configure the
-                    Traffic Analytics pipeline.</p>
+                    analytical 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">
@@ -196,21 +156,7 @@
                 </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 text-center">System Configuration</h2>
-                <p
-                    class="text-[11px] font-montserrat font-bold text-slate-400 mb-8 uppercase tracking-widest text-center">
-                    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">
@@ -239,8 +185,8 @@
                         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
+                        class="w-2/3 py-3.5 bg-black text-white rounded-full font-montserrat font-medium hover:bg-slate-800 transition-all text-center text-sm xl:text-base">
+                        Continue &nbsp;&rarr;
                     </button>
                 </div>
             </div>
@@ -252,20 +198,12 @@
         let videoId = null;
         let runConfig = {};
 
-        const configParams = [
-            { key: "imgsz", label: "Image Size", step: 32, min: 640, max: 1280 },
-            { key: "conf", label: "Confidence", step: 0.01, min: 0.08, max: 1.0, decimals: 2 },
-            { key: "iou", label: "IoU Threshold", step: 0.05, min: 0.5, 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 => {
+            ['modules', 'upload', '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();
         }
 
@@ -319,53 +257,14 @@
                         runConfig.conf = 0.12;
                         runConfig.iou = 0.60;
                         txt.innerText = 'Initialization Complete';
-                        setTimeout(() => showStep('config'), 400);
+                        setTimeout(() => showStep('draw'), 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');

frontend/settings.html

@@ -0,0 +1,426 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UrbanFlow</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;800&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;
+        }
+
+        .toggle-track {
+            width: 36px;
+            height: 20px;
+            border-radius: 10px;
+            background: #cbd5e1;
+            position: relative;
+            cursor: pointer;
+            transition: background 0.2s;
+            flex-shrink: 0;
+        }
+
+        .toggle-track.active {
+            background: #0f172a;
+        }
+
+        .toggle-thumb {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #fff;
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            transition: transform 0.2s;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+        }
+
+        .toggle-track.active .toggle-thumb {
+            transform: translateX(16px);
+        }
+
+        .toggle-track.locked {
+            opacity: 0.4;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .custom-select {
+            appearance: none;
+            background: #f8fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 6px 32px 6px 12px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #1e293b;
+            cursor: pointer;
+            outline: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 14px;
+            transition: border-color 0.15s;
+        }
+
+        .custom-select:hover {
+            border-color: #94a3b8;
+        }
+
+        .custom-select:focus {
+            border-color: #0f172a;
+        }
+
+        .custom-select:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .stepper-btn {
+            cursor: pointer;
+        }
+
+        .stepper-btn:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        .setting-card {
+            background: #fff;
+            border: 1px solid #e2e8f0;
+            border-radius: 16px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+            overflow: hidden;
+        }
+
+        .setting-card-header {
+            padding: 16px 24px;
+            border-bottom: 1px solid #f1f5f9;
+        }
+
+        .setting-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 14px 24px;
+            border-bottom: 1px solid #f8fafc;
+        }
+
+        .setting-row:last-child {
+            border-bottom: 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-6 flex flex-col items-center flex-shrink-0 w-full z-10">
+        <img src="uf_logo.png" alt="UrbanFlow Logo" class="h-28 w-auto object-contain mb-2">
+        <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">
+                Configure & Launch
+            </p>
+            <span class="w-12 h-[1px] bg-slate-200"></span>
+        </div>
+    </header>
+
+    <main class="flex-1 w-full max-w-4xl mx-auto px-8 py-6 z-10 fade-in">
+
+        <div class="grid grid-cols-2 gap-5 mb-6">
+
+            <!-- Processing Parameters (locked once started) -->
+            <div class="setting-card" id="card-processing">
+                <div class="setting-card-header">
+                    <h3 class="font-montserrat font-bold text-slate-900 text-base">Processing Parameters</h3>
+                    <p class="text-[10px] font-montserrat font-medium text-slate-400 mt-1 uppercase tracking-widest">
+                        Auto-configured · adjustable before start</p>
+                </div>
+
+                <!-- Image Size -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Image Size</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Model input resolution</div>
+                    </div>
+                    <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="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('imgsz',-1)">
+                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
+                        </button>
+                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
+                            id="val-imgsz">640</span>
+                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('imgsz',1)">
+                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Confidence -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Confidence</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Minimum detection threshold</div>
+                    </div>
+                    <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="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('conf',-1)">
+                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
+                        </button>
+                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
+                            id="val-conf">0.12</span>
+                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('conf',1)">
+                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- IoU -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">IoU Threshold</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Non-max suppression overlap</div>
+                    </div>
+                    <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="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('iou',-1)">
+                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
+                        </button>
+                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
+                            id="val-iou">0.60</span>
+                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('iou',1)">
+                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Frame Stride -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Frame Stride</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Frames skipped between detections</div>
+                    </div>
+                    <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="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('detect_stride',-1)">
+                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
+                        </button>
+                        <span class="mono-font font-bold w-12 text-center text-slate-900 text-sm"
+                            id="val-detect_stride">3</span>
+                        <button class="stepper-btn text-slate-400 hover:text-black transition p-1"
+                            onclick="adjust('detect_stride',1)">
+                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Report Format -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Report Format</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Export file type for report charts</div>
+                    </div>
+                    <select class="custom-select" id="sel-report-format">
+                        <option value="png" selected>PNG Image</option>
+                        <option value="pdf">PDF Document</option>
+                    </select>
+                </div>
+
+                <!-- Annotated Video -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Export Annotated Video</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Bounding boxes + track IDs + counting line</div>
+                    </div>
+                    <div class="toggle-track" id="tog-annotated" onclick="toggleSwitch(this)">
+                        <div class="toggle-thumb"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Display Preferences (editable anytime) -->
+            <div class="setting-card" id="card-display">
+                <div class="setting-card-header">
+                    <h3 class="font-montserrat font-bold text-slate-900 text-base">Display Preferences</h3>
+                    <p class="text-[10px] font-montserrat font-medium text-slate-400 mt-1 uppercase tracking-widest">
+                        Editable anytime · applies to live charts</p>
+                </div>
+
+                <!-- Chart Color Palette -->
+                <div class="setting-row">
+                    <div>
+                        <div class="text-xs font-semibold text-slate-700">Chart Color Palette</div>
+                        <div class="text-[10px] text-slate-400 mt-0.5">Color scheme for all dashboard charts</div>
+                    </div>
+                    <select class="custom-select" id="sel-palette">
+                        <option value="default" selected>Default</option>
+                        <option value="vibrant">Vibrant</option>
+                        <option value="corporate">Corporate</option>
+                    </select>
+                </div>
+
+                <!-- Palette Preview -->
+                <div class="px-6 py-4">
+                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">Palette Preview
+                    </div>
+                    <div class="flex gap-2" id="palette-preview"></div>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Start Button -->
+        <button id="btn-start" onclick="startProcessing()"
+            class="w-full py-4 bg-black text-white rounded-full font-montserrat font-semibold hover:bg-slate-800 transition-all text-lg flex justify-center items-center shadow-lg">
+            Start Processing <i class="fa-solid fa-arrow-right ml-3 text-sm"></i>
+        </button>
+
+    </main>
+
+    <script>
+        // =========== Config params ===========
+        const paramDefs = {
+            imgsz: { step: 32, min: 640, max: 1280, decimals: 0 },
+            conf: { step: 0.01, min: 0.08, max: 1.0, decimals: 2 },
+            iou: { step: 0.05, min: 0.5, max: 1.0, decimals: 2 },
+            detect_stride: { step: 1, min: 1, max: 10, decimals: 0 }
+        };
+
+        // =========== Palette definitions ===========
+        const PALETTES = {
+            default: { congestion: '#f97316', dominance: '#14b8a6', flow: '#3b82f6', label: 'Default' },
+            vibrant: { congestion: '#e11d48', dominance: '#8b5cf6', flow: '#06b6d4', label: 'Vibrant' },
+            corporate: { congestion: '#1e40af', dominance: '#0d9488', flow: '#475569', label: 'Corporate' }
+        };
+
+        // =========== Load run data from initial.html ===========
+        const raw = sessionStorage.getItem('funky_run');
+        if (!raw) { window.location.href = '/'; }
+        const runData = JSON.parse(raw);
+        const config = runData.config;
+
+        // Populate stepper values from auto-calculated config
+        function renderValues() {
+            for (const key of Object.keys(paramDefs)) {
+                const d = paramDefs[key].decimals;
+                const val = config[key];
+                document.getElementById('val-' + key).innerText = d ? val.toFixed(d) : val;
+            }
+        }
+        renderValues();
+
+        // =========== Stepper ===========
+        function adjust(key, dir) {
+            const p = paramDefs[key];
+            let val = config[key] + dir * p.step;
+            val = Math.max(p.min, Math.min(p.max, val));
+            val = p.decimals ? parseFloat(val.toFixed(p.decimals)) : Math.round(val);
+            config[key] = val;
+            document.getElementById('val-' + key).innerText = p.decimals ? val.toFixed(p.decimals) : val;
+        }
+
+        // =========== Toggle ===========
+        function toggleSwitch(el) {
+            if (el.classList.contains('locked')) return;
+            el.classList.toggle('active');
+        }
+
+        // =========== Palette preview ===========
+        function updatePalettePreview() {
+            const key = document.getElementById('sel-palette').value;
+            const pal = PALETTES[key];
+            const container = document.getElementById('palette-preview');
+            const colors = [
+                { color: pal.congestion, label: 'Congestion' },
+                { color: pal.dominance, label: 'Dominance' },
+                { color: pal.flow, label: 'Flow' }
+            ];
+            container.innerHTML = colors.map(c =>
+                `<div class="flex-1 rounded-lg overflow-hidden border border-slate-100">
+                    <div class="h-8" style="background:${c.color}"></div>
+                    <div class="text-[9px] font-bold text-slate-500 text-center py-1.5 bg-slate-50">${c.label}</div>
+                </div>`
+            ).join('');
+        }
+        document.getElementById('sel-palette').addEventListener('change', updatePalettePreview);
+        updatePalettePreview();
+
+        // =========== Start Processing ===========
+        function startProcessing() {
+            // Gather settings
+            const settings = {
+                reportFormat: document.getElementById('sel-report-format').value,
+                annotatedVideo: document.getElementById('tog-annotated').classList.contains('active'),
+                palette: document.getElementById('sel-palette').value
+            };
+
+            // Update config from steppers (already in config object)
+            // Save everything to sessionStorage
+            sessionStorage.setItem('funky_run', JSON.stringify({
+                video_id: runData.video_id,
+                line: runData.line,
+                config: config,
+                settings: settings
+            }));
+
+            window.location.href = 'vehicles.html';
+        }
+    </script>
+</body>
+
+</html>

frontend/vehicles.html

@@ -4,16 +4,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UrbanFlow - Dashboard</title>
+    <title>UrbanFlow</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=Inter:wght@400;500;600;700;800&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;500&display=swap" rel="stylesheet">
     <style>
         body {
-            font-family: 'Inter', sans-serif;
+            font-family: 'Montserrat', sans-serif;
         }
 
         .mono-font {
@@ -85,6 +87,126 @@
         .info-wrap:hover .info-tip {
             display: block;
         }
+
+        /* Settings controls */
+        .toggle-track {
+            width: 36px;
+            height: 20px;
+            border-radius: 10px;
+            background: #cbd5e1;
+            position: relative;
+            cursor: pointer;
+            transition: background 0.2s;
+            flex-shrink: 0;
+        }
+
+        .toggle-track.active {
+            background: #0f172a;
+        }
+
+        .toggle-thumb {
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #fff;
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            transition: transform 0.2s;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+        }
+
+        .toggle-track.active .toggle-thumb {
+            transform: translateX(16px);
+        }
+
+        .toggle-track.locked {
+            opacity: 0.4;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+
+        .custom-select {
+            appearance: none;
+            background: #f8fafc;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 6px 32px 6px 12px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #1e293b;
+            cursor: pointer;
+            outline: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 14px;
+            transition: border-color 0.15s;
+        }
+
+        .custom-select:hover {
+            border-color: #94a3b8;
+        }
+
+        .custom-select:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .s-stepper {
+            display: inline-flex;
+            align-items: center;
+            border: 1px solid #e2e8f0;
+            border-radius: 10px;
+            background: #f8fafc;
+            overflow: hidden;
+        }
+
+        .s-stepper button {
+            background: none;
+            border: none;
+            padding: 4px 10px;
+            cursor: pointer;
+            color: #64748b;
+            font-size: 14px;
+            line-height: 1;
+        }
+
+        .s-stepper button:hover {
+            background: #e2e8f0;
+        }
+
+        .s-stepper button:disabled {
+            opacity: 0.25;
+            cursor: not-allowed;
+        }
+
+        .s-stepper .s-val {
+            min-width: 48px;
+            text-align: center;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
+            font-weight: 700;
+            color: #0f172a;
+            padding: 4px 0;
+        }
+
+        .s-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid #f1f5f9;
+        }
+
+        .s-row:last-child {
+            border-bottom: none;
+        }
+
+        .s-row.disabled {
+            opacity: 0.45;
+            pointer-events: none;
+        }
     </style>
 </head>
 
@@ -96,35 +218,25 @@
             <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('about')" id="nav-about"
+                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-circle-info w-6"></i> <span class="font-medium">About</span>
+            </a>
             <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">
+                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-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>
+                <i class="fa-solid fa-microchip w-6"></i> <span class="font-medium">Run</span>
             </a>
             <a onclick="switchTab('reports')" id="nav-reports"
                 class="flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer">
                 <i class="fa-solid fa-file-lines w-6"></i> <span class="font-medium">Reports</span>
             </a>
-            <a
-                class="flex items-center justify-between px-4 py-2.5 text-slate-400 bg-slate-50 rounded-lg opacity-60 cursor-not-allowed">
-                <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 onclick="switchTab('settings')" id="nav-settings"
+                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-sliders w-6"></i> <span class="font-medium">Settings</span>
             </a>
         </nav>
         <div class="mt-auto border-t border-slate-100 p-4 flex items-center justify-center bg-white flex-shrink-0">
@@ -134,167 +246,232 @@
 
     <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
 
+        <!-- TAB: About -->
+        <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-8 max-w-[1400px] w-full">
+                <h2 class="text-2xl font-bold text-slate-800 mb-6">UrbanFlow</h2>
+
+                <div class="mb-10 py-6 border-y border-slate-50">
+                    <p
+                        class="max-w-3xl mx-auto text-center text-slate-400 text-sm font-semibold leading-relaxed tracking-wide italic px-8">
+                        "Urban Flow is more than a metric of transit; it is the pulse of a city’s collective intent.
+                        This workspace is designed to observe that rhythm, transforming raw motion into the clarity
+                        required for decisive, visionary infrastructure."
+                    </p>
+                </div>
+
+                <div class="space-y-6 text-slate-600 leading-relaxed">
+                    <p>
+                        UrbanFlow is an advanced vision intelligence suite designed for real-time traffic dynamics
+                        analysis.
+                        Leveraging state-of-the-art deep learning models, it provides consultative-grade insights into
+                        vehicle movement, classification, and throughput.
+                    </p>
+                    <p>
+                        This platform is engineered for urban planners and infrastructure executives who require
+                        high-density data to drive visionary urban transformation. By transforming raw video footage
+                        into actionable intelligence, UrbanFlow enables data-driven decision making for safer,
+                        more efficient urban mobility.
+                    </p>
+                    <div class="grid grid-cols-2 gap-8 pt-6 border-t border-slate-50">
+                        <div class="space-y-4">
+                            <h4 class="font-bold text-slate-800 text-sm uppercase tracking-wider">Core Capabilities</h4>
+                            <ul class="text-xs space-y-2">
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> Real-time Spatial
+                                    Detection</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> Multi-class Object
+                                    Tracking</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> Bidirectional Flow
+                                    Analysis</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> High-Density Metrics
+                                    Capture</li>
+                            </ul>
+                        </div>
+                        <div class="space-y-4">
+                            <h4 class="font-bold text-slate-800 text-sm uppercase tracking-wider">Intelligence Framework
+                            </h4>
+                            <ul class="text-xs space-y-2">
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> OpenVINO Performance
+                                    Optimization</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> ByteTrack Temporal
+                                    Assignment</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> Sub-millimeter
+                                    Coordinate Logic</li>
+                                <li class="flex items-center gap-2"><i
+                                        class="fa-solid fa-circle text-[6px] text-slate-400"></i> Enterprise MIS
+                                    Compliance</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
         <!-- 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 class="flex items-center space-x-4 flex-1 mr-6">
+                <span class="text-[11px] font-black text-slate-900 uppercase tracking-wider whitespace-nowrap"
+                    id="proc-label">Waiting</span>
+                <div class="flex-1 h-2 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">
+            <div class="flex items-center space-x-6 text-xs font-bold text-slate-900 whitespace-nowrap">
                 <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-6 gap-4 flex-1 min-h-0 grid-rows-2">
+        <div id="tab-overview" class="grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden">
 
             <!-- Congestion Index -->
-            <div class="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+            <div
+                class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
                 <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Real-time Congestion Index
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
                             <span class="info-tip">Count of active tracked vehicles visible in each processed
                                 frame.</span></span>
                     </h3>
                 </div>
-                <div class="flex-1 relative w-full min-h-0">
+                <div class="flex-1 relative w-full min-h-[220px]">
                     <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">
+            <!-- Doughnut — In / Out -->
+            <div
+                class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col items-center justify-center min-h-0">
+                <h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution
+                    <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                        <span class="info-tip">Incoming vs outgoing vehicles analyzed within the spatial
+                            boundary.</span></span>
+                </h3>
+                <div class="relative w-full flex-1 min-h-[180px] flex items-center justify-center">
+                    <canvas id="doughnutChart"></canvas>
+                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                         <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>
+                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Units</span>
                     </div>
                 </div>
             </div>
 
             <!-- Vehicle Classification Breakdown -->
             <div
-                class="col-span-2 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col overflow-hidden min-h-0">
                 <div class="flex justify-between items-center mb-1 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Classification
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Vehicle Classification
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
                             <span class="info-tip">Per-class vehicle distribution with directional split across the
-                                counting line.</span></span>
+                                spatial boundary.</span></span>
                     </h3>
                 </div>
-                <div class="text-[10px] text-slate-400 mb-3">By vehicle subclass</div>
-                <div class="flex-1 overflow-y-auto pr-3 space-y-2" id="class-breakdown"></div>
+                <div class="text-[10px] text-slate-400 mb-3 uppercase tracking-widest">Inventory Breakdown</div>
+                <div class="flex-1 overflow-y-auto pr-2 space-y-2" id="class-breakdown"></div>
             </div>
 
             <!-- Class Dominance -->
-            <div class="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+            <div
+                class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
                 <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Class Dominance
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Category Dominance
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                            <span class="info-tip">Aggregated vehicle count grouped by business category.</span></span>
+                            <span class="info-tip">Aggregated vehicle count grouped by dominant category.</span></span>
                     </h3>
-                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Grouped
-                        Categories</span>
+                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Dominant
+                        Intelligence</span>
                 </div>
-                <div class="flex-1 w-full relative min-h-0">
+                <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="dominanceChart"></canvas>
                 </div>
             </div>
 
             <!-- Traffic Flow Over Time -->
-            <div class="col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col">
+            <div
+                class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
                 <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Traffic Flow
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Temporal Traffic Flow
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                            <span class="info-tip">Number of vehicles crossing the counting line, binned per second of
-                                video duration.</span></span>
+                            <span class="info-tip">Number of vehicles analyzed within the spatial boundary, binned per
+                                second of video duration.</span></span>
                     </h3>
-                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Vehicles / Sec</span>
+                    <span class="text-[10px] text-slate-500 font-bold uppercase tracking-wider">Units / Second</span>
                 </div>
-                <div class="flex-1 w-full relative min-h-0">
+                <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="flowChart"></canvas>
                 </div>
             </div>
 
         </div>
 
-        <!-- TAB: Run Details -->
+        <!-- TAB: Run -->
         <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="grid grid-cols-2 gap-4">
-                <!-- 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>
+            <div class="space-y-6 w-full max-w-[1400px]">
 
-                <!-- 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>
+                <!-- HERO: Process Analytics -->
+                <div id="run-results-card"
+                    class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
+                    <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
+                        <div>
+                            <h3 class="font-bold text-slate-800 text-sm">Process Analytics</h3>
+                            <p
+                                class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-widest font-medium text-center">
+                                Execution Telemetry</p>
+                        </div>
+                        <div id="results-status-badge"
+                            class="px-2.5 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-full uppercase tracking-tighter">
+                            Awaiting Execution
+                        </div>
                     </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 class="p-8">
+                        <div id="run-results-content" class="grid grid-cols-3 gap-12">
+                            <div
+                                class="flex flex-col items-center justify-center p-8 border-2 border-dashed border-slate-100 rounded-2xl col-span-3 text-slate-300">
+                                <i class="fa-solid fa-chart-line text-4xl mb-4"></i>
+                                <span class="text-xs font-semibold">Initiate a run to view performance insights</span>
+                            </div>
+                        </div>
                     </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>
+                <!-- Technical Context Row -->
+                <div class="grid grid-cols-3 gap-6">
+                    <div class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+                            <h3 class="font-bold text-slate-800 text-sm">Stream Source Profile</h3>
+                        </div>
+                        <div class="p-6 space-y-4" id="panel-video"></div>
                     </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 class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+                            <h3 class="font-bold text-slate-800 text-sm">System Resource Utilization</h3>
+                        </div>
+                        <div class="p-6 space-y-4" id="panel-perf"></div>
                     </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 class="bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden">
+                        <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+                            <h3 class="font-bold text-slate-800 text-sm">Model Architecture & Logic</h3>
+                        </div>
+                        <div class="p-6 space-y-4" id="panel-model"></div>
                     </div>
                 </div>
+
             </div>
         </div>
 
+
+
         <!-- TAB: Reports -->
         <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending" class="flex flex-col items-center justify-center h-full">
@@ -304,6 +481,122 @@
             <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
         </div>
 
+        <!-- TAB: Settings -->
+        <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
+            <div class="grid grid-cols-3 gap-6 w-full">
+
+                <!-- Processing Parameters -->
+                <div class="col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+                    <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm flex items-center">Inference Configuration Profile
+                            <span class="info-wrap">
+                                <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                <span class="info-tip">Figures and numbers below are auto-calculated for best
+                                    performance.</span>
+                            </span>
+                        </h3>
+                        <p class="text-[10px] text-slate-400 mt-0.1 uppercase tracking-widest font-medium">
+                            Auto-configured pipeline parameters</p>
+                    </div>
+                    <div class="px-6 py-2" id="settings-params">
+                        <div class="s-row" data-param="imgsz">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Image Size</div>
+                                <div class="text-[10px] text-slate-400">Model input resolution</div>
+                            </div>
+                            <div class="s-stepper"><button onclick="stepParam('imgsz',-32)">&#8249;</button><span
+                                    class="s-val" id="sv-imgsz">640</span><button
+                                    onclick="stepParam('imgsz',32)">&#8250;</button></div>
+                        </div>
+                        <div class="s-row" data-param="conf">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Confidence</div>
+                                <div class="text-[10px] text-slate-400">Minimum detection threshold</div>
+                            </div>
+                            <div class="s-stepper"><button onclick="stepParam('conf',-0.01)">&#8249;</button><span
+                                    class="s-val" id="sv-conf">0.12</span><button
+                                    onclick="stepParam('conf',0.01)">&#8250;</button></div>
+                        </div>
+                        <div class="s-row" data-param="iou">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">IoU Threshold</div>
+                                <div class="text-[10px] text-slate-400">Non-max suppression overlap</div>
+                            </div>
+                            <div class="s-stepper"><button onclick="stepParam('iou',-0.05)">&#8249;</button><span
+                                    class="s-val" id="sv-iou">0.60</span><button
+                                    onclick="stepParam('iou',0.05)">&#8250;</button></div>
+                        </div>
+                        <div class="s-row" data-param="stride">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Frame Stride</div>
+                                <div class="text-[10px] text-slate-400">Frames skipped between detections</div>
+                            </div>
+                            <div class="s-stepper"><button onclick="stepParam('stride',-1)">&#8249;</button><span
+                                    class="s-val" id="sv-stride">2</span><button
+                                    onclick="stepParam('stride',1)">&#8250;</button></div>
+                        </div>
+                        <div class="s-row" data-param="report">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Report Format</div>
+                                <div class="text-[10px] text-slate-400">Export file type for charts</div>
+                            </div>
+                            <select class="custom-select" id="sv-report">
+                                <option value="png" selected>PNG Image</option>
+                                <option value="pdf">PDF Document</option>
+                            </select>
+                        </div>
+                        <div class="s-row" data-param="annotated">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Export Annotated Video</div>
+                                <div class="text-[10px] text-slate-400">Bounding boxes + track IDs + spatial boundary
+                                    overlays</div>
+                            </div>
+                            <div class="toggle-track" id="sv-annotated" onclick="this.classList.toggle('active')">
+                                <div class="toggle-thumb"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Display Preferences -->
+                <div
+                    class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
+                    <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
+                        <h3 class="font-bold text-slate-800 text-sm">Display Preferences</h3>
+                    </div>
+                    <div class="px-5 py-4 flex-1 flex flex-col">
+                        <div class="s-row">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700">Chart Color Palette</div>
+                                <div class="text-[10px] text-slate-400">Color scheme for all charts</div>
+                            </div>
+                            <select class="custom-select" id="live-palette-select" onchange="applyPalette(this.value)">
+                                <option value="default">Default</option>
+                                <option value="vibrant">Vibrant</option>
+                                <option value="corporate">Corporate</option>
+                            </select>
+                        </div>
+                        <div class="mt-3">
+                            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">Palette
+                                Preview</div>
+                            <div class="flex gap-1.5" id="live-palette-preview"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Start Button -->
+                <div class="col-span-3 pb-4" id="settings-start-wrap">
+                    <button id="btn-start-processing" onclick="startProcessingFromSettings()"
+                        class="w-full py-4 bg-slate-900 text-white font-medium text-sm rounded-full hover:bg-slate-800 active:scale-[0.99] transition flex items-center justify-center gap-2 shadow-lg">
+                        <span>Process &nbsp;&rarr;</span>
+                    </button>
+                </div>
+
+
+
+            </div>
+        </div>
+
     </main>
 
     <script>
@@ -326,20 +619,20 @@
 
         // =========== 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');
-            document.getElementById('tab-reports').classList.toggle('hidden', tab !== 'reports');
-
-            const navO = document.getElementById('nav-overview');
-            const navR = document.getElementById('nav-run-details');
-            const navRp = document.getElementById('nav-reports');
-
-            const active = 'flex items-center px-4 py-2.5 bg-slate-900 text-white rounded-lg shadow-md transition cursor-pointer';
-            const idle = 'flex items-center px-4 py-2.5 text-slate-600 hover:bg-slate-50 hover:text-slate-900 rounded-lg transition cursor-pointer';
-
-            navO.className = tab === 'overview' ? active : idle;
-            navR.className = tab === 'run-details' ? active : idle;
-            navRp.className = tab === 'reports' ? active : idle;
+            ['about', 'overview', 'run-details', 'reports', 'settings'].forEach(t => {
+                const el = document.getElementById('tab-' + t);
+                const nav = document.getElementById('nav-' + t);
+                if (el) el.classList.toggle('hidden', tab !== t);
+                if (nav) {
+                    if (tab === t) {
+                        nav.classList.add('bg-slate-900', 'text-white', 'shadow-md');
+                        nav.classList.remove('text-slate-600', 'hover:bg-slate-50', 'hover:text-slate-900');
+                    } else {
+                        nav.classList.remove('bg-slate-900', 'text-white', 'shadow-md');
+                        nav.classList.add('text-slate-600', 'hover:bg-slate-50', 'hover:text-slate-900');
+                    }
+                }
+            });
         }
 
         // =========== Run Details helpers ===========
@@ -397,7 +690,7 @@
             document.getElementById('panel-model').innerHTML =
                 `<div class="flex justify-between items-center border-b border-slate-50 pb-2">
                     <span class="text-xs font-medium text-slate-500 mono-font">model</span>
-                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded border border-blue-100 mono-font hover:bg-blue-100 transition">Perception365/VehicleNet-Y26s</a>
+                    <a href="https://huggingface.co/Perception365/VehicleNet-Y26s" target="_blank" class="text-sm font-bold text-slate-800 mono-font hover:text-slate-600 transition underline underline-offset-4 decoration-slate-200">Perception365/VehicleNet-Y26s</a>
                 </div>` +
                 detailRow('task', 'detect') +
                 detailRow('format', 'OpenVINO') +
@@ -405,15 +698,28 @@
 
             document.getElementById('panel-infer').innerHTML =
                 infoRow('imgsz', c.imgsz, 'Input image resolution for model inference.') +
-                infoRow('vid_stride', c.detect_stride, 'Frames skipped between consecutive detections.') +
+                infoRow('vid_stride', c.detect_stride, 'Frames skipped between consecutive detections relative to the spatial boundary.') +
                 infoRow('conf', c.conf || 0.12, 'Minimum confidence threshold for valid detections.') +
                 infoRow('iou', c.iou || 0.60, 'Intersection-over-Union threshold for non-max suppression.') +
                 infoRow('stream', 'TRUE', 'Frame-by-frame processing for constant memory usage.') +
                 infoRow('verbose', 'FALSE', 'Console logging suppressed during inference.');
         }
 
+        // =========== Palettes ===========
+        const PALETTES = {
+            default: { congestion: '#f97316', congestionBg: 'rgba(249,115,22,0.08)', dominance: '#14b8a6', flow: '#3b82f6', doughIn: '#3b82f6', doughOut: '#f97316' },
+            vibrant: { congestion: '#e11d48', congestionBg: 'rgba(225,29,72,0.08)', dominance: '#8b5cf6', flow: '#06b6d4', doughIn: '#06b6d4', doughOut: '#e11d48' },
+            corporate: { congestion: '#1e40af', congestionBg: 'rgba(30,64,175,0.08)', dominance: '#0d9488', flow: '#475569', doughIn: '#475569', doughOut: '#1e40af' }
+        };
+
+        // Read settings from sessionStorage (set by settings.html)
+        const rawRun = sessionStorage.getItem('funky_run');
+        const runSettings = rawRun ? (JSON.parse(rawRun).settings || {}) : {};
+        let currentPalette = runSettings.palette || 'default';
+        let activePalette = PALETTES[currentPalette];
+
         // =========== Charts ===========
-        Chart.defaults.font.family = "'Inter', sans-serif";
+        Chart.defaults.font.family = "'Montserrat', sans-serif";
         Chart.defaults.color = '#64748b';
 
         let MODEL_CLASSES = {};
@@ -421,7 +727,17 @@
 
         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 }] },
+            data: {
+                labels: [], datasets: [{
+                    data: [],
+                    borderColor: activePalette.congestion,
+                    backgroundColor: activePalette.congestionBg,
+                    fill: true,
+                    tension: 0.2,
+                    borderWidth: 1.5,
+                    pointRadius: 0
+                }]
+            },
             options: {
                 responsive: true, maintainAspectRatio: false,
                 plugins: { legend: { display: false } },
@@ -433,9 +749,30 @@
             }
         });
 
+        const doughChart = new Chart(document.getElementById('doughnutChart').getContext('2d'), {
+            type: 'doughnut',
+            data: {
+                labels: ['Incoming', 'Outgoing'], datasets: [{
+                    data: [0, 0],
+                    backgroundColor: [activePalette.doughIn, activePalette.doughOut],
+                    borderColor: '#ffffff',
+                    borderWidth: 3,
+                    hoverOffset: 6
+                }]
+            },
+            options: {
+                responsive: true, maintainAspectRatio: false,
+                cutout: '68%',
+                plugins: {
+                    legend: { display: true, position: 'bottom', labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 10, weight: '600' } } }
+                },
+                animation: { duration: 0 }
+            }
+        });
+
         const domChart = new Chart(document.getElementById('dominanceChart').getContext('2d'), {
             type: 'bar',
-            data: { labels: [], datasets: [{ data: [], backgroundColor: '#14b8a6', borderRadius: 2 }] },
+            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.dominance, borderRadius: 2 }] },
             options: {
                 responsive: true, maintainAspectRatio: false,
                 plugins: { legend: { display: false } },
@@ -449,7 +786,7 @@
 
         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 }] },
+            data: { labels: [], datasets: [{ data: [], backgroundColor: activePalette.flow, borderColor: '#ffffff', borderWidth: 1.5, barPercentage: 1.0, categoryPercentage: 1.0 }] },
             options: {
                 responsive: true, maintainAspectRatio: false,
                 plugins: { legend: { display: false } },
@@ -464,11 +801,113 @@
         // =========== Update functions ===========
         function sumValues(obj) { return Object.values(obj).reduce((a, b) => a + b, 0); }
 
+        // =========== Live Palette Switching ===========
+        function applyPalette(key) {
+            activePalette = PALETTES[key] || PALETTES.default;
+            currentPalette = key;
+
+            // Congestion
+            congChart.data.datasets[0].borderColor = activePalette.congestion;
+            congChart.data.datasets[0].backgroundColor = activePalette.congestionBg;
+            congChart.update();
+
+            // Doughnut
+            doughChart.data.datasets[0].backgroundColor = [activePalette.doughIn, activePalette.doughOut];
+            doughChart.update();
+
+            // Dominance
+            domChart.data.datasets[0].backgroundColor = activePalette.dominance;
+            domChart.update();
+
+            // Flow
+            flowChart.data.datasets[0].backgroundColor = activePalette.flow;
+            flowChart.update();
+
+            // Update palette preview
+            renderPalettePreview(key);
+        }
+
+        function renderPalettePreview(key) {
+            const pal = PALETTES[key];
+            const colors = [
+                { color: pal.congestion, label: 'Congestion' },
+                { color: pal.dominance, label: 'Dominance' },
+                { color: pal.flow, label: 'Flow' },
+                { color: pal.doughIn, label: 'Incoming' },
+                { color: pal.doughOut, label: 'Outgoing' }
+            ];
+            const el = document.getElementById('live-palette-preview');
+            if (el) {
+                el.innerHTML = colors.map(c =>
+                    `<div class="flex-1 rounded-lg overflow-hidden border border-slate-100">
+                        <div class="h-6" style="background:${c.color}"></div>
+                        <div class="text-[8px] font-bold text-slate-400 text-center py-1 bg-slate-50">${c.label}</div>
+                    </div>`
+                ).join('');
+            }
+        }
+
+        function populateSettingsTab(config, settings) {
+            // Populate stepper values from config
+            document.getElementById('sv-imgsz').textContent = config.imgsz || 640;
+            document.getElementById('sv-conf').textContent = (config.conf || 0.12).toFixed(2);
+            document.getElementById('sv-iou').textContent = (config.iou || 0.60).toFixed(2);
+            document.getElementById('sv-stride').textContent = config.detect_stride || 2;
+
+            // Populate export settings
+            const selReport = document.getElementById('sv-report');
+            if (selReport) selReport.value = settings.reportFormat || 'png';
+            const togAnnot = document.getElementById('sv-annotated');
+            if (togAnnot && settings.annotatedVideo) togAnnot.classList.add('active');
+
+            // Set live palette dropdown
+            const sel = document.getElementById('live-palette-select');
+            if (sel) sel.value = currentPalette;
+            renderPalettePreview(currentPalette);
+        }
+
+        // =========== Settings Stepper Logic ===========
+        const PARAM_LIMITS = {
+            imgsz: { min: 640, max: 1280 },
+            conf: { min: 0.10, max: 0.95 },
+            iou: { min: 0.50, max: 0.95 },
+            stride: { min: 1, max: 10 }
+        };
+
+        function stepParam(param, delta) {
+            const el = document.getElementById('sv-' + param);
+            if (!el) return;
+            const limits = PARAM_LIMITS[param];
+            let val = parseFloat(el.textContent);
+            val = Math.round((val + delta) * 100) / 100;
+            val = Math.max(limits.min, Math.min(limits.max, val));
+            el.textContent = (param === 'conf' || param === 'iou') ? val.toFixed(2) : val;
+        }
+
+        function lockSettings() {
+            // Disable critical param rows
+            document.querySelectorAll('#settings-params .s-row').forEach(row => {
+                const p = row.dataset.param;
+                if (p && p !== 'palette') row.classList.add('disabled');
+            });
+            // Hide start button
+            const wrap = document.getElementById('settings-start-wrap');
+            if (wrap) wrap.style.display = 'none';
+        }
+
         function updateBreakdown(classIn, classOut) {
             const container = document.getElementById('class-breakdown');
             const totalAll = sumValues(classIn) + sumValues(classOut);
             container.innerHTML = '';
 
+            // Update Doughnut border logic (remove gap if unidirectional)
+            const sumIn = sumValues(classIn);
+            const sumOut = sumValues(classOut);
+            doughChart.data.datasets[0].borderWidth = (sumIn === 0 || sumOut === 0) ? 0 : 3;
+            doughChart.data.datasets[0].data = [sumIn, sumOut];
+            doughChart.update();
+            document.getElementById('cnt-total').innerText = totalAll;
+
             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;
@@ -528,30 +967,85 @@
         }
 
         // =========== Main ===========
+        let _params = null;
+
         async function init() {
             const raw = sessionStorage.getItem('funky_run');
             if (!raw) { window.location.href = '/'; return; }
 
-            const params = JSON.parse(raw);
+            _params = JSON.parse(raw);
+
+            // SECURITY: Clear session storage so refresh always redirects home
+            sessionStorage.removeItem('funky_run');
 
             const cRes = await fetch('/constants');
             const cData = await cRes.json();
             MODEL_CLASSES = cData.classes;
             BUSINESS_MAP = cData.business_map;
 
+            populateAndInit(_params);
+
+            // SECURITY: Clear session storage after populate so refresh triggers redirect
+            sessionStorage.removeItem('funky_run');
+
+            // Show Settings tab first, but also initialized with About implicitly in sidebar hierarchy
+            switchTab('settings');
+        }
+
+        function populateAndInit(params) {
             populateRunDetails(params.config);
+            populateSettingsTab(params.config, params.settings || {});
+        }
+
+        function startProcessingFromSettings() {
+            if (!_params) return;
+
+            // Read current stepper/control values
+            const imgsz = parseInt(document.getElementById('sv-imgsz').textContent);
+            const conf = parseFloat(document.getElementById('sv-conf').textContent);
+            const iou = parseFloat(document.getElementById('sv-iou').textContent);
+            const stride = parseInt(document.getElementById('sv-stride').textContent);
+            const reportFmt = document.getElementById('sv-report').value;
+            const annotated = document.getElementById('sv-annotated').classList.contains('active');
+
+            // Apply to config
+            _params.config.imgsz = imgsz;
+            _params.config.conf = conf;
+            _params.config.iou = iou;
+            _params.config.detect_stride = stride;
+
+            // Lock settings
+            lockSettings();
+
+            // Switch to overview
+            switchTab('overview');
+            document.getElementById('proc-label').innerText = 'Processing';
+
+            // Reset Run Tab Results to Awaiting
+            const badge = document.getElementById('results-status-badge');
+            if (badge) {
+                badge.innerText = 'Processing';
+                badge.className = 'px-2.5 py-1 bg-blue-100 text-blue-700 text-[10px] font-bold rounded-full uppercase tracking-tighter animate-pulse';
+            }
+            document.getElementById('run-results-content').innerHTML = `
+                <div class="flex flex-col items-center justify-center p-8 bg-slate-50/50 border border-slate-100 rounded-2xl col-span-3 text-slate-400">
+                    <i class="fa-solid fa-spinner fa-spin text-2xl mb-3"></i>
+                    <span class="text-xs font-semibold">Executing inference pipeline... results pending</span>
+                </div>`;
 
-            const videoDuration = params.config.duration || 10;
-            const stride = params.config.detect_stride || 1;
+            // Start WebSocket
+            const videoDuration = _params.config.duration || 10;
 
             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
+                    video_id: _params.video_id,
+                    line: _params.line,
+                    config: _params.config,
+                    annotated_video: annotated,
+                    report_format: reportFmt
                 }));
             };
 
@@ -565,10 +1059,17 @@
                     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') +
-                        infoRow('actual_fps', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
-                        infoRow('speed_vs_realtime', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
+                    // Update Run Tab Badge
+                    const badge = document.getElementById('results-status-badge');
+                    if (badge) {
+                        badge.innerText = 'Completed';
+                        badge.className = 'px-2.5 py-1 bg-green-100 text-green-700 text-[10px] font-bold rounded-full uppercase tracking-tighter';
+                    }
+
+                    document.getElementById('run-results-content').innerHTML =
+                        detailRow('Inference Time', d.processing_time + ' sec') +
+                        infoRow('Throughput (FPS)', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
+                        infoRow('Real-time Ratio', d.speed_vs_realtime + 'x', 'Processing speed relative to video playback rate.');
 
                     if (d.video_id) loadReports(d.video_id);
                     return;
@@ -582,8 +1083,10 @@
                 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;
+
+                // Update doughnut
+                doughChart.data.datasets[0].data = [totalIn, totalOut];
+                doughChart.update();
 
                 const now = performance.now();
                 if (now - lastUIUpdate < 300) return;
@@ -598,10 +1101,16 @@
 
         const REPORT_LABELS = {
             'direction_pie.png': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
+            'direction_pie.pdf': { title: 'Directional Split', desc: 'Incoming vs outgoing vehicle ratio' },
             'flow_over_time.png': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
+            'flow_over_time.pdf': { title: 'Traffic Flow', desc: 'Vehicles crossing the line over time' },
             'congestion_index.png': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
+            'congestion_index.pdf': { title: 'Congestion Index', desc: 'Active vehicles per frame with smoothing' },
             'class_dominance.png': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
+            'class_dominance.pdf': { title: 'Class Dominance', desc: 'Vehicle count by classification type' },
             'confidence_dist.png': { title: 'Confidence Distribution', desc: 'Detection confidence histogram' },
+            'confidence_dist.pdf': { title: 'Confidence Distribution', desc: 'Detection confidence histogram' },
+            'annotated.mp4': { title: 'Annotated Video', desc: 'Video with bounding boxes, track IDs, and spatial boundary overlays' },
         };
 
         async function loadReports(videoId) {
@@ -617,8 +1126,28 @@
             data.files.forEach(name => {
                 const info = REPORT_LABELS[name] || { title: name, desc: '' };
                 const url = `/reports/${videoId}/${name}`;
+                const isVideo = name.endsWith('.mp4');
+                const isPDF = name.endsWith('.pdf');
                 const card = document.createElement('div');
                 card.className = 'bg-white rounded-xl border border-slate-200 shadow-sm flex flex-col overflow-hidden';
+
+                let previewHTML = '';
+                if (isVideo) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-300">
+                            <i class="fa-solid fa-film text-6xl mb-4"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-400">Video Ready for Local Analysis</span>
+                        </div>`;
+                } else if (isPDF) {
+                    previewHTML = `
+                        <div class="flex flex-col items-center justify-center py-12 text-slate-300">
+                            <i class="fa-solid fa-file-pdf text-6xl mb-4"></i>
+                            <span class="text-xs font-bold uppercase tracking-widest text-slate-400">PDF Document</span>
+                        </div>`;
+                } else {
+                    previewHTML = `<img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">`;
+                }
+
                 card.innerHTML = `
                     <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
                         <div>
@@ -631,7 +1160,7 @@
                         </a>
                     </div>
                     <div class="p-4 flex items-center justify-center bg-slate-50/30">
-                        <img src="${url}" alt="${info.title}" class="max-w-full max-h-[320px] object-contain rounded">
+                        ${previewHTML}
                     </div>
                 `;
                 grid.appendChild(card);