Deploy TrackIQ v8

Dockerfile

@@ -0,0 +1,34 @@
+FROM python:3.10-slim
+
+# Install system dependencies (OpenCV, ffmpeg, libGL)
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    ffmpeg \
+    libopencv-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy requirements first for layer caching
+COPY requirements_hf.txt .
+
+RUN pip install --no-cache-dir -r requirements_hf.txt
+
+# Copy app source
+COPY app.py .
+COPY static/ ./static/
+COPY templates/ ./templates/
+
+# Create required directories
+RUN mkdir -p models uploads outputs logs
+
+# HuggingFace Spaces expose port 7860
+ENV PORT=7860
+EXPOSE 7860
+
+# Start Flask on port 7860
+CMD ["python", "app.py"]

README.md

@@ -1,11 +1,43 @@
 ---
-title: TRAFFIC ROAD APP
-emoji: 😻
+title: TrackIQ — Traffic Road Detection
+emoji: 🚦
 colorFrom: blue
-colorTo: blue
+colorTo: purple
 sdk: docker
 pinned: false
-license: mit
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚦 TrackIQ — Traffic Road Detection App
+
+TrackIQ is a real-time traffic object detection and tracking application powered by YOLO.
+
+## Features
+
+- 🎥 Upload and analyze traffic videos
+- 🚗 Detect vehicles, motorcycles, trucks, buses, pedestrians, bicycles, traffic lights, and road signs
+- 📊 Live dashboard with detection statistics
+- 📁 Session history and CSV log export
+- ⚡ CPU-optimized inference with frame skipping
+
+## How to Use
+
+1. Go to the **Home** page and upload a video
+2. Click **Run** to start detection
+3. Watch detections stream live on the video
+4. View stats on the **Dashboard**
+5. Export logs from the **Logs** page
+
+## Model
+
+> ⚠️ **Upload your YOLO model** to the `models/` folder before running.
+> Supported: `yolo11n.pt`, `yolov8n.pt`, etc.
+
+Upload the model via the **Files** tab in your HuggingFace Space settings.
+
+## Tech Stack
+
+- Flask (Python backend)
+- Ultralytics YOLO
+- OpenCV
+- HTML/CSS/JS frontend

TRAFFIC_ROAD_APP/TRAFFIC_ROAD_APP/requirements_hf.txt

@@ -0,0 +1,194 @@
+absl-py==2.4.0
+alabaster==1.0.0
+altair==5.5.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.13.0
+asttokens==3.0.0
+astunparse==1.6.3
+attrs==25.4.0
+babel==2.17.0
+beautifulsoup4==4.14.2
+bleach==6.3.0
+blinker==1.9.0
+cachetools==6.2.2
+certifi==2025.11.12
+cffi==2.0.0
+charset-normalizer==3.4.4
+clarabel==0.11.1
+click==8.3.1
+colorama==0.4.6
+comm==0.2.3
+contourpy==1.3.3
+cvxpy==1.7.5
+cycler==0.12.1
+debugpy==1.8.17
+decorator==5.2.1
+defusedxml==0.7.1
+dill==0.4.1
+docutils==0.22.4
+et_xmlfile==2.0.0
+executing==2.2.1
+fastjsonschema==2.21.2
+fica==0.4.1
+filelock==3.24.3
+Flask==3.1.3
+flask-cors==6.0.2
+flatbuffers==25.12.19
+fonttools==4.60.1
+fsspec==2026.2.0
+gast==0.7.0
+geopandas==1.1.2
+git-filter-repo==2.47.0
+gitdb==4.0.12
+GitPython==3.1.45
+google-pasta==0.2.0
+graphviz==0.21
+greenlet==3.3.1
+grpcio==1.80.0
+h11==0.16.0
+h5py==3.14.0
+hf-xet==1.4.3
+httpcore==1.0.9
+httpx==0.28.1
+huggingface_hub==1.10.2
+idna==3.11
+imagesize==1.4.1
+ipykernel==7.1.0
+ipylab==1.1.0
+ipython==9.6.0
+ipython_pygments_lexers==1.1.1
+ipywidgets==8.1.8
+itsdangerous==2.2.0
+jedi==0.19.2
+Jinja2==3.1.6
+joblib==1.5.3
+jsonschema==4.25.1
+jsonschema-specifications==2025.9.1
+jupyter_client==8.6.3
+jupyter_core==5.9.1
+jupyterlab_pygments==0.3.0
+jupyterlab_widgets==3.0.16
+jupytext==1.19.1
+keras==3.14.0
+kiwisolver==1.4.9
+lap==0.5.13
+lapx==0.9.4
+libclang==18.1.1
+lxml==6.0.2
+markdown-it-py==4.0.0
+MarkupSafe==3.0.3
+matplotlib==3.10.7
+matplotlib-inline==0.2.1
+mdit-py-plugins==0.5.0
+mdurl==0.1.2
+mistune==3.2.0
+ml_dtypes==0.5.4
+mpmath==1.3.0
+namex==0.1.0
+narwhals==2.11.0
+nbclient==0.10.4
+nbconvert==7.17.0
+nbformat==5.10.4
+nest-asyncio==1.6.0
+networkx==3.6.1
+numpy==2.3.4
+opencv-python==4.13.0.92
+opencv-python-headless==4.13.0.92
+openpyxl==3.1.5
+opt_einsum==3.4.0
+optree==0.19.0
+osqp==1.0.5
+otter-grader==6.1.6
+outcome==1.3.0.post0
+packaging==25.0
+pandas==2.3.3
+pandocfilters==1.5.1
+parso==0.8.5
+pillow==12.0.0
+platformdirs==4.5.0
+playwright==1.58.0
+plotly==6.4.0
+polars==1.40.0
+polars-runtime-32==1.40.0
+prompt_toolkit==3.0.52
+protobuf==6.33.1
+psutil==7.1.2
+pure_eval==0.2.3
+pyarrow==21.0.0
+pycparser==2.23
+pydantic==2.12.5
+pydantic_core==2.41.5
+pydeck==0.9.1
+pyee==13.0.0
+Pygments==2.19.2
+pyogrio==0.12.1
+pyparsing==3.2.5
+pyproj==3.7.2
+PySocks==1.7.1
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+python-on-whales==0.80.0
+pytz==2025.2
+PyYAML==6.0.3
+pyzmq==27.1.0
+referencing==0.37.0
+requests==2.32.5
+rich==14.3.3
+roman-numerals==4.1.0
+rpds-py==0.28.0
+scikit-learn==1.8.0
+scipy==1.16.3
+scs==3.2.11
+seaborn==0.13.2
+selenium==4.38.0
+setuptools==80.9.0
+shapely==2.1.2
+shellingham==1.5.4
+six==1.17.0
+smmap==5.0.2
+sniffio==1.3.1
+snowballstemmer==3.0.1
+sortedcontainers==2.4.0
+soupsieve==2.8
+Sphinx==9.1.0
+sphinxcontrib-applehelp==2.0.0
+sphinxcontrib-devhelp==2.0.0
+sphinxcontrib-htmlhelp==2.1.0
+sphinxcontrib-jsmath==1.0.1
+sphinxcontrib-qthelp==2.0.0
+sphinxcontrib-serializinghtml==2.0.0
+stack-data==0.6.3
+streamlit==1.51.0
+sympy==1.14.0
+tenacity==9.1.2
+tensorflow==2.21.0
+termcolor==3.3.0
+threadpoolctl==3.6.0
+tinycss2==1.4.0
+toml==0.10.2
+torch==2.11.0
+torchvision==0.26.0
+torchviz==0.0.3
+tornado==6.5.2
+tqdm==4.67.3
+traitlets==5.14.3
+trio==0.32.0
+trio-websocket==0.12.2
+typer==0.24.1
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.2
+ultralytics==8.4.39
+ultralytics-thop==2.0.18
+urllib3==2.5.0
+watchdog==6.0.0
+wcwidth==0.2.14
+webdriver-manager==4.0.2
+webencodings==0.5.1
+websocket-client==1.9.0
+Werkzeug==3.1.8
+wheel==0.46.3
+widgetsnbextension==4.0.15
+wrapt==1.17.3
+wsproto==1.3.2

TRAFFIC_ROAD_APP/requirements_hf.txt

@@ -0,0 +1,194 @@
+absl-py==2.4.0
+alabaster==1.0.0
+altair==5.5.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.13.0
+asttokens==3.0.0
+astunparse==1.6.3
+attrs==25.4.0
+babel==2.17.0
+beautifulsoup4==4.14.2
+bleach==6.3.0
+blinker==1.9.0
+cachetools==6.2.2
+certifi==2025.11.12
+cffi==2.0.0
+charset-normalizer==3.4.4
+clarabel==0.11.1
+click==8.3.1
+colorama==0.4.6
+comm==0.2.3
+contourpy==1.3.3
+cvxpy==1.7.5
+cycler==0.12.1
+debugpy==1.8.17
+decorator==5.2.1
+defusedxml==0.7.1
+dill==0.4.1
+docutils==0.22.4
+et_xmlfile==2.0.0
+executing==2.2.1
+fastjsonschema==2.21.2
+fica==0.4.1
+filelock==3.24.3
+Flask==3.1.3
+flask-cors==6.0.2
+flatbuffers==25.12.19
+fonttools==4.60.1
+fsspec==2026.2.0
+gast==0.7.0
+geopandas==1.1.2
+git-filter-repo==2.47.0
+gitdb==4.0.12
+GitPython==3.1.45
+google-pasta==0.2.0
+graphviz==0.21
+greenlet==3.3.1
+grpcio==1.80.0
+h11==0.16.0
+h5py==3.14.0
+hf-xet==1.4.3
+httpcore==1.0.9
+httpx==0.28.1
+huggingface_hub==1.10.2
+idna==3.11
+imagesize==1.4.1
+ipykernel==7.1.0
+ipylab==1.1.0
+ipython==9.6.0
+ipython_pygments_lexers==1.1.1
+ipywidgets==8.1.8
+itsdangerous==2.2.0
+jedi==0.19.2
+Jinja2==3.1.6
+joblib==1.5.3
+jsonschema==4.25.1
+jsonschema-specifications==2025.9.1
+jupyter_client==8.6.3
+jupyter_core==5.9.1
+jupyterlab_pygments==0.3.0
+jupyterlab_widgets==3.0.16
+jupytext==1.19.1
+keras==3.14.0
+kiwisolver==1.4.9
+lap==0.5.13
+lapx==0.9.4
+libclang==18.1.1
+lxml==6.0.2
+markdown-it-py==4.0.0
+MarkupSafe==3.0.3
+matplotlib==3.10.7
+matplotlib-inline==0.2.1
+mdit-py-plugins==0.5.0
+mdurl==0.1.2
+mistune==3.2.0
+ml_dtypes==0.5.4
+mpmath==1.3.0
+namex==0.1.0
+narwhals==2.11.0
+nbclient==0.10.4
+nbconvert==7.17.0
+nbformat==5.10.4
+nest-asyncio==1.6.0
+networkx==3.6.1
+numpy==2.3.4
+opencv-python==4.13.0.92
+opencv-python-headless==4.13.0.92
+openpyxl==3.1.5
+opt_einsum==3.4.0
+optree==0.19.0
+osqp==1.0.5
+otter-grader==6.1.6
+outcome==1.3.0.post0
+packaging==25.0
+pandas==2.3.3
+pandocfilters==1.5.1
+parso==0.8.5
+pillow==12.0.0
+platformdirs==4.5.0
+playwright==1.58.0
+plotly==6.4.0
+polars==1.40.0
+polars-runtime-32==1.40.0
+prompt_toolkit==3.0.52
+protobuf==6.33.1
+psutil==7.1.2
+pure_eval==0.2.3
+pyarrow==21.0.0
+pycparser==2.23
+pydantic==2.12.5
+pydantic_core==2.41.5
+pydeck==0.9.1
+pyee==13.0.0
+Pygments==2.19.2
+pyogrio==0.12.1
+pyparsing==3.2.5
+pyproj==3.7.2
+PySocks==1.7.1
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+python-on-whales==0.80.0
+pytz==2025.2
+PyYAML==6.0.3
+pyzmq==27.1.0
+referencing==0.37.0
+requests==2.32.5
+rich==14.3.3
+roman-numerals==4.1.0
+rpds-py==0.28.0
+scikit-learn==1.8.0
+scipy==1.16.3
+scs==3.2.11
+seaborn==0.13.2
+selenium==4.38.0
+setuptools==80.9.0
+shapely==2.1.2
+shellingham==1.5.4
+six==1.17.0
+smmap==5.0.2
+sniffio==1.3.1
+snowballstemmer==3.0.1
+sortedcontainers==2.4.0
+soupsieve==2.8
+Sphinx==9.1.0
+sphinxcontrib-applehelp==2.0.0
+sphinxcontrib-devhelp==2.0.0
+sphinxcontrib-htmlhelp==2.1.0
+sphinxcontrib-jsmath==1.0.1
+sphinxcontrib-qthelp==2.0.0
+sphinxcontrib-serializinghtml==2.0.0
+stack-data==0.6.3
+streamlit==1.51.0
+sympy==1.14.0
+tenacity==9.1.2
+tensorflow==2.21.0
+termcolor==3.3.0
+threadpoolctl==3.6.0
+tinycss2==1.4.0
+toml==0.10.2
+torch==2.11.0
+torchvision==0.26.0
+torchviz==0.0.3
+tornado==6.5.2
+tqdm==4.67.3
+traitlets==5.14.3
+trio==0.32.0
+trio-websocket==0.12.2
+typer==0.24.1
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.2
+ultralytics==8.4.39
+ultralytics-thop==2.0.18
+urllib3==2.5.0
+watchdog==6.0.0
+wcwidth==0.2.14
+webdriver-manager==4.0.2
+webencodings==0.5.1
+websocket-client==1.9.0
+Werkzeug==3.1.8
+wheel==0.46.3
+widgetsnbextension==4.0.15
+wrapt==1.17.3
+wsproto==1.3.2

TRAFFIC_ROAD_APP/templates/dashboard.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
+<style>
+:root{--bg:#0c1117;--s:#151c25;--s2:#1c2531;--bd:rgba(255,255,255,0.07);--sh:0 2px 16px rgba(0,0,0,0.45);--shlg:0 8px 36px rgba(0,0,0,0.55);--t:#e8edf2;--t2:#7a8fa0;--t3:#3a4a5a;--ac:#880000;--ac2:#660000;--acl:rgba(136,0,0,0.12);--gr:#16a34a;--grb:#052e16;--bl:#3b82f6;--blb:#0f2040;--yw:#f59e0b;--ywb:#1a0f00;--re:#ef4444;--reb:#2d0000;--sw:60px;--r:14px;--rs:9px;}
+[data-theme="light"]{--bg:#f0f4f8;--s:#fff;--s2:#f6f8fb;--bd:rgba(0,0,0,0.07);--sh:0 2px 16px rgba(0,0,0,0.09);--shlg:0 8px 36px rgba(0,0,0,0.13);--t:#0f1923;--t2:#5a6a7a;--t3:#9aaab8;--grb:#dcfce7;--blb:#dbeafe;--ywb:#fef9c3;--reb:#fee2e2;}
+*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:0;height:0}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t);font-size:13px;display:flex;height:100vh;overflow:hidden;transition:background .3s,color .3s}
+.sb{width:var(--sw);background:var(--s);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;flex-shrink:0}
+.sbl{width:34px;height:34px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none}
+.sbsep{width:26px;height:1px;background:var(--bd);margin:3px 0}
+.sbb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:14px;cursor:pointer;transition:all .2s;text-decoration:none;border:none;background:none;position:relative}
+.sbb:hover{background:var(--s2);color:var(--t)}.sbb.on{background:var(--acl);color:var(--ac)}
+.sbb .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%);background:var(--t);color:var(--bg);font-size:10px;padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;z-index:300}.sbb:hover .tip{opacity:1}
+.sbsp{flex:1}.pw{flex:1;display:flex;flex-direction:column;overflow:hidden}
+.topb{height:50px;background:var(--s);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0}
+.topl,.topr{display:flex;align-items:center;gap:9px}.bn{font-size:14px;font-weight:600}.bn b{color:var(--ac)}
+.pill{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--gr);background:var(--grb);padding:2px 8px;border-radius:20px}
+.ld{width:6px;height:6px;border-radius:50%;background:var(--gr);animation:blink 2s infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+.clk{font-size:10px;font-family:'DM Mono',monospace;color:var(--t2)}
+.lg{display:flex;background:var(--s2);border-radius:5px;padding:2px;border:1px solid var(--bd)}
+.lb{font-size:10px;font-weight:500;padding:2px 8px;border:none;background:none;cursor:pointer;border-radius:3px;color:var(--t2);font-family:'DM Sans',sans-serif;transition:all .2s}.lb.on{background:var(--ac);color:#fff}
+.ib{width:28px;height:28px;border-radius:5px;border:1px solid var(--bd);background:var(--s);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:11px;position:relative;transition:all .2s}.ib:hover{background:var(--s2)}
+.nd{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
+main{flex:1;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1.4fr) 360px;gap:12px;overflow:auto;min-height:0}
+.left-col{display:grid;grid-template-rows:auto minmax(190px,1fr) minmax(190px,1fr);gap:10px;min-height:0}
+.right-col{display:grid;grid-template-rows:minmax(300px,1.15fr) auto auto;gap:10px;min-height:0}
+.mr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
+.mc,.cd{background:var(--s);border:1px solid var(--bd);box-shadow:var(--sh);overflow:hidden}
+.mc{border-radius:var(--rs);padding:11px 13px;transition:transform .2s}.mc:hover{transform:translateY(-2px)}
+.cd{border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column}.cd:hover{box-shadow:var(--shlg)}
+.mct{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
+.mcl{font-size:10px;color:var(--t2)}.bx{font-size:9px;font-weight:500;padding:1px 5px;border-radius:4px}
+.mv{font-size:20px;font-weight:300;letter-spacing:-.5px;line-height:1}.mu{font-size:10px;color:var(--t2)}.ms{font-size:9px;color:var(--t3);margin-top:2px}
+.ct{font-size:11px;font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:5px;flex-shrink:0}.ct i{color:var(--ac);font-size:10px}
+.chart-wrap{flex:1;min-height:0}
+.stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.hmcd{padding:0}
+.hmhd{padding:10px 12px 6px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.hmhd .ct{margin-bottom:0}
+.hmbd{flex:1;position:relative;min-height:220px}
+#hmc2{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
+.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
+.statbox{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:10px 11px}
+.statbox .k{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.04em}
+.statbox .v{font-size:18px;font-weight:300;margin-top:4px}
+.subline{font-size:10px;color:var(--t2)}
+.listbox{display:flex;flex-direction:column;gap:6px}
+.vr{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:8px 10px}
+.vrl{display:flex;align-items:center;gap:7px;font-size:11px}.vic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}.vp{font-size:13px;font-weight:500}
+.al{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--bd)}.al:last-child{border-bottom:none}
+.ai{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:1px}
+.at2{font-size:10px;font-weight:500;margin-bottom:1px}.as2{font-size:9px;color:var(--t2)}
+.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mini-pill{font-size:9px;padding:3px 7px;border-radius:999px;background:var(--s2);border:1px solid var(--bd);color:var(--t2)}
+.empty-note{font-size:10px;color:var(--t3);padding-top:4px}
+@media(max-width:1180px){main{grid-template-columns:1fr}.right-col{grid-template-rows:minmax(260px,auto) auto auto}.stack{grid-template-columns:1fr}.mr{grid-template-columns:repeat(2,minmax(0,1fr))}}
+</style>
+</head>
+<body>
+<nav class="sb">
+  <a href="/" class="sbl"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sbsep"></div>
+  <a href="/home" class="sbb"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sbb on"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sbb"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sbb"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sbsp"></div>
+  <button class="sbb" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="pw">
+  <header class="topb">
+    <div class="topl">
+      <span class="bn">Track<b>IQ</b></span>
+      <span style="color:var(--bd);font-size:16px;margin:0 1px;">|</span>
+      <span style="font-size:12px;font-weight:500;" id="t-dash">Dashboard</span>
+      <div class="pill"><span class="ld"></span> <span id="liveBadge">Live</span></div>
+    </div>
+    <div class="topr">
+      <span class="clk" id="clk">--:--:--</span>
+      <div class="lg">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="ib" onclick="toggleNotifs()"><i class="fas fa-bell"></i><span class="nd" id="nd"></span></button>
+      <button class="ib" onclick="toggleTheme()"><i class="fas fa-moon" id="ti2"></i></button>
+    </div>
+  </header>
+
+  <div id="notifP" style="display:none;position:fixed;top:57px;right:65px;z-index:500;width:255px;background:var(--s);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shlg);padding:12px 14px;">
+    <div style="font-size:11px;font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;"><span id="t-notif">Notifications</span><button onclick="clearN()" style="font-size:10px;color:var(--ac);background:none;border:none;cursor:pointer;">Clear all</button></div>
+    <div id="nl">
+      <div style="padding:6px 0;border-bottom:1px solid var(--bd);"><div style="font-size:10px;font-weight:500;color:var(--re);" id="t-a1">Congestion Zone A</div><div style="font-size:9px;color:var(--t2);">4 min ago</div></div>
+      <div style="padding:6px 0;"><div style="font-size:10px;font-weight:500;" id="t-source-loaded">Source ready</div><div style="font-size:9px;color:var(--t2);">Just now</div></div>
+    </div>
+  </div>
+
+  <main>
+    <section class="left-col">
+      <div class="mr">
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m1">Objects Today</span><span class="bx" style="background:var(--grb);color:var(--gr);" id="m1Trend">+0%</span></div><div><span class="mv" id="mvToday">0</span> <span class="mu" id="t-veh">obj.</span></div><div class="ms" id="m1Sub">Latest analyzed scenes</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m2">Current Flow</span><span class="bx" style="background:var(--grb);color:var(--gr);" id="flowBadge">Smooth</span></div><div><span class="mv" id="mvFlow">0</span> <span class="mu">obj/min</span></div><div class="ms" id="m2Sub">Based on recent activity</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m3">Avg FPS</span><span class="bx" style="background:var(--blb);color:var(--bl);" id="fpsBadge">Stable</span></div><div><span class="mv" id="mvFps">0</span> <span class="mu">fps</span></div><div class="ms" id="m3Sub">Last completed analysis</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m4">Latest clip</span><span class="bx" style="background:var(--ywb);color:var(--yw);" id="accBadge">Current</span></div><div><span class="mv" id="mvAcc">0</span> <span class="mu">s</span></div><div class="ms" id="m4Sub">Duration of latest processed video</div></div>
+      </div>
+
+      <div class="stack">
+        <div class="cd">
+          <div class="ct"><i class="fas fa-chart-area"></i><span id="t-c1">Flow & speed</span></div>
+          <div class="chart-wrap"><canvas id="fc"></canvas></div>
+        </div>
+        <div class="cd">
+          <div class="ct"><i class="fas fa-chart-bar"></i><span id="t-c2">Classification</span></div>
+          <div class="chart-wrap"><canvas id="tc"></canvas></div>
+        </div>
+      </div>
+
+      <div class="cd">
+        <div class="ct"><i class="fas fa-layer-group"></i><span id="t-scenes">Scene summary</span></div>
+        <div class="stats-grid">
+          <div class="statbox"><div class="k" id="t-live-source">Source</div><div class="v" id="liveSource">No source</div><div class="subline" id="liveSourceMeta">Ready after analysis</div></div>
+          <div class="statbox"><div class="k" id="t-live-objects">Objects</div><div class="v" id="liveObjects" id="liveObjects">0</div><div class="subline" id="liveObjectsMeta">Peak visible count</div></div>
+          <div class="statbox"><div class="k" id="t-live-fps">FPS</div><div class="v" id="liveFps" id="liveFps">0</div><div class="subline" id="liveFpsMeta">Captured stream rate</div></div>
+          <div class="statbox"><div class="k" id="t-live-duration">Duration</div><div class="v" id="liveDuration" id="liveDuration">0s</div><div class="subline" id="liveDurationMeta">Latest processed clip</div></div>
+        </div>
+        <div class="pill-row" id="liveClassPills"></div>
+        <div class="empty-note" id="liveNote">Current summary follows the latest processed analysis instead of the old floating video preview.</div>
+        <div id="sceneSummaryGrid" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;"></div>
+      </div>
+    </section>
+
+    <aside class="right-col">
+      <div class="cd hmcd">
+        <div class="hmhd"><div class="ct"><i class="fas fa-map-marker-alt"></i><span id="t-hm">Position heatmap</span></div><span style="font-size:9px;color:var(--t3);" id="t-hms">Object density</span></div>
+        <div class="hmbd"><canvas id="hmc2"></canvas></div>
+      </div>
+
+      <div class="stack">
+        <div class="cd" style="padding:11px 12px;">
+          <div class="ct">
+            <i class="fas fa-chart-pie"></i>
+            <span>Object Type Distribution</span>
+          </div>
+          <!-- Pie chart + légende -->
+          <div style="position:relative;display:flex;align-items:center;gap:10px;min-height:140px;">
+            <div style="width:145px;height:145px;flex-shrink:0;">
+              <canvas id="pieChart"></canvas>
+
+            </div>
+            <!-- Légende dynamique -->
+            <div id="pieLegend" style="flex:1;display:flex;flex-direction:column;gap:5px;">
+              <div style="font-size:10px;color:var(--t3);text-align:center;">No data yet</div>
+            </div>
+          </div>
+        </div>
+        <div class="cd" style="padding:11px 12px;">
+          <div class="ct"><i class="fas fa-wave-square"></i><span id="t-live-panel">Live stats</span></div>
+          <div class="stats-grid">
+            <div class="statbox"><div class="k" id="t-det">Detected</div><div class="v" id="sbdet">0</div></div>
+            <div class="statbox"><div class="k" id="t-acc">Latest FPS</div><div class="v" id="sbacc">0</div></div>
+          </div>
+          <div class="empty-note" id="livePanelNote">Heatmap and key stats stay visible at all times.</div>
+        </div>
+      </div>
+    </aside>
+  </main>
+</div>
+
+<script>
+setInterval(()=>{document.getElementById('clk').textContent=new Date().toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',second:'2-digit'});},1000);
+
+function toggleTheme(){
+  const d=document.documentElement,dk=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dk?'light':'dark');
+  ['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className=dk?'fas fa-moon':'fas fa-sun';});
+  rebuildCharts();
+  setTimeout(drawHm,50);
+  rebuildPie();
+  try{localStorage.setItem('tiq_theme',dk?'light':'dark');}catch(e){}
+}
+
+const TL={
+  en:{dash:'Dashboard',m1:'Objects Today',veh:'obj.',m2:'Current Flow',m3:'Avg FPS',m4:'Latest clip',c1:'Flow from video',c2:'Classification',hm:'Position heatmap',hms:'Detected positions',bk:'Breakdown',ca:'Cars',mo:'Moto',tr:'Trucks',al:'Alerts',notif:'Notifications',scenes:'Scene summary',livesource:'Source',liveobjects:'Objects',livefps:'FPS',liveduration:'Duration',livepanel:'Live stats',det:'Detected',acc:'Latest FPS'},
+  fr:{dash:'Tableau de bord',m1:'Objets du jour',veh:'obj.',m2:'Flux actuel',m3:'FPS moy.',m4:'Dernier clip',c1:'Flux vidéo',c2:'Classification',hm:'Carte de densité',hms:'Positions détectées',bk:'Répartition',ca:'Voitures',mo:'Motos',tr:'Camions',al:'Alertes',notif:'Notifications',scenes:'Résumé scène',livesource:'Source',liveobjects:'Objets',livefps:'FPS',liveduration:'Durée',livepanel:'Stats live',det:'Détectés',acc:'FPS récent'},
+  wo:{dash:'Dashboard',m1:'Objets tey',veh:'obj.',m2:'Yóbbu',m3:'FPS moy.',m4:'Clip mujj',c1:'Flux video',c2:'Wërsëg',hm:'Kàrt',hms:'Posision yi',bk:'Wërsëg',ca:'Cars',mo:'Moto',tr:'Trucks',al:'Yëgël',notif:'Yëgël yi',scenes:'Melo scène',livesource:'Source',liveobjects:'Objets',livefps:'FPS',liveduration:'Yoon',livepanel:'Stats live',det:'Yi réy',acc:'FPS mujj'}
+};
+
+function setLang(l,btn){
+  document.querySelectorAll('.lb').forEach(b=>b.classList.remove('on'));
+  btn.classList.add('on');
+  const t=TL[l];
+  const mp={dash:'t-dash',m1:'t-m1',veh:'t-veh',m2:'t-m2',m3:'t-m3',m4:'t-m4',c1:'t-c1',c2:'t-c2',hm:'t-hm',hms:'t-hms',bk:'t-bk',ca:'t-ca',mo:'t-mo',tr:'t-tr',al:'t-al',notif:'t-notif',scenes:'t-scenes',livesource:'t-live-source',liveobjects:'t-live-objects',livefps:'t-live-fps',liveduration:'t-live-duration',livepanel:'t-live-panel',det:'t-det',acc:'t-acc'};
+  Object.entries(mp).forEach(([k,id])=>{const el=document.getElementById(id);if(el&&t[k])el.textContent=t[k];});
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+let no=false;
+function toggleNotifs(){no=!no;document.getElementById('notifP').style.display=no?'block':'none';if(no)document.getElementById('nd').style.display='none';}
+function clearN(){document.getElementById('nl').innerHTML='<div style="font-size:10px;color:var(--t3);text-align:center;padding:10px;">No notifications</div>';no=false;document.getElementById('notifP').style.display='none';}
+document.addEventListener('click',e=>{if(no&&!e.target.closest('#notifP')&&!e.target.closest('.ib'))toggleNotifs();});
+
+window.fch=null;
+window.tch=null;
+window._tiqHeatPoints=[];
+
+function gc(){
+  const dk=document.documentElement.getAttribute('data-theme')==='dark';
+  return{grid:dk?'rgba(255,255,255,0.05)':'rgba(0,0,0,0.06)',tick:dk?'#4a5a6a':'#94a3b8'};
+}
+
+/* ── Pie chart — Object Type Distribution ── */
+window.pch = null;
+
+function rebuildPie(labels=[], data=[], colors=[]){
+  // Enregistre datalabels seulement si dispo
+  if(window.ChartDataLabels) Chart.register(ChartDataLabels);
+  if(window.pch) window.pch.destroy();
+  const canvas = document.getElementById('pieChart');
+  if(!canvas) return;
+  const dk = document.documentElement.getAttribute('data-theme')==='dark';
+
+  const defaultColors = ['#3b82f6','#10b981','#f59e0b','#8b5cf6','#ec4899','#06b6d4','#ef4444','#f97316'];
+
+  window.pch = new Chart(canvas, {
+    type: 'pie',
+    data: {
+      labels: labels.length ? labels : ['No data'],
+      datasets: [{
+        data:            data.length ? data : [1],
+        backgroundColor: colors.length ? colors : [dk?'#1c2531':'#e2e8f0'],
+        borderColor:     dk ? '#151c25' : '#ffffff',
+        borderWidth:     2,
+        hoverOffset:     6,
+      }]
+    },
+    options: {
+      responsive:          true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => {
+              const tot = ctx.dataset.data.reduce((a,b)=>a+b,0);
+              return ` ${ctx.label}: ${ctx.raw} (${Math.round(ctx.raw/tot*100)}%)`;
+            }
+          }
+        },
+        /* Affiche les % à l'intérieur de chaque part */
+        datalabels: {
+          color: '#fff',
+          font: { size: 11, weight: 'bold' },
+          formatter: (value, ctx) => {
+            const tot = ctx.dataset.data.reduce((a,b)=>a+b,0);
+            const pct = Math.round(value/tot*100);
+            return pct >= 5 ? pct+'%' : ''; // cache si trop petit
+          }
+        }
+      }
+    }
+  });
+}
+
+function updatePie(uc){
+  const COLORS = {
+    'Vehicle':'#3b82f6','Motorcycle':'#10b981','Truck':'#f59e0b',
+    'Bus':'#8b5cf6','Human':'#ec4899','Bicycle':'#06b6d4',
+    'Traffic light':'#ef4444','Road sign':'#f97316'
+  };
+  const EMO = {
+    'Vehicle':'🚗','Motorcycle':'🏍','Truck':'🚚','Bus':'🚌',
+    'Human':'🚶','Bicycle':'🚲','Traffic light':'🚦','Road sign':'🛑'
+  };
+
+  const labels = Object.keys(uc);
+  const data   = Object.values(uc);
+  const colors = labels.map(l => COLORS[l] || '#888');
+  const total  = data.reduce((a,b)=>a+b,0);
+
+  // Recrée le chart
+  rebuildPie(labels, data, colors);
+
+  // Met à jour le label central
+  const ptn = document.getElementById('pieTotalNum');
+  if(ptn) ptn.textContent = total;
+
+  // Légende dynamique
+  const leg = document.getElementById('pieLegend');
+  if(!leg) return;
+  leg.innerHTML = '';
+  labels.forEach((lbl, i) => {
+    const pct = Math.round(data[i]/Math.max(total,1)*100);
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:6px;';
+    row.innerHTML = `
+      <div style="display:flex;align-items:center;gap:5px;font-size:11px;overflow:hidden;">
+        <span style="width:9px;height:9px;border-radius:2px;background:${colors[i]};flex-shrink:0;display:inline-block;"></span>
+        <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${EMO[lbl]||'📦'} ${lbl}</span>
+      </div>
+      <span style="font-size:10px;color:var(--t2);flex-shrink:0;">${data[i]}</span>
+    `;
+    leg.appendChild(row);
+  });
+}
+
+function rebuildCharts(){
+  if(window.fch)window.fch.destroy();
+  if(window.tch)window.tch.destroy();
+  const {grid,tick}=gc();
+  /* Flow chart : 2 datasets (Objects + FPS) — compatible avec trackiq-api.js */
+  window.fch=new Chart(document.getElementById('fc'),{
+    data:{labels:['—'],datasets:[
+      {type:'line',label:'Objects',data:[0],borderColor:'#3b82f6',backgroundColor:'rgba(59,130,246,0.08)',borderWidth:1.5,tension:0.45,pointRadius:0,fill:true,yAxisID:'y'},
+      {type:'line',label:'FPS',data:[0],borderColor:'#10b981',backgroundColor:'rgba(16,185,129,0.05)',borderWidth:1.5,tension:0.45,pointRadius:0,yAxisID:'y2'}
+    ]},
+    options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{labels:{boxWidth:8,font:{size:9},color:tick}}},scales:{x:{ticks:{font:{size:9},color:tick,maxTicksLimit:8},grid:{color:grid},border:{display:false}},y:{position:'left',beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}},y2:{position:'right',beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{drawOnChartArea:false},border:{display:false}}}}
+  });
+  /* Classification chart : NON stacké, 1 dataset — compatible avec trackiq-api.js */
+  window.tch=new Chart(document.getElementById('tc'),{
+    type:'bar',
+    data:{labels:['—'],datasets:[
+      {label:'Count',data:[0],backgroundColor:'#3b82f6',borderRadius:3,borderSkipped:false}
+    ]},
+    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}},y:{beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}}}}
+  });
+}
+
+function drawHm(){
+  const c=document.getElementById('hmc2'),b=c.parentElement;
+  const w=b.offsetWidth,h=b.offsetHeight;
+  if(!w||!h)return;
+  c.width=w;c.height=h;
+  const ctx=c.getContext('2d');
+  const dk=document.documentElement.getAttribute('data-theme')==='dark';
+  ctx.fillStyle=dk?'#0c1219':'#e8eef5';
+  ctx.fillRect(0,0,w,h);
+  ctx.strokeStyle=dk?'rgba(255,255,255,0.07)':'rgba(0,0,0,0.07)';
+  ctx.lineWidth=1;
+  [0.25,0.5,0.75].forEach(r=>{ctx.beginPath();ctx.moveTo(0,h*r);ctx.lineTo(w,h*r);ctx.stroke();ctx.beginPath();ctx.moveTo(w*r,0);ctx.lineTo(w*r,h);ctx.stroke();});
+  const pts=Array.isArray(window._tiqHeatPoints)?window._tiqHeatPoints:[];
+  if(pts.length){
+    let mxR=0,mxH=0;
+    pts.forEach(p=>{if(p.r>mxR)mxR=p.r;if(p.h>mxH)mxH=p.h;});
+    mxR=Math.max(mxR,0.01);mxH=Math.max(mxH,0.01);
+    pts.forEach(p=>{
+      const px=(p.x/mxR)*w,py=(p.y/mxH)*h;
+      const rad=Math.max(10,Math.min(w,h)*0.015);
+      const grd=ctx.createRadialGradient(px,py,0,px,py,rad);
+      grd.addColorStop(0,'rgba(220,38,38,0.5)');
+      grd.addColorStop(0.4,'rgba(180,0,0,0.18)');
+      grd.addColorStop(1,'rgba(0,0,0,0)');
+      ctx.fillStyle=grd;ctx.fillRect(0,0,w,h);
+    });
+    ctx.font="9px 'DM Mono',monospace";
+    ctx.fillStyle=dk?'rgba(255,255,255,0.3)':'rgba(0,0,0,0.25)';
+    ctx.textAlign='left';ctx.fillText(pts.length+' points',8,13);
+  }else{
+    ctx.fillStyle=dk?'rgba(255,255,255,0.18)':'rgba(0,0,0,0.2)';
+    ctx.font="12px 'DM Sans',sans-serif";ctx.textAlign='center';
+    ctx.fillText('Run an analysis to build the heatmap',w/2,h/2);
+    ctx.textAlign='left';
+  }
+  ctx.font="10px 'DM Mono',monospace";
+  ctx.fillStyle=dk?'rgba(255,255,255,0.24)':'rgba(0,0,0,0.2)';
+  ctx.fillText('N',w/2-3,12);ctx.fillText('S',w/2-3,h-5);ctx.fillText('W',5,h/2+3);ctx.fillText('E',w-10,h/2+3);
+}
+
+async function loadHeatmap(){
+  try{
+    const r=await fetch('/api/logs/rows');
+    if(!r.ok)return;
+    const rows=await r.json();
+    if(!rows.length)return;
+    const pts=[];let mxX=0,mxY=0;
+    rows.slice(0,4000).forEach(r=>{
+      if(r.cx>0&&r.cy>0){pts.push({x:r.cx,y:r.cy,r:0,h:0});if(r.cx>mxX)mxX=r.cx;if(r.cy>mxY)mxY=r.cy;}
+    });
+    if(!pts.length)return;
+    pts.forEach(p=>{p.r=mxX;p.h=mxY;});
+    window._tiqHeatPoints=pts;
+    drawHm();
+  }catch(e){}
+}
+
+setTimeout(rebuildCharts,120);
+setTimeout(rebuildPie,150);
+setTimeout(drawHm,180);
+setTimeout(loadHeatmap,600);
+setInterval(loadHeatmap,20000);
+window.addEventListener('resize',()=>setTimeout(drawHm,50));
+
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){
+      document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className='fas fa-sun';});}
+    }
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){
+      const btn=document.querySelector('.lb[onclick*="\''+lg+'\'"]');
+      if(btn)setLang(lg,btn);
+    }
+  }catch(e){}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

