Spaces:

danielle2035
/

TRAFFIC_ROAD_APP

Sleeping

App Files Files Community

danielle2035 commited on Apr 28

Commit

b308285

1 Parent(s): ebd8fd8

fix: add HTML routes for all pages

Browse files

Files changed (11) hide show

TRAFFIC_ROAD_APP/TRAFFIC_ROAD_APP/Dockerfile +0 -28
TRAFFIC_ROAD_APP/TRAFFIC_ROAD_APP/requirements.txt +0 -8
TRAFFIC_ROAD_APP/requirements_hf.txt +0 -13
TRAFFIC_ROAD_APP/templates/dashboard.html +0 -418
TRAFFIC_ROAD_APP/templates/history.html +0 -295
TRAFFIC_ROAD_APP/templates/home.html +0 -684
TRAFFIC_ROAD_APP/templates/index.html +0 -486
TRAFFIC_ROAD_APP/templates/logs.html +0 -415
app.py +1 -1
models/yolo11n.pt +2 -2
templates/home.html +128 -20

TRAFFIC_ROAD_APP/TRAFFIC_ROAD_APP/Dockerfile DELETED Viewed

@@ -1,28 +0,0 @@
-FROM python:3.10-slim-bullseye
-RUN apt-get update && apt-get install -y \
-    libgl1 \
-    libglib2.0-0 \
-    libsm6 \
-    libxext6 \
-    libxrender-dev \
-    ffmpeg \
-    libopencv-dev \
-    && rm -rf /var/lib/apt/lists/*
-WORKDIR /app
-COPY requirements.txt requirements.txt
-RUN pip install --no-cache-dir -r requirements.txt
-COPY app.py .
-COPY static/ ./static/
-COPY templates/ ./templates/
-RUN mkdir -p models uploads outputs logs
-ENV PORT=7860
-EXPOSE 7860
-CMD ["python", "app.py"]

TRAFFIC_ROAD_APP/TRAFFIC_ROAD_APP/requirements.txt DELETED Viewed

@@ -1,8 +0,0 @@
-flask==3.1.3
-flask-cors==6.0.2
-opencv-python-headless==4.10.0.84
-ultralytics==8.4.39
-torch==2.11.0
-torchvision==0.26.0
-numpy==1.26.4
-pillow==10.4.0

TRAFFIC_ROAD_APP/requirements_hf.txt DELETED Viewed

@@ -1,13 +0,0 @@
-flask==3.1.3
-flask-cors==6.0.2
-opencv-python-headless==4.13.0.92
-ultralytics==8.4.39
-torch==2.11.0
-torchvision==0.26.0
-numpy==2.3.4
-pillow==12.0.0
-pandas==2.3.3
-python-dotenv==1.2.1
-requests==2.32.5
-pyyaml==6.0.3
-tqdm==4.67.3

TRAFFIC_ROAD_APP/templates/dashboard.html DELETED Viewed

@@ -1,418 +0,0 @@
-<!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 DELETED Viewed

@@ -1,295 +0,0 @@
-<!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 DELETED Viewed

@@ -1,684 +0,0 @@
-<!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 DELETED Viewed

@@ -1,486 +0,0 @@
-<!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 DELETED Viewed

@@ -1,415 +0,0 @@
-<!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 CHANGED Viewed

@@ -49,7 +49,7 @@ def _load_model_background():
     print("⏳ Chargement du modèle YOLO...")
     _model = _get_model()
     _model_ready = True
-    print(" Modèle YOLO chargé !")
 def _get_model(key="yolo11n"):
     p = MODELS_DIR / f"{key}.pt"

     print("⏳ Chargement du modèle YOLO...")
     _model = _get_model()
     _model_ready = True
+    print("✅ Modèle YOLO chargé !")
 def _get_model(key="yolo11n"):
     p = MODELS_DIR / f"{key}.pt"

models/yolo11n.pt CHANGED Viewed

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

 version https://git-lfs.github.com/spec/v1
+oid sha256:0ebbc80d4a7680d14987a577cd21342b65ecfd94632bd9a8da63ae6417644ee1
+size 5613764

templates/home.html CHANGED Viewed

@@ -306,7 +306,8 @@ const CLASSES=[
   {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='';
@@ -450,8 +451,43 @@ 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';
@@ -461,16 +497,48 @@ async function startWc(){
   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');
@@ -481,19 +549,59 @@ async function startWc(){
   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 */
@@ -681,4 +789,4 @@ function resetAll(){
 </script>
 <script src="/static/trackiq-api.js"></script>
 </body>
-</html>

   {name:'Human',color:'#ec4899'},{name:'Bicycle',color:'#06b6d4'},
   {name:'Traffic light',color:'#ef4444'},{name:'Road sign',color:'#f97316'},
 ];
