Subh775 commited on
Commit
37ed3ef
·
1 Parent(s): d28175d

restored to the safestate..

Browse files
Files changed (1) hide show
  1. frontend/vehicles.html +101 -147
frontend/vehicles.html CHANGED
@@ -528,10 +528,10 @@
528
  <!-- Toast Container -->
529
  <div id="toast-container"></div>
530
 
531
- <main class="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-hidden relative" style="height: 100vh;">
532
 
533
  <!-- TAB: About -->
534
- <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
535
  <div class="bg-black border border-slate-800 rounded-xl p-12 shadow-2xl space-y-8 min-h-full flex flex-col justify-center">
536
  <div class="text-center">
537
  <p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto" style="color:#c89a6c;font-family:'Montserrat',sans-serif">
@@ -544,19 +544,19 @@
544
 
545
  <div class="space-y-5 leading-relaxed text-sm text-center" style="color:#a89f97">
546
  <p>
547
- UrbanFlow is a cloud-based traffic intelligence application that turns raw camera footage from street & roads
548
- into structured traffic data &mdash; vehicle counts by class, directional flow, congestion patterns,
549
  and downloadable reports &mdash; without requiring new hardware or on-site installation.
550
  </p>
551
  <p>
552
- This is a <strong style="color:#f0ece6">demo application/strong>. It exists so that traffic engineers, urban planners,
553
  transport authorities, and researchers can evaluate what UrbanFlow delivers &mdash; and tell us what they actually need.
554
  We are in the <strong style="color:#f0ece6">requirements gathering phase</strong>, and your feedback directly shapes
555
  what gets built for production.
556
  </p>
557
  <p style="font-size:13px;color:#777">
558
- The production system will support RTSP live-stream input, more informative dashboards, REST APIs, and advanced analytics.
559
- This demo accepts video upload only.
560
  </p>
561
  </div>
562
 
@@ -599,7 +599,7 @@
599
  </li>
600
  <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
601
  style="color:#c89a6c"></i>
602
- <span>Review live KPIs and download artifacts when complete</span>
603
  </li>
604
  </ul>
605
  </div>
@@ -624,7 +624,7 @@
624
  </li>
625
  <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
626
  style="color:#8b5e3c"></i>
627
- <span>Enterprise deployment with dedicated SLAs and onboarding</span>
628
  </li>
629
  </ul>
630
  </div>
@@ -632,8 +632,8 @@
632
 
633
  <div class="text-center pt-6 border-t border-slate-900">
634
  <p class="text-[13px] leading-relaxed" style="color:#888">
635
- We are an applied research team &mdash; that work on solving real problems, not controlled test environments.
636
- The focus is on reliability under the actual conditions: mixed lanes, dense occlusion, heterogeneous vehicle type and variable lighting.
637
  </p>
638
  <p class="text-[12px] mt-3" style="color:#777">
639
  Feedback, collaboration, or questions: <strong style="color:#c89a6c">support@urbanflow.in</strong>
@@ -672,14 +672,13 @@
672
  </div>
673
 
674
  <!-- TAB: Overview -->
675
- <div id="tab-overview" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
676
- <div class="grid grid-cols-12 gap-4 w-full" style="position:relative">
677
 
678
  <!-- Empty State Overlay -->
679
  <div id="stats-empty-state" class="stats-empty-overlay">
680
  <i class="fa-solid fa-chart-column text-4xl mb-4" style="color:#333"></i>
681
  <span class="text-sm font-bold" style="color:#555">Processing not started</span>
682
- <span class="text-[11px] mt-1" style="color:#444">View KPIs once analysis begins</span>
683
  </div>
684
 
685
  <!-- Congestion Index -->
@@ -760,42 +759,15 @@
760
  </div>
761
  <div class="flex-1 w-full relative min-h-[220px]">
762
  <canvas id="flowChart"></canvas>