TRAFFIC_ROAD_APP/templates/history.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — History</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--surface:#fff;--surface2:#f6f8fb;--border:rgba(0,0,0,0.07);--shadow:0 2px 16px rgba(0,0,0,0.09);--shadow-lg:0 8px 36px rgba(0,0,0,0.13);--text:#0f1923;--text2:#5a6a7a;--text3:#9aaab8;--accent:#880000;--accent2:#660000;--accent-light:rgba(136,0,0,0.07);--green:#16a34a;--green-bg:#dcfce7;--sidebar-w:60px;--radius:14px;--radius-sm:9px;}
+[data-theme="dark"]{--bg:#0c1117;--surface:#151c25;--surface2:#1c2531;--border:rgba(255,255,255,0.07);--shadow:0 2px 16px rgba(0,0,0,0.45);--text:#e8edf2;--text2:#7a8fa0;--text3:#3a4a5a;--green-bg:#052e16;}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+::-webkit-scrollbar{width:0;}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;display:flex;min-height:100vh;transition:background 0.3s,color 0.3s;}
+
+.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200;box-shadow:2px 0 12px rgba(0,0,0,0.04);}
+.sb-logo{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;margin-bottom:10px;text-decoration:none;}
+.sb-sep{width:28px;height:1px;background:var(--border);margin:4px 0;}
+.sb-btn{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:15px;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;background:none;position:relative;}
+.sb-btn:hover{background:var(--surface2);color:var(--text);}
+.sb-btn.active{background:var(--accent-light);color:var(--accent);}
+.sb-btn .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%);background:var(--text);color:var(--surface);font-size:11px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:300;}
+.sb-btn:hover .tip{opacity:1;}
+.sb-spacer{flex:1;}
+
+.page-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;}
+.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:100;}
+.topbar-l{display:flex;align-items:center;gap:10px;}
+.brand-name{font-size:15px;font-weight:600;} .brand-name b{color:var(--accent);}
+.sep{color:var(--border);font-size:18px;margin:0 2px;}
+.topbar-r{display:flex;align-items:center;gap:7px;}
+.lang-group{display:flex;background:var(--surface2);border-radius:6px;padding:2px;border:1px solid var(--border);}
+.lang-btn{font-size:11px;font-weight:500;padding:3px 8px;border:none;background:none;cursor:pointer;border-radius:4px;color:var(--text2);font-family:'DM Sans',sans-serif;transition:all 0.2s;}
+.lang-btn.active{background:var(--accent);color:white;}
+.icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px;}
+.icon-btn:hover{background:var(--surface2);}
+
+main{flex:1;padding:18px 20px;max-width:1380px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
+
+/* PLAYER CARD — full width */
+.player-card{grid-column:1/3;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow:hidden;}
+.player-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
+.player-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;}
+.player-title i{color:var(--accent);}
+.player-body{position:relative;background:#000;}
+.player-body video{width:100%;display:block;max-height:420px;object-fit:contain;}
+.player-hud{position:absolute;top:11px;left:13px;color:white;font-family:'DM Mono',monospace;font-size:12px;line-height:1.8;text-shadow:1px 1px 4px rgba(0,0,0,0.98);pointer-events:none;}
+.player-empty{padding:80px 20px;text-align:center;color:var(--text3);}
+.player-empty i{font-size:44px;display:block;margin-bottom:12px;}
+.player-empty p{font-size:13px;}
+
+/* VIDEO GRID */
+.vid-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:all 0.2s;}
+.vid-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
+.vid-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
+.vid-thumb{position:relative;background:#0a0a0a;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;}
+.vid-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
+.vid-thumb-ph{color:rgba(255,255,255,0.3);font-size:32px;}
+.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);opacity:0;transition:opacity 0.2s;}
+.play-overlay i{font-size:32px;color:white;}
+.vid-card:hover .play-overlay{opacity:1;}
+.vid-info{padding:11px 13px;}
+.vid-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
+.vid-meta{font-size:10px;color:var(--text2);display:flex;align-items:center;justify-content:space-between;}
+.vid-meta span{display:flex;align-items:center;gap:4px;}
+.vid-actions{display:flex;gap:6px;margin-top:8px;}
+.btn-vi{flex:1;padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:4px;transition:all 0.2s;}
+.btn-vi:hover{background:var(--accent);color:white;border-color:var(--accent);}
+.btn-vi.danger:hover{background:#dc2626;border-color:#dc2626;}
+
+/* EMPTY HISTORY */
+.empty-hist{text-align:center;padding:60px 20px;color:var(--text3);}
+.empty-hist i{font-size:48px;display:block;margin-bottom:14px;}
+.empty-hist p{font-size:13px;margin-bottom:16px;}
+.empty-hist a{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:white;padding:9px 18px;border-radius:9px;text-decoration:none;font-size:12px;}
+
+/* BADGE */
+.badge{font-size:10px;font-weight:500;padding:1px 6px;border-radius:4px;}
+.bg{background:var(--green-bg);color:var(--green);}
+</style>
+</head>
+<body>
+
+<nav class="sidebar">
+  <a href="/" class="sb-logo"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sb-sep"></div>
+  <a href="/home" class="sb-btn"><i class="fas fa-play-circle"></i><span class="tip" id="tip-analyze">Analyze</span></a>
+  <a href="/dashboard" class="sb-btn"><i class="fas fa-chart-line"></i><span class="tip" id="tip-dash">Dashboard</span></a>
+  <a href="/logs" class="sb-btn"><i class="fas fa-list-ul"></i><span class="tip" id="tip-logs">Logs</span></a>
+  <a href="/history" class="sb-btn active"><i class="fas fa-film"></i><span class="tip" id="tip-hist">History</span></a>
+  <div class="sb-spacer"></div>
+  <button class="sb-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="page-wrap">
+  <header class="topbar">
+    <div class="topbar-l">
+      <span class="brand-name">Track<b>IQ</b></span>
+      <span class="sep">|</span>
+      <span style="font-size:13px;font-weight:500;" id="t-title">Annotated History</span>
+    </div>
+    <div class="topbar-r">
+      <div class="lang-group">
+        <button class="lang-btn active" onclick="setLang('en',this)">EN</button>
+        <button class="lang-btn" onclick="setLang('fr',this)">FR</button>
+        <button class="lang-btn" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="icon-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon2"></i></button>
+    </div>
+  </header>
+
+  <main id="mainGrid">
+
+    <!-- Videos grid -->
+    <div id="videoGrid" style="display:grid;grid-template-columns:1fr 1fr;gap:16px;"></div>
+
+  </main>
+</div>
+
+<script>
+/* THEME */
+function toggleTheme(){
+  const d=document.documentElement,dark=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dark?'light':'dark');
+  ['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className=dark?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dark?'light':'dark');}catch(e){}
+}
+
+/* LANG */
+const T={
+  en:{title:'Annotated History',player:'Video player',dl:'Download','select-vid':'Select a video below to play it',tipAnalyze:'Analyze',tipDash:'Dashboard',tipLogs:'Logs',tipHist:'History',reanalyze:'Re-analyze',download:'Download',delete:'Delete',empty:'No annotated videos yet.',goAnalyze:'Go to Analyze'},
+  fr:{title:'Historique annoté',player:'Lecteur vidéo',dl:'Télécharger','select-vid':'Sélectionnez une vidéo ci-dessous',tipAnalyze:'Analyser',tipDash:'Tableau de bord',tipLogs:'Logs',tipHist:'Historique',reanalyze:'Ré-analyser',download:'Télécharger',delete:'Supprimer',empty:'Aucune vidéo annotée.',goAnalyze:'Aller sur Analyser'},
+  wo:{title:'Màgg yi',player:'Video bi',dl:'Télécharger','select-vid':'Tànn video ci suuf',tipAnalyze:'Jàng',tipDash:'Dashboard',tipLogs:'Logs',tipHist:'Màgg',reanalyze:'Wërtëk',download:'Télécharger',delete:'Bañ',empty:'Amul video.',goAnalyze:'Dem Analyser'}
+};
+let curLang='en';
+function setLang(l,btn){
+  curLang=l;
+  document.querySelectorAll('.lang-btn').forEach(b=>b.classList.remove('active'));btn.classList.add('active');
+  const t=T[l];
+  Object.entries({title:'t-title',player:'t-player',dl:'t-dl','select-vid':'t-select-vid',tipAnalyze:'tip-analyze',tipDash:'tip-dash',tipLogs:'tip-logs',tipHist:'tip-hist'}).forEach(([k,id])=>{const el=document.getElementById(id);if(el&&t[k])el.textContent=t[k];});
+  renderGrid();
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+/* HISTORY DATA */
+function getHistory(){try{return JSON.parse(localStorage.getItem('tiq_history')||'[]');}catch(e){return[];}}
+function saveHistory(h){try{localStorage.setItem('tiq_history',JSON.stringify(h));}catch(e){}}
+
+/* FORMAT DATE */
+function fmtDate(iso){
+  try{const d=new Date(iso);return d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})+' '+d.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit'});}catch(e){return 'Unknown date';}
+}
+
+let activeUrl=null,activeIdx=null;
+
+function dlVideo(url,name){
+  const a=document.createElement('a');a.href=url;
+  a.download=name||'trackiq_video.mp4';a.click();
+}
+
+function playVideo(url,name,idx){
+  activeUrl=url;activeIdx=idx;
+  const op=document.getElementById('overlayPlayer');
+  op.src=url;op.play().catch(()=>{});
+  document.getElementById('overlayName').textContent=name;
+  document.getElementById('vidOverlay').style.display='flex';
+}
+function closeOverlay(){
+  const op=document.getElementById('overlayPlayer');op.pause();op.src='';
+  document.getElementById('vidOverlay').style.display='none';
+  activeUrl=null;activeIdx=null;
+}
+function dlOverlay(){if(activeUrl){const a=document.createElement('a');a.href=activeUrl;a.download='trackiq.mp4';a.click();}}
+
+function dlActive(){
+  if(!activeUrl)return;
+  const a=document.createElement('a');a.href=activeUrl;a.download='trackiq_annotated.mp4';a.click();
+}
+
+function deleteVideo(idx){
+  const h=getHistory();h.splice(idx,1);saveHistory(h);
+  if(activeIdx===idx){
+    closeModal();
+    activeUrl=null;activeIdx=null;
+  }
+  renderGrid();
+}
+
+function renderGrid(){
+  const hist=getHistory();
+  const t=T[curLang];
+  const grid=document.getElementById('videoGrid');grid.innerHTML='';
+
+  if(!hist.length){
+    const empty=document.createElement('div');empty.className='empty-hist';
+    empty.innerHTML=`<i class="fas fa-film"></i><p>${t.empty}</p><a href="/home">${t.goAnalyze} <i class="fas fa-arrow-right"></i></a>`;
+    grid.appendChild(empty);return;
+  }
+
+  hist.forEach((item,i)=>{
+    const card=document.createElement('div');card.className='vid-card'+(activeIdx===i?' selected':'');
+    const isBlob=item.url&&item.url.startsWith('blob:');
+    const isBackend=item.url&&(item.url.startsWith('/api/')||item.url.startsWith('http'));
+    const canPlay=isBlob||isBackend;
+    card.innerHTML=`
+      <div class="vid-thumb">
+        ${isBlob
+          ? `<video src="${item.url}" style="width:100%;height:100%;object-fit:cover;" muted preload="metadata" onloadeddata="this.currentTime=1"></video>`
+          : `<div class="vid-thumb-ph" style="background:#0a0e15;display:flex;align-items:center;justify-content:center;height:100%;">
+               <i class="fas fa-film" style="font-size:32px;color:rgba(255,255,255,0.2);"></i>
+             </div>`
+        }
+        <div class="play-overlay"><i class="fas fa-play"></i></div>
+      </div>
+      <div class="vid-info">
+        <div class="vid-name" title="${item.name}">${item.name||'Unnamed'}</div>
+        <div class="vid-meta">
+          <span><i class="fas fa-calendar" style="font-size:9px;"></i> ${fmtDate(item.date)}</span>
+          <span class="badge bg">${isBlob?'Local':'Server'}</span>
+        </div>
+        <div class="vid-actions">
+          <button class="btn-vi" onclick="event.stopPropagation();playVideo('${item.url}','${item.name}',${i})">
+            <i class="fas fa-play"></i> Play
+          </button>
+          <button class="btn-vi" onclick="event.stopPropagation();dlVideo('${item.url}','${item.name}')">
+            <i class="fas fa-download"></i>
+          </button>
+          <button class="btn-vi danger" onclick="event.stopPropagation();deleteVideo(${i})">
+            <i class="fas fa-trash"></i>
+          </button>
+        </div>
+      </div>
+    `;
+    card.onclick=(ev)=>{if(!ev.target.closest('.btn-vi'))playVideo(item.url,item.name,i);};
+    grid.appendChild(card);
+  });
+}
+
+/* HUD ticker on player */
+setInterval(()=>{
+  if(!activeUrl)return;
+  const f=570+Math.floor(Math.random()*80),s=295+Math.floor(Math.random()*40);
+  const hf=document.getElementById('oHudF');if(hf)hf.textContent=`F: = ${f} ▶ ${s}`;
+  const car=2+Math.floor(Math.random()*6),van=Math.floor(Math.random()*3),bike=Math.floor(Math.random()*6),p=Math.floor(Math.random()*7);
+  const hc=document.getElementById('oHudC');if(hc)hc.innerHTML=`Car = ${car}<br>Van = ${van}<br>bike = ${bike}<br>person = ${p}`;
+},2200);
+
+document.addEventListener('keydown',e=>{if(e.key==='Escape')closeOverlay();});
+/* INIT */
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');if(th){document.documentElement.setAttribute('data-theme',th);if(th==='dark'){['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className='fas fa-sun';});}}
+    const lg=localStorage.getItem('tiq_lang');if(lg&&lg!=='en'){const btn=document.querySelector(`.lang-btn[onclick*="'${lg}'"]`);if(btn)setLang(lg,btn);}
+  }catch(e){}
+  renderGrid();
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+
+<!-- ── Modal lecteur vidéo ── -->
+<div id="vidOverlay" style="display:none;position:fixed;inset:0;z-index:1000;
+  background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
+  align-items:center;justify-content:center;flex-direction:column;gap:12px;">
+
+  <!-- Header -->
+  <div style="display:flex;align-items:center;justify-content:space-between;
+    width:min(90vw,860px);padding:0 4px;">
+    <span id="overlayName" style="color:#fff;font-size:13px;font-weight:500;
+      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;"></span>
+    <div style="display:flex;gap:8px;">
+      <button onclick="dlOverlay()" style="background:rgba(255,255,255,0.12);color:#fff;
+        border:none;border-radius:7px;padding:6px 13px;font-size:12px;cursor:pointer;
+        font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:5px;">
+        <i class="fas fa-download"></i> Download
+      </button>
+      <button onclick="closeOverlay()" style="background:rgba(220,38,38,0.7);color:#fff;
+        border:none;border-radius:7px;padding:6px 13px;font-size:12px;cursor:pointer;
+        font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:5px;">
+        <i class="fas fa-times"></i> Close
+      </button>
+    </div>
+  </div>
+
+  <!-- Vidéo -->
+  <video id="overlayPlayer" controls autoplay
+    style="width:min(90vw,860px);max-height:75vh;border-radius:10px;
+    background:#000;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.6);">
+  </video>
+
+  <!-- Hint ESC -->
+  <span style="color:rgba(255,255,255,0.3);font-size:10px;">Press ESC to close</span>
+</div>
+</body>
+</html>

TRAFFIC_ROAD_APP/templates/home.html

@@ -0,0 +1,684 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — Analyze</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--sur:#fff;--sur2:#f6f8fb;--bd:rgba(0,0,0,0.07);--sh:0 2px 16px rgba(0,0,0,0.09);--shlg:0 8px 36px rgba(0,0,0,0.13);--t:#0f1923;--t2:#5a6a7a;--t3:#9aaab8;--ac:#880000;--ac2:#660000;--acl:rgba(136,0,0,0.07);--gr:#16a34a;--sw:60px;--r:14px;--rs:9px;}
+[data-theme="dark"]{--bg:#0c1117;--sur:#151c25;--sur2:#1c2531;--bd:rgba(255,255,255,0.07);--sh:0 2px 16px rgba(0,0,0,0.45);--t:#e8edf2;--t2:#7a8fa0;--t3:#3a4a5a;}
+*{box-sizing:border-box;margin:0;padding:0;}::-webkit-scrollbar{width:0;}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t);font-size:13px;display:flex;min-height:100vh;}
+
+/* Sidebar */
+.sb{width:var(--sw);background:var(--sur);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200;}
+.sbl{width:34px;height:34px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none;}
+.sbsep{width:26px;height:1px;background:var(--bd);margin:3px 0;}
+.sbb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:14px;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;background:none;position:relative;}
+.sbb:hover{background:var(--sur2);color:var(--t);}.sbb.on{background:var(--acl);color:var(--ac);}
+.sbb .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%);background:var(--t);color:var(--sur);font-size:10px;padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;z-index:300;}.sbb:hover .tip{opacity:1;}
+.sbsp{flex:1;}
+
+/* Layout */
+.pw{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;}
+.topb{height:50px;background:var(--sur);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100;}
+.topl{display:flex;align-items:center;gap:9px;}
+.bn{font-size:14px;font-weight:600;}.bn b{color:var(--ac);}
+.topr{display:flex;align-items:center;gap:6px;}
+.lg{display:flex;background:var(--sur2);border-radius:5px;padding:2px;border:1px solid var(--bd);}
+.lb{font-size:10px;font-weight:500;padding:2px 8px;border:none;background:none;cursor:pointer;border-radius:3px;color:var(--t2);font-family:'DM Sans',sans-serif;transition:all 0.2s;}.lb.on{background:var(--ac);color:#fff;}
+.ib{width:28px;height:28px;border-radius:5px;border:1px solid var(--bd);background:var(--sur);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:11px;}
+.ib:hover{background:var(--sur2);}
+
+main{flex:1;padding:14px 16px;display:grid;grid-template-columns:340px 1fr;gap:12px;max-width:1400px;width:100%;margin:0 auto;}
+
+/* Card */
+.card{background:var(--sur);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px 16px;}
+.ct{font-size:12px;font-weight:500;margin-bottom:11px;display:flex;align-items:center;gap:6px;}
+.ct i{color:var(--ac);}
+
+/* Source tabs */
+.stabs{display:flex;gap:3px;background:var(--sur2);border-radius:7px;padding:3px;border:1px solid var(--bd);margin-bottom:11px;}
+.stab{flex:1;padding:6px 4px;border-radius:5px;font-size:11px;cursor:pointer;color:var(--t2);border:none;background:none;font-family:'DM Sans',sans-serif;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:4px;}
+.stab.on{background:var(--sur);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,0.1);font-weight:500;}
+
+/* Upload zone */
+.uzone{border:2px dashed var(--bd);border-radius:var(--rs);min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all 0.2s;padding:14px;position:relative;overflow:hidden;}
+.uzone:hover,.uzone.drag{border-color:var(--ac);background:var(--acl);}
+.uzone.has{border-style:solid;border-color:var(--ac);}
+.uzone i{font-size:22px;color:var(--t3);}
+.uzone.has i{color:var(--ac);}
+.uzone p{font-size:11px;color:var(--t2);text-align:center;}
+.uzone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
+.fname{font-size:11px;font-weight:500;color:var(--ac);display:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.prog{display:none;background:var(--sur2);border-radius:3px;height:4px;margin-top:7px;overflow:hidden;}
+.progb{height:100%;background:var(--ac);width:0%;transition:width 0.3s;}
+.progt{font-size:10px;color:var(--t2);margin-top:4px;display:none;}
+
+/* URL */
+.urow{display:flex;gap:6px;}
+.uin{flex:1;padding:7px 9px;border:1px solid var(--bd);border-radius:7px;font-size:12px;background:var(--sur2);color:var(--t);font-family:'DM Sans',sans-serif;outline:none;}
+.uin:focus{border-color:var(--ac);}
+.uin::placeholder{color:var(--t3);}
+.bsm{padding:7px 12px;background:var(--ac);color:#fff;border:none;border-radius:7px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
+
+/* Webcam */
+.wcbox{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;position:relative;margin-bottom:10px;}
+.wcbox video,.wcbox img{width:100%;height:100%;object-fit:cover;display:block;}
+.wcph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:rgba(255,255,255,0.3);font-size:11px;}
+.wcph i{font-size:22px;}
+.recbdg{position:absolute;top:7px;left:8px;display:none;align-items:center;gap:4px;background:rgba(220,38,38,0.85);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
+.recbdg i{font-size:8px;animation:blink 1s infinite;}
+
+/* Classes */
+.clshd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
+.clshd span{font-size:11px;color:var(--t2);}
+.clshd button{font-size:11px;color:var(--ac);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;}
+.clsg{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
+.clsi{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;border:1px solid var(--bd);cursor:pointer;transition:all 0.2s;font-size:11px;background:var(--sur2);}
+.clsi:hover{border-color:var(--ac);}.clsi.on{border-color:var(--ac);background:var(--acl);}
+.cldot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}
+
+/* Buttons */
+.runbtn{width:100%;padding:10px;background:var(--ac);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;transition:all 0.2s;margin-top:4px;}
+.runbtn:hover{background:var(--ac2);}.runbtn:disabled{opacity:0.4;cursor:not-allowed;}
+.rstbtn{width:100%;padding:8px;background:var(--sur2);color:var(--t2);border:1px solid var(--bd);border-radius:9px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;}
+.rstbtn:hover{border-color:var(--ac);color:var(--ac);}
+
+/* Right col */
+.rc{display:flex;flex-direction:column;gap:11px;}
+
+/* Big panel */
+.bp{background:var(--sur);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--shlg);overflow:hidden;}
+.bph{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
+.bpht{font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
+.bpht i{color:var(--ac);}
+.bpb{position:relative;background:#080e15;height:420px;}
+
+/* Video dans le panel */
+.bpb video,.bpb img#wcYoloImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;}
+
+/* HUD top-left */
+.hud{position:absolute;top:10px;left:11px;color:#fff;font-family:'DM Mono',monospace;font-size:11px;line-height:1.85;text-shadow:1px 1px 4px rgba(0,0,0,0.98);pointer-events:none;display:none;z-index:4;}
+.hudf{font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;}
+
+/* Count overlay top-right */
+.cov{position:absolute;top:10px;right:11px;display:none;flex-direction:column;gap:4px;pointer-events:none;z-index:4;}
+.cbdg{display:flex;flex-direction:column;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);border-left:3px solid transparent;border-radius:5px;padding:4px 9px;min-width:115px;}
+.cbdg .cn{font-size:13px;font-weight:600;line-height:1.2;}
+.cbdg .cu{font-size:9px;color:#ccc;line-height:1.2;}
+
+/* No-object banner */
+.noobj{display:none;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;
+  background:rgba(220,38,38,0.9);color:#fff;font-size:12px;font-weight:500;
+  padding:6px 16px;border-radius:20px;align-items:center;gap:7px;white-space:nowrap;}
+
+/* Empty state */
+.es{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,0.18);}
+.es i{font-size:38px;}.es p{font-size:12px;}
+
+/* Stats row */
+.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
+.sc{background:var(--sur);border-radius:var(--rs);border:1px solid var(--bd);box-shadow:var(--sh);padding:10px 12px;}
+.sc .sl{font-size:10px;color:var(--t2);margin-bottom:3px;}
+.sc .sv{font-size:18px;font-weight:300;letter-spacing:-0.5px;}
+.sc .su{font-size:10px;color:var(--t2);}
+
+/* Download bar */
+.dlb{display:flex;align-items:center;justify-content:space-between;background:var(--sur);border-radius:var(--rs);border:1px solid var(--bd);box-shadow:var(--sh);padding:9px 13px;}
+.dlb span{font-size:11px;color:var(--t2);}
+.btndl{display:flex;align-items:center;gap:5px;background:var(--ac);color:#fff;border:none;border-radius:7px;padding:7px 13px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
+.btndl:hover{background:var(--ac2);}.btndl:disabled{opacity:0.4;cursor:not-allowed;background:var(--t3);}
+</style>
+</head>
+<body>
+
+<nav class="sb">
+  <a href="/" class="sbl"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sbsep"></div>
+  <a href="/home" class="sbb on"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sbb"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sbb"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sbb"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sbsp"></div>
+  <button class="sbb" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="pw">
+  <header class="topb">
+    <div class="topl">
+      <span class="bn">Track<b>IQ</b></span>
+      <span style="color:var(--bd);font-size:16px;">|</span>
+      <span style="font-size:12px;font-weight:500;color:var(--t2);">Video Analysis</span>
+    </div>
+    <div class="topr">
+      <div class="lg">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="ib" onclick="toggleTheme()"><i class="fas fa-moon" id="ti2"></i></button>
+    </div>
+  </header>
+
+  <main>
+    <!-- Colonne gauche -->
+    <div style="display:flex;flex-direction:column;gap:11px;">
+
+      <!-- Input source -->
+      <div class="card">
+        <div class="ct"><i class="fas fa-video"></i> Input source</div>
+        <div class="stabs">
+          <button class="stab on" onclick="switchSrc('upload',this)"><i class="fas fa-upload"></i> Video</button>
+          <button class="stab" onclick="switchSrc('url',this)"><i class="fas fa-link"></i> URL</button>
+          <button class="stab" onclick="switchSrc('webcam',this)"><i class="fas fa-camera"></i> Webcam</button>
+        </div>
+
+        <!-- Upload -->
+        <div id="src-upload">
+          <label class="uzone" id="uzone">
+            <i class="fas fa-cloud-upload-alt"></i>
+            <p>Drop video here or click to browse</p>
+            <p style="font-size:10px;color:var(--t3);">MP4, AVI, MOV — max 500 MB</p>
+            <span class="fname" id="fname"></span>
+            <input type="file" id="fileInput" accept="video/*" onchange="onFile(event)">
+          </label>
+          <div class="prog" id="progWrap"><div class="progb" id="progBar"></div></div>
+          <div class="progt" id="progTxt"></div>
+        </div>
+
+        <!-- URL -->
+        <div id="src-url" style="display:none;">
+          <div class="urow">
+            <input type="text" class="uin" id="urlIn" placeholder="https://… or rtsp://…">
+            <button class="bsm" onclick="loadUrl()">Load</button>
+          </div>
+        </div>
+
+        <!-- Webcam -->
+        <div id="src-webcam" style="display:none;">
+          <!-- Mini preview : flux YOLO annoté -->
+          <div class="wcbox" id="wcbox">
+            <img id="wcMiniYolo" alt="YOLO stream" style="display:none;">
+            <div class="wcph" id="wcPh"><i class="fas fa-camera-slash"></i><span>Click Start</span></div>
+            <div class="recbdg" id="recBadge"><i class="fas fa-circle"></i> LIVE</div>
+          </div>
+          <!-- Bouton stop webcam seulement (plus de bouton Enregistrer) -->
+          <button class="runbtn" id="wcBtn" onclick="startWc()">
+            <i class="fas fa-circle" style="color:#f87171;font-size:8px;"></i> Start webcam
+          </button>
+        </div>
+      </div>
+
+      <!-- Detection classes -->
+      <div class="card">
+        <div class="ct"><i class="fas fa-tags"></i> Detection classes</div>
+        <div class="clshd">
+          <span id="clsCnt">0 selected</span>
+          <button onclick="toggleAll()">Select all</button>
+        </div>
+        <div class="clsg" id="clsGrid"></div>
+      </div>
+
+      <button class="runbtn" id="runBtn" onclick="runAnalysis()" disabled>
+        <i class="fas fa-play"></i> Run Analysis
+      </button>
+      <button class="rstbtn" onclick="resetAll()">
+        <i class="fas fa-rotate-right"></i> Reset
+      </button>
+    </div>
+
+    <!-- Colonne droite -->
+    <div class="rc">
+
+      <!-- Big result panel -->
+      <div class="bp">
+        <div class="bph">
+          <div class="bpht"><i class="fas fa-film"></i> Result</div>
+          <span style="font-size:11px;color:var(--t2);" id="srcLabel"></span>
+        </div>
+        <div class="bpb" id="bigBody">
+          <!-- Vidéo annotée (upload/url) -->
+          <video id="resultVid" controls></video>
+          <!-- Flux YOLO webcam (grand) -->
+          <img id="wcYoloImg" alt="YOLO stream">
+          <!-- HUD top-left -->
+          <div class="hud" id="hudEl">
+            <div class="hudf" id="hudFr">—</div>
+            <div id="hudCo">—</div>
+          </div>
+          <!-- Compteurs top-right -->
+          <div class="cov" id="cOverlay"></div>
+          <!-- Banner no-object -->
+          <div class="noobj" id="noObjBanner">
+            <i class="fas fa-eye-slash"></i> No object detected
+          </div>
+          <!-- Canvas caché pour enregistrement webcam -->
+        <canvas id="wcCanvas" style="display:none;"></canvas>
+        <!-- Empty state -->
+          <div class="es" id="emptyState">
+            <i class="fas fa-film"></i>
+            <p>Result will appear here</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="sr">
+        <div class="sc"><div class="sl">Frames</div><div class="sv" id="stF">—</div></div>
+        <div class="sc"><div class="sl">Objects</div><div class="sv" id="stO">—</div></div>
+        <div class="sc"><div class="sl">FPS</div><div class="sv" id="stFps">—</div></div>
+        <div class="sc"><div class="sl">Duration</div><div class="sv" id="stD">—</div></div>
+      </div>
+
+      <!-- Download -->
+      <div class="dlb">
+        <span id="dlName">No result yet</span>
+        <button class="btndl" id="dlBtn" disabled onclick="doDownload()">
+          <i class="fas fa-download"></i> Download
+        </button>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<script>
+/* ── Theme ── */
+function toggleTheme(){
+  const d=document.documentElement,dk=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dk?'light':'dark');
+  ['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className=dk?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dk?'light':'dark');}catch(e){}
+}
+function setLang(l,btn){
+  document.querySelectorAll('.lb').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+/* ── Classes ── */
+const CLASSES=[
+  {name:'Vehicle',color:'#3b82f6'},{name:'Motorcycle',color:'#10b981'},
+  {name:'Truck',color:'#f59e0b'},{name:'Bus',color:'#8b5cf6'},
+  {name:'Human',color:'#ec4899'},{name:'Bicycle',color:'#06b6d4'},
+  {name:'Traffic light',color:'#ef4444'},{name:'Road sign',color:'#f97316'},
+];
+let sel=new Set(['Human']);
+
+function buildCls(){
+  const g=document.getElementById('clsGrid'); g.innerHTML='';
+  CLASSES.forEach(c=>{
+    const d=document.createElement('div');
+    d.className='clsi'+(sel.has(c.name)?' on':'');
+    d.innerHTML=`<span class="cldot" style="background:${c.color}"></span>${c.name}`;
+    d.onclick=()=>{sel.has(c.name)?sel.delete(c.name):sel.add(c.name);d.classList.toggle('on');upCls();};
+    g.appendChild(d);
+  });
+  upCls();
+}
+function toggleAll(){sel.size===CLASSES.length?sel.clear():CLASSES.forEach(c=>sel.add(c.name));buildCls();}
+function upCls(){document.getElementById('clsCnt').textContent=sel.size+' selected';}
+buildCls();
+
+/* ── State ── */
+let curSrc='upload', vidFile=null, vidUrl=null, wcStream=null;
+let _jobId=null, _sse=null, _wcPollIv=null, _annotatedUrl=null;
+
+/* ── Source switch ── */
+function switchSrc(s,btn){
+  curSrc=s;
+  document.querySelectorAll('.stab').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
+  ['upload','url','webcam'].forEach(id=>{
+    const el=document.getElementById('src-'+id);if(el)el.style.display='none';
+  });
+  document.getElementById('src-'+s).style.display='block';
+  checkReady();
+}
+
+/* ── File upload ── */
+function onFile(e){
+  const f=e.target.files[0];if(!f)return;
+  vidFile=f;
+  const fn=document.getElementById('fname');fn.textContent=f.name;fn.style.display='block';
+  document.getElementById('uzone').classList.add('has');
+  checkReady();
+}
+function loadUrl(){
+  const u=document.getElementById('urlIn').value.trim();if(!u)return;
+  vidUrl=u;checkReady();
+}
+
+/* ── Run Analysis ── */
+window.runAnalysis=async function(){
+  const btn=document.getElementById('runBtn');
+  btn.disabled=true;
+  btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Processing…';
+  document.getElementById('progWrap').style.display='block';
+  document.getElementById('progTxt').style.display='block';
+  document.getElementById('progTxt').textContent='Uploading…';
+  document.getElementById('progBar').style.width='5%';
+  document.getElementById('emptyState').style.display='none';
+
+  /* Upload si pas encore fait */
+  if(!_jobId){
+    if(!vidFile&&!vidUrl){
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';return;
+    }
+    const fd=new FormData();
+    if(vidFile) fd.append('video',vidFile);
+    try{
+      const r=await fetch('/api/upload',{method:'POST',body:fd});
+      const d=await r.json();
+      _jobId=d.job_id;
+    }catch(err){
+      console.error('[TrackIQ] Upload:',err);
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';return;
+    }
+  }
+
+  document.getElementById('progTxt').textContent='Starting detection…';
+  document.getElementById('progBar').style.width='10%';
+
+  try{
+    await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({job_id:_jobId,classes:[...sel],model:'yolo11n'})});
+  }catch(err){console.error('[TrackIQ] Run:',err);return;}
+
+  /* SSE */
+  if(_sse)_sse.close();
+  _sse=new EventSource(`/api/stream/${_jobId}`);
+  _sse.onmessage=(e)=>{
+    let d;try{d=JSON.parse(e.data);}catch{return;}
+
+    if(d.event==='done'){
+      _sse.close();
+      _showBanner(false);
+      document.getElementById('progBar').style.width='100%';
+      document.getElementById('progTxt').textContent='Done!';
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';
+
+      /* ✅ Affiche la vidéo annotée */
+      const rv=document.getElementById('resultVid');
+      rv.src=`/api/video/${_jobId}`;
+      rv.style.display='block';
+      rv.load();
+      document.getElementById('srcLabel').textContent=vidFile?vidFile.name:'video';
+      document.getElementById('hudEl').style.display='block';
+      document.getElementById('cOverlay').style.display='flex';
+      _annotatedUrl=`/api/video/${_jobId}`;
+
+      /* Stats */
+      const s=d.stats||{};
+      _set('stF',s.total_frames??'—');_set('stO',s.total_unique??'—');
+      _set('stFps',s.fps?s.fps.toFixed(1):'—');_set('stD',s.duration_s?s.duration_s+'s':'—');
+      _showCounts(s.unique_counts||{});
+      _set('dlName',vidFile?vidFile.name:'annotated.mp4');
+      document.getElementById('dlBtn').removeAttribute('disabled');
+
+      /* Sauvegarde localStorage */
+      try{
+        localStorage.setItem('tiq_job_id',_jobId);
+        localStorage.setItem('tiq_video_url',`/api/video/${_jobId}`);
+        localStorage.setItem('tiq_video_name',s.video_name||'');
+        localStorage.setItem('tiq_stats',JSON.stringify(s));
+      }catch(ex){}
+      return;
+    }
+
+    /* Progression */
+    if(d.pct!=null){
+      document.getElementById('progBar').style.width=d.pct+'%';
+      document.getElementById('progTxt').textContent=`Processing… ${d.pct.toFixed(0)}%`;
+    }
+    _showBanner(d.no_objects===true);
+    if(d.hud){
+      _set('hudFr',d.hud.frame_str);
+      const hco=document.getElementById('hudCo');
+      if(hco) hco.innerHTML=Object.entries(d.hud.counts||{})
+        .map(([k,v])=>`${k} = ${v}`).join('<br>')||'No object';
+    }
+    if(d.unique_counts) _showCounts(d.unique_counts);
+  };
+  _sse.onerror=()=>_sse.close();
+};
+
+/* ── Webcam ── */
+let _wcFrameIv=null, _wcHiddenVideo=null, _wcCanvas2=null;
+
+async function startWc(){
+  try{
+    wcStream=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480},audio:false});
+  }catch(e){alert('Webcam unavailable: '+e.message);return;}
+
+  document.getElementById('wcPh').style.display='none';
+  document.getElementById('recBadge').style.display='flex';
+  document.getElementById('runBtn').style.display='none';
+
+  const btn=document.getElementById('wcBtn');
+  btn.innerHTML='<i class="fas fa-stop" style="color:#f87171;font-size:9px;"></i> Stop webcam';
+  btn.onclick=stopWc;
+
+  /* Lance YOLO backend */
+  await fetch('/api/webcam/start',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({classes:[...sel],model:'yolo11n'})}).catch(()=>{});
+
+  /* Setup hidden video + canvas pour capturer frames */
+  _wcHiddenVideo=document.createElement('video');
+  _wcHiddenVideo.srcObject=wcStream;
+  _wcHiddenVideo.setAttribute('playsinline','');
+  _wcHiddenVideo.muted=true;
+  _wcHiddenVideo.play();
+  _wcCanvas2=document.createElement('canvas');
+  _wcCanvas2.width=640;_wcCanvas2.height=480;
+  const ctx2=_wcCanvas2.getContext('2d');
+
+  /* Envoie une frame toutes les 200ms → reçoit JPEG annoté → l'affiche */
+  const miniImg=document.getElementById('wcMiniYolo');
+  const bigImg=document.getElementById('wcYoloImg');
+  miniImg.style.display='block';
+  bigImg.style.display='block';
+
+  _wcFrameIv=setInterval(async()=>{
+    if(!wcStream||!_wcHiddenVideo)return;
+    ctx2.drawImage(_wcHiddenVideo,0,0,640,480);
+    _wcCanvas2.toBlob(async(blob)=>{
+      if(!blob)return;
+      try{
+        const resp=await fetch('/api/webcam/frame',{method:'POST',
+          headers:{'Content-Type':'image/jpeg'},body:blob});
+        if(!resp.ok)return;
+        const url=URL.createObjectURL(await resp.blob());
+        miniImg.src=url;bigImg.src=url;
+      }catch(e){}
+    },'image/jpeg',0.75);
+  },200);
+
+  /* Grand panel droite */
+  document.getElementById('emptyState').style.display='none';
+  document.getElementById('resultVid').style.display='none';
+  document.getElementById('hudEl').style.display='block';
+  document.getElementById('cOverlay').style.display='flex';
+  document.getElementById('srcLabel').textContent='Webcam — LIVE';
+
+  /* Démarre l'enregistrement automatiquement */
+  setTimeout(_startRec, 800);
+  /* Polling stats toutes les 800ms */
+  clearInterval(_wcPollIv);
+  _wcPollIv=setInterval(_pollWc,800);
+  checkReady();
+}
+
+/* ── Recording webcam → grand Result ── */
+let _recIv=null, _recChunks=[], _mediaRec=null;
+
+function _startRec(){
+  const canvas=document.getElementById('wcCanvas');
+  const img=document.getElementById('wcYoloImg');
+  if(!canvas||!img)return;
+  canvas.width=640;canvas.height=480;
+  const ctx=canvas.getContext('2d');
+  _recIv=setInterval(()=>{
+    if(img.naturalWidth>0){canvas.width=img.naturalWidth;canvas.height=img.naturalHeight;ctx.drawImage(img,0,0);}
+  },40);
+  const mime=MediaRecorder.isTypeSupported('video/webm;codecs=vp9')?'video/webm;codecs=vp9':'video/webm';
+  _mediaRec=new MediaRecorder(canvas.captureStream(25),{mimeType:mime,videoBitsPerSecond:2000000});
+  _recChunks=[];
+  _mediaRec.ondataavailable=e=>{if(e.data.size>0)_recChunks.push(e.data);};
+  _mediaRec.onstop=_saveRec;
+  _mediaRec.start(500);
+}
+
+function _saveRec(){
+  clearInterval(_recIv);_recIv=null;
+  if(!_recChunks.length)return;
+  const blob=new Blob(_recChunks,{type:'video/webm'});
+  const url=URL.createObjectURL(blob);
+  _annotatedUrl=url;
+  /* Affiche dans le grand Result */
+  const rv=document.getElementById('resultVid');
+  rv.src=url;rv.style.display='block';rv.controls=true;
+  rv.onloadeddata=()=>rv.play().catch(()=>{});rv.load();
+  document.getElementById('srcLabel').textContent='Webcam — recorded';
+  document.getElementById('emptyState').style.display='none';
+  document.getElementById('hudEl').style.display='block';
+  /* Active download */
+  _set('dlName','webcam_trackiq.webm');
+  document.getElementById('dlBtn').removeAttribute('disabled');
+  document.getElementById('dlBtn').onclick=()=>{
+    const a=document.createElement('a');a.href=url;a.download='webcam_trackiq.webm';a.click();
+  };
+}
+
+function stopWc(){
+  /* 1. Arrête enregistrement → déclenche _saveRec → vidéo dans Result */
+  if(_mediaRec&&_mediaRec.state==='recording') _mediaRec.stop();
+  clearInterval(_wcFrameIv);_wcFrameIv=null;
+  if(_wcHiddenVideo){_wcHiddenVideo.srcObject=null;_wcHiddenVideo=null;}
+  _wcCanvas2=null;
+  if(wcStream){wcStream.getTracks().forEach(t=>t.stop());wcStream=null;}
+  fetch('/api/webcam/stop',{method:'POST'}).catch(()=>{});
+  clearInterval(_wcPollIv);_wcPollIv=null;
+
+  /* 2. Cache flux live */
+  const mi=document.getElementById('wcMiniYolo');mi.src='';mi.style.display='none';
+  const bi=document.getElementById('wcYoloImg');bi.src='';bi.style.display='none';
+
+  document.getElementById('wcPh').style.display='flex';
+  document.getElementById('recBadge').style.display='none';
+  document.getElementById('runBtn').style.display='flex';
+  document.getElementById('cOverlay').style.display='none';
+  document.getElementById('noObjBanner').style.display='none';
+
+  const btn=document.getElementById('wcBtn');
+  btn.innerHTML='<i class="fas fa-circle" style="color:#f87171;font-size:8px;"></i> Start webcam';
+  btn.onclick=startWc;
+  checkReady();
+}
+
+async function _pollWc(){
+  try{
+    const r=await fetch('/api/webcam/stats');
+    if(!r.ok)return;
+    const d=await r.json();
+    const fc=d.frame_counts||{};
+    const uc=d.unique_counts||{};
+    _set('hudFr',`F:${d.frame||0} ▶ LIVE`);
+    const hco=document.getElementById('hudCo');
+    if(hco) hco.innerHTML=Object.entries(fc).map(([k,v])=>`${k} = ${v}`).join('<br>')||
+      '<span style="color:#ef4444">No object</span>';
+    _showCountsWc(fc,uc);
+    _showBanner(!Object.keys(fc).length);
+  }catch(e){}
+}
+
+/* ── Affichage compteurs ── */
+function _showCounts(uc){
+  const ov=document.getElementById('cOverlay');
+  ov.innerHTML='';
+  if(!Object.keys(uc).length){
+    _showBanner(true);return;
+  }
+  Object.entries(uc).forEach(([cls,cnt])=>{
+    const cl=CLASSES.find(c=>c.name===cls);
+    const color=cl?cl.color:'#a78bfa';
+    const div=document.createElement('div');div.className='cbdg';
+    div.style.borderLeftColor=color;
+    div.innerHTML=`<span class="cn" style="color:${color}">${cls} = ${cnt}</span>`;
+    ov.appendChild(div);
+  });
+  _showBanner(false);
+}
+
+function _showCountsWc(fc,uc){
+  const ov=document.getElementById('cOverlay');
+  ov.innerHTML='';
+  const all=new Set([...Object.keys(fc),...Object.keys(uc)]);
+  if(!all.size){_showBanner(true);return;}
+  all.forEach(cls=>{
+    const cl=CLASSES.find(c=>c.name===cls);
+    const color=cl?cl.color:'#a78bfa';
+    const div=document.createElement('div');div.className='cbdg';
+    div.style.borderLeftColor=color;
+    div.innerHTML=`<span class="cn" style="color:${color}">${cls} = ${fc[cls]||0}</span>
+      <span class="cu">Total unique : ${uc[cls]||0}</span>`;
+    ov.appendChild(div);
+  });
+  _showBanner(false);
+}
+
+function _showBanner(show){
+  const b=document.getElementById('noObjBanner');
+  b.style.display=show?'flex':'none';
+}
+
+/* ── Helpers ── */
+function _set(id,val){const el=document.getElementById(id);if(el)el.textContent=val;}
+function checkReady(){
+  const ok=(curSrc==='upload'&&vidFile)||(curSrc==='url'&&vidUrl)||(curSrc==='webcam'&&wcStream);
+  document.getElementById('runBtn').disabled=!ok;
+}
+function doDownload(){
+  const url=_annotatedUrl;if(!url)return;
+  const a=document.createElement('a');a.href=url;a.download='trackiq_annotated.mp4';a.click();
+}
+function resetAll(){
+  if(wcStream)stopWc();
+  if(_sse)_sse.close();
+  _jobId=null;_annotatedUrl=null;vidFile=null;vidUrl=null;
+  const rv=document.getElementById('resultVid');rv.src='';rv.style.display='none';
+  document.getElementById('fname').style.display='none';
+  document.getElementById('fname').textContent='';
+  document.getElementById('uzone').classList.remove('has');
+  document.getElementById('urlIn').value='';
+  document.getElementById('progWrap').style.display='none';
+  document.getElementById('progBar').style.width='0%';
+  document.getElementById('progTxt').style.display='none';
+  document.getElementById('emptyState').style.display='flex';
+  document.getElementById('cOverlay').style.display='none';
+  document.getElementById('hudEl').style.display='none';
+  document.getElementById('noObjBanner').style.display='none';
+  document.getElementById('dlBtn').disabled=true;
+  document.getElementById('dlName').textContent='No result yet';
+  document.getElementById('srcLabel').textContent='';
+  ['stF','stO','stFps','stD'].forEach(id=>_set(id,'—'));
+  const fi=document.getElementById('fileInput');if(fi)fi.value='';
+  checkReady();
+}
+
+/* ── Init ── */
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className='fas fa-sun';});}}
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){const btn=document.querySelector('.lb[onclick*="\''+lg+'\'"]');if(btn)setLang(lg,btn);}
+  }catch(e){}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

