Spaces:
Running
Running
restored to the safestate..
Browse files- 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-
|
| 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,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
|
| 548 |
-
into structured
|
| 549 |
and downloadable reports — without requiring new hardware or on-site installation.
|
| 550 |
</p>
|
| 551 |
<p>
|
| 552 |
-
This is a <strong style="color:#f0ece6">
|
| 553 |
transport authorities, and researchers can evaluate what UrbanFlow delivers — 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,
|
| 559 |
-
This demo
|
| 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>
|
| 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 —
|
| 636 |
-
|
| 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-
|
| 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">
|
| 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
|
| 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
|
| 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-
|
| 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-
|
| 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
|
| 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)">›</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)">‹</button><span
|
| 1048 |
-
class="s-val" id="sv-smoothing">0.25</span><button
|
| 1049 |
-
onclick="stepParam('smoothing',0.05)">›</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
|
| 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
|
| 1176 |
<!-- Full Header Area -->
|
| 1177 |
-
<div class="max-w-
|
| 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
|
| 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]">
|
| 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
|
| 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
|
| 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 &
|
| 1264 |
-
<div class="fb-chip" onclick="this.classList.toggle('active')" data-val="helmet">
|
| 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">
|
| 1285 |
-
<option value="smartcity">Smart City
|
| 1286 |
-
<option value="other">Other
|
| 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
|
| 1531 |
const colors = { slow: '#ef4444', normal: '#eab308', fast: '#22c55e' };
|
| 1532 |
const labels = { slow: 'Slow', normal: 'Normal', fast: 'Fast' };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1533 |
|
| 1534 |
-
//
|
| 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 |
-
|
| 1549 |
-
|
| 1550 |
-
|
| 1551 |
-
|
| 1552 |
-
|
| 1553 |
-
|
| 1554 |
-
|
| 1555 |
-
|
| 1556 |
-
//
|
| 1557 |
-
const
|
| 1558 |
-
if (
|
| 1559 |
-
|
| 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 |
-
|
| 1572 |
-
|
| 1573 |
-
|
|
|
|
|
|
|
| 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:#
|
| 1577 |
</div>
|
| 1578 |
<div class="flex gap-3">
|
| 1579 |
-
<div class="flex-1 bg-
|
| 1580 |
-
<div class="text-lg font-bold
|
| 1581 |
-
<div class="text-[9px] font-bold text-
|
| 1582 |
</div>
|
| 1583 |
-
<div class="flex-1 bg-
|
| 1584 |
-
<div class="text-lg font-bold
|
| 1585 |
-
<div class="text-[9px] font-bold text-
|
| 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('#
|
| 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">
|
| 2405 |
-
<li>Footage you submit is processed in
|
| 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 — vehicle counts by class, directional flow totals, congestion patterns,
|
| 549 |
and downloadable reports — 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 — 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 — 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)">›</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)">‹</button><span
|
| 1060 |
+
class="s-val" id="sv-smoothing">0.25</span><button
|
| 1061 |
+
onclick="stepParam('smoothing',0.05)">›</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>
|