763
- </div>
764
- </div>
765
-
766
- <!-- Additional KPI Rows (Speed & Insights) -->
767
- <div id="stats-insights-row" class="col-span-12 grid grid-cols-12 gap-4">
768
- <!-- Speed Distribution -->
769
- <div class="col-span-12 xl:col-span-6 bg-[#0a0a0a] rounded-xl border border-[#2a2a2a] shadow-sm flex flex-col overflow-hidden">
770
- <div class="px-6 py-4 border-b border-[#2a2a2a] bg-[#0c0c0c]">
771
- <h3 class="font-bold text-white text-sm flex items-center">Speed Distribution
772
- <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
773
- <span class="info-tip">Relative speed categories based on pixel displacement. Slow/Normal/Fast are percentile-based within this video.</span></span>
774
- </h3>
775
- </div>
776
- <div class="p-6" id="speed-stats-card">
777
- <!-- Populated by renderInsights -->
778
- </div>
779
  </div>
 
780
 
781
- <!-- Congestion Insights -->
782
- <div class="col-span-12 xl:col-span-6 bg-[#0a0a0a] rounded-xl border border-[#2a2a2a] shadow-sm flex flex-col overflow-hidden">
783
- <div class="px-6 py-4 border-b border-[#2a2a2a] bg-[#0c0c0c]">
784
- <h3 class="font-bold text-white text-sm flex items-center">Automated Peak Analysis
785
- <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
786
- <span class="info-tip">AI-driven detection of traffic surges and peak periods.</span></span>
787
- </h3>
788
- </div>
789
- <div class="p-6 space-y-3" id="pcu-stats-card">
790
- <!-- Populated by renderInsights -->
791
- </div>
792
- </div>
793
  </div>
 
794
  </div>
795
- </div>
796
 
797
  <!-- TAB: Run -->
798
- <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
799
  <div class="space-y-6 w-full max-w-[1400px]">
800
 
801
  <!-- HERO: Process Analytics -->
@@ -887,7 +859,7 @@
887
 
888
 
889
  <!-- TAB: Reports -->
890
- <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
891
  <div id="reports-pending-message" class="mb-4 text-center p-4 border border-[#222] bg-[#0a0a0a] rounded-xl flex items-center justify-center gap-3 shadow-sm">
892
  <i id="reports-pending-icon" class="fa-solid fa-layer-group text-[#c89a6c]"></i>
893
  <span id="reports-pending-text" class="text-xs text-[#a89f97] font-medium tracking-wide uppercase">Trigger process from settings. Artifacts will be available here once processing completes.</span>
@@ -938,7 +910,7 @@
938
  <span class="info-tip">Relative speed categories based on pixel displacement between frames. Slow/Normal/Fast are percentile-based within this video — not km/h.</span></span>
939
  </h3>
940
  </div>
941
- <div class="flex-1 flex items-center justify-center" id="speed-reports-card">
942
  <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
943
  </div>
944
  </div>
@@ -951,7 +923,7 @@
951
  <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian traffic into standardized units for road capacity analysis.</span></span>
952
  </h3>
953
  </div>
954
- <div class="flex-1 flex items-center justify-center" id="pcu-reports-card">
955
  <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-car text-2xl mb-2"></i><br>Available after processing</div>
956
  </div>
957
  </div>
@@ -961,7 +933,7 @@
961
  </div>
962
 
963
  <!-- TAB: Settings -->
964
- <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
965
  <div class="grid grid-cols-2 gap-6 w-full">
966
  <!-- Processing Parameters -->
967
  <div class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
@@ -1033,31 +1005,6 @@
1033
  class="s-val" id="sv-stride">2</span><button
1034
  onclick="stepParam('stride',1)">&#8250;</button></div>
1035
  </div>