TRAFFIC_ROAD_APP/templates/index.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — Urban Traffic Detection</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&family=DM+Mono:wght@400&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root {
+  --ac: #880000;
+  --ac2: #660000;
+  --bg: #f9fafb;
+  --s: #fff;
+  --bd: rgba(0,0,0,0.07);
+  --t: #111827;
+  --t2: #6b7280;
+  --t3: #d1d5db;
+  --sh: 0 4px 24px rgba(0,0,0,0.09);
+  --shlg: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
+  --r: 16px;
+}
+[data-theme="dark"] {
+  --bg: #0c1117;
+  --s: #151c25;
+  --t: #e8edf2;
+  --t2: #7a8fa0;
+  --t3: #3a4a5a;
+  --bd: rgba(255,255,255,0.07);
+  --sh: 0 4px 24px rgba(0,0,0,0.5);
+  --shlg: 0 20px 40px rgba(0,0,0,0.5);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { min-height: 100%; }
+body {
+  font-family: "DM Sans", sans-serif;
+  background: var(--bg);
+  color: var(--t);
+  transition: background 0.3s, color 0.3s;
+}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--t3); border-radius: 3px; }
+
+/* ── FLOATING NAV ── */
+.floatnav {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+.floatnav-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.nav-brand {
+  pointer-events: auto;
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(12px);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+.nav-brand:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
+.nav-brand-icon {
+  width: 28px; height: 28px;
+  background: var(--ac);
+  border-radius: 7px;
+  display: flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 12px;
+}
+.nav-brand-name {
+  font-size: 14px; font-weight: 600;
+  color: #111827; letter-spacing: -0.3px;
+}
+.nav-brand-name b { color: var(--ac); }
+.nav-right {
+  pointer-events: auto;
+  display: flex; gap: 8px; align-items: center;
+}
+.nav-lang {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 4px;
+  display: flex; gap: 4px;
+}
+.lb {
+  font-size: 12px; font-weight: 500;
+  padding: 4px 10px;
+  border: none; background: none;
+  cursor: pointer; border-radius: 6px;
+  color: #6b7280;
+  font-family: "DM Sans", sans-serif;
+  transition: all 0.2s;
+}
+.lb.on { background: var(--ac); color: #fff; }
+.lb:not(.on):hover { background: #f3f4f6; color: #111827; }
+.nav-theme {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  width: 38px; height: 38px;
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: #6b7280; font-size: 13px;
+  transition: all 0.2s;
+}
+.nav-theme:hover { color: var(--ac); }
+
+/* ── HERO ── */
+.hero {
+  background-color: var(--ac);
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23991111' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  color: #fff;
+  padding-top: 90px;
+  padding-bottom: 90px;
+  padding-left: 24px;
+  padding-right: 24px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.hero-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+  animation: fadeUp 0.6s ease both;
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.hero-logo-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.hero-logo-box {
+  background: #fff;
+  padding: 14px;
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  display: flex; align-items: center; justify-content: center;
+  width: 80px; height: 80px;
+}
+.hero-logo-box i {
+  font-size: 36px;
+  color: var(--ac);
+}
+.hero h1 {
+  font-size: clamp(32px, 5vw, 60px);
+  font-weight: 800;
+  letter-spacing: -2px;
+  line-height: 1.1;
+  margin-bottom: 14px;
+}
+.hero h1 .dim { opacity: 0.75; font-weight: 300; font-style: italic; }
+.hero-sub {
+  font-size: clamp(14px, 1.8vw, 18px);
+  color: rgba(255,255,255,0.88);
+  font-weight: 400;
+  line-height: 1.65;
+  margin-bottom: 24px;
+  max-width: 560px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.hero-cta {
+  display: inline-flex; align-items: center; gap: 10px;
+  background: #fff;
+  color: var(--ac);
+  font-weight: 700; font-size: 16px;
+  padding: 14px 32px;
+  border-radius: 50px;
+  text-decoration: none;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+  transition: all 0.3s;
+}
+.hero-cta:hover {
+  background: #f3f4f6;
+  transform: scale(1.05);
+  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
+}
+/* Wave bottom */
+.hero-wave {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  pointer-events: none;
+}
+
+/* ── CARDS GRID ── */
+.cards-section {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+  margin-top: -64px;
+  position: relative;
+  z-index: 20;
+}
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 24px;
+}
+@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
+
+.card {
+  background: var(--s);
+  border-radius: 20px;
+  padding: 32px 24px;
+  box-shadow: var(--shlg);
+  border: 1px solid rgba(0,0,0,0.05);
+  text-decoration: none;
+  display: block;
+  transition: all 0.3s ease;
+  animation: fadeUp 0.6s ease both;
+}
+.card:nth-child(1) { animation-delay: 0.05s; }
+.card:nth-child(2) { animation-delay: 0.12s; }
+.card:nth-child(3) { animation-delay: 0.18s; }
+.card:nth-child(4) { animation-delay: 0.24s; }
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.13), 0 10px 10px -5px rgba(0,0,0,0.05);
+  border-color: var(--ac);
+}
+.card-icon-wrap {
+  width: 80px; height: 80px;
+  background: #fff1f1;
+  color: var(--ac);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px;
+  margin: 0 auto 24px;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(136,0,0,0.08);
+}
+[data-theme="dark"] .card-icon-wrap {
+  background: rgba(136,0,0,0.18);
+}
+.card:hover .card-icon-wrap {
+  background: var(--ac);
+  color: #fff;
+}
+.card-title {
+  text-align: center;
+  font-size: 18px; font-weight: 700;
+  color: var(--t);
+  margin-bottom: 10px;
+  transition: color 0.2s;
+}
+.card:hover .card-title { color: var(--ac); }
+.card-desc {
+  text-align: center;
+  font-size: 13px;
+  color: var(--t2);
+  line-height: 1.65;
+}
+.card-launch {
+  margin-top: 24px;
+  display: flex; justify-content: center;
+}
+.card-launch span {
+  font-size: 13px; font-weight: 600;
+  color: var(--ac);
+  display: flex; align-items: center; gap: 6px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.card:hover .card-launch span { opacity: 1; }
+
+/* ── FOOTER ── */
+footer {
+  background: var(--s);
+  border-top: 1px solid var(--bd);
+  padding: 28px 24px;
+  text-align: center;
+  transition: background 0.3s;
+}
+footer p {
+  font-size: 13px;
+  color: var(--t2);
+  line-height: 1.7;
+}
+footer p span {
+  font-size: 11px;
+  opacity: 0.6;
+  display: block;
+  margin-top: 4px;
+}
+</style>
+</head>
+<body>
+
+<!-- FLOATING NAV -->
+<div class="floatnav">
+  <div class="floatnav-inner">
+    <a href="#" class="nav-brand">
+      <div class="nav-brand-icon"><i class="fas fa-satellite-dish"></i></div>
+      <span class="nav-brand-name">Track<b>IQ</b></span>
+    </a>
+    <div class="nav-right">
+      <div class="nav-lang">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="nav-theme" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i></button>
+    </div>
+  </div>
+</div>
+
+<!-- HERO -->
+<div class="hero">
+  <div class="hero-inner">
+    <div class="hero-logo-wrap">
+      <div class="hero-logo-box">
+        <i class="fas fa-satellite-dish"></i>
+      </div>
+    </div>
+    <h1 id="t-h1">
+      TrackIQ Urban Traffic<br>
+      <span class="dim">Surveillance &amp; Detection</span>
+    </h1>
+    <p class="hero-sub" id="t-sub">
+      Based on Computer Vision — real-time vehicle detection and classification, speed estimation, congestion analysis and traffic sign identification.
+    </p>
+    <a href="/home" class="hero-cta" id="t-launch">
+      <i class="fas fa-play"></i>
+      <span>Launch</span>
+    </a>
+  </div>
+  <div class="hero-wave">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" style="display:block;width:100%;">
+      <path fill="var(--bg)" fill-opacity="1"
+        d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"/>
+    </svg>
+  </div>
+</div>
+
+<!-- CARDS -->
+<div class="cards-section">
+  <div class="cards-grid">
+
+    <!-- Card 1 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-car-side"></i></div>
+      <div class="card-title" id="t-c1t">Vehicle Detection</div>
+      <p class="card-desc" id="t-c1d">Real-time detection and classification of vehicles: cars, trucks, motorcycles, buses and more.</p>
+      <div class="card-launch"><span id="t-launch2">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 2 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-tachometer-alt"></i></div>
+      <div class="card-title" id="t-c2t">Speed Estimation</div>
+      <p class="card-desc" id="t-c2d">Automatic estimation of vehicle speed from video stream without additional sensors.</p>
+      <div class="card-launch"><span id="t-launch3">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 3 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-traffic-light"></i></div>
+      <div class="card-title" id="t-c3t">Signs &amp; Lights</div>
+      <p class="card-desc" id="t-c3d">Identification of traffic signs and lights, red light detection, stop signs and more.</p>
+      <div class="card-launch"><span id="t-launch4">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 4 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-chart-bar"></i></div>
+      <div class="card-title" id="t-c4t">Flow &amp; Congestion</div>
+      <p class="card-desc" id="t-c4d">Congestion analysis, flow measurement and annotated video export for reporting.</p>
+      <div class="card-launch"><span id="t-launch5">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+  </div>
+</div>
+
+<!-- FOOTER -->
+<footer>
+  <p>
+    © 2026 <strong>TrackIQ</strong> — Computer Vision Project. All rights reserved.
+    <span id="t-foot">Academic Project — Version 1.0</span>
+  </p>
+</footer>
+
+<script>
+const T = {
+  en: {
+    h1: 'TrackIQ Urban Traffic<br><span class="dim">Surveillance &amp; Detection</span>',
+    sub: "Based on Computer Vision — real-time vehicle detection and classification, speed estimation, congestion analysis and traffic sign identification.",
+    launch: '<i class="fas fa-play"></i><span>Launch</span>',
+    c1t: "Vehicle Detection", c1d: "Real-time detection and classification of vehicles: cars, trucks, motorcycles, buses and more.",
+    c2t: "Speed Estimation",  c2d: "Automatic estimation of vehicle speed from video stream without additional sensors.",
+    c3t: "Signs & Lights",    c3d: "Identification of traffic signs and lights, red light detection, stop signs and more.",
+    c4t: "Flow & Congestion", c4d: "Congestion analysis, flow measurement and annotated video export for reporting.",
+    launchbtn: 'Launch <i class="fas fa-arrow-right"></i>',
+    foot: "Academic Project — Version 1.0"
+  },
+  fr: {
+    h1: 'TrackIQ Trafic Urbain<br><span class="dim">Surveillance &amp; Détection</span>',
+    sub: "Basé sur Computer Vision — détection et classification en temps réel des véhicules, estimation de vitesse, analyse de congestion et identification des feux et panneaux.",
+    launch: '<i class="fas fa-play"></i><span>Lancer</span>',
+    c1t: "Détection Véhicules", c1d: "Détection et classification en temps réel des véhicules : voitures, camions, motos, bus et plus.",
+    c2t: "Estimation Vitesse",  c2d: "Estimation automatique de la vitesse des véhicules depuis un flux vidéo, sans capteur additionnel.",
+    c3t: "Feux &amp; Panneaux", c3d: "Identification des panneaux et feux de signalisation, détection des feux rouges, stops et plus.",
+    c4t: "Flux &amp; Congestion",c4d: "Analyse de congestion, mesure de flux et export vidéo annoté pour rapport.",
+    launchbtn: 'Lancer <i class="fas fa-arrow-right"></i>',
+    foot: "Projet Académique — Version 1.0"
+  },
+  wo: {
+    h1: 'TrackIQ Trafik Kanam<br><span class="dim">Xam ak Réy</span>',
+    sub: "Moom Computer Vision la tax — léegi-léegi di réy wërsëg yi, ak xam njariñ yoom yi, ci kanam.",
+    launch: '<i class="fas fa-play"></i><span>Tambali</span>',
+    c1t: "Réy Wërsëg", c1d: "Réy ak xam njariñ wërsëg yi ci kanam: yëgël, camion, moto, bus ak yeneen.",
+    c2t: "Yóbbu Yoom", c2d: "Xam yóbbu yoom wërsëg yi ci video, benn jëriñ mujj dafa soxor.",
+    c3t: "Siñali",     c3d: "Xam siñali yi ak dëkkandiku, réy feux rouge, stop ak yeneen.",
+    c4t: "Rafet &amp; Xonq", c4d: "Xam xonq, jëf rafet ci kanam ak dëkkandiku video bu annotéwoon.",
+    launchbtn: 'Tambali <i class="fas fa-arrow-right"></i>',
+    foot: "Liggéey Académique — Version 1.0"
+  }
+};
+
+function setLang(l, btn) {
+  document.querySelectorAll(".lb").forEach(b => b.classList.remove("on"));
+  btn.classList.add("on");
+  const t = T[l];
+  if (!t) return;
+  document.getElementById("t-h1").innerHTML = t.h1;
+  document.getElementById("t-sub").textContent = t.sub;
+  document.getElementById("t-launch").innerHTML = t.launch;
+  ["c1t","c2t","c3t","c4t"].forEach(k => {
+    const el = document.getElementById("t-"+k);
+    if (el) el.innerHTML = t[k];
+  });
+  ["c1d","c2d","c3d","c4d"].forEach(k => {
+    const el = document.getElementById("t-"+k);
+    if (el) el.textContent = t[k];
+  });
+  ["t-launch2","t-launch3","t-launch4","t-launch5"].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.innerHTML = t.launchbtn;
+  });
+  document.getElementById("t-foot").textContent = t.foot;
+  try { localStorage.setItem("tiq_lang", l); } catch(e) {}
+}
+
+function toggleTheme() {
+  const d = document.documentElement;
+  const dk = d.getAttribute("data-theme") === "dark";
+  d.setAttribute("data-theme", dk ? "light" : "dark");
+  document.getElementById("ti").className = dk ? "fas fa-moon" : "fas fa-sun";
+  try { localStorage.setItem("tiq_theme", dk ? "light" : "dark"); } catch(e) {}
+}
+
+(function() {
+  try {
+    const th = localStorage.getItem("tiq_theme");
+    if (th) {
+      document.documentElement.setAttribute("data-theme", th);
+      if (th === "dark") document.getElementById("ti").className = "fas fa-sun";
+    }
+    const lg = localStorage.getItem("tiq_lang");
+    if (lg && lg !== "en") {
+      const btn = document.querySelector('.lb[onclick*="\'' + lg + '\'"]');
+      if (btn) setLang(lg, btn);
+    }
+  } catch(e) {}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

TRAFFIC_ROAD_APP/templates/logs.html

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ Logs</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--surface:#fff;--surface2:#f6f8fb;--border:rgba(0,0,0,0.07);--shadow:0 2px 16px rgba(0,0,0,0.09);--shadow-lg:0 8px 36px rgba(0,0,0,0.13);--text:#0f1923;--text2:#5a6a7a;--text3:#9aaab8;--accent:#880000;--accent2:#660000;--accent-light:rgba(136,0,0,0.07);--sidebar-w:60px;--radius:14px;--radius-sm:9px;}
+[data-theme="dark"]{--bg:#0c1117;--surface:#151c25;--surface2:#1c2531;--border:rgba(255,255,255,0.07);--shadow:0 2px 16px rgba(0,0,0,0.45);--shadow-lg:0 8px 36px rgba(0,0,0,0.55);--text:#e8edf2;--text2:#7a8fa0;--text3:#3a4a5a;}
+*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:0;height:0}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;display:flex;min-height:100vh}
+.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200}
+.sb-logo{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none}
+.sb-sep{width:28px;height:1px;background:var(--border);margin:4px 0}
+.sb-btn{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:15px;cursor:pointer;transition:all .2s;text-decoration:none;border:none;background:none;position:relative}
+.sb-btn:hover,.sb-btn.active{background:var(--accent-light);color:var(--accent)}
+.sb-btn .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%);background:var(--text);color:var(--surface);font-size:11px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none}.sb-btn:hover .tip{opacity:1}
+.sb-spacer{flex:1}.page-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column}
+.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
+.topbar-l,.topbar-r{display:flex;align-items:center;gap:10px}
+.brand-name{font-size:15px;font-weight:600}.brand-name b{color:var(--accent)}.sep{color:var(--border);font-size:18px;margin:0 2px}
+.lang-group{display:flex;background:var(--surface2);border-radius:6px;padding:2px;border:1px solid var(--border)}
+.lang-btn{font-size:11px;font-weight:500;padding:3px 8px;border:none;background:none;cursor:pointer;border-radius:4px;color:var(--text2);font-family:'DM Sans',sans-serif}.lang-btn.active{background:var(--accent);color:white}
+.icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px}
+main{flex:1;padding:16px 18px;max-width:1440px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
+.sum-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
+.sc,.card,.tcard{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
+.sc{padding:13px 15px}.sc-l{font-size:11px;color:var(--text2);margin-bottom:5px}.sc-v{font-size:22px;font-weight:300}.sc-s{font-size:10px;color:var(--text3);margin-top:3px}
+.card{padding:14px 16px}.filter-row{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}.fg{display:flex;flex-direction:column;gap:4px}.fg label{font-size:11px;color:var(--text2)}
+.fin{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:12px;background:var(--surface2);color:var(--text);font-family:'DM Sans',sans-serif;outline:none;min-width:160px}.fin:focus{border-color:var(--accent)}
+.f-sp{flex:1}
+.btn{display:flex;align-items:center;gap:5px;border:none;border-radius:7px;padding:8px 13px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif}
+.btn-exp{background:var(--accent);color:white}.btn-exp:hover{background:var(--accent2)}
+.save-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--text);font-family:'DM Sans',sans-serif;text-align:left}.save-opt:hover{background:var(--surface2)}
+.btn-clr{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
+.tcard{overflow:hidden}.twrap{overflow:auto}
+table{width:100%;border-collapse:collapse}
+thead th{padding:10px 12px;text-align:left;font-size:11px;font-weight:500;color:var(--text2);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
+tbody tr{border-bottom:1px solid var(--border)} tbody tr:last-child{border-bottom:none}
+tbody td{padding:10px 12px;font-size:12px;vertical-align:middle}
+.mono{font-family:'DM Mono',monospace}
+.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:3px 8px}
+.dot{width:8px;height:8px;border-radius:50%}
+.empty{padding:38px;text-align:center;color:var(--text3)}
+@media(max-width:1100px){.sum-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:760px){.sum-row{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+<nav class="sidebar">
+  <a href="/" class="sb-logo"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sb-sep"></div>
+  <a href="/home" class="sb-btn"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sb-btn"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sb-btn active"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sb-btn"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sb-spacer"></div>
+  <button class="sb-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="page-wrap">
+  <header class="topbar">
+    <div class="topbar-l">
+      <span class="brand-name">Track<b>IQ</b></span>
+      <span class="sep">|</span>
+      <span style="font-size:13px;font-weight:500;" id="t-title">Detection Logs</span>
+    </div>
+    <div class="topbar-r">
+      <div class="lang-group">
+        <button class="lang-btn active" onclick="setLang('en',this)">EN</button>
+        <button class="lang-btn" onclick="setLang('fr',this)">FR</button>
+        <button class="lang-btn" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="icon-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon2"></i></button>
+    </div>
+  </header>
+
+  <main>
+    <div class="sum-row">
+      <div class="sc"><div class="sc-l" id="t-s1">Detections</div><div class="sc-v" id="sumDetections">0</div><div class="sc-s" id="sumDetectionsSub">Real rows from generated videos</div></div>
+      <div class="sc"><div class="sc-l" id="t-s2">Scenes</div><div class="sc-v" id="sumScenes">0</div><div class="sc-s" id="sumScenesSub">Processed analyses</div></div>
+      <div class="sc"><div class="sc-l" id="t-s3">Classes</div><div class="sc-v" id="sumClasses">0</div><div class="sc-s" id="sumClassesSub">Distinct detected labels</div></div>
+      <div class="sc"><div class="sc-l" id="t-s4">Latest video</div><div class="sc-v" id="sumLatest">-</div><div class="sc-s" id="sumLatestSub">Most recent analyzed clip</div></div>
+    </div>
+
+    <div class="card">
+      <div class="filter-row">
+        <div class="fg"><label id="t-search">Search video or scene</label><input id="searchIn" class="fin" oninput="applyFilters()"></div>
+        <div class="fg"><label id="t-scene">Scene</label><select id="sceneF" class="fin" onchange="applyFilters()"><option value="">All</option></select></div>
+        <div class="fg"><label id="t-type">Class</label><select id="classF" class="fin" onchange="applyFilters()"><option value="">All</option></select></div>
+        <div class="fg"><label id="t-direction">Direction</label><select id="dirF" class="fin" onchange="applyFilters()"><option value="">All</option><option>up</option><option>down</option><option>left</option><option>right</option><option>unknown</option></select></div>
+        <div class="f-sp"></div>
+        <button class="btn btn-clr" onclick="clearFilters()" ondblclick="clearAllLogs()" title="Click=clear filters | Double-click=delete all logs"><i class="fas fa-rotate-left"></i> <span id="t-clear">Clear</span></button>
+        <div style="position:relative">
+          <button class="btn btn-exp" onclick="toggleSaveMenu(event)"><i class="fas fa-cloud-arrow-up"></i> <span id="t-export">Save Logs</span> <i class="fas fa-chevron-down" style="font-size:9px;margin-left:2px"></i></button>
+          <div id="saveMenu" style="display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);min-width:240px;z-index:999;overflow:hidden">
+            <div style="padding:10px 14px 6px;font-size:11px;color:var(--text2);font-weight:500;border-bottom:1px solid var(--border)">
+              <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
+                <label style="font-size:11px;color:var(--text2)">Group name:</label>
+                <input id="groupNameIn" value="trackiq" style="flex:1;padding:4px 7px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:var(--surface2);color:var(--text);outline:none" placeholder="e.g. session1">
+              </div>
+              <span style="color:var(--text3);font-size:10px">File: <span id="csvPreview">trackiq_all.csv</span></span>
+            </div>
+            <button class="save-opt" onclick="saveLocal()"><i class="fas fa-download" style="color:#3b82f6"></i> Download locally</button>
+            <button class="save-opt" onclick="showGithubPanel()"><i class="fab fa-github" style="color:#e2e8f0"></i> Push to GitHub</button>
+            <button class="save-opt" onclick="saveDrive()"><i class="fab fa-google-drive" style="color:#34a853"></i> Save to Google Drive</button>
+          </div>
+        </div>
+        <!-- GitHub panel -->
+        <div id="githubPanel" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:none;align-items:center;justify-content:center">
+          <div style="background:var(--surface);border-radius:14px;padding:22px 24px;width:420px;box-shadow:var(--shadow-lg)">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+              <span style="font-weight:600;font-size:14px"><i class="fab fa-github"></i> Push to GitHub</span>
+              <button onclick="closeGithubPanel()" style="background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px"><i class="fas fa-times"></i></button>
+            </div>
+            <div style="display:flex;flex-direction:column;gap:9px">
+              <div class="fg"><label>Personal Access Token (PAT)</label><input id="ghToken" class="fin" type="password" placeholder="ghp_xxxxxxxxxxxx"></div>
+              <div class="fg"><label>Repository (owner/repo)</label><input id="ghRepo" class="fin" placeholder="username/trackiq-logs"></div>
+              <div class="fg"><label>Branch</label><input id="ghBranch" class="fin" value="main" placeholder="main"></div>
+              <div class="fg"><label>Path in repo</label><input id="ghPath" class="fin" placeholder="logs/" value="logs/"></div>
+            </div>
+            <div id="ghStatus" style="margin-top:10px;font-size:12px;color:var(--text2);min-height:18px"></div>
+            <div style="display:flex;gap:8px;margin-top:14px;justify-content:flex-end">
+              <button class="btn btn-clr" onclick="closeGithubPanel()">Cancel</button>
+              <button class="btn btn-exp" onclick="pushToGithub()"><i class="fab fa-github"></i> Push CSV</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tcard">
+      <div class="twrap">
+        <table>
+          <thead>
+            <tr>
+              <th id="th-video">Video</th>
+              <th id="th-scene">Scene</th>
+              <th id="th-time">Time</th>
+              <th id="th-frame">Frame</th>
+              <th id="th-track">Track</th>
+              <th id="th-class">Class</th>
+              <th id="th-confidence">Confidence</th>
+              <th id="th-direction">Direction</th>
+              <th id="th-bbox">Bounding Box</th>
+              <th id="th-position">Center</th>
+            </tr>
+          </thead>
+          <tbody id="tbody">
+            <tr><td colspan="9" class="empty">Loading real logs...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script>
+let allRows = [];
+let filteredRows = [];
+
+function toggleTheme(){
+  const d=document.documentElement;
+  const dark=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dark?'light':'dark');
+  ['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className=dark?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dark?'light':'dark');}catch(e){}
+}
+
+const TL = {
+  en:{title:'Detection Logs',s1:'Detections',s2:'Scenes',s3:'Classes',s4:'Latest video',search:'Search video or scene',scene:'Scene',type:'Class',direction:'Direction',clear:'Clear',export:'Save Logs',video:'Video',time:'Time',frame:'Frame',track:'Track',class:'Class',confidence:'Confidence',bbox:'Bounding Box',position:'Center'},
+  fr:{title:'Logs de détection',s1:'Détections',s2:'Scènes',s3:'Classes',s4:'Dernière vidéo',search:'Recherche vidéo ou scène',scene:'Scène',type:'Classe',direction:'Direction',clear:'Effacer',export:'Sauvegarder',video:'Vidéo',time:'Temps',frame:'Frame',track:'Track',class:'Classe',confidence:'Confiance',bbox:'Boîte englobante',position:'Centre'},
+  wo:{title:'Logs yi',s1:'Réy',s2:'Scène yi',s3:'Classe yi',s4:'Video mujj',search:'Seet video walla scène',scene:'Scène',type:'Classe',direction:'Direction',clear:'Baň',export:'Sauvegarder',video:'Video',time:'Waxtu',frame:'Frame',track:'Track',class:'Classe',confidence:'Confiance',bbox:'Bounding Box',position:'Centre'}
+};
+
+function setLang(l, btn){
+  document.querySelectorAll('.lang-btn').forEach(b=>b.classList.remove('active'));
+  btn.classList.add('active');
+  const t = TL[l];
+  const ids = {title:'t-title',s1:'t-s1',s2:'t-s2',s3:'t-s3',s4:'t-s4',search:'t-search',scene:'t-scene',type:'t-type',direction:'t-direction',clear:'t-clear',export:'t-export',video:'th-video',time:'th-time',frame:'th-frame',track:'th-track',class:'th-class',confidence:'th-confidence',bbox:'th-bbox',position:'th-position'};
+  Object.entries(ids).forEach(([k,id])=>{const el=document.getElementById(id);if(el)el.textContent=t[k];});
+  document.getElementById('th-scene').textContent = t.scene;
+  document.getElementById('th-direction').textContent = t.direction;
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+async function loadLogs(){
+  try{
+    const [rowsRes, scenesRes] = await Promise.all([fetch('/api/logs/rows'), fetch('/api/logs')]);
+    allRows = await rowsRes.json();
+    const scenes = await scenesRes.json();
+    fillFilters(scenes);
+    fillSummary(scenes, allRows);
+    applyFilters();
+  }catch(err){
+    const tb=document.getElementById('tbody');
+    tb.innerHTML = '<tr><td colspan="9" class="empty">Unable to load real logs.</td></tr>';
+    console.warn('[TrackIQ] real logs:', err);
+  }
+}
+
+function fillFilters(scenes){
+  const sceneF = document.getElementById('sceneF');
+  const classF = document.getElementById('classF');
+  sceneF.innerHTML = '<option value="">All</option>' + scenes.map(s=>`<option value="${s.scene_id}">${s.video_name || s.scene_id}</option>`).join('');
+  const classes = [...new Set(allRows.map(r=>r.class_name).filter(Boolean))].sort();
+  classF.innerHTML = '<option value="">All</option>' + classes.map(c=>`<option value="${c}">${c}</option>`).join('');
+}
+
+function fillSummary(scenes, rows){
+  document.getElementById('sumDetections').textContent = rows.length.toLocaleString();
+  document.getElementById('sumScenes').textContent = scenes.length.toLocaleString();
+  document.getElementById('sumClasses').textContent = new Set(rows.map(r=>r.class_name).filter(Boolean)).size.toLocaleString();
+  document.getElementById('sumLatest').textContent = scenes[0]?.video_name || '-';
+}
+
+function applyFilters(){
+  const search = document.getElementById('searchIn').value.toLowerCase();
+  const scene = document.getElementById('sceneF').value;
+  const cls = document.getElementById('classF').value;
+  const dir = document.getElementById('dirF').value;
+  filteredRows = allRows.filter(r =>
+    (!search || (r.video_name || '').toLowerCase().includes(search) || (r.scene_id || '').toLowerCase().includes(search)) &&
+    (!scene || r.scene_id === scene) &&
+    (!cls || r.class_name === cls) &&
+    (!dir || r.direction === dir)
+  );
+  renderRows();
+}
+
+async function clearAllLogs(){
+  if(!confirm('Delete all logs? This cannot be undone.')) return;
+  try{
+    const scenes = await fetch('/api/logs').then(r=>r.json());
+    await Promise.all(scenes.map(s=>fetch(`/api/logs/${s.scene_id}`,{method:'DELETE'})));
+    location.reload();
+  }catch(e){ alert('Error: '+e.message); }
+}
+
+function clearFilters(){
+  ['searchIn','sceneF','classF','dirF'].forEach(id=>{document.getElementById(id).value='';});
+  applyFilters();
+}
+
+function renderRows(){
+  const tb = document.getElementById('tbody');
+  if(!filteredRows.length){
+    tb.innerHTML = '<tr><td colspan="10" class="empty">No real detections found for this filter.</td></tr>';
+    return;
+  }
+  const colors = {Vehicle:'#3b82f6',Motorcycle:'#10b981',Truck:'#f59e0b',Bus:'#8b5cf6',Human:'#ec4899',Bicycle:'#06b6d4'};
+  tb.innerHTML = '';
+  filteredRows.forEach(r=>{
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td title="${r.video_name || ''}">${(r.video_name || '-').slice(0,28)}</td>
+      <td class="mono">${r.scene_id}</td>
+      <td class="mono">${Number(r.timestamp_s || 0).toFixed(2)}s</td>
+      <td class="mono">${r.frame_id}</td>
+      <td class="mono">#${r.track_id}</td>
+      <td><span class="pill"><span class="dot" style="background:${colors[r.class_name] || '#888'}"></span>${r.class_name || '-'}</span></td>
+      <td class="mono">${Math.round((r.confidence || 0) * 100)}%</td>
+      <td>${r.direction || 'unknown'}</td>
+      <td class="mono" style="font-size:11px">(${r.x1},${r.y1})→(${r.x2},${r.y2})</td>
+      <td class="mono">(${r.cx}, ${r.cy})</td>
+    `;
+    tb.appendChild(tr);
+  });
+}
+
+/* ── Helpers CSV ─────────────────────────────────────────────── */
+function getGroupName(){ return (document.getElementById('groupNameIn')?.value||'trackiq').trim().replace(/\s+/g,'_')||'trackiq'; }
+function getCsvFilename(){
+  const g=getGroupName();
+  const scenes=[...new Set(filteredRows.map(r=>r.scene_id))];
+  return `${g}_${scenes.length===1?scenes[0]:'all'}.csv`;
+}
+function buildCsvContent(){
+  const hdr = 'group,scene_id,video_name,timestamp_s,frame_id,track_id,class_name,confidence,x1,y1,x2,y2,cx,cy,direction\n';
+  const g = getGroupName();
+  const rows = filteredRows.map(r => [g,r.scene_id,`"${(r.video_name||'').replace(/"/g,'""')}"`,r.timestamp_s,r.frame_id,r.track_id,r.class_name,r.confidence,r.x1,r.y1,r.x2,r.y2,r.cx,r.cy,r.direction].join(',')).join('\n');
+  return hdr + rows;
+}
+function updateCsvPreview(){
+  const el = document.getElementById('csvPreview');
+  if(el) el.textContent = getCsvFilename();
+}
+
+/* ── Save menu ───────────────────────────────────���───────────── */
+function toggleSaveMenu(e){
+  e.stopPropagation();
+  const m = document.getElementById('saveMenu');
+  m.style.display = m.style.display==='none'?'block':'none';
+  updateCsvPreview();
+}
+document.addEventListener('click', ()=>{ const m=document.getElementById('saveMenu'); if(m) m.style.display='none'; });
+
+/* ── 1. Download local ───────────────────────────────────────── */
+function saveLocal(){
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([buildCsvContent()], {type:'text/csv'}));
+  a.download = getCsvFilename();
+  a.click();
+  document.getElementById('saveMenu').style.display='none';
+}
+
+/* ── 2. GitHub push ──────────────────────────────────────────── */
+function showGithubPanel(){
+  document.getElementById('saveMenu').style.display='none';
+  const p = document.getElementById('githubPanel');
+  p.style.display='flex';
+  updateCsvPreview();
+}
+function closeGithubPanel(){ document.getElementById('githubPanel').style.display='none'; }
+
+async function pushToGithub(){
+  const token  = document.getElementById('ghToken').value.trim();
+  const repo   = document.getElementById('ghRepo').value.trim();
+  const branch = document.getElementById('ghBranch').value.trim() || 'main';
+  const path   = (document.getElementById('ghPath').value.trim().replace(/\/+$/,'')||'logs') + '/' + getCsvFilename();
+  const status = document.getElementById('ghStatus');
+
+  if(!token||!repo){ status.textContent='⚠ Token and repo are required.'; return; }
+  status.textContent='Pushing…';
+
+  const content = btoa(unescape(encodeURIComponent(buildCsvContent())));
+  // Check if file exists (to get SHA for update)
+  let sha = null;
+  try{
+    const check = await fetch(`https://api.github.com/repos/${repo}/contents/${path}`,{headers:{Authorization:`token ${token}`}});
+    if(check.ok){ const d=await check.json(); sha=d.sha; }
+  }catch(e){}
+
+  try{
+    const body = {message:`TrackIQ logs export — ${getCsvFilename()}`, content, branch};
+    if(sha) body.sha = sha;
+    const res = await fetch(`https://api.github.com/repos/${repo}/contents/${path}`,{
+      method:'PUT', headers:{Authorization:`token ${token}`,'Content-Type':'application/json'},
+      body: JSON.stringify(body)
+    });
+    if(res.ok){ status.innerHTML='<span style="color:#10b981">✓ Pushed successfully!</span>'; }
+    else{ const e=await res.json(); status.innerHTML=`<span style="color:#ef4444">Error: ${e.message}</span>`; }
+  }catch(err){ status.innerHTML=`<span style="color:#ef4444">Network error: ${err.message}</span>`; }
+}
+
+/* ── 3. Google Drive ─────────────────────────────────────────── */
+async function saveDrive(){
+  document.getElementById('saveMenu').style.display='none';
+  // Uses Google Drive File Picker API via OAuth implicit flow
+  const CLIENT_ID = ''; // User must fill their own GCP OAuth client ID
+  if(!CLIENT_ID){
+    const ok = confirm('To save to Google Drive you need a Google OAuth Client ID.\n\nWould you like instructions on how to set it up?\n\n(For now the file will be downloaded locally as a fallback)');
+    if(ok){ window.open('https://developers.google.com/drive/api/guides/about-auth','_blank'); }
+    saveLocal();
+    return;
+  }
+  // Full Drive upload with OAuth token
+  const scope = 'https://www.googleapis.com/auth/drive.file';
+  const redirect = location.origin + location.pathname;
+  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(redirect)}&response_type=token&scope=${encodeURIComponent(scope)}`;
+  const popup = window.open(authUrl,'_blank','width=500,height=600');
+  // Listen for token in URL hash after redirect
+  const interval = setInterval(()=>{
+    try{
+      if(popup.closed){ clearInterval(interval); return; }
+      const hash = popup.location.hash;
+      if(hash && hash.includes('access_token')){
+        clearInterval(interval); popup.close();
+        const token = new URLSearchParams(hash.replace('#','')).get('access_token');
+        uploadToDrive(token);
+      }
+    }catch(e){}
+  },500);
+}
+
+async function uploadToDrive(token){
+  const csv     = buildCsvContent();
+  const fname   = getCsvFilename();
+  const meta    = JSON.stringify({name:fname,mimeType:'text/csv'});
+  const form    = new FormData();
+  form.append('metadata', new Blob([meta],{type:'application/json'}));
+  form.append('file',     new Blob([csv], {type:'text/csv'}));
+  try{
+    const res = await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',{
+      method:'POST', headers:{Authorization:`Bearer ${token}`}, body:form
+    });
+    if(res.ok){ alert(`✓ "${fname}" saved to Google Drive!`); }
+    else{ const e=await res.json(); alert('Drive error: '+e.error?.message); }
+  }catch(err){ alert('Drive upload failed: '+err.message); }
+}
+
+function exportFiltered(){ saveLocal(); } // legacy alias
+
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){
+      document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className='fas fa-sun';});}
+    }
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){
+      const btn=document.querySelector(`.lang-btn[onclick*="'${lg}'"]`);
+      if(btn)setLang(lg,btn);
+    }
+  }catch(e){}
+  loadLogs();
+  // Update CSV filename preview when group name changes
+  document.addEventListener('input', e=>{ if(e.target.id==='groupNameIn') updateCsvPreview(); });
+})();
+</script>
+</body>
+</html>

app.py

@@ -0,0 +1,596 @@
+"""
+app.py — TrackIQ Backend (v3 — optimisé CPU)
+"""
+import cv2, csv, json, threading, queue, uuid, mimetypes, subprocess
+from pathlib import Path
+from datetime import datetime
+from collections import defaultdict
+from typing import Dict
+
+from flask import (Flask, request, jsonify, Response,
+                   send_file, send_from_directory, abort, stream_with_context)
+from flask_cors import CORS
+from ultralytics import YOLO
+
+app = Flask(__name__, static_folder="static", template_folder="templates")
+CORS(app)
+
+BASE       = Path(__file__).parent
+UPLOAD_DIR = BASE / "uploads";  UPLOAD_DIR.mkdir(exist_ok=True)
+OUTPUT_DIR = BASE / "outputs";  OUTPUT_DIR.mkdir(exist_ok=True)
+LOG_DIR    = BASE / "logs";     LOG_DIR.mkdir(exist_ok=True)
+MODELS_DIR = BASE / "models";   MODELS_DIR.mkdir(exist_ok=True)
+
+COCO_MAP = {
+    "Vehicle":2,"Motorcycle":3,"Truck":7,"Bus":5,
+    "Human":0,"Bicycle":1,"Traffic light":9,"Road sign":11,
+}
+DEFAULT_CLASSES = ["Vehicle","Motorcycle","Truck","Bus","Human","Bicycle","Traffic light","Road sign"]
+CLASS_COLORS = {
+    "Vehicle":(255,120,80),"Motorcycle":(80,200,80),"Truck":(0,180,255),
+    "Bus":(220,80,255),"Human":(236,72,153),"Bicycle":(6,182,212),
+    "Traffic light":(239,68,68),"Road sign":(249,115,22),
+}
+
+CONF     = 0.55
+IOU      = 0.45
+SKIP     = 2
+INFER_SZ = 480
+
+_jobs:       Dict[str,dict]        = {}
+_sse_queues: Dict[str,queue.Queue] = {}
+_webcam_active    = False
+_webcam_queue: queue.Queue = queue.Queue(maxsize=4)
+_webcam_stats: dict = {}
+_webcam_model_key = "yolo11n"
+_webcam_classes   = DEFAULT_CLASSES
+_webcam_frame_id  = 0
+_webcam_unique    = defaultdict(set)
+_webcam_hist_xy   = defaultdict(list)
+
+
+def _get_model(key="yolo11n"):
+    p = MODELS_DIR / f"{key}.pt"
+    if not p.exists():
+        print(f"[TrackIQ] Downloading {key}.pt …")
+        m = YOLO(f"{key}.pt")
+        import shutil
+        dl = Path(f"{key}.pt")
+        if dl.exists(): shutil.move(str(dl), str(p))
+        return m
+    return YOLO(str(p))
+
+
+def _make_video_writer(jid, fps, size):
+    """Essaie avc1 (H.264 natif) d'abord, sinon mp4v avec conversion ffmpeg après."""
+    out_path = OUTPUT_DIR / f"{jid}_tracked.mp4"
+    # Tente H.264 directement (macOS/Linux avec codec installé)
+    for fourcc_str in ["avc1", "H264", "mp4v"]:
+        writer = cv2.VideoWriter(
+            str(out_path), cv2.VideoWriter_fourcc(*fourcc_str),
+            max(fps / SKIP, 1), size
+        )
+        if writer.isOpened():
+            print(f"[TrackIQ] VideoWriter ouvert avec codec: {fourcc_str}")
+            return writer, out_path
+    raise RuntimeError("Unable to initialize video writer with any codec")
+
+
+def _convert_to_h264(src_path):
+    """Convertit mp4v → H.264 avec ffmpeg pour compatibilité navigateur."""
+    final = src_path.parent / (src_path.stem + "_h264.mp4")
+    # Essaie plusieurs encodeurs dans l'ordre
+    encoders = [
+        ["-c:v", "libx264", "-preset", "fast", "-crf", "23", "-movflags", "+faststart"],
+        ["-c:v", "h264", "-movflags", "+faststart"],
+        ["-c:v", "mpeg4", "-q:v", "5"],
+    ]
+    for enc_args in encoders:
+        try:
+            subprocess.run(
+                ["ffmpeg", "-y", "-i", str(src_path)] + enc_args + [str(final)],
+                check=True, capture_output=True, timeout=600
+            )
+            if final.exists() and final.stat().st_size > 1000:
+                src_path.unlink(missing_ok=True)
+                final.rename(src_path)
+                print(f"[TrackIQ] Converted to H.264: {src_path.name}")
+                return True
+        except FileNotFoundError:
+            print("[TrackIQ] ffmpeg not found — keeping original codec")
+            return False
+        except Exception as e:
+            print(f"[TrackIQ] ffmpeg encoder failed ({enc_args[1]}): {e}")
+            continue
+    print("[TrackIQ] All ffmpeg encoders failed — keeping mp4v")
+    return False
+
+
+# ── Pages ─────────────────────────────────────────────────────────────────────
+@app.route("/")
+def page_index(): return send_from_directory("templates","index.html")
+@app.route("/home")
+def page_home(): return send_from_directory("templates","home.html")
+@app.route("/dashboard")
+def page_dashboard(): return send_from_directory("templates","dashboard.html")
+@app.route("/logs")
+def page_logs(): return send_from_directory("templates","logs.html")
+@app.route("/history")
+def page_history(): return send_from_directory("templates","history.html")
+
+
+# ── Upload ────────────────────────────────────────────────────────────────────
+@app.route("/api/upload", methods=["POST"])
+def api_upload():
+    if "video" not in request.files:
+        return jsonify({"error":"No file"}),400
+    f   = request.files["video"]
+    jid = uuid.uuid4().hex[:10]
+    dest = UPLOAD_DIR / f"{jid}_{f.filename}"
+    f.save(str(dest))
+    _jobs[jid] = {"status":"uploaded","path":str(dest),"name":f.filename,"stats":{}}
+    return jsonify({"job_id":jid,"filename":f.filename})
+
+
+# ── Run ───────────────────────────────────────────────────────────────────────
+@app.route("/api/run", methods=["POST"])
+def api_run():
+    data      = request.json or {}
+    jid       = data.get("job_id")
+    sel_names = data.get("classes") or DEFAULT_CLASSES
+    model_key = data.get("model","yolo11n")
+    if not jid or jid not in _jobs:
+        return jsonify({"error":"Unknown job_id"}),404
+    _jobs[jid]["status"] = "running"
+    _sse_queues[jid]     = queue.Queue(maxsize=300)
+    threading.Thread(target=_worker, args=(jid,model_key,sel_names), daemon=True).start()
+    return jsonify({"job_id":jid,"status":"started"})
+
+
+# ── Worker ────────────────────────────────────────────────────────────────────
+def _worker(jid, model_key, sel_names):
+    job   = _jobs[jid]
+    q     = _sse_queues[jid]
+    vpath = job["path"]
+    class_ids = [COCO_MAP[n] for n in sel_names if n in COCO_MAP]
+
+    cap   = cv2.VideoCapture(vpath)
+    fps   = cap.get(cv2.CAP_PROP_FPS) or 25
+    W     = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    H     = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    total = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+
+    writer, out_path = _make_video_writer(jid, fps, (W, H))
+    log_csv  = LOG_DIR / f"{jid}_detections.csv"
+    log_json = LOG_DIR / f"{jid}_stats.json"
+    _f  = open(str(log_csv),"w",newline="")
+    schema = ["scene_id","frame_id","timestamp_s","track_id","class_name",
+              "confidence","x1","y1","x2","y2","cx","cy","direction"]
+    _w = csv.DictWriter(_f, fieldnames=schema); _w.writeheader()
+
+    unique  = defaultdict(set)
+    hist_xy = defaultdict(list)
+    timeline= []
+    model   = _get_model(model_key)
+    frame_id= 0
+    last_frame_counts = {}
+    peak_frame_counts = defaultdict(int)
+
+    while True:
+        ret, frame = cap.read()
+        if not ret: break
+        ts = frame_id / fps
+
+        if frame_id % SKIP != 0:
+            frame_id += 1
+            continue
+
+        results = model.track(
+            frame, classes=class_ids, conf=CONF, iou=IOU,
+            imgsz=INFER_SZ, tracker="bytetrack.yaml",
+            persist=True, verbose=False,
+        )
+
+        detections = []; frame_cnts = defaultdict(int)
+        if results[0].boxes is not None and results[0].boxes.id is not None:
+            for box,tid,cls_id,conf in zip(
+                results[0].boxes.xyxy.cpu().numpy(),
+                results[0].boxes.id.cpu().numpy().astype(int),
+                results[0].boxes.cls.cpu().numpy().astype(int),
+                results[0].boxes.conf.cpu().numpy(),
+            ):
+                cname = next((n for n,c in COCO_MAP.items() if c==int(cls_id)),"unknown")
+                if cname not in sel_names: continue
+                x1,y1,x2,y2 = map(int,box)
+                cx,cy = (x1+x2)//2,(y1+y2)//2
+                h = hist_xy[int(tid)]; h.append((cx,cy))
+                if len(h)>=4:
+                    dx=h[-1][0]-h[-4][0]; dy=h[-1][1]-h[-4][1]
+                    direction=("right" if dx>0 else "left") if abs(dx)>abs(dy) else ("down" if dy>0 else "up")
+                else: direction="unknown"
+                unique[cname].add(int(tid)); frame_cnts[cname]+=1
+                det=dict(scene_id=jid,frame_id=frame_id,timestamp_s=round(ts,3),
+                         track_id=int(tid),class_name=cname,confidence=round(float(conf),3),
+                         x1=x1,y1=y1,x2=x2,y2=y2,cx=cx,cy=cy,direction=direction)
+                _w.writerow(det); detections.append(det)
+                job.setdefault("_all_dets",[]).append(det)
+
+        last_frame_counts = dict(frame_cnts)
+        for cname, count in frame_cnts.items():
+            peak_frame_counts[cname] = max(peak_frame_counts[cname], count)
+
+        timeline.append({"frame":frame_id,"ts":round(ts,2),**dict(frame_cnts)})
+        writer.write(_draw(frame.copy(), detections, frame_cnts))
+
+        uc = {k:len(v) for k,v in unique.items()}
+        payload = {
+            "frame":frame_id,"total":total,"ts":round(ts,2),
+            "pct":round(frame_id/max(total,1)*100,1),
+            "detections":len(detections),"unique_counts":uc,
+            "total_unique":sum(uc.values()),"no_objects":len(detections)==0,
+            "frame_counts":dict(frame_cnts),
+            "hud":{"frame_str":f"F:{frame_id} ▶{int(fps)}fps","counts":dict(frame_cnts)},
+        }
+        if not q.full(): q.put(payload)
+        frame_id+=1
+
+    cap.release(); writer.release(); _f.close()
+
+    # ✅ Conversion H.264 pour le navigateur (mp4v seul ne fonctionne pas dans Chrome)
+    _convert_to_h264(out_path)
+
+    all_confs = [d["confidence"] for d in job.get("_all_dets", [])] if job.get("_all_dets") else []
+    avg_conf  = round(sum(all_confs)/len(all_confs),3) if all_confs else None
+    stats={
+        "scene_id":jid,"video_name":job.get("name",""),
+        "generated_at":datetime.now().isoformat(),
+        "fps":fps,"total_frames":frame_id,"duration_s":round(frame_id/fps,1),
+        "unique_counts":{k:len(v) for k,v in unique.items()},
+        "total_unique":sum(len(v) for v in unique.values()),
+        "last_frame_counts":last_frame_counts,
+        "peak_counts":dict(peak_frame_counts),
+        "avg_conf":avg_conf,
+        "timeline":timeline,
+    }
+    with open(str(log_json),"w") as f: json.dump(stats,f,indent=2)
+    job["status"]="done"; job["stats"]=stats; job["out_mp4"]=str(out_path)
+    q.put({"event":"done","stats":stats})
+    print(f"[TrackIQ] {jid} done — {stats['total_unique']} objets")
+
+
+def _draw(frame, detections, frame_counts):
+    for det in detections:
+        cls=det["class_name"]; color=CLASS_COLORS.get(cls,(200,200,200))
+        x1,y1,x2,y2=det["x1"],det["y1"],det["x2"],det["y2"]
+        cv2.rectangle(frame,(x1,y1),(x2,y2),color,2)
+        label=f"id={det['track_id']} {cls} {int(det['confidence']*100)}%"
+        (lw,lh),_=cv2.getTextSize(label,cv2.FONT_HERSHEY_SIMPLEX,0.48,1)
+        cv2.rectangle(frame,(x1,y1-lh-6),(x1+lw+4,y1),color,-1)
+        cv2.putText(frame,label,(x1+2,y1-3),cv2.FONT_HERSHEY_SIMPLEX,0.48,(255,255,255),1,cv2.LINE_AA)
+    y_pos=26
+    for cls,count in sorted(frame_counts.items()):
+        txt=f"{cls}: {count}"
+        cv2.putText(frame,txt,(10,y_pos),cv2.FONT_HERSHEY_SIMPLEX,0.58,(0,0,0),3,cv2.LINE_AA)
+        cv2.putText(frame,txt,(10,y_pos),cv2.FONT_HERSHEY_SIMPLEX,0.58,(255,255,255),2,cv2.LINE_AA)
+        y_pos+=26
+    if not detections:
+        h=frame.shape[0]
+        cv2.putText(frame,"No target objects detected",(10,h-16),
+                    cv2.FONT_HERSHEY_SIMPLEX,0.6,(80,80,255),2,cv2.LINE_AA)
+    return frame
+
+
+# ── SSE ───────────────────────────────────────────────────────────────────────
+@app.route("/api/stream/<jid>")
+def api_stream(jid):
+    @stream_with_context
+    def generate():
+        q=_sse_queues.get(jid)
+        if not q: yield 'data:{"error":"no job"}\n\n'; return
+        while True:
+            try:
+                p=q.get(timeout=30)
+                yield f"data:{json.dumps(p)}\n\n"
+                if p.get("event")=="done": break
+            except: break
+    return Response(generate(), mimetype="text/event-stream",
+                    headers={"Cache-Control":"no-cache","X-Accel-Buffering":"no"})
+
+
+# ── Video (range requests) ───────────────────────────────────────────────────
+@app.route("/api/video/<jid>")
+def api_video(jid):
+    job=_jobs.get(jid)
+    if not job: abort(404)
+    out=job.get("out_mp4") or str(OUTPUT_DIR/f"{jid}_tracked.mp4")
+    p=Path(out)
+    if not p.exists(): abort(404)
+    mime_type = mimetypes.guess_type(str(p))[0] or "video/mp4"
+    file_size=p.stat().st_size
+    range_hdr=request.headers.get("Range")
+    if range_hdr:
+        import re
+        byte1,byte2=0,file_size-1
+        m=re.search(r"bytes=(\d+)-(\d*)",range_hdr)
+        if m:
+            byte1=int(m.group(1))
+            if m.group(2): byte2=int(m.group(2))
+        length=byte2-byte1+1
+        def chunk():
+            with open(str(p),"rb") as f:
+                f.seek(byte1); remaining=length
+                while remaining>0:
+                    c=f.read(min(65536,remaining))
+                    if not c: break
+                    remaining-=len(c); yield c
+        resp=Response(chunk(),status=206,mimetype=mime_type,direct_passthrough=True)
+        resp.headers["Content-Range"]=f"bytes {byte1}-{byte2}/{file_size}"
+        resp.headers["Accept-Ranges"]="bytes"
+        resp.headers["Content-Length"]=str(length)
+        resp.headers["Access-Control-Allow-Origin"]="*"
+        return resp
+    resp = send_file(str(p),mimetype=mime_type,conditional=True)
+    resp.headers["Accept-Ranges"] = "bytes"
+    resp.headers["Access-Control-Allow-Origin"] = "*"
+    return resp
+
+
+# ── Status ────────────────────────────────────────────────────────────────────
+@app.route("/api/status/<jid>")
+def api_status(jid):
+    job=_jobs.get(jid)
+    if not job: return jsonify({"error":"not found"}),404
+    return jsonify({"status":job["status"],"stats":job.get("stats",{}),
+                    "video_url":f"/api/video/{jid}" if job.get("out_mp4") else None})
+
+
+# ── Logs ───────────────────────────��──────────────────────────────────────────
+@app.route("/api/logs")
+def api_logs_list():
+    result=[]
+    for jf in sorted(LOG_DIR.glob("*_stats.json"),reverse=True):
+        try:
+            with open(str(jf)) as f: data=json.load(f)
+            result.append({"scene_id":data.get("scene_id",jf.stem),
+                           "video_name":data.get("video_name",""),
+                           "generated_at":data.get("generated_at",""),
+                           "fps":data.get("fps",0),"total_frames":data.get("total_frames",0),
+                           "duration_s":data.get("duration_s",0),
+                           "unique_counts":data.get("unique_counts",{}),"total_unique":data.get("total_unique",0)})
+        except: pass
+    return jsonify(result)
+
+@app.route("/api/logs/rows")
+def api_logs_rows():
+    rows = []
+    for csv_path in sorted(LOG_DIR.glob("*_detections.csv"), reverse=True):
+        try:
+            scene_id = csv_path.stem.replace("_detections", "")
+            stats_path = LOG_DIR / f"{scene_id}_stats.json"
+            stats = {}
+            if stats_path.exists():
+                with open(str(stats_path), encoding="utf-8") as sf:
+                    stats = json.load(sf)
+            with open(str(csv_path), newline="", encoding="utf-8") as cf:
+                reader = csv.DictReader(cf)
+                for row in reader:
+                    rows.append({
+                        "scene_id": row.get("scene_id", scene_id),
+                        "video_name": stats.get("video_name", ""),
+                        "generated_at": stats.get("generated_at", ""),
+                        "frame_id": int(float(row.get("frame_id") or 0)),
+                        "timestamp_s": float(row.get("timestamp_s") or 0),
+                        "track_id": int(float(row.get("track_id") or 0)),
+                        "class_name": row.get("class_name", ""),
+                        "confidence": float(row.get("confidence") or 0),
+                        "x1": int(float(row.get("x1") or 0)),
+                        "y1": int(float(row.get("y1") or 0)),
+                        "x2": int(float(row.get("x2") or 0)),
+                        "y2": int(float(row.get("y2") or 0)),
+                        "cx": int(float(row.get("cx") or 0)),
+                        "cy": int(float(row.get("cy") or 0)),
+                        "direction": row.get("direction", "unknown"),
+                    })
+        except Exception:
+            pass
+    return jsonify(rows)
+
+@app.route("/api/logs/<scene_id>/csv")
+def api_logs_csv(scene_id):
+    p=LOG_DIR/f"{scene_id}_detections.csv"
+    if not p.exists(): abort(404)
+    return send_file(str(p),as_attachment=True,download_name=f"{scene_id}_detections.csv",mimetype="text/csv")
+
+@app.route("/api/logs/export", methods=["POST"])
+def api_logs_export():
+    """Génère un CSV groupé: group_scene_id.csv avec toutes les bounding boxes"""
+    import io
+    from flask import make_response
+    data = request.json or {}
+    scene_ids = data.get("scene_ids", [])
+    group     = (data.get("group", "trackiq") or "trackiq").strip().replace(" ","_")
+
+    if not scene_ids:
+        scene_ids = [p.stem.replace("_detections","") for p in sorted(LOG_DIR.glob("*_detections.csv"))]
+
+    buf = io.StringIO()
+    fieldnames = ["group","scene_id","video_name","generated_at","frame_id","timestamp_s",
+                  "track_id","class_name","confidence","x1","y1","x2","y2","cx","cy","direction"]
+    writer = csv.DictWriter(buf, fieldnames=fieldnames)
+    writer.writeheader()
+
+    for sid in scene_ids:
+        csv_path   = LOG_DIR / f"{sid}_detections.csv"
+        stats_path = LOG_DIR / f"{sid}_stats.json"
+        if not csv_path.exists(): continue
+        stats = {}
+        if stats_path.exists():
+            with open(str(stats_path), encoding="utf-8") as sf:
+                stats = json.load(sf)
+        with open(str(csv_path), newline="", encoding="utf-8") as cf:
+            reader = csv.DictReader(cf)
+            for row in reader:
+                writer.writerow({
+                    "group": group, "scene_id": row.get("scene_id", sid),
+                    "video_name": stats.get("video_name",""), "generated_at": stats.get("generated_at",""),
+                    "frame_id": row.get("frame_id",""), "timestamp_s": row.get("timestamp_s",""),
+                    "track_id": row.get("track_id",""), "class_name": row.get("class_name",""),
+                    "confidence": row.get("confidence",""),
+                    "x1": row.get("x1",""), "y1": row.get("y1",""),
+                    "x2": row.get("x2",""), "y2": row.get("y2",""),
+                    "cx": row.get("cx",""), "cy": row.get("cy",""),
+                    "direction": row.get("direction",""),
+                })
+
+    csv_bytes = buf.getvalue().encode("utf-8")
+    suffix    = scene_ids[0] if len(scene_ids)==1 else "all"
+    filename  = f"{group}_{suffix}.csv"
+    resp = make_response(csv_bytes)
+    resp.headers["Content-Type"]        = "text/csv; charset=utf-8"
+    resp.headers["Content-Disposition"] = f"attachment; filename={filename}"
+    return resp
+
+@app.route("/api/logs/<scene_id>", methods=["DELETE"])
+def api_logs_delete(scene_id):
+    for ext in ("_stats.json","_detections.csv"):
+        p=LOG_DIR/f"{scene_id}{ext}"
+        if p.exists(): p.unlink()
+    for out in OUTPUT_DIR.glob(f"{scene_id}_tracked.*"):
+        if out.exists(): out.unlink()
+    return jsonify({"deleted":scene_id})
+
+
+# ── Dashboard ─────────────────────────────────────────────────────────────────
+@app.route("/api/dashboard/stats")
+def api_dashboard_stats():
+    global_uc=defaultdict(int); total_veh=0; scenes=[]
+    for jf in sorted(LOG_DIR.glob("*_stats.json"),reverse=True)[:20]:
+        try:
+            with open(str(jf)) as f: data=json.load(f)
+            uc=data.get("unique_counts",{}); sv=sum(uc.values()); total_veh+=sv
+            for cls,cnt in uc.items(): global_uc[cls]+=cnt
+            scenes.append({"scene_id":data.get("scene_id",""),"video_name":data.get("video_name",""),
+                           "total":sv,"counts":uc,"duration_s":data.get("duration_s",0),
+                           "avg_conf":data.get("avg_conf"),
+                           "timeline":data.get("timeline",[])})
+        except: pass
+    return jsonify({"total_vehicles_today":total_veh,
+                    "global_unique_counts":dict(global_uc),"scenes":scenes[:10]})
+
+
+# ── History ───────────────────────────────────────────────────────────────────
+@app.route("/api/history")
+def api_history():
+    return jsonify([{"job_id":jid,"name":job.get("name","video"),
+                     "url":f"/api/video/{jid}","date":job.get("stats",{}).get("generated_at",""),
+                     "counts":job.get("stats",{}).get("unique_counts",{})}
+                    for jid,job in reversed(list(_jobs.items())) if job.get("status")=="done"])
+
+
+# ── Webcam ────────────────────────────────────────────────────────────────────
+@app.route("/api/webcam/start", methods=["POST"])
+def api_webcam_start():
+    global _webcam_active, _webcam_model_key, _webcam_classes
+    d=request.json or {}
+    _webcam_active=True
+    _webcam_model_key = d.get("model","yolo11n")
+    _webcam_classes   = d.get("classes") or DEFAULT_CLASSES
+    # Load model eagerly so first frame is fast
+    threading.Thread(target=lambda: _get_model(_webcam_model_key), daemon=True).start()
+    return jsonify({"status":"started"})
+
+@app.route("/api/webcam/frame", methods=["POST"])
+def api_webcam_frame():
+    """Receive a JPEG frame from the browser, run YOLO, return annotated JPEG."""
+    global _webcam_stats, _webcam_frame_id, _webcam_unique, _webcam_hist_xy
+    if not _webcam_active:
+        return jsonify({"error":"not active"}), 400
+    data = request.get_data()
+    if not data:
+        return jsonify({"error":"no frame"}), 400
+    import numpy as np
+    arr = np.frombuffer(data, dtype=np.uint8)
+    frame = cv2.imdecode(arr, cv2.IMREAD_COLOR)
+    if frame is None:
+        return jsonify({"error":"decode failed"}), 400
+
+    class_ids  = [COCO_MAP[n] for n in _webcam_classes if n in COCO_MAP]
+    model      = _get_model(_webcam_model_key)
+    fid        = _webcam_frame_id
+    _webcam_frame_id += 1
+
+    res = model.track(frame, classes=class_ids, conf=CONF, iou=IOU,
+                      imgsz=INFER_SZ, tracker="bytetrack.yaml",
+                      persist=True, verbose=False)
+
+    dets = []; frame_counts = defaultdict(int)
+    if res[0].boxes is not None and res[0].boxes.id is not None:
+        for box, tid, cls_id, conf in zip(
+            res[0].boxes.xyxy.cpu().numpy(),
+            res[0].boxes.id.cpu().numpy().astype(int),
+            res[0].boxes.cls.cpu().numpy().astype(int),
+            res[0].boxes.conf.cpu().numpy()
+        ):
+            cname = next((n for n,c in COCO_MAP.items() if c==int(cls_id)), "unknown")
+            if cname not in _webcam_classes: continue
+            x1,y1,x2,y2 = map(int, box)
+            cx,cy = (x1+x2)//2,(y1+y2)//2
+            h = _webcam_hist_xy[int(tid)]; h.append((cx,cy))
+            if len(h)>=4:
+                dx=h[-1][0]-h[-4][0]; dy=h[-1][1]-h[-4][1]
+                direction=("right" if dx>0 else "left") if abs(dx)>abs(dy) else ("down" if dy>0 else "up")
+            else: direction="unknown"
+            _webcam_unique[cname].add(int(tid)); frame_counts[cname]+=1
+            det = dict(frame_id=fid,track_id=int(tid),class_name=cname,
+                       confidence=round(float(conf),3),x1=x1,y1=y1,x2=x2,y2=y2,
+                       cx=cx,cy=cy,direction=direction)
+            dets.append(det)
+
+    ann = _draw(frame.copy(), dets, frame_counts)
+    _, buf = cv2.imencode(".jpg", ann, [cv2.IMWRITE_JPEG_QUALITY, 72])
+    if not _webcam_queue.full():
+        _webcam_queue.put(buf.tobytes())
+
+    _webcam_stats = {
+        "unique_counts": {k:len(v) for k,v in _webcam_unique.items()},
+        "frame_counts":  dict(frame_counts),
+        "frame": fid, "detections": len(dets)
+    }
+    return Response(buf.tobytes(), mimetype="image/jpeg")
+
+@app.route("/api/webcam/stop", methods=["POST"])
+def api_webcam_stop():
+    global _webcam_active, _webcam_frame_id, _webcam_unique, _webcam_hist_xy
+    _webcam_active  = False
+    _webcam_frame_id = 0
+    _webcam_unique  = defaultdict(set)
+    _webcam_hist_xy = defaultdict(list)
+    return jsonify({"status":"stopped"})
+
+@app.route("/api/webcam/stats")
+def api_webcam_stats():
+    return jsonify(_webcam_stats)
+
+@app.route("/api/webcam/stream")
+def api_webcam_stream():
+    def gen():
+        while _webcam_active:
+            try:
+                fb=_webcam_queue.get(timeout=2)
+                yield b"--frame\r\nContent-Type: image/jpeg\r\n\r\n"+fb+b"\r\n"
+            except: pass
+    return Response(gen(),mimetype="multipart/x-mixed-replace; boundary=frame")
+
+# ── Static ────────────────────────────────────────────────────────────────────
+@app.route("/outputs/<path:fname>")
+def serve_output(fname): return send_from_directory(str(OUTPUT_DIR),fname)
+@app.route("/uploads/<path:fname>")
+def serve_upload(fname): return send_from_directory(str(UPLOAD_DIR),fname)
+
+
+if __name__=="__main__":
+    print("="*50)
+    print("  TrackIQ — http://localhost:5000")
+    print(f"  Skip={SKIP} | imgsz={INFER_SZ} | CPU optimisé")
+    print("="*50)
+    app.run(host="0.0.0.0",port=5000,debug=False,threaded=True)

models/yolo11n.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:49da7a898d364366a0925c144b6701980a3bf0525c5b904020a0352228cb2e45
+size 22523050

requirements.txt

@@ -0,0 +1,194 @@
+absl-py==2.4.0
+alabaster==1.0.0
+altair==5.5.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.13.0
+asttokens==3.0.0
+astunparse==1.6.3
+attrs==25.4.0
+babel==2.17.0
+beautifulsoup4==4.14.2
+bleach==6.3.0
+blinker==1.9.0
+cachetools==6.2.2
+certifi==2025.11.12
+cffi==2.0.0
+charset-normalizer==3.4.4
+clarabel==0.11.1
+click==8.3.1
+colorama==0.4.6
+comm==0.2.3
+contourpy==1.3.3
+cvxpy==1.7.5
+cycler==0.12.1
+debugpy==1.8.17
+decorator==5.2.1
+defusedxml==0.7.1
+dill==0.4.1
+docutils==0.22.4
+et_xmlfile==2.0.0
+executing==2.2.1
+fastjsonschema==2.21.2
+fica==0.4.1
+filelock==3.24.3
+Flask==3.1.3
+flask-cors==6.0.2
+flatbuffers==25.12.19
+fonttools==4.60.1
+fsspec==2026.2.0
+gast==0.7.0
+geopandas==1.1.2
+git-filter-repo==2.47.0
+gitdb==4.0.12
+GitPython==3.1.45
+google-pasta==0.2.0
+graphviz==0.21
+greenlet==3.3.1
+grpcio==1.80.0
+h11==0.16.0
+h5py==3.14.0
+hf-xet==1.4.3
+httpcore==1.0.9
+httpx==0.28.1
+huggingface_hub==1.10.2
+idna==3.11
+imagesize==1.4.1
+ipykernel==7.1.0
+ipylab==1.1.0
+ipython==9.6.0
+ipython_pygments_lexers==1.1.1
+ipywidgets==8.1.8
+itsdangerous==2.2.0
+jedi==0.19.2
+Jinja2==3.1.6
+joblib==1.5.3
+jsonschema==4.25.1
+jsonschema-specifications==2025.9.1
+jupyter_client==8.6.3
+jupyter_core==5.9.1
+jupyterlab_pygments==0.3.0
+jupyterlab_widgets==3.0.16
+jupytext==1.19.1
+keras==3.14.0
+kiwisolver==1.4.9
+lap==0.5.13
+lapx==0.9.4
+libclang==18.1.1
+lxml==6.0.2
+markdown-it-py==4.0.0
+MarkupSafe==3.0.3
+matplotlib==3.10.7
+matplotlib-inline==0.2.1
+mdit-py-plugins==0.5.0
+mdurl==0.1.2
+mistune==3.2.0
+ml_dtypes==0.5.4
+mpmath==1.3.0
+namex==0.1.0
+narwhals==2.11.0
+nbclient==0.10.4
+nbconvert==7.17.0
+nbformat==5.10.4
+nest-asyncio==1.6.0
+networkx==3.6.1
+numpy==2.3.4
+opencv-python==4.13.0.92
+opencv-python-headless==4.13.0.92
+openpyxl==3.1.5
+opt_einsum==3.4.0
+optree==0.19.0
+osqp==1.0.5
+otter-grader==6.1.6
+outcome==1.3.0.post0
+packaging==25.0
+pandas==2.3.3
+pandocfilters==1.5.1
+parso==0.8.5
+pillow==12.0.0
+platformdirs==4.5.0
+playwright==1.58.0
+plotly==6.4.0
+polars==1.40.0
+polars-runtime-32==1.40.0
+prompt_toolkit==3.0.52
+protobuf==6.33.1
+psutil==7.1.2
+pure_eval==0.2.3
+pyarrow==21.0.0
+pycparser==2.23
+pydantic==2.12.5
+pydantic_core==2.41.5
+pydeck==0.9.1
+pyee==13.0.0
+Pygments==2.19.2
+pyogrio==0.12.1
+pyparsing==3.2.5
+pyproj==3.7.2
+PySocks==1.7.1
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+python-on-whales==0.80.0
+pytz==2025.2
+PyYAML==6.0.3
+pyzmq==27.1.0
+referencing==0.37.0
+requests==2.32.5
+rich==14.3.3
+roman-numerals==4.1.0
+rpds-py==0.28.0
+scikit-learn==1.8.0
+scipy==1.16.3
+scs==3.2.11
+seaborn==0.13.2
+selenium==4.38.0
+setuptools==80.9.0
+shapely==2.1.2
+shellingham==1.5.4
+six==1.17.0
+smmap==5.0.2
+sniffio==1.3.1
+snowballstemmer==3.0.1
+sortedcontainers==2.4.0
+soupsieve==2.8
+Sphinx==9.1.0
+sphinxcontrib-applehelp==2.0.0
+sphinxcontrib-devhelp==2.0.0
+sphinxcontrib-htmlhelp==2.1.0
+sphinxcontrib-jsmath==1.0.1
+sphinxcontrib-qthelp==2.0.0
+sphinxcontrib-serializinghtml==2.0.0
+stack-data==0.6.3
+streamlit==1.51.0
+sympy==1.14.0
+tenacity==9.1.2
+tensorflow==2.21.0
+termcolor==3.3.0
+threadpoolctl==3.6.0
+tinycss2==1.4.0
+toml==0.10.2
+torch==2.11.0
+torchvision==0.26.0
+torchviz==0.0.3
+tornado==6.5.2
+tqdm==4.67.3
+traitlets==5.14.3
+trio==0.32.0
+trio-websocket==0.12.2
+typer==0.24.1
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.2
+ultralytics==8.4.39
+ultralytics-thop==2.0.18
+urllib3==2.5.0
+watchdog==6.0.0
+wcwidth==0.2.14
+webdriver-manager==4.0.2
+webencodings==0.5.1
+websocket-client==1.9.0
+Werkzeug==3.1.8
+wheel==0.46.3
+widgetsnbextension==4.0.15
+wrapt==1.17.3
+wsproto==1.3.2

requirements_hf.txt

@@ -0,0 +1,194 @@
+absl-py==2.4.0
+alabaster==1.0.0
+altair==5.5.0
+annotated-doc==0.0.4
+annotated-types==0.7.0
+anyio==4.13.0
+asttokens==3.0.0
+astunparse==1.6.3
+attrs==25.4.0
+babel==2.17.0
+beautifulsoup4==4.14.2
+bleach==6.3.0
+blinker==1.9.0
+cachetools==6.2.2
+certifi==2025.11.12
+cffi==2.0.0
+charset-normalizer==3.4.4
+clarabel==0.11.1
+click==8.3.1
+colorama==0.4.6
+comm==0.2.3
+contourpy==1.3.3
+cvxpy==1.7.5
+cycler==0.12.1
+debugpy==1.8.17
+decorator==5.2.1
+defusedxml==0.7.1
+dill==0.4.1
+docutils==0.22.4
+et_xmlfile==2.0.0
+executing==2.2.1
+fastjsonschema==2.21.2
+fica==0.4.1
+filelock==3.24.3
+Flask==3.1.3
+flask-cors==6.0.2
+flatbuffers==25.12.19
+fonttools==4.60.1
+fsspec==2026.2.0
+gast==0.7.0
+geopandas==1.1.2
+git-filter-repo==2.47.0
+gitdb==4.0.12
+GitPython==3.1.45
+google-pasta==0.2.0
+graphviz==0.21
+greenlet==3.3.1
+grpcio==1.80.0
+h11==0.16.0
+h5py==3.14.0
+hf-xet==1.4.3
+httpcore==1.0.9
+httpx==0.28.1
+huggingface_hub==1.10.2
+idna==3.11
+imagesize==1.4.1
+ipykernel==7.1.0
+ipylab==1.1.0
+ipython==9.6.0
+ipython_pygments_lexers==1.1.1
+ipywidgets==8.1.8
+itsdangerous==2.2.0
+jedi==0.19.2
+Jinja2==3.1.6
+joblib==1.5.3
+jsonschema==4.25.1
+jsonschema-specifications==2025.9.1
+jupyter_client==8.6.3
+jupyter_core==5.9.1
+jupyterlab_pygments==0.3.0
+jupyterlab_widgets==3.0.16
+jupytext==1.19.1
+keras==3.14.0
+kiwisolver==1.4.9
+lap==0.5.13
+lapx==0.9.4
+libclang==18.1.1
+lxml==6.0.2
+markdown-it-py==4.0.0
+MarkupSafe==3.0.3
+matplotlib==3.10.7
+matplotlib-inline==0.2.1
+mdit-py-plugins==0.5.0
+mdurl==0.1.2
+mistune==3.2.0
+ml_dtypes==0.5.4
+mpmath==1.3.0
+namex==0.1.0
+narwhals==2.11.0
+nbclient==0.10.4
+nbconvert==7.17.0
+nbformat==5.10.4
+nest-asyncio==1.6.0
+networkx==3.6.1
+numpy==2.3.4
+opencv-python==4.13.0.92
+opencv-python-headless==4.13.0.92
+openpyxl==3.1.5
+opt_einsum==3.4.0
+optree==0.19.0
+osqp==1.0.5
+otter-grader==6.1.6
+outcome==1.3.0.post0
+packaging==25.0
+pandas==2.3.3
+pandocfilters==1.5.1
+parso==0.8.5
+pillow==12.0.0
+platformdirs==4.5.0
+playwright==1.58.0
+plotly==6.4.0
+polars==1.40.0
+polars-runtime-32==1.40.0
+prompt_toolkit==3.0.52
+protobuf==6.33.1
+psutil==7.1.2
+pure_eval==0.2.3
+pyarrow==21.0.0
+pycparser==2.23
+pydantic==2.12.5
+pydantic_core==2.41.5
+pydeck==0.9.1
+pyee==13.0.0
+Pygments==2.19.2
+pyogrio==0.12.1
+pyparsing==3.2.5
+pyproj==3.7.2
+PySocks==1.7.1
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+python-on-whales==0.80.0
+pytz==2025.2
+PyYAML==6.0.3
+pyzmq==27.1.0
+referencing==0.37.0
+requests==2.32.5
+rich==14.3.3
+roman-numerals==4.1.0
+rpds-py==0.28.0
+scikit-learn==1.8.0
+scipy==1.16.3
+scs==3.2.11
+seaborn==0.13.2
+selenium==4.38.0
+setuptools==80.9.0
+shapely==2.1.2
+shellingham==1.5.4
+six==1.17.0
+smmap==5.0.2
+sniffio==1.3.1
+snowballstemmer==3.0.1
+sortedcontainers==2.4.0
+soupsieve==2.8
+Sphinx==9.1.0
+sphinxcontrib-applehelp==2.0.0
+sphinxcontrib-devhelp==2.0.0
+sphinxcontrib-htmlhelp==2.1.0
+sphinxcontrib-jsmath==1.0.1
+sphinxcontrib-qthelp==2.0.0
+sphinxcontrib-serializinghtml==2.0.0
+stack-data==0.6.3
+streamlit==1.51.0
+sympy==1.14.0
+tenacity==9.1.2
+tensorflow==2.21.0
+termcolor==3.3.0
+threadpoolctl==3.6.0
+tinycss2==1.4.0
+toml==0.10.2
+torch==2.11.0
+torchvision==0.26.0
+torchviz==0.0.3
+tornado==6.5.2
+tqdm==4.67.3
+traitlets==5.14.3
+trio==0.32.0
+trio-websocket==0.12.2
+typer==0.24.1
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.2
+ultralytics==8.4.39
+ultralytics-thop==2.0.18
+urllib3==2.5.0
+watchdog==6.0.0
+wcwidth==0.2.14
+webdriver-manager==4.0.2
+webencodings==0.5.1
+websocket-client==1.9.0
+Werkzeug==3.1.8
+wheel==0.46.3
+widgetsnbextension==4.0.15
+wrapt==1.17.3
+wsproto==1.3.2

static/trackiq-api.js

@@ -0,0 +1,202 @@
+/**
+ * trackiq-api.js v5
+ * home.html est autonome — ce fichier gère dashboard, logs, history
+ */
+const PAGE=(()=>{
+  const p=location.pathname;
+  if(p==='/'||p.includes('index')) return 'index';
+  if(p.includes('home'))           return 'home';
+  if(p.includes('dashboard'))      return 'dashboard';
+  if(p.includes('logs'))           return 'logs';
+  if(p.includes('history'))        return 'history';
+  return 'unknown';
+})();
+
+/* ══ DASHBOARD ══ */
+if(PAGE==='dashboard'){
+  window.addEventListener('load',()=>{
+    loadDashboard();
+    setInterval(loadDashboard, 5000); // toutes les 5s, pas 6s
+  });
+
+  async function loadDashboard(){
+    try{
+      // ── Charge stats backend ──
+      const res  = await fetch('/api/dashboard/stats');
+      const data = await res.json();
+      const uc   = data.global_unique_counts || {};
+      const scenes = data.scenes || [];
+      const total  = Object.values(uc).reduce((a,b)=>a+b,0);
+
+      // ── Metric card 1 : total objets ──
+      const m1 = document.getElementById('mv1');
+      if(m1) m1.textContent = total || '—';
+
+      // ── Metric card 2 : nb scènes ──
+      const m2 = document.getElementById('mv2');
+      if(m2) m2.textContent = scenes.length || '—';
+
+      // ── Metric card 3 : FPS de la dernière analyse ──
+      const lastScene = scenes[0];
+      const m3 = document.getElementById('mv3');
+      if(m3) m3.textContent = lastScene?.fps ? lastScene.fps.toFixed(1) : '—';
+
+      // ── Metric card 4 : durée dernière analyse ──
+      const m4 = document.getElementById('mv4');
+      if(m4) m4.textContent = lastScene?.duration_s ? lastScene.duration_s+'s' : '—';
+
+      // ── Scene summary (se met à jour maintenant !) ──
+      if(lastScene){
+        const ls = document.getElementById('liveSource');
+        const lsm = document.getElementById('liveSourceMeta');
+        if(ls) ls.textContent = lastScene.video_name || lastScene.scene_id || 'Unknown';
+        if(lsm) lsm.textContent = `${lastScene.duration_s||0}s analyzed`;
+
+        const lo = document.getElementById('liveObjects');
+        if(lo) lo.textContent = lastScene.total || 0;
+
+        const lf = document.getElementById('liveFps');
+        if(lf) lf.textContent = lastScene.fps ? lastScene.fps.toFixed(1) : '—';
+
+        const ld = document.getElementById('liveDuration');
+        if(ld) ld.textContent = lastScene.duration_s ? lastScene.duration_s+'s' : '—';
+      }
+
+      // ── Pie chart Object Type Distribution ──
+      if(Object.keys(uc).length && typeof updatePie === 'function'){
+        updatePie(uc);
+      }
+
+      // ── Live stats (depuis webcam stats si dispo, sinon dernière analyse) ──
+      try{
+        const wcRes = await fetch('/api/webcam/stats');
+        if(wcRes.ok){
+          const wc = await wcRes.json();
+          const det = document.getElementById('sbdet');
+          const acc = document.getElementById('sbacc');
+          if(det) det.textContent = wc.detections ?? 0;
+          if(acc) acc.textContent = wc.frame ? Math.round(wc.frame) : '—';
+          // Montre le panneau live seulement si webcam active
+          if(wc.frame > 0){
+            const note = document.getElementById('livePanelNote');
+            if(note) note.style.display='none';
+          }
+        }
+      }catch(e){}
+
+      // ── Charts flow (vraies données timeline) ──
+      if(window.fch && lastScene?.timeline?.length > 1){
+        const tl = lastScene.timeline;
+        const step = Math.max(1,Math.floor(tl.length/20));
+        const lbl=[],objDat=[];
+        for(let i=0;i<tl.length;i+=step){
+          const pt=tl[i];
+          lbl.push(pt.ts.toFixed(0)+'s');
+          const cnt=Object.entries(pt)
+            .filter(([k])=>!['frame','ts'].includes(k))
+            .reduce((a,[,v])=>a+(v||0),0);
+          objDat.push(cnt);
+        }
+        window.fch.data.labels = lbl;
+        window.fch.data.datasets[0].data = objDat;
+        // FPS dataset : valeur constante (fps de la scène)
+        window.fch.data.datasets[1].data = lbl.map(()=>lastScene.fps||0);
+        window.fch.update('none');
+      }
+
+      // ── Chart classification (vraies classes) ──
+      if(window.tch && Object.keys(uc).length){
+        const COLORS=['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#ec4899','#06b6d4','#f97316'];
+        window.tch.data.labels = Object.keys(uc);
+        window.tch.data.datasets[0].data = Object.values(uc);
+        window.tch.data.datasets[0].backgroundColor = Object.keys(uc).map((_,i)=>COLORS[i%COLORS.length]);
+        window.tch.update('none');
+      }
+
+      // ── Heatmap depuis vraies positions (déjà gérée par loadHeatmap) ──
+
+    }catch(err){ console.warn('[TrackIQ] Dashboard fetch:',err); }
+  }
+}
+
+/* ══ LOGS ══ */
+if(PAGE==='logs'){
+  let _rows=[];
+  window.addEventListener('load',async()=>{
+    try{
+      const res=await fetch('/api/logs');
+      const scenes=await res.json();
+      if(!scenes.length)return;
+      _rows=[];
+      scenes.forEach(s=>{
+        Object.entries(s.unique_counts||{}).forEach(([cls,cnt])=>{
+          _rows.push({date:s.generated_at?new Date(s.generated_at).toLocaleString():'—',
+            scene:s.scene_id,video:s.video_name||'—',cls,cnt,total:s.total_unique||0,sid:s.scene_id});
+        });
+      });
+      const scvs=document.querySelectorAll('.sc-v');
+      if(scvs[0]) scvs[0].textContent=scenes.reduce((a,s)=>a+(s.total_unique||0),0);
+      if(scvs[1]) scvs[1].textContent=scenes.length;
+      renderTable(_rows);
+      hookFilters(scenes);
+      const expBtn=document.querySelector('.btn-exp');
+      if(expBtn) expBtn.onclick=()=>scenes.forEach((s,i)=>setTimeout(()=>window.open(`/api/logs/${s.scene_id}/csv`),i*300));
+    }catch(err){console.warn('[TrackIQ] Logs:',err);}
+  });
+
+  function renderTable(rows){
+    const tbody=document.getElementById('tbody');if(!tbody)return;
+    if(!rows.length){tbody.innerHTML=`<tr><td colspan="7" style="text-align:center;padding:30px;color:var(--text3);">No data yet — run an analysis first</td></tr>`;return;}
+    const DOT={'Vehicle':'#3b82f6','Motorcycle':'#10b981','Truck':'#f59e0b','Bus':'#8b5cf6','Human':'#ec4899','Bicycle':'#06b6d4'};
+    const EMO={'Vehicle':'🚗','Motorcycle':'🏍','Truck':'🚚','Bus':'🚌','Human':'🚶','Bicycle':'🚲'};
+    tbody.innerHTML='';
+    rows.forEach(r=>{
+      const tr=document.createElement('tr');
+      tr.innerHTML=`<td><div class="thumb">${EMO[r.cls]||'📦'}</div></td>
+        <td style="font-size:11px;color:var(--text2);">${r.date}</td>
+        <td style="font-size:11px;color:var(--text2);">${r.scene}</td>
+        <td style="font-size:11px;" title="${r.video}">${r.video.length>18?r.video.slice(0,18)+'…':r.video}</td>
+        <td><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${DOT[r.cls]||'#888'};margin-right:4px;"></span>${r.cls}</td>
+        <td><strong>${r.cnt}</strong></td>
+        <td><a href="/api/logs/${r.sid}/csv" style="color:var(--accent);font-size:11px;"><i class="fas fa-download"></i> CSV</a></td>`;
+      tbody.appendChild(tr);
+    });
+  }
+
+  function hookFilters(scenes){
+    const sIn=document.getElementById('sIn');
+    const camF=document.getElementById('camF');
+    const typeF=document.getElementById('typeF');
+    if(typeF){
+      const cls=[...new Set(_rows.map(r=>r.cls))];
+      typeF.innerHTML='<option value="">All</option>'+cls.map(c=>`<option>${c}</option>`).join('');
+    }
+    if(camF) camF.innerHTML='<option value="">All</option>'+
+      scenes.map(s=>`<option value="${s.scene_id}">${s.video_name||s.scene_id}</option>`).join('');
+    const apply=()=>{
+      const s=(sIn?.value||'').toLowerCase(),sc=camF?.value||'',tp=typeF?.value||'';
+      renderTable(_rows.filter(r=>(!s||r.video.toLowerCase().includes(s)||r.scene.toLowerCase().includes(s))&&(!sc||r.scene===sc)&&(!tp||r.cls===tp)));
+    };
+    if(sIn) sIn.oninput=apply;
+    if(camF) camF.onchange=apply;
+    if(typeF) typeF.onchange=apply;
+  }
+}
+
+/* ══ HISTORY ══ */
+if(PAGE==='history'){
+  async function mergeHistory(){
+    try{
+      const res=await fetch('/api/history');
+      const items=await res.json();
+      if(!items.length)return;
+      let hist=[];try{hist=JSON.parse(localStorage.getItem('tiq_history')||'[]');}catch(e){}
+      items.forEach(item=>{if(!hist.find(h=>h.url===item.url))hist.unshift({name:item.name,url:item.url,date:item.date});});
+      localStorage.setItem('tiq_history',JSON.stringify(hist.slice(0,50)));
+      if(window.renderGrid)window.renderGrid();
+    }catch(err){console.warn('[TrackIQ] History:',err);}
+  }
+  setTimeout(mergeHistory,300);
+}
+
+console.log(`[TrackIQ v5] page=${PAGE}`);

templates/dashboard.html

@@ -0,0 +1,418 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ Dashboard</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
+<style>
+:root{--bg:#0c1117;--s:#151c25;--s2:#1c2531;--bd:rgba(255,255,255,0.07);--sh:0 2px 16px rgba(0,0,0,0.45);--shlg:0 8px 36px rgba(0,0,0,0.55);--t:#e8edf2;--t2:#7a8fa0;--t3:#3a4a5a;--ac:#880000;--ac2:#660000;--acl:rgba(136,0,0,0.12);--gr:#16a34a;--grb:#052e16;--bl:#3b82f6;--blb:#0f2040;--yw:#f59e0b;--ywb:#1a0f00;--re:#ef4444;--reb:#2d0000;--sw:60px;--r:14px;--rs:9px;}
+[data-theme="light"]{--bg:#f0f4f8;--s:#fff;--s2:#f6f8fb;--bd:rgba(0,0,0,0.07);--sh:0 2px 16px rgba(0,0,0,0.09);--shlg:0 8px 36px rgba(0,0,0,0.13);--t:#0f1923;--t2:#5a6a7a;--t3:#9aaab8;--grb:#dcfce7;--blb:#dbeafe;--ywb:#fef9c3;--reb:#fee2e2;}
+*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:0;height:0}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t);font-size:13px;display:flex;height:100vh;overflow:hidden;transition:background .3s,color .3s}
+.sb{width:var(--sw);background:var(--s);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;flex-shrink:0}
+.sbl{width:34px;height:34px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none}
+.sbsep{width:26px;height:1px;background:var(--bd);margin:3px 0}
+.sbb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:14px;cursor:pointer;transition:all .2s;text-decoration:none;border:none;background:none;position:relative}
+.sbb:hover{background:var(--s2);color:var(--t)}.sbb.on{background:var(--acl);color:var(--ac)}
+.sbb .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%);background:var(--t);color:var(--bg);font-size:10px;padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;z-index:300}.sbb:hover .tip{opacity:1}
+.sbsp{flex:1}.pw{flex:1;display:flex;flex-direction:column;overflow:hidden}
+.topb{height:50px;background:var(--s);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0}
+.topl,.topr{display:flex;align-items:center;gap:9px}.bn{font-size:14px;font-weight:600}.bn b{color:var(--ac)}
+.pill{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--gr);background:var(--grb);padding:2px 8px;border-radius:20px}
+.ld{width:6px;height:6px;border-radius:50%;background:var(--gr);animation:blink 2s infinite}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
+.clk{font-size:10px;font-family:'DM Mono',monospace;color:var(--t2)}
+.lg{display:flex;background:var(--s2);border-radius:5px;padding:2px;border:1px solid var(--bd)}
+.lb{font-size:10px;font-weight:500;padding:2px 8px;border:none;background:none;cursor:pointer;border-radius:3px;color:var(--t2);font-family:'DM Sans',sans-serif;transition:all .2s}.lb.on{background:var(--ac);color:#fff}
+.ib{width:28px;height:28px;border-radius:5px;border:1px solid var(--bd);background:var(--s);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:11px;position:relative;transition:all .2s}.ib:hover{background:var(--s2)}
+.nd{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
+main{flex:1;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1.4fr) 360px;gap:12px;overflow:auto;min-height:0}
+.left-col{display:grid;grid-template-rows:auto minmax(190px,1fr) minmax(190px,1fr);gap:10px;min-height:0}
+.right-col{display:grid;grid-template-rows:minmax(300px,1.15fr) auto auto;gap:10px;min-height:0}
+.mr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
+.mc,.cd{background:var(--s);border:1px solid var(--bd);box-shadow:var(--sh);overflow:hidden}
+.mc{border-radius:var(--rs);padding:11px 13px;transition:transform .2s}.mc:hover{transform:translateY(-2px)}
+.cd{border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column}.cd:hover{box-shadow:var(--shlg)}
+.mct{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
+.mcl{font-size:10px;color:var(--t2)}.bx{font-size:9px;font-weight:500;padding:1px 5px;border-radius:4px}
+.mv{font-size:20px;font-weight:300;letter-spacing:-.5px;line-height:1}.mu{font-size:10px;color:var(--t2)}.ms{font-size:9px;color:var(--t3);margin-top:2px}
+.ct{font-size:11px;font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:5px;flex-shrink:0}.ct i{color:var(--ac);font-size:10px}
+.chart-wrap{flex:1;min-height:0}
+.stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.hmcd{padding:0}
+.hmhd{padding:10px 12px 6px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.hmhd .ct{margin-bottom:0}
+.hmbd{flex:1;position:relative;min-height:220px}
+#hmc2{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
+.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
+.statbox{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:10px 11px}
+.statbox .k{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.04em}
+.statbox .v{font-size:18px;font-weight:300;margin-top:4px}
+.subline{font-size:10px;color:var(--t2)}
+.listbox{display:flex;flex-direction:column;gap:6px}
+.vr{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:8px 10px}
+.vrl{display:flex;align-items:center;gap:7px;font-size:11px}.vic{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px}.vp{font-size:13px;font-weight:500}
+.al{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--bd)}.al:last-child{border-bottom:none}
+.ai{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:1px}
+.at2{font-size:10px;font-weight:500;margin-bottom:1px}.as2{font-size:9px;color:var(--t2)}
+.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mini-pill{font-size:9px;padding:3px 7px;border-radius:999px;background:var(--s2);border:1px solid var(--bd);color:var(--t2)}
+.empty-note{font-size:10px;color:var(--t3);padding-top:4px}
+@media(max-width:1180px){main{grid-template-columns:1fr}.right-col{grid-template-rows:minmax(260px,auto) auto auto}.stack{grid-template-columns:1fr}.mr{grid-template-columns:repeat(2,minmax(0,1fr))}}
+</style>
+</head>
+<body>
+<nav class="sb">
+  <a href="/" class="sbl"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sbsep"></div>
+  <a href="/home" class="sbb"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sbb on"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sbb"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sbb"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sbsp"></div>
+  <button class="sbb" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="pw">
+  <header class="topb">
+    <div class="topl">
+      <span class="bn">Track<b>IQ</b></span>
+      <span style="color:var(--bd);font-size:16px;margin:0 1px;">|</span>
+      <span style="font-size:12px;font-weight:500;" id="t-dash">Dashboard</span>
+      <div class="pill"><span class="ld"></span> <span id="liveBadge">Live</span></div>
+    </div>
+    <div class="topr">
+      <span class="clk" id="clk">--:--:--</span>
+      <div class="lg">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="ib" onclick="toggleNotifs()"><i class="fas fa-bell"></i><span class="nd" id="nd"></span></button>
+      <button class="ib" onclick="toggleTheme()"><i class="fas fa-moon" id="ti2"></i></button>
+    </div>
+  </header>
+
+  <div id="notifP" style="display:none;position:fixed;top:57px;right:65px;z-index:500;width:255px;background:var(--s);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shlg);padding:12px 14px;">
+    <div style="font-size:11px;font-weight:500;margin-bottom:8px;display:flex;justify-content:space-between;"><span id="t-notif">Notifications</span><button onclick="clearN()" style="font-size:10px;color:var(--ac);background:none;border:none;cursor:pointer;">Clear all</button></div>
+    <div id="nl">
+      <div style="padding:6px 0;border-bottom:1px solid var(--bd);"><div style="font-size:10px;font-weight:500;color:var(--re);" id="t-a1">Congestion Zone A</div><div style="font-size:9px;color:var(--t2);">4 min ago</div></div>
+      <div style="padding:6px 0;"><div style="font-size:10px;font-weight:500;" id="t-source-loaded">Source ready</div><div style="font-size:9px;color:var(--t2);">Just now</div></div>
+    </div>
+  </div>
+
+  <main>
+    <section class="left-col">
+      <div class="mr">
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m1">Objects Today</span><span class="bx" style="background:var(--grb);color:var(--gr);" id="m1Trend">+0%</span></div><div><span class="mv" id="mvToday">0</span> <span class="mu" id="t-veh">obj.</span></div><div class="ms" id="m1Sub">Latest analyzed scenes</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m2">Current Flow</span><span class="bx" style="background:var(--grb);color:var(--gr);" id="flowBadge">Smooth</span></div><div><span class="mv" id="mvFlow">0</span> <span class="mu">obj/min</span></div><div class="ms" id="m2Sub">Based on recent activity</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m3">Avg FPS</span><span class="bx" style="background:var(--blb);color:var(--bl);" id="fpsBadge">Stable</span></div><div><span class="mv" id="mvFps">0</span> <span class="mu">fps</span></div><div class="ms" id="m3Sub">Last completed analysis</div></div>
+        <div class="mc"><div class="mct"><span class="mcl" id="t-m4">Latest clip</span><span class="bx" style="background:var(--ywb);color:var(--yw);" id="accBadge">Current</span></div><div><span class="mv" id="mvAcc">0</span> <span class="mu">s</span></div><div class="ms" id="m4Sub">Duration of latest processed video</div></div>
+      </div>
+
+      <div class="stack">
+        <div class="cd">
+          <div class="ct"><i class="fas fa-chart-area"></i><span id="t-c1">Flow & speed</span></div>
+          <div class="chart-wrap"><canvas id="fc"></canvas></div>
+        </div>
+        <div class="cd">
+          <div class="ct"><i class="fas fa-chart-bar"></i><span id="t-c2">Classification</span></div>
+          <div class="chart-wrap"><canvas id="tc"></canvas></div>
+        </div>
+      </div>
+
+      <div class="cd">
+        <div class="ct"><i class="fas fa-layer-group"></i><span id="t-scenes">Scene summary</span></div>
+        <div class="stats-grid">
+          <div class="statbox"><div class="k" id="t-live-source">Source</div><div class="v" id="liveSource">No source</div><div class="subline" id="liveSourceMeta">Ready after analysis</div></div>
+          <div class="statbox"><div class="k" id="t-live-objects">Objects</div><div class="v" id="liveObjects" id="liveObjects">0</div><div class="subline" id="liveObjectsMeta">Peak visible count</div></div>
+          <div class="statbox"><div class="k" id="t-live-fps">FPS</div><div class="v" id="liveFps" id="liveFps">0</div><div class="subline" id="liveFpsMeta">Captured stream rate</div></div>
+          <div class="statbox"><div class="k" id="t-live-duration">Duration</div><div class="v" id="liveDuration" id="liveDuration">0s</div><div class="subline" id="liveDurationMeta">Latest processed clip</div></div>
+        </div>
+        <div class="pill-row" id="liveClassPills"></div>
+        <div class="empty-note" id="liveNote">Current summary follows the latest processed analysis instead of the old floating video preview.</div>
+        <div id="sceneSummaryGrid" style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;"></div>
+      </div>
+    </section>
+
+    <aside class="right-col">
+      <div class="cd hmcd">
+        <div class="hmhd"><div class="ct"><i class="fas fa-map-marker-alt"></i><span id="t-hm">Position heatmap</span></div><span style="font-size:9px;color:var(--t3);" id="t-hms">Object density</span></div>
+        <div class="hmbd"><canvas id="hmc2"></canvas></div>
+      </div>
+
+      <div class="stack">
+        <div class="cd" style="padding:11px 12px;">
+          <div class="ct">
+            <i class="fas fa-chart-pie"></i>
+            <span>Object Type Distribution</span>
+          </div>
+          <!-- Pie chart + légende -->
+          <div style="position:relative;display:flex;align-items:center;gap:10px;min-height:140px;">
+            <div style="width:145px;height:145px;flex-shrink:0;">
+              <canvas id="pieChart"></canvas>
+
+            </div>
+            <!-- Légende dynamique -->
+            <div id="pieLegend" style="flex:1;display:flex;flex-direction:column;gap:5px;">
+              <div style="font-size:10px;color:var(--t3);text-align:center;">No data yet</div>
+            </div>
+          </div>
+        </div>
+        <div class="cd" style="padding:11px 12px;">
+          <div class="ct"><i class="fas fa-wave-square"></i><span id="t-live-panel">Live stats</span></div>
+          <div class="stats-grid">
+            <div class="statbox"><div class="k" id="t-det">Detected</div><div class="v" id="sbdet">0</div></div>
+            <div class="statbox"><div class="k" id="t-acc">Latest FPS</div><div class="v" id="sbacc">0</div></div>
+          </div>
+          <div class="empty-note" id="livePanelNote">Heatmap and key stats stay visible at all times.</div>
+        </div>
+      </div>
+    </aside>
+  </main>
+</div>
+
+<script>
+setInterval(()=>{document.getElementById('clk').textContent=new Date().toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit',second:'2-digit'});},1000);
+
+function toggleTheme(){
+  const d=document.documentElement,dk=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dk?'light':'dark');
+  ['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className=dk?'fas fa-moon':'fas fa-sun';});
+  rebuildCharts();
+  setTimeout(drawHm,50);
+  rebuildPie();
+  try{localStorage.setItem('tiq_theme',dk?'light':'dark');}catch(e){}
+}
+
+const TL={
+  en:{dash:'Dashboard',m1:'Objects Today',veh:'obj.',m2:'Current Flow',m3:'Avg FPS',m4:'Latest clip',c1:'Flow from video',c2:'Classification',hm:'Position heatmap',hms:'Detected positions',bk:'Breakdown',ca:'Cars',mo:'Moto',tr:'Trucks',al:'Alerts',notif:'Notifications',scenes:'Scene summary',livesource:'Source',liveobjects:'Objects',livefps:'FPS',liveduration:'Duration',livepanel:'Live stats',det:'Detected',acc:'Latest FPS'},
+  fr:{dash:'Tableau de bord',m1:'Objets du jour',veh:'obj.',m2:'Flux actuel',m3:'FPS moy.',m4:'Dernier clip',c1:'Flux vidéo',c2:'Classification',hm:'Carte de densité',hms:'Positions détectées',bk:'Répartition',ca:'Voitures',mo:'Motos',tr:'Camions',al:'Alertes',notif:'Notifications',scenes:'Résumé scène',livesource:'Source',liveobjects:'Objets',livefps:'FPS',liveduration:'Durée',livepanel:'Stats live',det:'Détectés',acc:'FPS récent'},
+  wo:{dash:'Dashboard',m1:'Objets tey',veh:'obj.',m2:'Yóbbu',m3:'FPS moy.',m4:'Clip mujj',c1:'Flux video',c2:'Wërsëg',hm:'Kàrt',hms:'Posision yi',bk:'Wërsëg',ca:'Cars',mo:'Moto',tr:'Trucks',al:'Yëgël',notif:'Yëgël yi',scenes:'Melo scène',livesource:'Source',liveobjects:'Objets',livefps:'FPS',liveduration:'Yoon',livepanel:'Stats live',det:'Yi réy',acc:'FPS mujj'}
+};
+
+function setLang(l,btn){
+  document.querySelectorAll('.lb').forEach(b=>b.classList.remove('on'));
+  btn.classList.add('on');
+  const t=TL[l];
+  const mp={dash:'t-dash',m1:'t-m1',veh:'t-veh',m2:'t-m2',m3:'t-m3',m4:'t-m4',c1:'t-c1',c2:'t-c2',hm:'t-hm',hms:'t-hms',bk:'t-bk',ca:'t-ca',mo:'t-mo',tr:'t-tr',al:'t-al',notif:'t-notif',scenes:'t-scenes',livesource:'t-live-source',liveobjects:'t-live-objects',livefps:'t-live-fps',liveduration:'t-live-duration',livepanel:'t-live-panel',det:'t-det',acc:'t-acc'};
+  Object.entries(mp).forEach(([k,id])=>{const el=document.getElementById(id);if(el&&t[k])el.textContent=t[k];});
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+let no=false;
+function toggleNotifs(){no=!no;document.getElementById('notifP').style.display=no?'block':'none';if(no)document.getElementById('nd').style.display='none';}
+function clearN(){document.getElementById('nl').innerHTML='<div style="font-size:10px;color:var(--t3);text-align:center;padding:10px;">No notifications</div>';no=false;document.getElementById('notifP').style.display='none';}
+document.addEventListener('click',e=>{if(no&&!e.target.closest('#notifP')&&!e.target.closest('.ib'))toggleNotifs();});
+
+window.fch=null;
+window.tch=null;
+window._tiqHeatPoints=[];
+
+function gc(){
+  const dk=document.documentElement.getAttribute('data-theme')==='dark';
+  return{grid:dk?'rgba(255,255,255,0.05)':'rgba(0,0,0,0.06)',tick:dk?'#4a5a6a':'#94a3b8'};
+}
+
+/* ── Pie chart — Object Type Distribution ── */
+window.pch = null;
+
+function rebuildPie(labels=[], data=[], colors=[]){
+  // Enregistre datalabels seulement si dispo
+  if(window.ChartDataLabels) Chart.register(ChartDataLabels);
+  if(window.pch) window.pch.destroy();
+  const canvas = document.getElementById('pieChart');
+  if(!canvas) return;
+  const dk = document.documentElement.getAttribute('data-theme')==='dark';
+
+  const defaultColors = ['#3b82f6','#10b981','#f59e0b','#8b5cf6','#ec4899','#06b6d4','#ef4444','#f97316'];
+
+  window.pch = new Chart(canvas, {
+    type: 'pie',
+    data: {
+      labels: labels.length ? labels : ['No data'],
+      datasets: [{
+        data:            data.length ? data : [1],
+        backgroundColor: colors.length ? colors : [dk?'#1c2531':'#e2e8f0'],
+        borderColor:     dk ? '#151c25' : '#ffffff',
+        borderWidth:     2,
+        hoverOffset:     6,
+      }]
+    },
+    options: {
+      responsive:          true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          callbacks: {
+            label: ctx => {
+              const tot = ctx.dataset.data.reduce((a,b)=>a+b,0);
+              return ` ${ctx.label}: ${ctx.raw} (${Math.round(ctx.raw/tot*100)}%)`;
+            }
+          }
+        },
+        /* Affiche les % à l'intérieur de chaque part */
+        datalabels: {
+          color: '#fff',
+          font: { size: 11, weight: 'bold' },
+          formatter: (value, ctx) => {
+            const tot = ctx.dataset.data.reduce((a,b)=>a+b,0);
+            const pct = Math.round(value/tot*100);
+            return pct >= 5 ? pct+'%' : ''; // cache si trop petit
+          }
+        }
+      }
+    }
+  });
+}
+
+function updatePie(uc){
+  const COLORS = {
+    'Vehicle':'#3b82f6','Motorcycle':'#10b981','Truck':'#f59e0b',
+    'Bus':'#8b5cf6','Human':'#ec4899','Bicycle':'#06b6d4',
+    'Traffic light':'#ef4444','Road sign':'#f97316'
+  };
+  const EMO = {
+    'Vehicle':'🚗','Motorcycle':'🏍','Truck':'🚚','Bus':'🚌',
+    'Human':'🚶','Bicycle':'🚲','Traffic light':'🚦','Road sign':'🛑'
+  };
+
+  const labels = Object.keys(uc);
+  const data   = Object.values(uc);
+  const colors = labels.map(l => COLORS[l] || '#888');
+  const total  = data.reduce((a,b)=>a+b,0);
+
+  // Recrée le chart
+  rebuildPie(labels, data, colors);
+
+  // Met à jour le label central
+  const ptn = document.getElementById('pieTotalNum');
+  if(ptn) ptn.textContent = total;
+
+  // Légende dynamique
+  const leg = document.getElementById('pieLegend');
+  if(!leg) return;
+  leg.innerHTML = '';
+  labels.forEach((lbl, i) => {
+    const pct = Math.round(data[i]/Math.max(total,1)*100);
+    const row = document.createElement('div');
+    row.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:6px;';
+    row.innerHTML = `
+      <div style="display:flex;align-items:center;gap:5px;font-size:11px;overflow:hidden;">
+        <span style="width:9px;height:9px;border-radius:2px;background:${colors[i]};flex-shrink:0;display:inline-block;"></span>
+        <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${EMO[lbl]||'📦'} ${lbl}</span>
+      </div>
+      <span style="font-size:10px;color:var(--t2);flex-shrink:0;">${data[i]}</span>
+    `;
+    leg.appendChild(row);
+  });
+}
+
+function rebuildCharts(){
+  if(window.fch)window.fch.destroy();
+  if(window.tch)window.tch.destroy();
+  const {grid,tick}=gc();
+  /* Flow chart : 2 datasets (Objects + FPS) — compatible avec trackiq-api.js */
+  window.fch=new Chart(document.getElementById('fc'),{
+    data:{labels:['—'],datasets:[
+      {type:'line',label:'Objects',data:[0],borderColor:'#3b82f6',backgroundColor:'rgba(59,130,246,0.08)',borderWidth:1.5,tension:0.45,pointRadius:0,fill:true,yAxisID:'y'},
+      {type:'line',label:'FPS',data:[0],borderColor:'#10b981',backgroundColor:'rgba(16,185,129,0.05)',borderWidth:1.5,tension:0.45,pointRadius:0,yAxisID:'y2'}
+    ]},
+    options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{labels:{boxWidth:8,font:{size:9},color:tick}}},scales:{x:{ticks:{font:{size:9},color:tick,maxTicksLimit:8},grid:{color:grid},border:{display:false}},y:{position:'left',beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}},y2:{position:'right',beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{drawOnChartArea:false},border:{display:false}}}}
+  });
+  /* Classification chart : NON stacké, 1 dataset — compatible avec trackiq-api.js */
+  window.tch=new Chart(document.getElementById('tc'),{
+    type:'bar',
+    data:{labels:['—'],datasets:[
+      {label:'Count',data:[0],backgroundColor:'#3b82f6',borderRadius:3,borderSkipped:false}
+    ]},
+    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}},y:{beginAtZero:true,ticks:{font:{size:9},color:tick},grid:{color:grid},border:{display:false}}}}
+  });
+}
+
+function drawHm(){
+  const c=document.getElementById('hmc2'),b=c.parentElement;
+  const w=b.offsetWidth,h=b.offsetHeight;
+  if(!w||!h)return;
+  c.width=w;c.height=h;
+  const ctx=c.getContext('2d');
+  const dk=document.documentElement.getAttribute('data-theme')==='dark';
+  ctx.fillStyle=dk?'#0c1219':'#e8eef5';
+  ctx.fillRect(0,0,w,h);
+  ctx.strokeStyle=dk?'rgba(255,255,255,0.07)':'rgba(0,0,0,0.07)';
+  ctx.lineWidth=1;
+  [0.25,0.5,0.75].forEach(r=>{ctx.beginPath();ctx.moveTo(0,h*r);ctx.lineTo(w,h*r);ctx.stroke();ctx.beginPath();ctx.moveTo(w*r,0);ctx.lineTo(w*r,h);ctx.stroke();});
+  const pts=Array.isArray(window._tiqHeatPoints)?window._tiqHeatPoints:[];
+  if(pts.length){
+    let mxR=0,mxH=0;
+    pts.forEach(p=>{if(p.r>mxR)mxR=p.r;if(p.h>mxH)mxH=p.h;});
+    mxR=Math.max(mxR,0.01);mxH=Math.max(mxH,0.01);
+    pts.forEach(p=>{
+      const px=(p.x/mxR)*w,py=(p.y/mxH)*h;
+      const rad=Math.max(10,Math.min(w,h)*0.015);
+      const grd=ctx.createRadialGradient(px,py,0,px,py,rad);
+      grd.addColorStop(0,'rgba(220,38,38,0.5)');
+      grd.addColorStop(0.4,'rgba(180,0,0,0.18)');
+      grd.addColorStop(1,'rgba(0,0,0,0)');
+      ctx.fillStyle=grd;ctx.fillRect(0,0,w,h);
+    });
+    ctx.font="9px 'DM Mono',monospace";
+    ctx.fillStyle=dk?'rgba(255,255,255,0.3)':'rgba(0,0,0,0.25)';
+    ctx.textAlign='left';ctx.fillText(pts.length+' points',8,13);
+  }else{
+    ctx.fillStyle=dk?'rgba(255,255,255,0.18)':'rgba(0,0,0,0.2)';
+    ctx.font="12px 'DM Sans',sans-serif";ctx.textAlign='center';
+    ctx.fillText('Run an analysis to build the heatmap',w/2,h/2);
+    ctx.textAlign='left';
+  }
+  ctx.font="10px 'DM Mono',monospace";
+  ctx.fillStyle=dk?'rgba(255,255,255,0.24)':'rgba(0,0,0,0.2)';
+  ctx.fillText('N',w/2-3,12);ctx.fillText('S',w/2-3,h-5);ctx.fillText('W',5,h/2+3);ctx.fillText('E',w-10,h/2+3);
+}
+
+async function loadHeatmap(){
+  try{
+    const r=await fetch('/api/logs/rows');
+    if(!r.ok)return;
+    const rows=await r.json();
+    if(!rows.length)return;
+    const pts=[];let mxX=0,mxY=0;
+    rows.slice(0,4000).forEach(r=>{
+      if(r.cx>0&&r.cy>0){pts.push({x:r.cx,y:r.cy,r:0,h:0});if(r.cx>mxX)mxX=r.cx;if(r.cy>mxY)mxY=r.cy;}
+    });
+    if(!pts.length)return;
+    pts.forEach(p=>{p.r=mxX;p.h=mxY;});
+    window._tiqHeatPoints=pts;
+    drawHm();
+  }catch(e){}
+}
+
+setTimeout(rebuildCharts,120);
+setTimeout(rebuildPie,150);
+setTimeout(drawHm,180);
+setTimeout(loadHeatmap,600);
+setInterval(loadHeatmap,20000);
+window.addEventListener('resize',()=>setTimeout(drawHm,50));
+
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){
+      document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className='fas fa-sun';});}
+    }
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){
+      const btn=document.querySelector('.lb[onclick*="\''+lg+'\'"]');
+      if(btn)setLang(lg,btn);
+    }
+  }catch(e){}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

templates/history.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — History</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--surface:#fff;--surface2:#f6f8fb;--border:rgba(0,0,0,0.07);--shadow:0 2px 16px rgba(0,0,0,0.09);--shadow-lg:0 8px 36px rgba(0,0,0,0.13);--text:#0f1923;--text2:#5a6a7a;--text3:#9aaab8;--accent:#880000;--accent2:#660000;--accent-light:rgba(136,0,0,0.07);--green:#16a34a;--green-bg:#dcfce7;--sidebar-w:60px;--radius:14px;--radius-sm:9px;}
+[data-theme="dark"]{--bg:#0c1117;--surface:#151c25;--surface2:#1c2531;--border:rgba(255,255,255,0.07);--shadow:0 2px 16px rgba(0,0,0,0.45);--text:#e8edf2;--text2:#7a8fa0;--text3:#3a4a5a;--green-bg:#052e16;}
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
+::-webkit-scrollbar{width:0;}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;display:flex;min-height:100vh;transition:background 0.3s,color 0.3s;}
+
+.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200;box-shadow:2px 0 12px rgba(0,0,0,0.04);}
+.sb-logo{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;margin-bottom:10px;text-decoration:none;}
+.sb-sep{width:28px;height:1px;background:var(--border);margin:4px 0;}
+.sb-btn{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:15px;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;background:none;position:relative;}
+.sb-btn:hover{background:var(--surface2);color:var(--text);}
+.sb-btn.active{background:var(--accent-light);color:var(--accent);}
+.sb-btn .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%);background:var(--text);color:var(--surface);font-size:11px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:300;}
+.sb-btn:hover .tip{opacity:1;}
+.sb-spacer{flex:1;}
+
+.page-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;}
+.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:100;}
+.topbar-l{display:flex;align-items:center;gap:10px;}
+.brand-name{font-size:15px;font-weight:600;} .brand-name b{color:var(--accent);}
+.sep{color:var(--border);font-size:18px;margin:0 2px;}
+.topbar-r{display:flex;align-items:center;gap:7px;}
+.lang-group{display:flex;background:var(--surface2);border-radius:6px;padding:2px;border:1px solid var(--border);}
+.lang-btn{font-size:11px;font-weight:500;padding:3px 8px;border:none;background:none;cursor:pointer;border-radius:4px;color:var(--text2);font-family:'DM Sans',sans-serif;transition:all 0.2s;}
+.lang-btn.active{background:var(--accent);color:white;}
+.icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px;}
+.icon-btn:hover{background:var(--surface2);}
+
+main{flex:1;padding:18px 20px;max-width:1380px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
+
+/* PLAYER CARD — full width */
+.player-card{grid-column:1/3;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow:hidden;}
+.player-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
+.player-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;}
+.player-title i{color:var(--accent);}
+.player-body{position:relative;background:#000;}
+.player-body video{width:100%;display:block;max-height:420px;object-fit:contain;}
+.player-hud{position:absolute;top:11px;left:13px;color:white;font-family:'DM Mono',monospace;font-size:12px;line-height:1.8;text-shadow:1px 1px 4px rgba(0,0,0,0.98);pointer-events:none;}
+.player-empty{padding:80px 20px;text-align:center;color:var(--text3);}
+.player-empty i{font-size:44px;display:block;margin-bottom:12px;}
+.player-empty p{font-size:13px;}
+
+/* VIDEO GRID */
+.vid-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:all 0.2s;}
+.vid-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
+.vid-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
+.vid-thumb{position:relative;background:#0a0a0a;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;}
+.vid-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
+.vid-thumb-ph{color:rgba(255,255,255,0.3);font-size:32px;}
+.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);opacity:0;transition:opacity 0.2s;}
+.play-overlay i{font-size:32px;color:white;}
+.vid-card:hover .play-overlay{opacity:1;}
+.vid-info{padding:11px 13px;}
+.vid-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;}
+.vid-meta{font-size:10px;color:var(--text2);display:flex;align-items:center;justify-content:space-between;}
+.vid-meta span{display:flex;align-items:center;gap:4px;}
+.vid-actions{display:flex;gap:6px;margin-top:8px;}
+.btn-vi{flex:1;padding:5px 8px;border-radius:6px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-size:11px;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:4px;transition:all 0.2s;}
+.btn-vi:hover{background:var(--accent);color:white;border-color:var(--accent);}
+.btn-vi.danger:hover{background:#dc2626;border-color:#dc2626;}
+
+/* EMPTY HISTORY */
+.empty-hist{text-align:center;padding:60px 20px;color:var(--text3);}
+.empty-hist i{font-size:48px;display:block;margin-bottom:14px;}
+.empty-hist p{font-size:13px;margin-bottom:16px;}
+.empty-hist a{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:white;padding:9px 18px;border-radius:9px;text-decoration:none;font-size:12px;}
+
+/* BADGE */
+.badge{font-size:10px;font-weight:500;padding:1px 6px;border-radius:4px;}
+.bg{background:var(--green-bg);color:var(--green);}
+</style>
+</head>
+<body>
+
+<nav class="sidebar">
+  <a href="/" class="sb-logo"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sb-sep"></div>
+  <a href="/home" class="sb-btn"><i class="fas fa-play-circle"></i><span class="tip" id="tip-analyze">Analyze</span></a>
+  <a href="/dashboard" class="sb-btn"><i class="fas fa-chart-line"></i><span class="tip" id="tip-dash">Dashboard</span></a>
+  <a href="/logs" class="sb-btn"><i class="fas fa-list-ul"></i><span class="tip" id="tip-logs">Logs</span></a>
+  <a href="/history" class="sb-btn active"><i class="fas fa-film"></i><span class="tip" id="tip-hist">History</span></a>
+  <div class="sb-spacer"></div>
+  <button class="sb-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="page-wrap">
+  <header class="topbar">
+    <div class="topbar-l">
+      <span class="brand-name">Track<b>IQ</b></span>
+      <span class="sep">|</span>
+      <span style="font-size:13px;font-weight:500;" id="t-title">Annotated History</span>
+    </div>
+    <div class="topbar-r">
+      <div class="lang-group">
+        <button class="lang-btn active" onclick="setLang('en',this)">EN</button>
+        <button class="lang-btn" onclick="setLang('fr',this)">FR</button>
+        <button class="lang-btn" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="icon-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon2"></i></button>
+    </div>
+  </header>
+
+  <main id="mainGrid">
+
+    <!-- Videos grid -->
+    <div id="videoGrid" style="display:grid;grid-template-columns:1fr 1fr;gap:16px;"></div>
+
+  </main>
+</div>
+
+<script>
+/* THEME */
+function toggleTheme(){
+  const d=document.documentElement,dark=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dark?'light':'dark');
+  ['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className=dark?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dark?'light':'dark');}catch(e){}
+}
+
+/* LANG */
+const T={
+  en:{title:'Annotated History',player:'Video player',dl:'Download','select-vid':'Select a video below to play it',tipAnalyze:'Analyze',tipDash:'Dashboard',tipLogs:'Logs',tipHist:'History',reanalyze:'Re-analyze',download:'Download',delete:'Delete',empty:'No annotated videos yet.',goAnalyze:'Go to Analyze'},
+  fr:{title:'Historique annoté',player:'Lecteur vidéo',dl:'Télécharger','select-vid':'Sélectionnez une vidéo ci-dessous',tipAnalyze:'Analyser',tipDash:'Tableau de bord',tipLogs:'Logs',tipHist:'Historique',reanalyze:'Ré-analyser',download:'Télécharger',delete:'Supprimer',empty:'Aucune vidéo annotée.',goAnalyze:'Aller sur Analyser'},
+  wo:{title:'Màgg yi',player:'Video bi',dl:'Télécharger','select-vid':'Tànn video ci suuf',tipAnalyze:'Jàng',tipDash:'Dashboard',tipLogs:'Logs',tipHist:'Màgg',reanalyze:'Wërtëk',download:'Télécharger',delete:'Bañ',empty:'Amul video.',goAnalyze:'Dem Analyser'}
+};
+let curLang='en';
+function setLang(l,btn){
+  curLang=l;
+  document.querySelectorAll('.lang-btn').forEach(b=>b.classList.remove('active'));btn.classList.add('active');
+  const t=T[l];
+  Object.entries({title:'t-title',player:'t-player',dl:'t-dl','select-vid':'t-select-vid',tipAnalyze:'tip-analyze',tipDash:'tip-dash',tipLogs:'tip-logs',tipHist:'tip-hist'}).forEach(([k,id])=>{const el=document.getElementById(id);if(el&&t[k])el.textContent=t[k];});
+  renderGrid();
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+/* HISTORY DATA */
+function getHistory(){try{return JSON.parse(localStorage.getItem('tiq_history')||'[]');}catch(e){return[];}}
+function saveHistory(h){try{localStorage.setItem('tiq_history',JSON.stringify(h));}catch(e){}}
+
+/* FORMAT DATE */
+function fmtDate(iso){
+  try{const d=new Date(iso);return d.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'})+' '+d.toLocaleTimeString('en-US',{hour:'2-digit',minute:'2-digit'});}catch(e){return 'Unknown date';}
+}
+
+let activeUrl=null,activeIdx=null;
+
+function dlVideo(url,name){
+  const a=document.createElement('a');a.href=url;
+  a.download=name||'trackiq_video.mp4';a.click();
+}
+
+function playVideo(url,name,idx){
+  activeUrl=url;activeIdx=idx;
+  const op=document.getElementById('overlayPlayer');
+  op.src=url;op.play().catch(()=>{});
+  document.getElementById('overlayName').textContent=name;
+  document.getElementById('vidOverlay').style.display='flex';
+}
+function closeOverlay(){
+  const op=document.getElementById('overlayPlayer');op.pause();op.src='';
+  document.getElementById('vidOverlay').style.display='none';
+  activeUrl=null;activeIdx=null;
+}
+function dlOverlay(){if(activeUrl){const a=document.createElement('a');a.href=activeUrl;a.download='trackiq.mp4';a.click();}}
+
+function dlActive(){
+  if(!activeUrl)return;
+  const a=document.createElement('a');a.href=activeUrl;a.download='trackiq_annotated.mp4';a.click();
+}
+
+function deleteVideo(idx){
+  const h=getHistory();h.splice(idx,1);saveHistory(h);
+  if(activeIdx===idx){
+    closeModal();
+    activeUrl=null;activeIdx=null;
+  }
+  renderGrid();
+}
+
+function renderGrid(){
+  const hist=getHistory();
+  const t=T[curLang];
+  const grid=document.getElementById('videoGrid');grid.innerHTML='';
+
+  if(!hist.length){
+    const empty=document.createElement('div');empty.className='empty-hist';
+    empty.innerHTML=`<i class="fas fa-film"></i><p>${t.empty}</p><a href="/home">${t.goAnalyze} <i class="fas fa-arrow-right"></i></a>`;
+    grid.appendChild(empty);return;
+  }
+
+  hist.forEach((item,i)=>{
+    const card=document.createElement('div');card.className='vid-card'+(activeIdx===i?' selected':'');
+    const isBlob=item.url&&item.url.startsWith('blob:');
+    const isBackend=item.url&&(item.url.startsWith('/api/')||item.url.startsWith('http'));
+    const canPlay=isBlob||isBackend;
+    card.innerHTML=`
+      <div class="vid-thumb">
+        ${isBlob
+          ? `<video src="${item.url}" style="width:100%;height:100%;object-fit:cover;" muted preload="metadata" onloadeddata="this.currentTime=1"></video>`
+          : `<div class="vid-thumb-ph" style="background:#0a0e15;display:flex;align-items:center;justify-content:center;height:100%;">
+               <i class="fas fa-film" style="font-size:32px;color:rgba(255,255,255,0.2);"></i>
+             </div>`
+        }
+        <div class="play-overlay"><i class="fas fa-play"></i></div>
+      </div>
+      <div class="vid-info">
+        <div class="vid-name" title="${item.name}">${item.name||'Unnamed'}</div>
+        <div class="vid-meta">
+          <span><i class="fas fa-calendar" style="font-size:9px;"></i> ${fmtDate(item.date)}</span>
+          <span class="badge bg">${isBlob?'Local':'Server'}</span>
+        </div>
+        <div class="vid-actions">
+          <button class="btn-vi" onclick="event.stopPropagation();playVideo('${item.url}','${item.name}',${i})">
+            <i class="fas fa-play"></i> Play
+          </button>
+          <button class="btn-vi" onclick="event.stopPropagation();dlVideo('${item.url}','${item.name}')">
+            <i class="fas fa-download"></i>
+          </button>
+          <button class="btn-vi danger" onclick="event.stopPropagation();deleteVideo(${i})">
+            <i class="fas fa-trash"></i>
+          </button>
+        </div>
+      </div>
+    `;
+    card.onclick=(ev)=>{if(!ev.target.closest('.btn-vi'))playVideo(item.url,item.name,i);};
+    grid.appendChild(card);
+  });
+}
+
+/* HUD ticker on player */
+setInterval(()=>{
+  if(!activeUrl)return;
+  const f=570+Math.floor(Math.random()*80),s=295+Math.floor(Math.random()*40);
+  const hf=document.getElementById('oHudF');if(hf)hf.textContent=`F: = ${f} ▶ ${s}`;
+  const car=2+Math.floor(Math.random()*6),van=Math.floor(Math.random()*3),bike=Math.floor(Math.random()*6),p=Math.floor(Math.random()*7);
+  const hc=document.getElementById('oHudC');if(hc)hc.innerHTML=`Car = ${car}<br>Van = ${van}<br>bike = ${bike}<br>person = ${p}`;
+},2200);
+
+document.addEventListener('keydown',e=>{if(e.key==='Escape')closeOverlay();});
+/* INIT */
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');if(th){document.documentElement.setAttribute('data-theme',th);if(th==='dark'){['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className='fas fa-sun';});}}
+    const lg=localStorage.getItem('tiq_lang');if(lg&&lg!=='en'){const btn=document.querySelector(`.lang-btn[onclick*="'${lg}'"]`);if(btn)setLang(lg,btn);}
+  }catch(e){}
+  renderGrid();
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+
+<!-- ── Modal lecteur vidéo ── -->
+<div id="vidOverlay" style="display:none;position:fixed;inset:0;z-index:1000;
+  background:rgba(0,0,0,0.88);backdrop-filter:blur(8px);
+  align-items:center;justify-content:center;flex-direction:column;gap:12px;">
+
+  <!-- Header -->
+  <div style="display:flex;align-items:center;justify-content:space-between;
+    width:min(90vw,860px);padding:0 4px;">
+    <span id="overlayName" style="color:#fff;font-size:13px;font-weight:500;
+      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%;"></span>
+    <div style="display:flex;gap:8px;">
+      <button onclick="dlOverlay()" style="background:rgba(255,255,255,0.12);color:#fff;
+        border:none;border-radius:7px;padding:6px 13px;font-size:12px;cursor:pointer;
+        font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:5px;">
+        <i class="fas fa-download"></i> Download
+      </button>
+      <button onclick="closeOverlay()" style="background:rgba(220,38,38,0.7);color:#fff;
+        border:none;border-radius:7px;padding:6px 13px;font-size:12px;cursor:pointer;
+        font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:5px;">
+        <i class="fas fa-times"></i> Close
+      </button>
+    </div>
+  </div>
+
+  <!-- Vidéo -->
+  <video id="overlayPlayer" controls autoplay
+    style="width:min(90vw,860px);max-height:75vh;border-radius:10px;
+    background:#000;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.6);">
+  </video>
+
+  <!-- Hint ESC -->
+  <span style="color:rgba(255,255,255,0.3);font-size:10px;">Press ESC to close</span>
+</div>
+</body>
+</html>

templates/home.html

@@ -0,0 +1,684 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — Analyze</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--sur:#fff;--sur2:#f6f8fb;--bd:rgba(0,0,0,0.07);--sh:0 2px 16px rgba(0,0,0,0.09);--shlg:0 8px 36px rgba(0,0,0,0.13);--t:#0f1923;--t2:#5a6a7a;--t3:#9aaab8;--ac:#880000;--ac2:#660000;--acl:rgba(136,0,0,0.07);--gr:#16a34a;--sw:60px;--r:14px;--rs:9px;}
+[data-theme="dark"]{--bg:#0c1117;--sur:#151c25;--sur2:#1c2531;--bd:rgba(255,255,255,0.07);--sh:0 2px 16px rgba(0,0,0,0.45);--t:#e8edf2;--t2:#7a8fa0;--t3:#3a4a5a;}
+*{box-sizing:border-box;margin:0;padding:0;}::-webkit-scrollbar{width:0;}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--t);font-size:13px;display:flex;min-height:100vh;}
+
+/* Sidebar */
+.sb{width:var(--sw);background:var(--sur);border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200;}
+.sbl{width:34px;height:34px;background:var(--ac);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none;}
+.sbsep{width:26px;height:1px;background:var(--bd);margin:3px 0;}
+.sbb{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:14px;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none;background:none;position:relative;}
+.sbb:hover{background:var(--sur2);color:var(--t);}.sbb.on{background:var(--acl);color:var(--ac);}
+.sbb .tip{position:absolute;left:44px;top:50%;transform:translateY(-50%);background:var(--t);color:var(--sur);font-size:10px;padding:3px 7px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;z-index:300;}.sbb:hover .tip{opacity:1;}
+.sbsp{flex:1;}
+
+/* Layout */
+.pw{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;}
+.topb{height:50px;background:var(--sur);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100;}
+.topl{display:flex;align-items:center;gap:9px;}
+.bn{font-size:14px;font-weight:600;}.bn b{color:var(--ac);}
+.topr{display:flex;align-items:center;gap:6px;}
+.lg{display:flex;background:var(--sur2);border-radius:5px;padding:2px;border:1px solid var(--bd);}
+.lb{font-size:10px;font-weight:500;padding:2px 8px;border:none;background:none;cursor:pointer;border-radius:3px;color:var(--t2);font-family:'DM Sans',sans-serif;transition:all 0.2s;}.lb.on{background:var(--ac);color:#fff;}
+.ib{width:28px;height:28px;border-radius:5px;border:1px solid var(--bd);background:var(--sur);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:11px;}
+.ib:hover{background:var(--sur2);}
+
+main{flex:1;padding:14px 16px;display:grid;grid-template-columns:340px 1fr;gap:12px;max-width:1400px;width:100%;margin:0 auto;}
+
+/* Card */
+.card{background:var(--sur);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh);padding:14px 16px;}
+.ct{font-size:12px;font-weight:500;margin-bottom:11px;display:flex;align-items:center;gap:6px;}
+.ct i{color:var(--ac);}
+
+/* Source tabs */
+.stabs{display:flex;gap:3px;background:var(--sur2);border-radius:7px;padding:3px;border:1px solid var(--bd);margin-bottom:11px;}
+.stab{flex:1;padding:6px 4px;border-radius:5px;font-size:11px;cursor:pointer;color:var(--t2);border:none;background:none;font-family:'DM Sans',sans-serif;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:4px;}
+.stab.on{background:var(--sur);color:var(--t);box-shadow:0 1px 4px rgba(0,0,0,0.1);font-weight:500;}
+
+/* Upload zone */
+.uzone{border:2px dashed var(--bd);border-radius:var(--rs);min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all 0.2s;padding:14px;position:relative;overflow:hidden;}
+.uzone:hover,.uzone.drag{border-color:var(--ac);background:var(--acl);}
+.uzone.has{border-style:solid;border-color:var(--ac);}
+.uzone i{font-size:22px;color:var(--t3);}
+.uzone.has i{color:var(--ac);}
+.uzone p{font-size:11px;color:var(--t2);text-align:center;}
+.uzone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
+.fname{font-size:11px;font-weight:500;color:var(--ac);display:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.prog{display:none;background:var(--sur2);border-radius:3px;height:4px;margin-top:7px;overflow:hidden;}
+.progb{height:100%;background:var(--ac);width:0%;transition:width 0.3s;}
+.progt{font-size:10px;color:var(--t2);margin-top:4px;display:none;}
+
+/* URL */
+.urow{display:flex;gap:6px;}
+.uin{flex:1;padding:7px 9px;border:1px solid var(--bd);border-radius:7px;font-size:12px;background:var(--sur2);color:var(--t);font-family:'DM Sans',sans-serif;outline:none;}
+.uin:focus{border-color:var(--ac);}
+.uin::placeholder{color:var(--t3);}
+.bsm{padding:7px 12px;background:var(--ac);color:#fff;border:none;border-radius:7px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
+
+/* Webcam */
+.wcbox{background:#000;border-radius:8px;overflow:hidden;aspect-ratio:16/9;position:relative;margin-bottom:10px;}
+.wcbox video,.wcbox img{width:100%;height:100%;object-fit:cover;display:block;}
+.wcph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:rgba(255,255,255,0.3);font-size:11px;}
+.wcph i{font-size:22px;}
+.recbdg{position:absolute;top:7px;left:8px;display:none;align-items:center;gap:4px;background:rgba(220,38,38,0.85);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;}
+@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
+.recbdg i{font-size:8px;animation:blink 1s infinite;}
+
+/* Classes */
+.clshd{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}
+.clshd span{font-size:11px;color:var(--t2);}
+.clshd button{font-size:11px;color:var(--ac);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;}
+.clsg{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
+.clsi{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;border:1px solid var(--bd);cursor:pointer;transition:all 0.2s;font-size:11px;background:var(--sur2);}
+.clsi:hover{border-color:var(--ac);}.clsi.on{border-color:var(--ac);background:var(--acl);}
+.cldot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}
+
+/* Buttons */
+.runbtn{width:100%;padding:10px;background:var(--ac);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;transition:all 0.2s;margin-top:4px;}
+.runbtn:hover{background:var(--ac2);}.runbtn:disabled{opacity:0.4;cursor:not-allowed;}
+.rstbtn{width:100%;padding:8px;background:var(--sur2);color:var(--t2);border:1px solid var(--bd);border-radius:9px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s;}
+.rstbtn:hover{border-color:var(--ac);color:var(--ac);}
+
+/* Right col */
+.rc{display:flex;flex-direction:column;gap:11px;}
+
+/* Big panel */
+.bp{background:var(--sur);border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--shlg);overflow:hidden;}
+.bph{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
+.bpht{font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;}
+.bpht i{color:var(--ac);}
+.bpb{position:relative;background:#080e15;height:420px;}
+
+/* Video dans le panel */
+.bpb video,.bpb img#wcYoloImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none;}
+
+/* HUD top-left */
+.hud{position:absolute;top:10px;left:11px;color:#fff;font-family:'DM Mono',monospace;font-size:11px;line-height:1.85;text-shadow:1px 1px 4px rgba(0,0,0,0.98);pointer-events:none;display:none;z-index:4;}
+.hudf{font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:2px;}
+
+/* Count overlay top-right */
+.cov{position:absolute;top:10px;right:11px;display:none;flex-direction:column;gap:4px;pointer-events:none;z-index:4;}
+.cbdg{display:flex;flex-direction:column;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);border-left:3px solid transparent;border-radius:5px;padding:4px 9px;min-width:115px;}
+.cbdg .cn{font-size:13px;font-weight:600;line-height:1.2;}
+.cbdg .cu{font-size:9px;color:#ccc;line-height:1.2;}
+
+/* No-object banner */
+.noobj{display:none;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;
+  background:rgba(220,38,38,0.9);color:#fff;font-size:12px;font-weight:500;
+  padding:6px 16px;border-radius:20px;align-items:center;gap:7px;white-space:nowrap;}
+
+/* Empty state */
+.es{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:rgba(255,255,255,0.18);}
+.es i{font-size:38px;}.es p{font-size:12px;}
+
+/* Stats row */
+.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
+.sc{background:var(--sur);border-radius:var(--rs);border:1px solid var(--bd);box-shadow:var(--sh);padding:10px 12px;}
+.sc .sl{font-size:10px;color:var(--t2);margin-bottom:3px;}
+.sc .sv{font-size:18px;font-weight:300;letter-spacing:-0.5px;}
+.sc .su{font-size:10px;color:var(--t2);}
+
+/* Download bar */
+.dlb{display:flex;align-items:center;justify-content:space-between;background:var(--sur);border-radius:var(--rs);border:1px solid var(--bd);box-shadow:var(--sh);padding:9px 13px;}
+.dlb span{font-size:11px;color:var(--t2);}
+.btndl{display:flex;align-items:center;gap:5px;background:var(--ac);color:#fff;border:none;border-radius:7px;padding:7px 13px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;}
+.btndl:hover{background:var(--ac2);}.btndl:disabled{opacity:0.4;cursor:not-allowed;background:var(--t3);}
+</style>
+</head>
+<body>
+
+<nav class="sb">
+  <a href="/" class="sbl"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sbsep"></div>
+  <a href="/home" class="sbb on"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sbb"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sbb"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sbb"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sbsp"></div>
+  <button class="sbb" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="pw">
+  <header class="topb">
+    <div class="topl">
+      <span class="bn">Track<b>IQ</b></span>
+      <span style="color:var(--bd);font-size:16px;">|</span>
+      <span style="font-size:12px;font-weight:500;color:var(--t2);">Video Analysis</span>
+    </div>
+    <div class="topr">
+      <div class="lg">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="ib" onclick="toggleTheme()"><i class="fas fa-moon" id="ti2"></i></button>
+    </div>
+  </header>
+
+  <main>
+    <!-- Colonne gauche -->
+    <div style="display:flex;flex-direction:column;gap:11px;">
+
+      <!-- Input source -->
+      <div class="card">
+        <div class="ct"><i class="fas fa-video"></i> Input source</div>
+        <div class="stabs">
+          <button class="stab on" onclick="switchSrc('upload',this)"><i class="fas fa-upload"></i> Video</button>
+          <button class="stab" onclick="switchSrc('url',this)"><i class="fas fa-link"></i> URL</button>
+          <button class="stab" onclick="switchSrc('webcam',this)"><i class="fas fa-camera"></i> Webcam</button>
+        </div>
+
+        <!-- Upload -->
+        <div id="src-upload">
+          <label class="uzone" id="uzone">
+            <i class="fas fa-cloud-upload-alt"></i>
+            <p>Drop video here or click to browse</p>
+            <p style="font-size:10px;color:var(--t3);">MP4, AVI, MOV — max 500 MB</p>
+            <span class="fname" id="fname"></span>
+            <input type="file" id="fileInput" accept="video/*" onchange="onFile(event)">
+          </label>
+          <div class="prog" id="progWrap"><div class="progb" id="progBar"></div></div>
+          <div class="progt" id="progTxt"></div>
+        </div>
+
+        <!-- URL -->
+        <div id="src-url" style="display:none;">
+          <div class="urow">
+            <input type="text" class="uin" id="urlIn" placeholder="https://… or rtsp://…">
+            <button class="bsm" onclick="loadUrl()">Load</button>
+          </div>
+        </div>
+
+        <!-- Webcam -->
+        <div id="src-webcam" style="display:none;">
+          <!-- Mini preview : flux YOLO annoté -->
+          <div class="wcbox" id="wcbox">
+            <img id="wcMiniYolo" alt="YOLO stream" style="display:none;">
+            <div class="wcph" id="wcPh"><i class="fas fa-camera-slash"></i><span>Click Start</span></div>
+            <div class="recbdg" id="recBadge"><i class="fas fa-circle"></i> LIVE</div>
+          </div>
+          <!-- Bouton stop webcam seulement (plus de bouton Enregistrer) -->
+          <button class="runbtn" id="wcBtn" onclick="startWc()">
+            <i class="fas fa-circle" style="color:#f87171;font-size:8px;"></i> Start webcam
+          </button>
+        </div>
+      </div>
+
+      <!-- Detection classes -->
+      <div class="card">
+        <div class="ct"><i class="fas fa-tags"></i> Detection classes</div>
+        <div class="clshd">
+          <span id="clsCnt">0 selected</span>
+          <button onclick="toggleAll()">Select all</button>
+        </div>
+        <div class="clsg" id="clsGrid"></div>
+      </div>
+
+      <button class="runbtn" id="runBtn" onclick="runAnalysis()" disabled>
+        <i class="fas fa-play"></i> Run Analysis
+      </button>
+      <button class="rstbtn" onclick="resetAll()">
+        <i class="fas fa-rotate-right"></i> Reset
+      </button>
+    </div>
+
+    <!-- Colonne droite -->
+    <div class="rc">
+
+      <!-- Big result panel -->
+      <div class="bp">
+        <div class="bph">
+          <div class="bpht"><i class="fas fa-film"></i> Result</div>
+          <span style="font-size:11px;color:var(--t2);" id="srcLabel"></span>
+        </div>
+        <div class="bpb" id="bigBody">
+          <!-- Vidéo annotée (upload/url) -->
+          <video id="resultVid" controls></video>
+          <!-- Flux YOLO webcam (grand) -->
+          <img id="wcYoloImg" alt="YOLO stream">
+          <!-- HUD top-left -->
+          <div class="hud" id="hudEl">
+            <div class="hudf" id="hudFr">—</div>
+            <div id="hudCo">—</div>
+          </div>
+          <!-- Compteurs top-right -->
+          <div class="cov" id="cOverlay"></div>
+          <!-- Banner no-object -->
+          <div class="noobj" id="noObjBanner">
+            <i class="fas fa-eye-slash"></i> No object detected
+          </div>
+          <!-- Canvas caché pour enregistrement webcam -->
+        <canvas id="wcCanvas" style="display:none;"></canvas>
+        <!-- Empty state -->
+          <div class="es" id="emptyState">
+            <i class="fas fa-film"></i>
+            <p>Result will appear here</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="sr">
+        <div class="sc"><div class="sl">Frames</div><div class="sv" id="stF">—</div></div>
+        <div class="sc"><div class="sl">Objects</div><div class="sv" id="stO">—</div></div>
+        <div class="sc"><div class="sl">FPS</div><div class="sv" id="stFps">—</div></div>
+        <div class="sc"><div class="sl">Duration</div><div class="sv" id="stD">—</div></div>
+      </div>
+
+      <!-- Download -->
+      <div class="dlb">
+        <span id="dlName">No result yet</span>
+        <button class="btndl" id="dlBtn" disabled onclick="doDownload()">
+          <i class="fas fa-download"></i> Download
+        </button>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<script>
+/* ── Theme ── */
+function toggleTheme(){
+  const d=document.documentElement,dk=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dk?'light':'dark');
+  ['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className=dk?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dk?'light':'dark');}catch(e){}
+}
+function setLang(l,btn){
+  document.querySelectorAll('.lb').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+/* ── Classes ── */
+const CLASSES=[
+  {name:'Vehicle',color:'#3b82f6'},{name:'Motorcycle',color:'#10b981'},
+  {name:'Truck',color:'#f59e0b'},{name:'Bus',color:'#8b5cf6'},
+  {name:'Human',color:'#ec4899'},{name:'Bicycle',color:'#06b6d4'},
+  {name:'Traffic light',color:'#ef4444'},{name:'Road sign',color:'#f97316'},
+];
+let sel=new Set(['Human']);
+
+function buildCls(){
+  const g=document.getElementById('clsGrid'); g.innerHTML='';
+  CLASSES.forEach(c=>{
+    const d=document.createElement('div');
+    d.className='clsi'+(sel.has(c.name)?' on':'');
+    d.innerHTML=`<span class="cldot" style="background:${c.color}"></span>${c.name}`;
+    d.onclick=()=>{sel.has(c.name)?sel.delete(c.name):sel.add(c.name);d.classList.toggle('on');upCls();};
+    g.appendChild(d);
+  });
+  upCls();
+}
+function toggleAll(){sel.size===CLASSES.length?sel.clear():CLASSES.forEach(c=>sel.add(c.name));buildCls();}
+function upCls(){document.getElementById('clsCnt').textContent=sel.size+' selected';}
+buildCls();
+
+/* ── State ── */
+let curSrc='upload', vidFile=null, vidUrl=null, wcStream=null;
+let _jobId=null, _sse=null, _wcPollIv=null, _annotatedUrl=null;
+
+/* ── Source switch ── */
+function switchSrc(s,btn){
+  curSrc=s;
+  document.querySelectorAll('.stab').forEach(b=>b.classList.remove('on'));btn.classList.add('on');
+  ['upload','url','webcam'].forEach(id=>{
+    const el=document.getElementById('src-'+id);if(el)el.style.display='none';
+  });
+  document.getElementById('src-'+s).style.display='block';
+  checkReady();
+}
+
+/* ── File upload ── */
+function onFile(e){
+  const f=e.target.files[0];if(!f)return;
+  vidFile=f;
+  const fn=document.getElementById('fname');fn.textContent=f.name;fn.style.display='block';
+  document.getElementById('uzone').classList.add('has');
+  checkReady();
+}
+function loadUrl(){
+  const u=document.getElementById('urlIn').value.trim();if(!u)return;
+  vidUrl=u;checkReady();
+}
+
+/* ── Run Analysis ── */
+window.runAnalysis=async function(){
+  const btn=document.getElementById('runBtn');
+  btn.disabled=true;
+  btn.innerHTML='<i class="fas fa-spinner fa-spin"></i> Processing…';
+  document.getElementById('progWrap').style.display='block';
+  document.getElementById('progTxt').style.display='block';
+  document.getElementById('progTxt').textContent='Uploading…';
+  document.getElementById('progBar').style.width='5%';
+  document.getElementById('emptyState').style.display='none';
+
+  /* Upload si pas encore fait */
+  if(!_jobId){
+    if(!vidFile&&!vidUrl){
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';return;
+    }
+    const fd=new FormData();
+    if(vidFile) fd.append('video',vidFile);
+    try{
+      const r=await fetch('/api/upload',{method:'POST',body:fd});
+      const d=await r.json();
+      _jobId=d.job_id;
+    }catch(err){
+      console.error('[TrackIQ] Upload:',err);
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';return;
+    }
+  }
+
+  document.getElementById('progTxt').textContent='Starting detection…';
+  document.getElementById('progBar').style.width='10%';
+
+  try{
+    await fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({job_id:_jobId,classes:[...sel],model:'yolo11n'})});
+  }catch(err){console.error('[TrackIQ] Run:',err);return;}
+
+  /* SSE */
+  if(_sse)_sse.close();
+  _sse=new EventSource(`/api/stream/${_jobId}`);
+  _sse.onmessage=(e)=>{
+    let d;try{d=JSON.parse(e.data);}catch{return;}
+
+    if(d.event==='done'){
+      _sse.close();
+      _showBanner(false);
+      document.getElementById('progBar').style.width='100%';
+      document.getElementById('progTxt').textContent='Done!';
+      btn.disabled=false;btn.innerHTML='<i class="fas fa-play"></i> Run Analysis';
+
+      /* ✅ Affiche la vidéo annotée */
+      const rv=document.getElementById('resultVid');
+      rv.src=`/api/video/${_jobId}`;
+      rv.style.display='block';
+      rv.load();
+      document.getElementById('srcLabel').textContent=vidFile?vidFile.name:'video';
+      document.getElementById('hudEl').style.display='block';
+      document.getElementById('cOverlay').style.display='flex';
+      _annotatedUrl=`/api/video/${_jobId}`;
+
+      /* Stats */
+      const s=d.stats||{};
+      _set('stF',s.total_frames??'—');_set('stO',s.total_unique??'—');
+      _set('stFps',s.fps?s.fps.toFixed(1):'—');_set('stD',s.duration_s?s.duration_s+'s':'—');
+      _showCounts(s.unique_counts||{});
+      _set('dlName',vidFile?vidFile.name:'annotated.mp4');
+      document.getElementById('dlBtn').removeAttribute('disabled');
+
+      /* Sauvegarde localStorage */
+      try{
+        localStorage.setItem('tiq_job_id',_jobId);
+        localStorage.setItem('tiq_video_url',`/api/video/${_jobId}`);
+        localStorage.setItem('tiq_video_name',s.video_name||'');
+        localStorage.setItem('tiq_stats',JSON.stringify(s));
+      }catch(ex){}
+      return;
+    }
+
+    /* Progression */
+    if(d.pct!=null){
+      document.getElementById('progBar').style.width=d.pct+'%';
+      document.getElementById('progTxt').textContent=`Processing… ${d.pct.toFixed(0)}%`;
+    }
+    _showBanner(d.no_objects===true);
+    if(d.hud){
+      _set('hudFr',d.hud.frame_str);
+      const hco=document.getElementById('hudCo');
+      if(hco) hco.innerHTML=Object.entries(d.hud.counts||{})
+        .map(([k,v])=>`${k} = ${v}`).join('<br>')||'No object';
+    }
+    if(d.unique_counts) _showCounts(d.unique_counts);
+  };
+  _sse.onerror=()=>_sse.close();
+};
+
+/* ── Webcam ── */
+let _wcFrameIv=null, _wcHiddenVideo=null, _wcCanvas2=null;
+
+async function startWc(){
+  try{
+    wcStream=await navigator.mediaDevices.getUserMedia({video:{width:640,height:480},audio:false});
+  }catch(e){alert('Webcam unavailable: '+e.message);return;}
+
+  document.getElementById('wcPh').style.display='none';
+  document.getElementById('recBadge').style.display='flex';
+  document.getElementById('runBtn').style.display='none';
+
+  const btn=document.getElementById('wcBtn');
+  btn.innerHTML='<i class="fas fa-stop" style="color:#f87171;font-size:9px;"></i> Stop webcam';
+  btn.onclick=stopWc;
+
+  /* Lance YOLO backend */
+  await fetch('/api/webcam/start',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({classes:[...sel],model:'yolo11n'})}).catch(()=>{});
+
+  /* Setup hidden video + canvas pour capturer frames */
+  _wcHiddenVideo=document.createElement('video');
+  _wcHiddenVideo.srcObject=wcStream;
+  _wcHiddenVideo.setAttribute('playsinline','');
+  _wcHiddenVideo.muted=true;
+  _wcHiddenVideo.play();
+  _wcCanvas2=document.createElement('canvas');
+  _wcCanvas2.width=640;_wcCanvas2.height=480;
+  const ctx2=_wcCanvas2.getContext('2d');
+
+  /* Envoie une frame toutes les 200ms → reçoit JPEG annoté → l'affiche */
+  const miniImg=document.getElementById('wcMiniYolo');
+  const bigImg=document.getElementById('wcYoloImg');
+  miniImg.style.display='block';
+  bigImg.style.display='block';
+
+  _wcFrameIv=setInterval(async()=>{
+    if(!wcStream||!_wcHiddenVideo)return;
+    ctx2.drawImage(_wcHiddenVideo,0,0,640,480);
+    _wcCanvas2.toBlob(async(blob)=>{
+      if(!blob)return;
+      try{
+        const resp=await fetch('/api/webcam/frame',{method:'POST',
+          headers:{'Content-Type':'image/jpeg'},body:blob});
+        if(!resp.ok)return;
+        const url=URL.createObjectURL(await resp.blob());
+        miniImg.src=url;bigImg.src=url;
+      }catch(e){}
+    },'image/jpeg',0.75);
+  },200);
+
+  /* Grand panel droite */
+  document.getElementById('emptyState').style.display='none';
+  document.getElementById('resultVid').style.display='none';
+  document.getElementById('hudEl').style.display='block';
+  document.getElementById('cOverlay').style.display='flex';
+  document.getElementById('srcLabel').textContent='Webcam — LIVE';
+
+  /* Démarre l'enregistrement automatiquement */
+  setTimeout(_startRec, 800);
+  /* Polling stats toutes les 800ms */
+  clearInterval(_wcPollIv);
+  _wcPollIv=setInterval(_pollWc,800);
+  checkReady();
+}
+
+/* ── Recording webcam → grand Result ── */
+let _recIv=null, _recChunks=[], _mediaRec=null;
+
+function _startRec(){
+  const canvas=document.getElementById('wcCanvas');
+  const img=document.getElementById('wcYoloImg');
+  if(!canvas||!img)return;
+  canvas.width=640;canvas.height=480;
+  const ctx=canvas.getContext('2d');
+  _recIv=setInterval(()=>{
+    if(img.naturalWidth>0){canvas.width=img.naturalWidth;canvas.height=img.naturalHeight;ctx.drawImage(img,0,0);}
+  },40);
+  const mime=MediaRecorder.isTypeSupported('video/webm;codecs=vp9')?'video/webm;codecs=vp9':'video/webm';
+  _mediaRec=new MediaRecorder(canvas.captureStream(25),{mimeType:mime,videoBitsPerSecond:2000000});
+  _recChunks=[];
+  _mediaRec.ondataavailable=e=>{if(e.data.size>0)_recChunks.push(e.data);};
+  _mediaRec.onstop=_saveRec;
+  _mediaRec.start(500);
+}
+
+function _saveRec(){
+  clearInterval(_recIv);_recIv=null;
+  if(!_recChunks.length)return;
+  const blob=new Blob(_recChunks,{type:'video/webm'});
+  const url=URL.createObjectURL(blob);
+  _annotatedUrl=url;
+  /* Affiche dans le grand Result */
+  const rv=document.getElementById('resultVid');
+  rv.src=url;rv.style.display='block';rv.controls=true;
+  rv.onloadeddata=()=>rv.play().catch(()=>{});rv.load();
+  document.getElementById('srcLabel').textContent='Webcam — recorded';
+  document.getElementById('emptyState').style.display='none';
+  document.getElementById('hudEl').style.display='block';
+  /* Active download */
+  _set('dlName','webcam_trackiq.webm');
+  document.getElementById('dlBtn').removeAttribute('disabled');
+  document.getElementById('dlBtn').onclick=()=>{
+    const a=document.createElement('a');a.href=url;a.download='webcam_trackiq.webm';a.click();
+  };
+}
+
+function stopWc(){
+  /* 1. Arrête enregistrement → déclenche _saveRec → vidéo dans Result */
+  if(_mediaRec&&_mediaRec.state==='recording') _mediaRec.stop();
+  clearInterval(_wcFrameIv);_wcFrameIv=null;
+  if(_wcHiddenVideo){_wcHiddenVideo.srcObject=null;_wcHiddenVideo=null;}
+  _wcCanvas2=null;
+  if(wcStream){wcStream.getTracks().forEach(t=>t.stop());wcStream=null;}
+  fetch('/api/webcam/stop',{method:'POST'}).catch(()=>{});
+  clearInterval(_wcPollIv);_wcPollIv=null;
+
+  /* 2. Cache flux live */
+  const mi=document.getElementById('wcMiniYolo');mi.src='';mi.style.display='none';
+  const bi=document.getElementById('wcYoloImg');bi.src='';bi.style.display='none';
+
+  document.getElementById('wcPh').style.display='flex';
+  document.getElementById('recBadge').style.display='none';
+  document.getElementById('runBtn').style.display='flex';
+  document.getElementById('cOverlay').style.display='none';
+  document.getElementById('noObjBanner').style.display='none';
+
+  const btn=document.getElementById('wcBtn');
+  btn.innerHTML='<i class="fas fa-circle" style="color:#f87171;font-size:8px;"></i> Start webcam';
+  btn.onclick=startWc;
+  checkReady();
+}
+
+async function _pollWc(){
+  try{
+    const r=await fetch('/api/webcam/stats');
+    if(!r.ok)return;
+    const d=await r.json();
+    const fc=d.frame_counts||{};
+    const uc=d.unique_counts||{};
+    _set('hudFr',`F:${d.frame||0} ▶ LIVE`);
+    const hco=document.getElementById('hudCo');
+    if(hco) hco.innerHTML=Object.entries(fc).map(([k,v])=>`${k} = ${v}`).join('<br>')||
+      '<span style="color:#ef4444">No object</span>';
+    _showCountsWc(fc,uc);
+    _showBanner(!Object.keys(fc).length);
+  }catch(e){}
+}
+
+/* ── Affichage compteurs ── */
+function _showCounts(uc){
+  const ov=document.getElementById('cOverlay');
+  ov.innerHTML='';
+  if(!Object.keys(uc).length){
+    _showBanner(true);return;
+  }
+  Object.entries(uc).forEach(([cls,cnt])=>{
+    const cl=CLASSES.find(c=>c.name===cls);
+    const color=cl?cl.color:'#a78bfa';
+    const div=document.createElement('div');div.className='cbdg';
+    div.style.borderLeftColor=color;
+    div.innerHTML=`<span class="cn" style="color:${color}">${cls} = ${cnt}</span>`;
+    ov.appendChild(div);
+  });
+  _showBanner(false);
+}
+
+function _showCountsWc(fc,uc){
+  const ov=document.getElementById('cOverlay');
+  ov.innerHTML='';
+  const all=new Set([...Object.keys(fc),...Object.keys(uc)]);
+  if(!all.size){_showBanner(true);return;}
+  all.forEach(cls=>{
+    const cl=CLASSES.find(c=>c.name===cls);
+    const color=cl?cl.color:'#a78bfa';
+    const div=document.createElement('div');div.className='cbdg';
+    div.style.borderLeftColor=color;
+    div.innerHTML=`<span class="cn" style="color:${color}">${cls} = ${fc[cls]||0}</span>
+      <span class="cu">Total unique : ${uc[cls]||0}</span>`;
+    ov.appendChild(div);
+  });
+  _showBanner(false);
+}
+
+function _showBanner(show){
+  const b=document.getElementById('noObjBanner');
+  b.style.display=show?'flex':'none';
+}
+
+/* ── Helpers ── */
+function _set(id,val){const el=document.getElementById(id);if(el)el.textContent=val;}
+function checkReady(){
+  const ok=(curSrc==='upload'&&vidFile)||(curSrc==='url'&&vidUrl)||(curSrc==='webcam'&&wcStream);
+  document.getElementById('runBtn').disabled=!ok;
+}
+function doDownload(){
+  const url=_annotatedUrl;if(!url)return;
+  const a=document.createElement('a');a.href=url;a.download='trackiq_annotated.mp4';a.click();
+}
+function resetAll(){
+  if(wcStream)stopWc();
+  if(_sse)_sse.close();
+  _jobId=null;_annotatedUrl=null;vidFile=null;vidUrl=null;
+  const rv=document.getElementById('resultVid');rv.src='';rv.style.display='none';
+  document.getElementById('fname').style.display='none';
+  document.getElementById('fname').textContent='';
+  document.getElementById('uzone').classList.remove('has');
+  document.getElementById('urlIn').value='';
+  document.getElementById('progWrap').style.display='none';
+  document.getElementById('progBar').style.width='0%';
+  document.getElementById('progTxt').style.display='none';
+  document.getElementById('emptyState').style.display='flex';
+  document.getElementById('cOverlay').style.display='none';
+  document.getElementById('hudEl').style.display='none';
+  document.getElementById('noObjBanner').style.display='none';
+  document.getElementById('dlBtn').disabled=true;
+  document.getElementById('dlName').textContent='No result yet';
+  document.getElementById('srcLabel').textContent='';
+  ['stF','stO','stFps','stD'].forEach(id=>_set(id,'—'));
+  const fi=document.getElementById('fileInput');if(fi)fi.value='';
+  checkReady();
+}
+
+/* ── Init ── */
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['ti','ti2'].forEach(x=>{const e=document.getElementById(x);if(e)e.className='fas fa-sun';});}}
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){const btn=document.querySelector('.lb[onclick*="\''+lg+'\'"]');if(btn)setLang(lg,btn);}
+  }catch(e){}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ — Urban Traffic Detection</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&family=DM+Mono:wght@400&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root {
+  --ac: #880000;
+  --ac2: #660000;
+  --bg: #f9fafb;
+  --s: #fff;
+  --bd: rgba(0,0,0,0.07);
+  --t: #111827;
+  --t2: #6b7280;
+  --t3: #d1d5db;
+  --sh: 0 4px 24px rgba(0,0,0,0.09);
+  --shlg: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
+  --r: 16px;
+}
+[data-theme="dark"] {
+  --bg: #0c1117;
+  --s: #151c25;
+  --t: #e8edf2;
+  --t2: #7a8fa0;
+  --t3: #3a4a5a;
+  --bd: rgba(255,255,255,0.07);
+  --sh: 0 4px 24px rgba(0,0,0,0.5);
+  --shlg: 0 20px 40px rgba(0,0,0,0.5);
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { min-height: 100%; }
+body {
+  font-family: "DM Sans", sans-serif;
+  background: var(--bg);
+  color: var(--t);
+  transition: background 0.3s, color 0.3s;
+}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--t3); border-radius: 3px; }
+
+/* ── FLOATING NAV ── */
+.floatnav {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  z-index: 50;
+  pointer-events: none;
+}
+.floatnav-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 16px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.nav-brand {
+  pointer-events: auto;
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(12px);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+.nav-brand:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.16); }
+.nav-brand-icon {
+  width: 28px; height: 28px;
+  background: var(--ac);
+  border-radius: 7px;
+  display: flex; align-items: center; justify-content: center;
+  color: #fff; font-size: 12px;
+}
+.nav-brand-name {
+  font-size: 14px; font-weight: 600;
+  color: #111827; letter-spacing: -0.3px;
+}
+.nav-brand-name b { color: var(--ac); }
+.nav-right {
+  pointer-events: auto;
+  display: flex; gap: 8px; align-items: center;
+}
+.nav-lang {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  padding: 4px;
+  display: flex; gap: 4px;
+}
+.lb {
+  font-size: 12px; font-weight: 500;
+  padding: 4px 10px;
+  border: none; background: none;
+  cursor: pointer; border-radius: 6px;
+  color: #6b7280;
+  font-family: "DM Sans", sans-serif;
+  transition: all 0.2s;
+}
+.lb.on { background: var(--ac); color: #fff; }
+.lb:not(.on):hover { background: #f3f4f6; color: #111827; }
+.nav-theme {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  width: 38px; height: 38px;
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  color: #6b7280; font-size: 13px;
+  transition: all 0.2s;
+}
+.nav-theme:hover { color: var(--ac); }
+
+/* ── HERO ── */
+.hero {
+  background-color: var(--ac);
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23991111' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  color: #fff;
+  padding-top: 90px;
+  padding-bottom: 90px;
+  padding-left: 24px;
+  padding-right: 24px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.hero-inner {
+  max-width: 860px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 10;
+  animation: fadeUp 0.6s ease both;
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.hero-logo-wrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+.hero-logo-box {
+  background: #fff;
+  padding: 14px;
+  border-radius: 20px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  display: flex; align-items: center; justify-content: center;
+  width: 80px; height: 80px;
+}
+.hero-logo-box i {
+  font-size: 36px;
+  color: var(--ac);
+}
+.hero h1 {
+  font-size: clamp(32px, 5vw, 60px);
+  font-weight: 800;
+  letter-spacing: -2px;
+  line-height: 1.1;
+  margin-bottom: 14px;
+}
+.hero h1 .dim { opacity: 0.75; font-weight: 300; font-style: italic; }
+.hero-sub {
+  font-size: clamp(14px, 1.8vw, 18px);
+  color: rgba(255,255,255,0.88);
+  font-weight: 400;
+  line-height: 1.65;
+  margin-bottom: 24px;
+  max-width: 560px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.hero-cta {
+  display: inline-flex; align-items: center; gap: 10px;
+  background: #fff;
+  color: var(--ac);
+  font-weight: 700; font-size: 16px;
+  padding: 14px 32px;
+  border-radius: 50px;
+  text-decoration: none;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+  transition: all 0.3s;
+}
+.hero-cta:hover {
+  background: #f3f4f6;
+  transform: scale(1.05);
+  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
+}
+/* Wave bottom */
+.hero-wave {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  pointer-events: none;
+}
+
+/* ── CARDS GRID ── */
+.cards-section {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 24px 64px;
+  margin-top: -64px;
+  position: relative;
+  z-index: 20;
+}
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 24px;
+}
+@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
+
+.card {
+  background: var(--s);
+  border-radius: 20px;
+  padding: 32px 24px;
+  box-shadow: var(--shlg);
+  border: 1px solid rgba(0,0,0,0.05);
+  text-decoration: none;
+  display: block;
+  transition: all 0.3s ease;
+  animation: fadeUp 0.6s ease both;
+}
+.card:nth-child(1) { animation-delay: 0.05s; }
+.card:nth-child(2) { animation-delay: 0.12s; }
+.card:nth-child(3) { animation-delay: 0.18s; }
+.card:nth-child(4) { animation-delay: 0.24s; }
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.13), 0 10px 10px -5px rgba(0,0,0,0.05);
+  border-color: var(--ac);
+}
+.card-icon-wrap {
+  width: 80px; height: 80px;
+  background: #fff1f1;
+  color: var(--ac);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 28px;
+  margin: 0 auto 24px;
+  transition: all 0.3s;
+  box-shadow: 0 2px 8px rgba(136,0,0,0.08);
+}
+[data-theme="dark"] .card-icon-wrap {
+  background: rgba(136,0,0,0.18);
+}
+.card:hover .card-icon-wrap {
+  background: var(--ac);
+  color: #fff;
+}
+.card-title {
+  text-align: center;
+  font-size: 18px; font-weight: 700;
+  color: var(--t);
+  margin-bottom: 10px;
+  transition: color 0.2s;
+}
+.card:hover .card-title { color: var(--ac); }
+.card-desc {
+  text-align: center;
+  font-size: 13px;
+  color: var(--t2);
+  line-height: 1.65;
+}
+.card-launch {
+  margin-top: 24px;
+  display: flex; justify-content: center;
+}
+.card-launch span {
+  font-size: 13px; font-weight: 600;
+  color: var(--ac);
+  display: flex; align-items: center; gap: 6px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.card:hover .card-launch span { opacity: 1; }
+
+/* ── FOOTER ── */
+footer {
+  background: var(--s);
+  border-top: 1px solid var(--bd);
+  padding: 28px 24px;
+  text-align: center;
+  transition: background 0.3s;
+}
+footer p {
+  font-size: 13px;
+  color: var(--t2);
+  line-height: 1.7;
+}
+footer p span {
+  font-size: 11px;
+  opacity: 0.6;
+  display: block;
+  margin-top: 4px;
+}
+</style>
+</head>
+<body>
+
+<!-- FLOATING NAV -->
+<div class="floatnav">
+  <div class="floatnav-inner">
+    <a href="#" class="nav-brand">
+      <div class="nav-brand-icon"><i class="fas fa-satellite-dish"></i></div>
+      <span class="nav-brand-name">Track<b>IQ</b></span>
+    </a>
+    <div class="nav-right">
+      <div class="nav-lang">
+        <button class="lb on" onclick="setLang('en',this)">EN</button>
+        <button class="lb" onclick="setLang('fr',this)">FR</button>
+        <button class="lb" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="nav-theme" onclick="toggleTheme()"><i class="fas fa-moon" id="ti"></i></button>
+    </div>
+  </div>
+</div>
+
+<!-- HERO -->
+<div class="hero">
+  <div class="hero-inner">
+    <div class="hero-logo-wrap">
+      <div class="hero-logo-box">
+        <i class="fas fa-satellite-dish"></i>
+      </div>
+    </div>
+    <h1 id="t-h1">
+      TrackIQ Urban Traffic<br>
+      <span class="dim">Surveillance &amp; Detection</span>
+    </h1>
+    <p class="hero-sub" id="t-sub">
+      Based on Computer Vision — real-time vehicle detection and classification, speed estimation, congestion analysis and traffic sign identification.
+    </p>
+    <a href="/home" class="hero-cta" id="t-launch">
+      <i class="fas fa-play"></i>
+      <span>Launch</span>
+    </a>
+  </div>
+  <div class="hero-wave">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" style="display:block;width:100%;">
+      <path fill="var(--bg)" fill-opacity="1"
+        d="M0,64L80,69.3C160,75,320,85,480,80C640,75,800,53,960,48C1120,43,1280,53,1360,58.7L1440,64L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"/>
+    </svg>
+  </div>
+</div>
+
+<!-- CARDS -->
+<div class="cards-section">
+  <div class="cards-grid">
+
+    <!-- Card 1 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-car-side"></i></div>
+      <div class="card-title" id="t-c1t">Vehicle Detection</div>
+      <p class="card-desc" id="t-c1d">Real-time detection and classification of vehicles: cars, trucks, motorcycles, buses and more.</p>
+      <div class="card-launch"><span id="t-launch2">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 2 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-tachometer-alt"></i></div>
+      <div class="card-title" id="t-c2t">Speed Estimation</div>
+      <p class="card-desc" id="t-c2d">Automatic estimation of vehicle speed from video stream without additional sensors.</p>
+      <div class="card-launch"><span id="t-launch3">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 3 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-traffic-light"></i></div>
+      <div class="card-title" id="t-c3t">Signs &amp; Lights</div>
+      <p class="card-desc" id="t-c3d">Identification of traffic signs and lights, red light detection, stop signs and more.</p>
+      <div class="card-launch"><span id="t-launch4">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+    <!-- Card 4 -->
+    <a href="/home" class="card">
+      <div class="card-icon-wrap"><i class="fas fa-chart-bar"></i></div>
+      <div class="card-title" id="t-c4t">Flow &amp; Congestion</div>
+      <p class="card-desc" id="t-c4d">Congestion analysis, flow measurement and annotated video export for reporting.</p>
+      <div class="card-launch"><span id="t-launch5">Launch <i class="fas fa-arrow-right"></i></span></div>
+    </a>
+
+  </div>
+</div>
+
+<!-- FOOTER -->
+<footer>
+  <p>
+    © 2026 <strong>TrackIQ</strong> — Computer Vision Project. All rights reserved.
+    <span id="t-foot">Academic Project — Version 1.0</span>
+  </p>
+</footer>
+
+<script>
+const T = {
+  en: {
+    h1: 'TrackIQ Urban Traffic<br><span class="dim">Surveillance &amp; Detection</span>',
+    sub: "Based on Computer Vision — real-time vehicle detection and classification, speed estimation, congestion analysis and traffic sign identification.",
+    launch: '<i class="fas fa-play"></i><span>Launch</span>',
+    c1t: "Vehicle Detection", c1d: "Real-time detection and classification of vehicles: cars, trucks, motorcycles, buses and more.",
+    c2t: "Speed Estimation",  c2d: "Automatic estimation of vehicle speed from video stream without additional sensors.",
+    c3t: "Signs & Lights",    c3d: "Identification of traffic signs and lights, red light detection, stop signs and more.",
+    c4t: "Flow & Congestion", c4d: "Congestion analysis, flow measurement and annotated video export for reporting.",
+    launchbtn: 'Launch <i class="fas fa-arrow-right"></i>',
+    foot: "Academic Project — Version 1.0"
+  },
+  fr: {
+    h1: 'TrackIQ Trafic Urbain<br><span class="dim">Surveillance &amp; Détection</span>',
+    sub: "Basé sur Computer Vision — détection et classification en temps réel des véhicules, estimation de vitesse, analyse de congestion et identification des feux et panneaux.",
+    launch: '<i class="fas fa-play"></i><span>Lancer</span>',
+    c1t: "Détection Véhicules", c1d: "Détection et classification en temps réel des véhicules : voitures, camions, motos, bus et plus.",
+    c2t: "Estimation Vitesse",  c2d: "Estimation automatique de la vitesse des véhicules depuis un flux vidéo, sans capteur additionnel.",
+    c3t: "Feux &amp; Panneaux", c3d: "Identification des panneaux et feux de signalisation, détection des feux rouges, stops et plus.",
+    c4t: "Flux &amp; Congestion",c4d: "Analyse de congestion, mesure de flux et export vidéo annoté pour rapport.",
+    launchbtn: 'Lancer <i class="fas fa-arrow-right"></i>',
+    foot: "Projet Académique — Version 1.0"
+  },
+  wo: {
+    h1: 'TrackIQ Trafik Kanam<br><span class="dim">Xam ak Réy</span>',
+    sub: "Moom Computer Vision la tax — léegi-léegi di réy wërsëg yi, ak xam njariñ yoom yi, ci kanam.",
+    launch: '<i class="fas fa-play"></i><span>Tambali</span>',
+    c1t: "Réy Wërsëg", c1d: "Réy ak xam njariñ wërsëg yi ci kanam: yëgël, camion, moto, bus ak yeneen.",
+    c2t: "Yóbbu Yoom", c2d: "Xam yóbbu yoom wërsëg yi ci video, benn jëriñ mujj dafa soxor.",
+    c3t: "Siñali",     c3d: "Xam siñali yi ak dëkkandiku, réy feux rouge, stop ak yeneen.",
+    c4t: "Rafet &amp; Xonq", c4d: "Xam xonq, jëf rafet ci kanam ak dëkkandiku video bu annotéwoon.",
+    launchbtn: 'Tambali <i class="fas fa-arrow-right"></i>',
+    foot: "Liggéey Académique — Version 1.0"
+  }
+};
+
+function setLang(l, btn) {
+  document.querySelectorAll(".lb").forEach(b => b.classList.remove("on"));
+  btn.classList.add("on");
+  const t = T[l];
+  if (!t) return;
+  document.getElementById("t-h1").innerHTML = t.h1;
+  document.getElementById("t-sub").textContent = t.sub;
+  document.getElementById("t-launch").innerHTML = t.launch;
+  ["c1t","c2t","c3t","c4t"].forEach(k => {
+    const el = document.getElementById("t-"+k);
+    if (el) el.innerHTML = t[k];
+  });
+  ["c1d","c2d","c3d","c4d"].forEach(k => {
+    const el = document.getElementById("t-"+k);
+    if (el) el.textContent = t[k];
+  });
+  ["t-launch2","t-launch3","t-launch4","t-launch5"].forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.innerHTML = t.launchbtn;
+  });
+  document.getElementById("t-foot").textContent = t.foot;
+  try { localStorage.setItem("tiq_lang", l); } catch(e) {}
+}
+
+function toggleTheme() {
+  const d = document.documentElement;
+  const dk = d.getAttribute("data-theme") === "dark";
+  d.setAttribute("data-theme", dk ? "light" : "dark");
+  document.getElementById("ti").className = dk ? "fas fa-moon" : "fas fa-sun";
+  try { localStorage.setItem("tiq_theme", dk ? "light" : "dark"); } catch(e) {}
+}
+
+(function() {
+  try {
+    const th = localStorage.getItem("tiq_theme");
+    if (th) {
+      document.documentElement.setAttribute("data-theme", th);
+      if (th === "dark") document.getElementById("ti").className = "fas fa-sun";
+    }
+    const lg = localStorage.getItem("tiq_lang");
+    if (lg && lg !== "en") {
+      const btn = document.querySelector('.lb[onclick*="\'' + lg + '\'"]');
+      if (btn) setLang(lg, btn);
+    }
+  } catch(e) {}
+})();
+</script>
+<script src="/static/trackiq-api.js"></script>
+</body>
+</html>

templates/logs.html

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>TrackIQ Logs</title>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+:root{--bg:#f0f4f8;--surface:#fff;--surface2:#f6f8fb;--border:rgba(0,0,0,0.07);--shadow:0 2px 16px rgba(0,0,0,0.09);--shadow-lg:0 8px 36px rgba(0,0,0,0.13);--text:#0f1923;--text2:#5a6a7a;--text3:#9aaab8;--accent:#880000;--accent2:#660000;--accent-light:rgba(136,0,0,0.07);--sidebar-w:60px;--radius:14px;--radius-sm:9px;}
+[data-theme="dark"]{--bg:#0c1117;--surface:#151c25;--surface2:#1c2531;--border:rgba(255,255,255,0.07);--shadow:0 2px 16px rgba(0,0,0,0.45);--shadow-lg:0 8px 36px rgba(0,0,0,0.55);--text:#e8edf2;--text2:#7a8fa0;--text3:#3a4a5a;}
+*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:0;height:0}
+body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;display:flex;min-height:100vh}
+.sidebar{width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;position:fixed;top:0;left:0;bottom:0;z-index:200}
+.sb-logo{width:34px;height:34px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-bottom:10px;text-decoration:none}
+.sb-sep{width:28px;height:1px;background:var(--border);margin:4px 0}
+.sb-btn{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:15px;cursor:pointer;transition:all .2s;text-decoration:none;border:none;background:none;position:relative}
+.sb-btn:hover,.sb-btn.active{background:var(--accent-light);color:var(--accent)}
+.sb-btn .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%);background:var(--text);color:var(--surface);font-size:11px;padding:3px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none}.sb-btn:hover .tip{opacity:1}
+.sb-spacer{flex:1}.page-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column}
+.topbar{height:52px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
+.topbar-l,.topbar-r{display:flex;align-items:center;gap:10px}
+.brand-name{font-size:15px;font-weight:600}.brand-name b{color:var(--accent)}.sep{color:var(--border);font-size:18px;margin:0 2px}
+.lang-group{display:flex;background:var(--surface2);border-radius:6px;padding:2px;border:1px solid var(--border)}
+.lang-btn{font-size:11px;font-weight:500;padding:3px 8px;border:none;background:none;cursor:pointer;border-radius:4px;color:var(--text2);font-family:'DM Sans',sans-serif}.lang-btn.active{background:var(--accent);color:white}
+.icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:12px}
+main{flex:1;padding:16px 18px;max-width:1440px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
+.sum-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
+.sc,.card,.tcard{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
+.sc{padding:13px 15px}.sc-l{font-size:11px;color:var(--text2);margin-bottom:5px}.sc-v{font-size:22px;font-weight:300}.sc-s{font-size:10px;color:var(--text3);margin-top:3px}
+.card{padding:14px 16px}.filter-row{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap}.fg{display:flex;flex-direction:column;gap:4px}.fg label{font-size:11px;color:var(--text2)}
+.fin{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:12px;background:var(--surface2);color:var(--text);font-family:'DM Sans',sans-serif;outline:none;min-width:160px}.fin:focus{border-color:var(--accent)}
+.f-sp{flex:1}
+.btn{display:flex;align-items:center;gap:5px;border:none;border-radius:7px;padding:8px 13px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif}
+.btn-exp{background:var(--accent);color:white}.btn-exp:hover{background:var(--accent2)}
+.save-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--text);font-family:'DM Sans',sans-serif;text-align:left}.save-opt:hover{background:var(--surface2)}
+.btn-clr{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}
+.tcard{overflow:hidden}.twrap{overflow:auto}
+table{width:100%;border-collapse:collapse}
+thead th{padding:10px 12px;text-align:left;font-size:11px;font-weight:500;color:var(--text2);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap}
+tbody tr{border-bottom:1px solid var(--border)} tbody tr:last-child{border-bottom:none}
+tbody td{padding:10px 12px;font-size:12px;vertical-align:middle}
+.mono{font-family:'DM Mono',monospace}
+.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:3px 8px}
+.dot{width:8px;height:8px;border-radius:50%}
+.empty{padding:38px;text-align:center;color:var(--text3)}
+@media(max-width:1100px){.sum-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:760px){.sum-row{grid-template-columns:1fr}}
+</style>
+</head>
+<body>
+<nav class="sidebar">
+  <a href="/" class="sb-logo"><i class="fas fa-satellite-dish"></i></a>
+  <div class="sb-sep"></div>
+  <a href="/home" class="sb-btn"><i class="fas fa-play-circle"></i><span class="tip">Analyze</span></a>
+  <a href="/dashboard" class="sb-btn"><i class="fas fa-chart-line"></i><span class="tip">Dashboard</span></a>
+  <a href="/logs" class="sb-btn active"><i class="fas fa-list-ul"></i><span class="tip">Logs</span></a>
+  <a href="/history" class="sb-btn"><i class="fas fa-film"></i><span class="tip">History</span></a>
+  <div class="sb-spacer"></div>
+  <button class="sb-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon"></i><span class="tip">Theme</span></button>
+</nav>
+
+<div class="page-wrap">
+  <header class="topbar">
+    <div class="topbar-l">
+      <span class="brand-name">Track<b>IQ</b></span>
+      <span class="sep">|</span>
+      <span style="font-size:13px;font-weight:500;" id="t-title">Detection Logs</span>
+    </div>
+    <div class="topbar-r">
+      <div class="lang-group">
+        <button class="lang-btn active" onclick="setLang('en',this)">EN</button>
+        <button class="lang-btn" onclick="setLang('fr',this)">FR</button>
+        <button class="lang-btn" onclick="setLang('wo',this)">WO</button>
+      </div>
+      <button class="icon-btn" onclick="toggleTheme()"><i class="fas fa-moon" id="themeIcon2"></i></button>
+    </div>
+  </header>
+
+  <main>
+    <div class="sum-row">
+      <div class="sc"><div class="sc-l" id="t-s1">Detections</div><div class="sc-v" id="sumDetections">0</div><div class="sc-s" id="sumDetectionsSub">Real rows from generated videos</div></div>
+      <div class="sc"><div class="sc-l" id="t-s2">Scenes</div><div class="sc-v" id="sumScenes">0</div><div class="sc-s" id="sumScenesSub">Processed analyses</div></div>
+      <div class="sc"><div class="sc-l" id="t-s3">Classes</div><div class="sc-v" id="sumClasses">0</div><div class="sc-s" id="sumClassesSub">Distinct detected labels</div></div>
+      <div class="sc"><div class="sc-l" id="t-s4">Latest video</div><div class="sc-v" id="sumLatest">-</div><div class="sc-s" id="sumLatestSub">Most recent analyzed clip</div></div>
+    </div>
+
+    <div class="card">
+      <div class="filter-row">
+        <div class="fg"><label id="t-search">Search video or scene</label><input id="searchIn" class="fin" oninput="applyFilters()"></div>
+        <div class="fg"><label id="t-scene">Scene</label><select id="sceneF" class="fin" onchange="applyFilters()"><option value="">All</option></select></div>
+        <div class="fg"><label id="t-type">Class</label><select id="classF" class="fin" onchange="applyFilters()"><option value="">All</option></select></div>
+        <div class="fg"><label id="t-direction">Direction</label><select id="dirF" class="fin" onchange="applyFilters()"><option value="">All</option><option>up</option><option>down</option><option>left</option><option>right</option><option>unknown</option></select></div>
+        <div class="f-sp"></div>
+        <button class="btn btn-clr" onclick="clearFilters()" ondblclick="clearAllLogs()" title="Click=clear filters | Double-click=delete all logs"><i class="fas fa-rotate-left"></i> <span id="t-clear">Clear</span></button>
+        <div style="position:relative">
+          <button class="btn btn-exp" onclick="toggleSaveMenu(event)"><i class="fas fa-cloud-arrow-up"></i> <span id="t-export">Save Logs</span> <i class="fas fa-chevron-down" style="font-size:9px;margin-left:2px"></i></button>
+          <div id="saveMenu" style="display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);min-width:240px;z-index:999;overflow:hidden">
+            <div style="padding:10px 14px 6px;font-size:11px;color:var(--text2);font-weight:500;border-bottom:1px solid var(--border)">
+              <div style="display:flex;align-items:center;gap:6px;margin-bottom:6px">
+                <label style="font-size:11px;color:var(--text2)">Group name:</label>
+                <input id="groupNameIn" value="trackiq" style="flex:1;padding:4px 7px;border:1px solid var(--border);border-radius:5px;font-size:11px;background:var(--surface2);color:var(--text);outline:none" placeholder="e.g. session1">
+              </div>
+              <span style="color:var(--text3);font-size:10px">File: <span id="csvPreview">trackiq_all.csv</span></span>
+            </div>
+            <button class="save-opt" onclick="saveLocal()"><i class="fas fa-download" style="color:#3b82f6"></i> Download locally</button>
+            <button class="save-opt" onclick="showGithubPanel()"><i class="fab fa-github" style="color:#e2e8f0"></i> Push to GitHub</button>
+            <button class="save-opt" onclick="saveDrive()"><i class="fab fa-google-drive" style="color:#34a853"></i> Save to Google Drive</button>
+          </div>
+        </div>
+        <!-- GitHub panel -->
+        <div id="githubPanel" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;display:none;align-items:center;justify-content:center">
+          <div style="background:var(--surface);border-radius:14px;padding:22px 24px;width:420px;box-shadow:var(--shadow-lg)">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+              <span style="font-weight:600;font-size:14px"><i class="fab fa-github"></i> Push to GitHub</span>
+              <button onclick="closeGithubPanel()" style="background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px"><i class="fas fa-times"></i></button>
+            </div>
+            <div style="display:flex;flex-direction:column;gap:9px">
+              <div class="fg"><label>Personal Access Token (PAT)</label><input id="ghToken" class="fin" type="password" placeholder="ghp_xxxxxxxxxxxx"></div>
+              <div class="fg"><label>Repository (owner/repo)</label><input id="ghRepo" class="fin" placeholder="username/trackiq-logs"></div>
+              <div class="fg"><label>Branch</label><input id="ghBranch" class="fin" value="main" placeholder="main"></div>
+              <div class="fg"><label>Path in repo</label><input id="ghPath" class="fin" placeholder="logs/" value="logs/"></div>
+            </div>
+            <div id="ghStatus" style="margin-top:10px;font-size:12px;color:var(--text2);min-height:18px"></div>
+            <div style="display:flex;gap:8px;margin-top:14px;justify-content:flex-end">
+              <button class="btn btn-clr" onclick="closeGithubPanel()">Cancel</button>
+              <button class="btn btn-exp" onclick="pushToGithub()"><i class="fab fa-github"></i> Push CSV</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="tcard">
+      <div class="twrap">
+        <table>
+          <thead>
+            <tr>
+              <th id="th-video">Video</th>
+              <th id="th-scene">Scene</th>
+              <th id="th-time">Time</th>
+              <th id="th-frame">Frame</th>
+              <th id="th-track">Track</th>
+              <th id="th-class">Class</th>
+              <th id="th-confidence">Confidence</th>
+              <th id="th-direction">Direction</th>
+              <th id="th-bbox">Bounding Box</th>
+              <th id="th-position">Center</th>
+            </tr>
+          </thead>
+          <tbody id="tbody">
+            <tr><td colspan="9" class="empty">Loading real logs...</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script>
+let allRows = [];
+let filteredRows = [];
+
+function toggleTheme(){
+  const d=document.documentElement;
+  const dark=d.getAttribute('data-theme')==='dark';
+  d.setAttribute('data-theme',dark?'light':'dark');
+  ['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className=dark?'fas fa-moon':'fas fa-sun';});
+  try{localStorage.setItem('tiq_theme',dark?'light':'dark');}catch(e){}
+}
+
+const TL = {
+  en:{title:'Detection Logs',s1:'Detections',s2:'Scenes',s3:'Classes',s4:'Latest video',search:'Search video or scene',scene:'Scene',type:'Class',direction:'Direction',clear:'Clear',export:'Save Logs',video:'Video',time:'Time',frame:'Frame',track:'Track',class:'Class',confidence:'Confidence',bbox:'Bounding Box',position:'Center'},
+  fr:{title:'Logs de détection',s1:'Détections',s2:'Scènes',s3:'Classes',s4:'Dernière vidéo',search:'Recherche vidéo ou scène',scene:'Scène',type:'Classe',direction:'Direction',clear:'Effacer',export:'Sauvegarder',video:'Vidéo',time:'Temps',frame:'Frame',track:'Track',class:'Classe',confidence:'Confiance',bbox:'Boîte englobante',position:'Centre'},
+  wo:{title:'Logs yi',s1:'Réy',s2:'Scène yi',s3:'Classe yi',s4:'Video mujj',search:'Seet video walla scène',scene:'Scène',type:'Classe',direction:'Direction',clear:'Baň',export:'Sauvegarder',video:'Video',time:'Waxtu',frame:'Frame',track:'Track',class:'Classe',confidence:'Confiance',bbox:'Bounding Box',position:'Centre'}
+};
+
+function setLang(l, btn){
+  document.querySelectorAll('.lang-btn').forEach(b=>b.classList.remove('active'));
+  btn.classList.add('active');
+  const t = TL[l];
+  const ids = {title:'t-title',s1:'t-s1',s2:'t-s2',s3:'t-s3',s4:'t-s4',search:'t-search',scene:'t-scene',type:'t-type',direction:'t-direction',clear:'t-clear',export:'t-export',video:'th-video',time:'th-time',frame:'th-frame',track:'th-track',class:'th-class',confidence:'th-confidence',bbox:'th-bbox',position:'th-position'};
+  Object.entries(ids).forEach(([k,id])=>{const el=document.getElementById(id);if(el)el.textContent=t[k];});
+  document.getElementById('th-scene').textContent = t.scene;
+  document.getElementById('th-direction').textContent = t.direction;
+  try{localStorage.setItem('tiq_lang',l);}catch(e){}
+}
+
+async function loadLogs(){
+  try{
+    const [rowsRes, scenesRes] = await Promise.all([fetch('/api/logs/rows'), fetch('/api/logs')]);
+    allRows = await rowsRes.json();
+    const scenes = await scenesRes.json();
+    fillFilters(scenes);
+    fillSummary(scenes, allRows);
+    applyFilters();
+  }catch(err){
+    const tb=document.getElementById('tbody');
+    tb.innerHTML = '<tr><td colspan="9" class="empty">Unable to load real logs.</td></tr>';
+    console.warn('[TrackIQ] real logs:', err);
+  }
+}
+
+function fillFilters(scenes){
+  const sceneF = document.getElementById('sceneF');
+  const classF = document.getElementById('classF');
+  sceneF.innerHTML = '<option value="">All</option>' + scenes.map(s=>`<option value="${s.scene_id}">${s.video_name || s.scene_id}</option>`).join('');
+  const classes = [...new Set(allRows.map(r=>r.class_name).filter(Boolean))].sort();
+  classF.innerHTML = '<option value="">All</option>' + classes.map(c=>`<option value="${c}">${c}</option>`).join('');
+}
+
+function fillSummary(scenes, rows){
+  document.getElementById('sumDetections').textContent = rows.length.toLocaleString();
+  document.getElementById('sumScenes').textContent = scenes.length.toLocaleString();
+  document.getElementById('sumClasses').textContent = new Set(rows.map(r=>r.class_name).filter(Boolean)).size.toLocaleString();
+  document.getElementById('sumLatest').textContent = scenes[0]?.video_name || '-';
+}
+
+function applyFilters(){
+  const search = document.getElementById('searchIn').value.toLowerCase();
+  const scene = document.getElementById('sceneF').value;
+  const cls = document.getElementById('classF').value;
+  const dir = document.getElementById('dirF').value;
+  filteredRows = allRows.filter(r =>
+    (!search || (r.video_name || '').toLowerCase().includes(search) || (r.scene_id || '').toLowerCase().includes(search)) &&
+    (!scene || r.scene_id === scene) &&
+    (!cls || r.class_name === cls) &&
+    (!dir || r.direction === dir)
+  );
+  renderRows();
+}
+
+async function clearAllLogs(){
+  if(!confirm('Delete all logs? This cannot be undone.')) return;
+  try{
+    const scenes = await fetch('/api/logs').then(r=>r.json());
+    await Promise.all(scenes.map(s=>fetch(`/api/logs/${s.scene_id}`,{method:'DELETE'})));
+    location.reload();
+  }catch(e){ alert('Error: '+e.message); }
+}
+
+function clearFilters(){
+  ['searchIn','sceneF','classF','dirF'].forEach(id=>{document.getElementById(id).value='';});
+  applyFilters();
+}
+
+function renderRows(){
+  const tb = document.getElementById('tbody');
+  if(!filteredRows.length){
+    tb.innerHTML = '<tr><td colspan="10" class="empty">No real detections found for this filter.</td></tr>';
+    return;
+  }
+  const colors = {Vehicle:'#3b82f6',Motorcycle:'#10b981',Truck:'#f59e0b',Bus:'#8b5cf6',Human:'#ec4899',Bicycle:'#06b6d4'};
+  tb.innerHTML = '';
+  filteredRows.forEach(r=>{
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td title="${r.video_name || ''}">${(r.video_name || '-').slice(0,28)}</td>
+      <td class="mono">${r.scene_id}</td>
+      <td class="mono">${Number(r.timestamp_s || 0).toFixed(2)}s</td>
+      <td class="mono">${r.frame_id}</td>
+      <td class="mono">#${r.track_id}</td>
+      <td><span class="pill"><span class="dot" style="background:${colors[r.class_name] || '#888'}"></span>${r.class_name || '-'}</span></td>
+      <td class="mono">${Math.round((r.confidence || 0) * 100)}%</td>
+      <td>${r.direction || 'unknown'}</td>
+      <td class="mono" style="font-size:11px">(${r.x1},${r.y1})→(${r.x2},${r.y2})</td>
+      <td class="mono">(${r.cx}, ${r.cy})</td>
+    `;
+    tb.appendChild(tr);
+  });
+}
+
+/* ── Helpers CSV ─────────────────────────────────────────────── */
+function getGroupName(){ return (document.getElementById('groupNameIn')?.value||'trackiq').trim().replace(/\s+/g,'_')||'trackiq'; }
+function getCsvFilename(){
+  const g=getGroupName();
+  const scenes=[...new Set(filteredRows.map(r=>r.scene_id))];
+  return `${g}_${scenes.length===1?scenes[0]:'all'}.csv`;
+}
+function buildCsvContent(){
+  const hdr = 'group,scene_id,video_name,timestamp_s,frame_id,track_id,class_name,confidence,x1,y1,x2,y2,cx,cy,direction\n';
+  const g = getGroupName();
+  const rows = filteredRows.map(r => [g,r.scene_id,`"${(r.video_name||'').replace(/"/g,'""')}"`,r.timestamp_s,r.frame_id,r.track_id,r.class_name,r.confidence,r.x1,r.y1,r.x2,r.y2,r.cx,r.cy,r.direction].join(',')).join('\n');
+  return hdr + rows;
+}
+function updateCsvPreview(){
+  const el = document.getElementById('csvPreview');
+  if(el) el.textContent = getCsvFilename();
+}
+
+/* ── Save menu ───────────────────────────────────���───────────── */
+function toggleSaveMenu(e){
+  e.stopPropagation();
+  const m = document.getElementById('saveMenu');
+  m.style.display = m.style.display==='none'?'block':'none';
+  updateCsvPreview();
+}
+document.addEventListener('click', ()=>{ const m=document.getElementById('saveMenu'); if(m) m.style.display='none'; });
+
+/* ── 1. Download local ───────────────────────────────────────── */
+function saveLocal(){
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([buildCsvContent()], {type:'text/csv'}));
+  a.download = getCsvFilename();
+  a.click();
+  document.getElementById('saveMenu').style.display='none';
+}
+
+/* ── 2. GitHub push ──────────────────────────────────────────── */
+function showGithubPanel(){
+  document.getElementById('saveMenu').style.display='none';
+  const p = document.getElementById('githubPanel');
+  p.style.display='flex';
+  updateCsvPreview();
+}
+function closeGithubPanel(){ document.getElementById('githubPanel').style.display='none'; }
+
+async function pushToGithub(){
+  const token  = document.getElementById('ghToken').value.trim();
+  const repo   = document.getElementById('ghRepo').value.trim();
+  const branch = document.getElementById('ghBranch').value.trim() || 'main';
+  const path   = (document.getElementById('ghPath').value.trim().replace(/\/+$/,'')||'logs') + '/' + getCsvFilename();
+  const status = document.getElementById('ghStatus');
+
+  if(!token||!repo){ status.textContent='⚠ Token and repo are required.'; return; }
+  status.textContent='Pushing…';
+
+  const content = btoa(unescape(encodeURIComponent(buildCsvContent())));
+  // Check if file exists (to get SHA for update)
+  let sha = null;
+  try{
+    const check = await fetch(`https://api.github.com/repos/${repo}/contents/${path}`,{headers:{Authorization:`token ${token}`}});
+    if(check.ok){ const d=await check.json(); sha=d.sha; }
+  }catch(e){}
+
+  try{
+    const body = {message:`TrackIQ logs export — ${getCsvFilename()}`, content, branch};
+    if(sha) body.sha = sha;
+    const res = await fetch(`https://api.github.com/repos/${repo}/contents/${path}`,{
+      method:'PUT', headers:{Authorization:`token ${token}`,'Content-Type':'application/json'},
+      body: JSON.stringify(body)
+    });
+    if(res.ok){ status.innerHTML='<span style="color:#10b981">✓ Pushed successfully!</span>'; }
+    else{ const e=await res.json(); status.innerHTML=`<span style="color:#ef4444">Error: ${e.message}</span>`; }
+  }catch(err){ status.innerHTML=`<span style="color:#ef4444">Network error: ${err.message}</span>`; }
+}
+
+/* ── 3. Google Drive ─────────────────────────────────────────── */
+async function saveDrive(){
+  document.getElementById('saveMenu').style.display='none';
+  // Uses Google Drive File Picker API via OAuth implicit flow
+  const CLIENT_ID = ''; // User must fill their own GCP OAuth client ID
+  if(!CLIENT_ID){
+    const ok = confirm('To save to Google Drive you need a Google OAuth Client ID.\n\nWould you like instructions on how to set it up?\n\n(For now the file will be downloaded locally as a fallback)');
+    if(ok){ window.open('https://developers.google.com/drive/api/guides/about-auth','_blank'); }
+    saveLocal();
+    return;
+  }
+  // Full Drive upload with OAuth token
+  const scope = 'https://www.googleapis.com/auth/drive.file';
+  const redirect = location.origin + location.pathname;
+  const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(redirect)}&response_type=token&scope=${encodeURIComponent(scope)}`;
+  const popup = window.open(authUrl,'_blank','width=500,height=600');
+  // Listen for token in URL hash after redirect
+  const interval = setInterval(()=>{
+    try{
+      if(popup.closed){ clearInterval(interval); return; }
+      const hash = popup.location.hash;
+      if(hash && hash.includes('access_token')){
+        clearInterval(interval); popup.close();
+        const token = new URLSearchParams(hash.replace('#','')).get('access_token');
+        uploadToDrive(token);
+      }
+    }catch(e){}
+  },500);
+}
+
+async function uploadToDrive(token){
+  const csv     = buildCsvContent();
+  const fname   = getCsvFilename();
+  const meta    = JSON.stringify({name:fname,mimeType:'text/csv'});
+  const form    = new FormData();
+  form.append('metadata', new Blob([meta],{type:'application/json'}));
+  form.append('file',     new Blob([csv], {type:'text/csv'}));
+  try{
+    const res = await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart',{
+      method:'POST', headers:{Authorization:`Bearer ${token}`}, body:form
+    });
+    if(res.ok){ alert(`✓ "${fname}" saved to Google Drive!`); }
+    else{ const e=await res.json(); alert('Drive error: '+e.error?.message); }
+  }catch(err){ alert('Drive upload failed: '+err.message); }
+}
+
+function exportFiltered(){ saveLocal(); } // legacy alias
+
+(function(){
+  try{
+    const th=localStorage.getItem('tiq_theme');
+    if(th){
+      document.documentElement.setAttribute('data-theme',th);
+      if(th==='dark'){['themeIcon','themeIcon2'].forEach(id=>{const el=document.getElementById(id);if(el)el.className='fas fa-sun';});}
+    }
+    const lg=localStorage.getItem('tiq_lang');
+    if(lg&&lg!=='en'){
+      const btn=document.querySelector(`.lang-btn[onclick*="'${lg}'"]`);
+      if(btn)setLang(lg,btn);
+    }
+  }catch(e){}
+  loadLogs();
+  // Update CSV filename preview when group name changes
+  document.addEventListener('input', e=>{ if(e.target.id==='groupNameIn') updateCsvPreview(); });
+})();
+</script>
+</body>
+</html>