Spaces:
Running
Running
File size: 20,295 Bytes
b87a24a 23f66d2 b87a24a 0bdf61b 23f66d2 0bdf61b 23f66d2 b87a24a 091ea0d 3e04ea5 091ea0d b87a24a 4d20521 e3ec5d6 b87a24a 091ea0d b87a24a bb34c97 e3ec5d6 b87a24a 4d20521 b87a24a 091ea0d b87a24a 091ea0d a14a412 b87a24a c734973 a14a412 b87a24a a14a412 b87a24a 091ea0d b87a24a bb34c97 091ea0d 7932d1b a14a412 3e04ea5 b87a24a c734973 4d20521 a14a412 c734973 a14a412 b87a24a 091ea0d b87a24a 091ea0d 4d20521 b87a24a a14a412 bb34c97 091ea0d 4d20521 a14a412 7f449cc b87a24a c734973 b87a24a bb34c97 4d20521 b87a24a 091ea0d b87a24a bb34c97 091ea0d 7932d1b 4d20521 b87a24a bb34c97 b87a24a 4d20521 b87a24a e0d9763 b87a24a 4d20521 e0d9763 091ea0d a14a412 b87a24a 091ea0d f69350e 091ea0d f69350e 091ea0d f69350e e3ec5d6 f69350e a14a412 f69350e bda697c f69350e a14a412 f69350e a14a412 f69350e bda697c a14a412 f69350e a14a412 f69350e a14a412 091ea0d a14a412 bda697c f69350e d9ebe88 a41b2a9 a14a412 d9ebe88 a14a412 d9ebe88 4d20521 a14a412 d9ebe88 4d20521 d9ebe88 162e31e 091ea0d b87a24a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 | <!DOCTYPE html>
<html lang="en">
<head>
<!-- SPA Router: go to vehicles dashboard if run data is pending -->
<script>
if (sessionStorage.getItem('funky_run')) {
// Direct navigation — eliminates the document.write white-flash glitch.
// vehicles.html has bg-black on <body>, so the browser paints dark immediately.
window.location.replace('vehicles.html');
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>UrbanFlow</title>
<link rel="icon" type="image/png" sizes="512x512" href="assets/shuriken.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="UrbanFlow">
<link rel="apple-touch-icon" sizes="512x512" href="assets/shurkien_b.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/initial.css">
</head>
<body class="bg-black text-white min-h-screen w-full flex flex-col items-center selection:bg-white selection:text-black overflow-x-hidden">
<header class="mt-16 flex flex-col items-center flex-shrink-0 w-full z-10">
<img src="assets/uf_rf.png" alt="UrbanFlow Logo" class="h-44 md:h-52 w-auto object-contain mb-3">
</header>
<main class="flex-1 w-full max-w-[90rem] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20 px-10 py-6 items-center z-10">
<div class="hero-text-section lg:col-span-7 flex flex-col justify-center pb-6 lg:pb-0">
<h1 class="hero-title text-center sm:text-left font-extrabold mb-6 sm:mb-4 tracking-tight"
style="background:linear-gradient(135deg,#f0ece6 0%,#f0ece6 35%,#d4b08a 60%,#c89a6c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
<span class="block sm:inline">Automated</span>
<br class="hidden sm:block">
<span class="block sm:inline">Vision</span>
<span class="block sm:inline">Intelligence</span>
</h1>
<p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center justify-center sm:justify-start" style="color:#a89f97">
<span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">Beta</span>
MVP for traffic intelligence
</p>
<ul class="space-y-4 xl:space-y-5 text-base xl:text-lg font-medium" style="color:#a89f97">
<li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Works with CCTV, webcam or mobile recorded clips</li>
<li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Your Data is secure & private</li>
<li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Built for Indian Roads, conditions & traffic patterns</li>
<li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> No Hardware Installation; rapid & scalable analysis.</li>
<li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Tested on real field conditions</li>
</ul>
<div class="mt-10 flex justify-center sm:justify-start">
<button onclick="openOnboarding()" class="pr-6 pl-2 py-2 rounded-full transition-all active:scale-95 flex items-center gap-4 hover:border-[#c89a6c] shadow-lg group cursor-pointer" style="background:#050505; border: 1px solid #1a1a1a">
<div class="w-8 h-8 rounded-full flex items-center justify-center transition-transform group-hover:scale-110" style="background:#c89a6c; color:#000">
<i class="fa-solid fa-play text-[10px] ml-0.5"></i>
</div>
<span class="uppercase tracking-widest text-[11px] font-bold" style="color:#c89a6c">Experience Guided Tour</span>
</button>
</div>
</div>
<div class="step-card-section lg:col-span-5 flex flex-col justify-center w-full max-w-[32rem] mx-auto h-auto md:h-[480px] lg:h-[520px] mb-12 lg:mb-0">
<!-- STEP: Modules -->
<div id="step-modules" class="w-full flex flex-col fade-in overflow-y-auto">
<h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">UrbanFlow</h2>
<p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Proceed to analysis</p>
<div class="flex justify-center w-full">
<div onclick="showStep('upload')"
class="group relative border-2 rounded-[2rem] p-8 cursor-pointer hover:-translate-y-1 transition-all duration-300 text-center max-w-sm w-full traffic-dynamics-card">
<div class="absolute top-4 right-6 text-[9px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider"
style="background:#c89a6c;color:#000">BETA</div>
<i class="fa-solid fa-car-side text-4xl mb-4 block mx-auto" style="color:#c89a6c"></i>
<h3 class="font-bold text-lg mb-2 leading-tight" style="color:#f0ece6">Traffic <br>Dynamics</h3>
<p class="text-[10px] font-medium leading-relaxed" style="color:#a89f97">Vehicle counting, classification, and flow analysis</p>
</div>
</div>
</div>
<!-- STEP: Upload -->
<div id="step-upload" class="hidden w-full flex flex-col fade-in overflow-y-auto">
<button onclick="showStep('modules')"
class="text-[#a89f97] hover:text-white hover:underline transition flex items-center text-xs font-bold uppercase tracking-widest mb-6 w-fit">
<i class="fa-solid fa-arrow-left mr-2"></i> Back
</button>
<h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Media</h2>
<p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Submit an appropriate video footage</p>
<input id="file-input" type="file" accept="video/*" class="hidden">
<div id="dropzone" onclick="document.getElementById('file-input').click()"
class="border border-dashed border-neutral-700 rounded-[2rem] p-8 md:p-12 flex flex-col items-center justify-center cursor-pointer transition-all duration-300 group">
<i class="fa-solid fa-arrow-up-from-bracket text-4xl mb-5 block mx-auto transition" style="color:#a89f97"></i>
<span class="font-semibold text-lg mb-2 text-center block" style="color:#f0ece6">Drop or select a video</span>
<span class="text-[10px] font-bold uppercase tracking-widest text-center block" style="color:#a89f97">Any standard video format accepted</span>
</div>
<div id="upload-progress-container" class="hidden mt-10 w-full">
<div class="flex justify-between text-[11px] font-bold uppercase tracking-widest mb-3" style="color:#f0ece6">
<span id="upload-text">Uploading...</span>
<span id="upload-percentage">0%</span>
</div>
<div class="w-full h-1 bg-neutral-900 rounded-full overflow-hidden">
<div id="upload-bar" class="h-full w-0 transition-all duration-75 ease-linear rounded-full" style="background:#c89a6c"></div>
</div>
</div>
</div>
<!-- STEP: Draw -->
<div id="step-draw" class="hidden w-full flex flex-col fade-in overflow-y-auto">
<h2 class="text-3xl font-bold mb-2 text-center" style="color:#f0ece6">Spatial Boundary</h2>
<p class="text-[11px] font-bold uppercase tracking-widest mb-6 text-center" style="color:#a89f97">Mark two points to define the vehicle counting threshold</p>
<div class="relative w-full aspect-video bg-neutral-950 rounded-3xl overflow-hidden cursor-crosshair mb-6">
<img id="frame-img" class="absolute inset-0 w-full h-full object-contain" style="display:none;">
<div id="frame-placeholder"
class="absolute inset-0 flex flex-col items-center justify-center text-neutral-800 pointer-events-none">
<i class="fa-solid fa-video text-4xl mb-3 opacity-30"></i>
<span class="font-bold text-[10px] uppercase tracking-widest opacity-50">Media Frame Preview</span>
</div>
<canvas id="drawing-canvas" class="absolute inset-0 w-full h-full"></canvas>
</div>
<div class="flex flex-col items-center gap-3">
<button id="btn-proceed" onclick="startRun()"
class="w-fit px-16 py-3.5 rounded-full font-bold transition-all text-center text-sm shadow-lg hover:scale-105 active:scale-95"
style="background:#c89a6c;color:#000">
Continue →
</button>
<button onclick="resetCanvas()"
class="text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-white transition px-4 py-2 mt-2"
style="background:none;border:none;">Reset </button>
</div>
</div>
</div>
</main>
<footer class="w-full max-w-[90rem] mx-auto px-10 mt-auto z-10 text-[11px] font-bold uppercase tracking-[0.2em]" style="color:#777">
<!-- Desktop: Privacy Policy left | T&C center | © right — single row -->
<div class="hidden md:grid md:grid-cols-3 items-center py-6">
<div class="text-left">
<button onclick="openAppModal('privacyModal')" class="hover:text-white transition">Privacy Policy</button>
</div>
<div class="text-center">
<button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms & Conditions</button>
</div>
<div class="text-right">
© 2026 UrbanFlow. All rights reserved.
</div>
</div>
<!-- Mobile: Privacy Policy left | T&C right, then © centered below -->
<div class="md:hidden py-4">
<div class="flex items-center justify-between mb-2">
<button onclick="openAppModal('privacyModal')" class="hover:text-white transition">Privacy Policy</button>
<button onclick="openAppModal('termsModal')" class="hover:text-white transition">Terms & Conditions</button>
</div>
<div class="text-center">
© 2026 UrbanFlow. All rights reserved.
</div>
</div>
</footer>
<script src="js/initial.js"></script>
<script>
function openAppModal(id) {
const el = document.getElementById('appModal-' + id);
if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
}
function closeAppModal(id) {
const el = document.getElementById('appModal-' + id);
if (el) { el.style.display = 'none'; document.body.style.overflow = ''; }
}
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { closeAppModal('privacyModal'); closeAppModal('termsModal'); }
});
</script>
<!-- Privacy Modal -->
<div id="appModal-privacyModal" onclick="if(event.target===this)closeAppModal('privacyModal')"
style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
<div
style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
<button onclick="closeAppModal('privacyModal')"
style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">×</button>
<h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Privacy Policy</h2>
<p style="color:#a89f97;font-size:11px;margin-bottom:20px">We keep this simple and honest.</p>
<ul style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;text-align:left">
<li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is not yet a complete production service.</li>
<li>UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results may vary across runs due to the nature of real-time frame-by-frame inference.</li>
<li>Footage you submit is processed with minimal delay and <strong style="color:#f0ece6">discarded immediately</strong> after the session ends. Nothing is stored on our servers.</li>
<li>We do not use your footage to train models, sell it, or share it with any third party.</li>
<li>Reports and annotated videos are generated temporarily and delivered to your device. We do not retain copies.</li>
<li>We do not use advertising cookies, behavioral tracking, or analytics scripts on this platform.</li>
<li>Your use of this demo may inform product requirements. No personally identifiable data is collected in that process.</li>
<li>For any queries: <strong style="color:#c89a6c">support.urbanflow365@gmail.com</strong></li>
</ul>
<p style="color:#555;font-size:10px;margin-top:20px;text-align:left">— Team UrbanFlow</p>
</div>
</div>
<!-- Terms Modal -->
<div id="appModal-termsModal" onclick="if(event.target===this)closeAppModal('termsModal')"
style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:24px">
<div
style="background:#0a0a0a;border:1px solid #2a2a2a;border-radius:14px;max-width:480px;width:100%;padding:32px;position:relative;max-height:80vh;overflow-y:auto">
<button onclick="closeAppModal('termsModal')"
style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">×</button>
<h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms & Conditions</h2>
<p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this application, you agree to the
following terms.</p>
<p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px;text-align:left">You can:</p>
<ul
style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px;text-align:left">
<li>Use this application to evaluate UrbanFlow’s traffic detection and analytics capabilities.</li>
<li>Export reports, annotated video outputs, and data artifacts to your own device.</li>
<li>Share feedback, feature requests, or questions with us at <strong style="color:#c89a6c">support.urbanflow365@gmail.com</strong>.</li>
<li>Reference this application in research or internal evaluation, with proper attribution.</li>
</ul>
<p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px;text-align:left">You cannot:</p>
<ul
style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px;text-align:left">
<li>Commercially redistribute outputs or present them as your own product’s capability.</li>
<li>Reverse-engineer, extract, or attempt to replicate the underlying model or processing pipeline.</li>
<li>Use the application for unlawful, harmful, or safety-critical operational purposes.</li>
<li>Misrepresent outputs as certified or regulatory-grade traffic data.</li>
</ul>
<p style="color:#a89f97;font-size:11px;text-align:left">This application is provided as-is for <strong style="color:#f0ece6">demonstration and evaluation purposes only</strong>.
UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. For research use, we recommend processing the same video 2–3 times and taking the average count.</p>
<p style="color:#a89f97;font-size:11px;text-align:left">Outputs are not intended for operational, regulatory, or safety-critical use. This is an early-stage research project, not a commercial product.</p>
<p style="color:#555;font-size:10px;margin-top:16px;text-align:left">For any queries: <strong
style="color:#c89a6c">support.urbanflow365@gmail.com</strong></p>
</div>
</div>
<!-- Onboarding Walkthrough -->
<div id="onboard-overlay" class="onboard-overlay" style="display:none">
<div class="onboard-card">
<div class="onboard-step active" data-step="0">
<i class="fa-solid fa-cloud-arrow-up text-4xl mb-4" style="color:var(--cocoa-l)"></i>
<h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Upload a Video</h3>
<p class="text-xs" style="color:#777;line-height:1.7">Upload a suitable video clip from a traffic camera.</p>
</div>
<div class="onboard-step" data-step="1">
<i class="fa-solid fa-draw-polygon text-4xl mb-4" style="color:var(--cocoa-l)"></i>
<h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Draw a Counting Line</h3>
<p class="text-xs" style="color:#777;line-height:1.7">Draw two points to define a counting line. Vehicles crossing this line will be counted & classified.</p>
</div>
<div class="onboard-step" data-step="2">
<i class="fa-solid fa-chart-line text-4xl mb-4" style="color:var(--cocoa-l)"></i>
<h3 class="text-lg font-bold mb-2" style="color:#f0ece6">Review Analytics & Export</h3>
<p class="text-xs" style="color:#777;line-height:1.7">Track insights as they update during processing. Download reports when ready.</p>
</div>
<div class="onboard-dots">
<span class="onboard-dot active"></span>
<span class="onboard-dot"></span>
<span class="onboard-dot"></span>
</div>
<div class="flex gap-3 justify-center mt-6">
<button onclick="closeOnboarding()"
class="text-[10px] font-bold uppercase tracking-widest px-4 py-2 rounded-full"
style="color:#555;border:1px solid #222">Skip</button>
<button id="onboard-next" onclick="nextOnboardStep()"
class="text-[10px] font-bold uppercase tracking-widest px-6 py-2 rounded-full"
style="background:var(--cocoa);color:#f0ece6">Next</button>
</div>
</div>
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js');
});
}
</script>
</body>
</html> |