1036
- <div class="s-row" data-param="smoothing">
1037
- <div>
1038
- <div class="text-xs font-semibold text-slate-700 flex items-center">
1039
- Congestion Smoothing
1040
- <span class="info-wrap ml-1">
1041
- <span class="info-btn"><i class="fa-solid fa-info"></i></span>
1042
- <span class="info-tip">Reduces jitter/noise in the line chart. Low values (0.05-0.2) create very smooth trends; high values (0.8+) show raw spiky data.</span>
1043
- </span>
1044
- </div>
1045
- <div class="text-[10px] text-slate-400">EMA Alpha factor for the rolling average</div>
1046
- </div>
1047
- <div class="s-stepper"><button onclick="stepParam('smoothing',-0.05)">&#8249;</button><span
1048
- class="s-val" id="sv-smoothing">0.25</span><button
1049
- onclick="stepParam('smoothing',0.05)">&#8250;</button></div>
1050
- </div>
1051
- </div>
1052
- </div>
1053
-
1054
- <!-- Artifact Generation Settings -->
1055
- <div
1056
- class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
1057
- <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
1058
- <h3 class="font-bold text-slate-800 text-sm">Artifact Settings</h3>
1059
- </div>
1060
- <div class="px-5 py-4 flex-1 flex flex-col">
1061
  <div class="s-row" data-param="report">
1062
  <div>
1063
  <div class="text-xs font-semibold text-slate-700">Individual Chart Export</div>
@@ -1098,6 +1045,31 @@
1098
  </div>
1099
  </div>
1100
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1101
  <div class="s-row">
1102
  <div>
1103
  <div class="text-xs font-semibold text-slate-700 flex items-center">Export Run Details (JSON)
@@ -1134,7 +1106,7 @@
1134
  <span class="info-tip">Enable before processing starts. The artifact bundle (ZIP) will download automatically once analysis completes. Cannot be changed after processing finishes.</span>
1135
  </span>
1136
  </div>
1137
- <div class="text-[10px] text-slate-400">Save results automatically</div>
1138
  </div>
1139
  <div class="toggle-track" id="sv-auto-download" onclick="toggleAutoDownload(this)">
1140
  <div class="toggle-thumb"></div>
@@ -1172,15 +1144,15 @@
1172
  </div>
1173
 
1174
  <!-- TAB: Feedback -->
1175
- <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto max-h-full">
1176
  <!-- Full Header Area -->
1177
- <div class="max-w-none px-6 space-y-6 w-full">
1178
  <div class="text-center space-y-3 mb-6">
1179
  <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
1180
- <p class="text-xs" style="color:#777">We are constantly refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
1181
  <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full mt-2">
1182
  <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
1183
- <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">It takes less than a minute to complete</span>
1184
  </div>
1185
  </div>
1186
 
@@ -1207,7 +1179,7 @@
1207
  <!-- Emojis Grid -->
1208
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
1209
  <div>
1210
- <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product to a friend or colleague</label>
1211
  <div class="flex gap-2" id="fb-recommend">
1212
  <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')"><i class="fa-solid fa-face-frown text-xl"></i><span class="block mt-1 text-[8px] uppercase">Unlikely</span></div>
1213
  <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i class="fa-solid fa-face-meh text-xl"></i><span class="block mt-1 text-[8px] uppercase">Maybe</span></div>
@@ -1255,13 +1227,14 @@
1255
 
1256
  <!-- Feature Prioritization -->
1257
  <div class="pt-4 border-t border-slate-800">
1258
- <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" style="color:#a89f97">Feature Prioritization that you think we should consider</label>
1259
  <div class="grid grid-cols-2 gap-3" id="fb-priorities">
 
1260
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="api-access">REST API Access</div>
1261
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">ANPR Recognition</div>
1262
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="security">Security Focus</div>
1263
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="regulation">Regulation &amp; Policies</div>
1264
- <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet">UI/ UX Improvements</div>
1265
  </div>
1266
  </div>
1267
  </div>
@@ -1279,11 +1252,11 @@
1279
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
1280
  <select class="fb-select w-full" id="fb-usecase">
1281
  <option value="" disabled selected>Select your use case</option>
1282
- <option value="research">Academic Research</option>
1283
- <option value="planning">Urban Planning</option>
1284
- <option value="highway">Business Modelling</option>
1285
- <option value="smartcity">Smart City Solutions</option>
1286
- <option value="other">Other..</option>
1287
  </select>
1288
  </div>
1289
  <div>
@@ -1291,7 +1264,7 @@
1291
  <select class="fb-select w-full" id="fb-type">
1292
  <option value="" disabled selected>General Professional Feedback</option>