+// ✅ CORRIGÉ: Sélectionne TOUTES les classes par défaut (pas juste Human!)
+let sel=new Set(CLASSES.map(c=>c.name));
 function buildCls(){
   const g=document.getElementById('clsGrid'); g.innerHTML='';
 async function startWc(){
   try{
+    // ✅ CORRECTION 1: Vérifier que le modèle est prêt
+    const healthRes=await fetch('/health');
+    const health=await healthRes.json();
+    if(!health.model_ready){
+      alert('⏳ Model is still loading... Please wait 30 seconds and try again');
+      return;
+    }
+    // ✅ CORRECTION 2: Vérifier que getUserMedia est disponible
+    if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
+      alert('⚠️ Webcam not available on this device or browser. Try uploading a video instead.');
+      return;
+    }
+    // ✅ CORRECTION 3: Ajouter les flags pour Hugging Face Spaces
+    wcStream=await navigator.mediaDevices.getUserMedia({
+      video:{
+        width:640,
+        height:480,
+        facingMode:'user'  // Force la caméra frontale
+      },
+      audio:false
+    });
+  }catch(e){
+    // ✅ CORRECTION 4: Messages d'erreur détaillés
+    console.error('Webcam error:',e);
+    if(e.name==='NotAllowedError'){
+      alert('❌ Camera permission denied. Please allow camera access in your browser settings.');
+    }else if(e.name==='NotFoundError'){
+      alert('❌ No camera found. Please connect a webcam or upload a video instead.');
+    }else if(e.name==='NotReadableError'){
+      alert('❌ Camera is in use by another application. Please close it and try again.');
+    }else{
+      alert('❌ Webcam unavailable: '+e.message);
+    }
+    return;
+  }
   document.getElementById('wcPh').style.display='none';
   document.getElementById('recBadge').style.display='flex';
   btn.innerHTML='<i class="fas fa-stop" style="color:#f87171;font-size:9px;"></i> Stop webcam';
   btn.onclick=stopWc;
+  /* ✅ CORRECTION 5: Ajouter un timeout pour éviter que ça reste en attente */
+  const timeoutId=setTimeout(()=>{
+    console.warn('Webcam frame sending timeout - checking if stream is alive');
+    if(!wcStream || !wcStream.active){
+      stopWc();
+      alert('⚠️ Webcam stream lost. Stopping...');
+    }
+  }, 30000); // 30 secondes max
   /* Lance YOLO backend */
+  try{
+    const startRes=await fetch('/api/webcam/start',{
+      method:'POST',
+      headers:{'Content-Type':'application/json'},
+      body:JSON.stringify({classes:[...sel],model:'yolo11n'})
+    });
+    if(!startRes.ok){
+      throw new Error('Backend webcam start failed');
+    }
+  }catch(startErr){
+    console.error('Failed to start backend webcam:',startErr);
+    alert('⚠️ Could not start backend processing. Try uploading a video instead.');
+    clearTimeout(timeoutId);
+    return;
+  }
   /* Setup hidden video + canvas pour capturer frames */
   _wcHiddenVideo=document.createElement('video');
   _wcHiddenVideo.srcObject=wcStream;
+  _wcHiddenVideo.setAttribute('playsinline','');  // ✅ Important pour iOS/mobile
   _wcHiddenVideo.muted=true;
+  // ✅ CORRECTION 6: Attendre que la vidéo soit prête avant de jouer
+  _wcHiddenVideo.onloadedmetadata=()=>{
+    _wcHiddenVideo.play().catch(err=>console.warn('Video play error:',err));
+  };
+  // ✅ Si déjà chargée (rare mais possible)
+  if(_wcHiddenVideo.readyState>=2){
+    _wcHiddenVideo.play().catch(err=>console.warn('Video play error:',err));
+  }
   _wcCanvas2=document.createElement('canvas');
   _wcCanvas2.width=640;_wcCanvas2.height=480;
   const ctx2=_wcCanvas2.getContext('2d');
   miniImg.style.display='block';
   bigImg.style.display='block';
+  let frameErrors=0;
   _wcFrameIv=setInterval(async()=>{
+    if(!wcStream||!wcStream.active||!_wcHiddenVideo) {
+      console.warn('Webcam stream lost - stopping');
+      clearInterval(_wcFrameIv);
+      return;
+    }
+    try{
+      // ✅ Vérifier que la vidéo a des frames
+      if(_wcHiddenVideo.readyState<2){
+        console.warn('Video not ready yet, frame:', _wcHiddenVideo.readyState);
+        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,
+            timeout:5000  // ✅ Timeout 5s par frame
+          });
+          if(!resp.ok){
+            frameErrors++;
+            if(frameErrors>5){
+              console.error('Too many frame errors - stopping webcam');
+              clearInterval(_wcFrameIv);
+              alert('⚠️ Backend is not responding. Stopping webcam.');
+              stopWc();
+            }
+            return;
+          }
+          frameErrors=0;  // Reset counter on success
+          const url=URL.createObjectURL(await resp.blob());
+          miniImg.src=url;
+          bigImg.src=url;
+        }catch(e){
+          frameErrors++;
+          console.warn('Frame send error:',e);
+          if(frameErrors>5){
+            console.error('Too many frame errors - stopping');
+            clearInterval(_wcFrameIv);
+            stopWc();
+          }
+        }
+      },'image/jpeg',0.75);
+    }catch(e){
+      console.error('Frame interval error:',e);
+    }
   },200);
   /* Grand panel droite */
 </script>
 <script src="/static/trackiq-api.js"></script>
 </body>
+</html>