Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <!-- SPA Bootstrap: load dashboard without changing URL --> | |
| <script> | |
| if (sessionStorage.getItem('funky_run')) { | |
| document.documentElement.style.display = 'none'; | |
| fetch('vehicles.html') | |
| .then(function (r) { return r.text(); }) | |
| .then(function (html) { | |
| document.open(); | |
| document.write(html); | |
| document.close(); | |
| }); | |
| } | |
| </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> |