1293
  <option value="bug">Technical Issue / Bug Report</option>
1294
- <option value="feature">Feature Request</option>
1295
  <option value="accuracy">Inference Accuracy Review</option>
1296
  <option value="ux">Dashboard Workflow / UX</option>
1297
  </select>
@@ -1526,37 +1499,35 @@
1526
  const panel = document.getElementById('insights-panel');
1527
  panel.classList.remove('hidden');
1528
 
 
1529
  const dist = d.speed_distribution || {};
1530
- const pcu = d.pcu || {};
1531
  const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
1532
  const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
 
 
 
 
 
 
 
 
 
1533
 
1534
- // 1. Update Run Tab Insights
1535
- const bars = document.getElementById('speed-bars');
1536
- if (bars) {
1537
- bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
1538
- const pct = dist[cat] || 0;
1539
- const h = Math.max(8, pct * 1.2);
1540
- return `<div class="flex flex-col items-center gap-1">
1541
- <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
1542
- <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
1543
- <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
1544
- </div>`;
1545
- }).join('');
1546
- }
1547
  const ci = document.getElementById('congestion-insights');
1548
- if (ci) {
1549
- ci.innerHTML = [
1550
- infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
1551
- infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
1552
- infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
1553
- ].join('');
1554
- }
1555
-
1556
- // 2. Update Stats Tab Cards
1557
- const speedStats = document.getElementById('speed-stats-card');
1558
- if (speedStats) {
1559
- speedStats.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
1560
  ${['slow', 'normal', 'fast'].map(cat => {
1561
  const pct = dist[cat] || 0;
1562
  const h = Math.max(12, pct * 1.0);
@@ -1568,44 +1539,27 @@
1568
  }).join('')}
1569
  </div>`;
1570
  }
1571
- const pcuStats = document.getElementById('pcu-stats-card');
1572
- if (pcuStats) {
1573
- pcuStats.innerHTML = `<div class="space-y-3 w-full">
 
 
1574
  <div class="flex justify-between items-center">
1575
  <span class="text-xs font-medium text-slate-500">Total PCU</span>
1576
- <span class="text-2xl font-black" style="color:#c89a6c">${pcu.total_pcu || 0}</span>
1577
  </div>
1578
  <div class="flex gap-3">
1579
- <div class="flex-1 bg-[#111] rounded-lg p-2.5 text-center border border-[#222]">
1580
- <div class="text-lg font-bold" style="color:#22c55e">${pcu.pcu_in || 0}</div>
1581
- <div class="text-[9px] font-bold text-slate-500 uppercase">PCU In</div>
1582
  </div>
1583
- <div class="flex-1 bg-[#111] rounded-lg p-2.5 text-center border border-[#222]">
1584
- <div class="text-lg font-bold" style="color:#ef4444">${pcu.pcu_out || 0}</div>
1585
- <div class="text-[9px] font-bold text-slate-500 uppercase">PCU Out</div>
1586
  </div>
1587
  </div>
1588
  </div>`;
1589
  }
1590
-
1591
- // 3. Update Reports Tab Insights
1592
- const speedReports = document.getElementById('speed-reports-card');
1593
- if (speedReports) {
1594
- speedReports.innerHTML = `<div class="flex gap-3 items-end justify-center w-full h-16">
1595
- ${['slow', 'normal', 'fast'].map(cat => {
1596
- const pct = dist[cat] || 0;
1597
- const h = Math.max(6, pct * 0.6);
1598
- return `<div style="width:24px;height:${h}px;background:${colors[cat]};border-radius:4px;"></div>`;
1599
- }).join('')}
1600
- </div>`;
1601
- }
1602
- const pcuReports = document.getElementById('pcu-reports-card');
1603
- if (pcuReports) {
1604
- pcuReports.innerHTML = `<div class="text-center">
1605
- <div class="text-3xl font-black" style="color:var(--cocoa-l)">${pcu.total_pcu || 0}</div>
1606
- <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-1">Passenger Car Units</div>
1607
- </div>`;
1608
- }
1609
  }
1610
 
1611
  // =========== Run Details helpers ===========
@@ -1880,9 +1834,9 @@
1880
  }
1881
 
1882
  function lockSettings() {
1883
- document.querySelectorAll('#tab-settings .s-row').forEach(row => {
1884
  const p = row.dataset.param;
1885
- if (p !== 'palette') {
1886
  row.classList.add('disabled');
1887
  }
1888
  });
@@ -2401,8 +2355,8 @@
2401
  <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
2402
  <p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
2403
  <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc">
2404
- <li>This is a <strong style="color:#f0ece6">demonstration application</strong> hosted on Hugging Face Spaces. It is not a production service.</li>
2405
- <li>Footage you submit is processed in <strong style="color:#f0ece6"> near real time</strong> and <strong style="color:#f0ece6">discarded immediately</strong> after the session ends. Nothing is stored on our servers.</li>
2406
  <li>We do not use your footage to train models, sell it, or share it with any third party.</li>
2407
  <li>Reports and annotated videos are generated temporarily and delivered to your device. We do not retain copies.</li>
2408
  <li>We do not use advertising cookies, behavioral tracking, or analytics scripts on this platform.</li>
 
528
  <!-- Toast Container -->
529
  <div id="toast-container"></div>
530
 
531
+ <main class="flex-1 flex flex-col h-full min-w-0 p-4 gap-4">
532
 
533
  <!-- TAB: About -->
534
+ <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
535
  <div class="bg-black border border-slate-800 rounded-xl p-12 shadow-2xl space-y-8 min-h-full flex flex-col justify-center">
536
  <div class="text-center">
537
  <p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto" style="color:#c89a6c;font-family:'Montserrat',sans-serif">
 
544
 
545
  <div class="space-y-5 leading-relaxed text-sm text-center" style="color:#a89f97">
546
  <p>
547
+ UrbanFlow is a cloud-based traffic intelligence platform that turns raw camera footage from Indian roads
548
+ into structured, actionable data &mdash; vehicle counts by class, directional flow totals, congestion patterns,
549
  and downloadable reports &mdash; without requiring new hardware or on-site installation.
550
  </p>
551
  <p>
552
+ This is a <strong style="color:#f0ece6">public demo</strong>. It exists so that traffic engineers, urban planners,
553
  transport authorities, and researchers can evaluate what UrbanFlow delivers &mdash; and tell us what they actually need.
554
  We are in the <strong style="color:#f0ece6">requirements gathering phase</strong>, and your feedback directly shapes
555
  what gets built for production.
556
  </p>
557
  <p style="font-size:13px;color:#777">
558
+ The production system will support RTSP live-stream input, institutional dashboards, REST APIs, and advanced analytics.
559
+ This demo serves video upload only.
560
  </p>
561
  </div>
562
 
 
599
  </li>
600
  <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
601
  style="color:#c89a6c"></i>
602
+ <span>Review live KPIs and download bundled artifacts when complete</span>
603
  </li>
604
  </ul>
605
  </div>
 
624
  </li>
625
  <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
626
  style="color:#8b5e3c"></i>
627
+ <span>Institutional deployment with dedicated SLAs and onboarding</span>
628
  </li>
629
  </ul>
630
  </div>
 
632
 
633
  <div class="text-center pt-6 border-t border-slate-900">
634
  <p class="text-[13px] leading-relaxed" style="color:#888">
635
+ We are an applied research team &mdash; using state-of-the-art detection models, fine-tuned on Indian traffic datasets,
636
+ to build systems that work in production. Not a black box. Not a benchmark demo. A working tool, built for real roads.
637
  </p>
638
  <p class="text-[12px] mt-3" style="color:#777">
639
  Feedback, collaboration, or questions: <strong style="color:#c89a6c">support@urbanflow.in</strong>
 
672
  </div>
673
 
674
  <!-- TAB: Overview -->
675
+ <div id="tab-overview" class="hidden grid grid-cols-12 gap-4 flex-1 min-h-0 overflow-hidden" style="position:relative">
 
676
 
677
  <!-- Empty State Overlay -->
678
  <div id="stats-empty-state" class="stats-empty-overlay">
679
  <i class="fa-solid fa-chart-column text-4xl mb-4" style="color:#333"></i>
680
  <span class="text-sm font-bold" style="color:#555">Processing not started</span>
681
+ <span class="text-[11px] mt-1" style="color:#444">Charts will populate in real-time once analysis begins</span>
682
  </div>
683
 
684
  <!-- Congestion Index -->
 
759
  </div>
760
  <div class="flex-1 w-full relative min-h-[220px]">
761
  <canvas id="flowChart"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
762
  </div>
763
+ </div>
764
 
 
 
 
 
 
 
 
 
 
 
 
 
765
  </div>
766
+
767
  </div>
 
768
 
769
  <!-- TAB: Run -->
770
+ <div id="tab-run-details" class="hidden flex-1 min-h-0 overflow-y-auto">
771
  <div class="space-y-6 w-full max-w-[1400px]">
772
 
773
  <!-- HERO: Process Analytics -->
 
859
 
860
 
861
  <!-- TAB: Reports -->
862
+ <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
863
  <div id="reports-pending-message" class="mb-4 text-center p-4 border border-[#222] bg-[#0a0a0a] rounded-xl flex items-center justify-center gap-3 shadow-sm">
864
  <i id="reports-pending-icon" class="fa-solid fa-layer-group text-[#c89a6c]"></i>
865
  <span id="reports-pending-text" class="text-xs text-[#a89f97] font-medium tracking-wide uppercase">Trigger process from settings. Artifacts will be available here once processing completes.</span>
 
910
  <span class="info-tip">Relative speed categories based on pixel displacement between frames. Slow/Normal/Fast are percentile-based within this video — not km/h.</span></span>
911
  </h3>
912
  </div>
913
+ <div class="flex-1 flex items-center justify-center" id="speed-stats-card">
914
  <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-gauge-high text-2xl mb-2"></i><br>Available after processing</div>
915
  </div>
916
  </div>
 
923
  <span class="info-tip">Passenger Car Units (IRC:106-1990). Converts heterogeneous Indian traffic into standardized units for road capacity analysis.</span></span>
924
  </h3>
925
  </div>
926
+ <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
927
  <div class="text-center text-slate-600 text-xs"><i class="fa-solid fa-car text-2xl mb-2"></i><br>Available after processing</div>
928
  </div>
929
  </div>
 
933
  </div>
934
 
935
  <!-- TAB: Settings -->
936
+ <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
937
  <div class="grid grid-cols-2 gap-6 w-full">
938
  <!-- Processing Parameters -->
939
  <div class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
 
1005
  class="s-val" id="sv-stride">2</span><button
1006
  onclick="stepParam('stride',1)">&#8250;</button></div>
1007
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1008
  <div class="s-row" data-param="report">
1009
  <div>
1010
  <div class="text-xs font-semibold text-slate-700">Individual Chart Export</div>
 
1045
  </div>
1046
  </div>
1047
  </div>
1048
+ <div class="s-row" data-param="smoothing">
1049
+ <div>
1050
+ <div class="text-xs font-semibold text-slate-700 flex items-center">
1051
+ Congestion Smoothing
1052
+ <span class="info-wrap ml-1">
1053
+ <span class="info-btn"><i class="fa-solid fa-info"></i></span>
1054
+ <span class="info-tip">Reduces jitter/noise in the line chart. Low values (0.05-0.2) create very smooth trends; high values (0.8+) show raw spiky data.</span>
1055
+ </span>
1056
+ </div>
1057
+ <div class="text-[10px] text-slate-400">EMA Alpha factor for the rolling average</div>
1058
+ </div>
1059
+ <div class="s-stepper"><button onclick="stepParam('smoothing',-0.05)">&#8249;</button><span
1060
+ class="s-val" id="sv-smoothing">0.25</span><button
1061
+ onclick="stepParam('smoothing',0.05)">&#8250;</button></div>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+
1066
+ <!-- Artifact Generation Settings -->
1067
+ <div
1068
+ class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
1069
+ <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
1070
+ <h3 class="font-bold text-slate-800 text-sm">Artifact Generation Settings</h3>
1071
+ </div>
1072
+ <div class="px-5 py-4 flex-1 flex flex-col">
1073
  <div class="s-row">
1074
  <div>
1075
  <div class="text-xs font-semibold text-slate-700 flex items-center">Export Run Details (JSON)
 
1106
  <span class="info-tip">Enable before processing starts. The artifact bundle (ZIP) will download automatically once analysis completes. Cannot be changed after processing finishes.</span>
1107
  </span>
1108
  </div>
1109
+ <div class="text-[10px] text-slate-400">Save reports automatically</div>
1110
  </div>
1111
  <div class="toggle-track" id="sv-auto-download" onclick="toggleAutoDownload(this)">
1112
  <div class="toggle-thumb"></div>
 
1144
  </div>
1145
 
1146
  <!-- TAB: Feedback -->
1147
+ <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto">
1148
  <!-- Full Header Area -->
1149
+ <div class="max-w-6xl mx-auto space-y-6">
1150
  <div class="text-center space-y-3 mb-6">
1151
  <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
1152
+ <p class="text-xs" style="color:#777">We are actively refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
1153
  <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-[#111] border border-[#222] rounded-full mt-2">
1154
  <i class="fa-regular fa-clock text-[#c89a6c] text-[10px]"></i>
1155
+ <span class="text-[10px] font-bold uppercase tracking-widest text-[#a89f97]">Takes about 2 minutes to complete</span>
1156
  </div>
1157
  </div>
1158
 
 
1179
  <!-- Emojis Grid -->
1180
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
1181
  <div>
1182
+ <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
1183
  <div class="flex gap-2" id="fb-recommend">
1184
  <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')"><i class="fa-solid fa-face-frown text-xl"></i><span class="block mt-1 text-[8px] uppercase">Unlikely</span></div>
1185
  <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i class="fa-solid fa-face-meh text-xl"></i><span class="block mt-1 text-[8px] uppercase">Maybe</span></div>
 
1227
 
1228
  <!-- Feature Prioritization -->
1229
  <div class="pt-4 border-t border-slate-800">
1230
+ <label class="text-[10px] font-bold uppercase tracking-widest block mb-4" style="color:#a89f97">Feature Prioritization (Select all that apply)</label>
1231
  <div class="grid grid-cols-2 gap-3" id="fb-priorities">
1232
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="live-rtsp">Live RTSP Streams</div>
1233
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="api-access">REST API Access</div>
1234
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="anpr">ANPR Recognition</div>
1235
  <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="security">Security Focus</div>
1236
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="regulation">Regulation & Policies</div>
1237
+ <div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet">Helmet Compliance</div>
1238
  </div>
1239
  </div>
1240
  </div>
 
1252
  <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
1253
  <select class="fb-select w-full" id="fb-usecase">
1254
  <option value="" disabled selected>Select your use case</option>
1255
+ <option value="research">Academic / Traffic Research</option>
1256
+ <option value="planning">Urban Planning & Capacity</option>
1257
+ <option value="highway">Highway Authority (NHAI/State)</option>
1258
+ <option value="smartcity">Smart City Integrator</option>
1259
+ <option value="other">Other Institutional</option>
1260
  </select>
1261
  </div>
1262
  <div>
 
1264
  <select class="fb-select w-full" id="fb-type">
1265
  <option value="" disabled selected>General Professional Feedback</option>
1266
  <option value="bug">Technical Issue / Bug Report</option>
1267
+ <option value="feature">Strategic Feature Request</option>
1268
  <option value="accuracy">Inference Accuracy Review</option>
1269
  <option value="ux">Dashboard Workflow / UX</option>
1270
  </select>
 
1499
  const panel = document.getElementById('insights-panel');
1500
  panel.classList.remove('hidden');
1501
 
1502
+ // Speed distribution bars
1503
  const dist = d.speed_distribution || {};
1504
+ const bars = document.getElementById('speed-bars');
1505
  const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
1506
  const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
1507
+ bars.innerHTML = ['slow', 'normal', 'fast'].map(cat => {
1508
+ const pct = dist[cat] || 0;
1509
+ const h = Math.max(8, pct * 1.2);
1510
+ return `<div class="flex flex-col items-center gap-1">
1511
+ <span class="text-[10px] font-bold" style="color:${colors[cat]}">${pct}%</span>
1512
+ <div style="width:36px;height:${h}px;background:${colors[cat]};border-radius:6px;transition:height 0.5s"></div>
1513
+ <span class="text-[9px] font-bold text-slate-500 uppercase">${labels[cat]}</span>
1514
+ </div>`;
1515
+ }).join('');
1516
 
1517
+ // Congestion insights
 
 
 
 
 
 
 
 
 
 
 
 
1518
  const ci = document.getElementById('congestion-insights');
1519
+ const pcu = d.pcu || {};
1520
+ ci.innerHTML = [
1521
+ infoRow('Total PCU', pcu.total_pcu || 0, 'Passenger Car Units (IRC:106-1990). Normalizes mixed traffic.'),
1522
+ infoRow('PCU In / Out', `${pcu.pcu_in || 0} / ${pcu.pcu_out || 0}`, 'Directional PCU split.'),
1523
+ infoRow('Speed Profile', `${dist.slow || 0}% slow · ${dist.normal || 0}% normal · ${dist.fast || 0}% fast`, 'Relative speed categories within this video.'),
1524
+ ].join('');
1525
+
1526
+ // ---- Also populate Stats tab cards ----
1527
+ // Speed card in Stats
1528
+ const speedCard = document.getElementById('speed-stats-card');
1529
+ if (speedCard) {
1530
+ speedCard.innerHTML = `<div class="flex gap-5 items-end justify-center w-full">
1531
  ${['slow', 'normal', 'fast'].map(cat => {
1532
  const pct = dist[cat] || 0;
1533
  const h = Math.max(12, pct * 1.0);
 
1539
  }).join('')}
1540
  </div>`;
1541
  }
1542
+
1543
+ // PCU card in Stats
1544
+ const pcuCard = document.getElementById('pcu-stats-card');
1545
+ if (pcuCard) {
1546
+ pcuCard.innerHTML = `<div class="space-y-3 w-full">
1547
  <div class="flex justify-between items-center">
1548
  <span class="text-xs font-medium text-slate-500">Total PCU</span>
1549
+ <span class="text-2xl font-black" style="color:#8b5e3c">${pcu.total_pcu || 0}</span>
1550
  </div>
1551
  <div class="flex gap-3">
1552
+ <div class="flex-1 bg-green-50 rounded-lg p-2.5 text-center border border-green-100">
1553
+ <div class="text-lg font-bold text-green-700">${pcu.pcu_in || 0}</div>
1554
+ <div class="text-[9px] font-bold text-green-500 uppercase">PCU In</div>
1555
  </div>
1556
+ <div class="flex-1 bg-red-50 rounded-lg p-2.5 text-center border border-red-100">
1557
+ <div class="text-lg font-bold text-red-700">${pcu.pcu_out || 0}</div>
1558
+ <div class="text-[9px] font-bold text-red-500 uppercase">PCU Out</div>
1559
  </div>
1560
  </div>
1561
  </div>`;
1562
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1563
  }
1564
 
1565
  // =========== Run Details helpers ===========
 
1834
  }
1835
 
1836
  function lockSettings() {
1837
+ document.querySelectorAll('#settings-params .s-row').forEach(row => {
1838
  const p = row.dataset.param;
1839
+ if (p && p !== 'palette') {
1840
  row.classList.add('disabled');
1841
  }
1842
  });
 
2355
  <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
2356
  <p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
2357
  <ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc">
2358
+ <li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is not a production service.</li>
2359
+ <li>Footage you submit is processed in real time and <strong style="color:#f0ece6">discarded immediately</strong> after the session ends. Nothing is stored on our servers.</li>
2360
  <li>We do not use your footage to train models, sell it, or share it with any third party.</li>
2361
  <li>Reports and annotated videos are generated temporarily and delivered to your device. We do not retain copies.</li>
2362
  <li>We do not use advertising cookies, behavioral tracking, or analytics scripts on this platform.</li>