imporvements..

frontend/initial.html

@@ -48,16 +48,25 @@
                 <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">DEMO</span>
-                Cloud-Native Traffic Intelligence
+                <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> No new hardware &mdash; works with your existing cameras</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Granular vehicle counts across 14 classes</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Directional flow &amp; congestion insights in minutes</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-3 md:mr-5 text-xl" style="color:#c89a6c"></i> Downloadable reports ready for planning &amp; compliance</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 &mdash; tested on real field conditions</li>
+                <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 &amp; 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 &amp; 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 &amp; 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">
@@ -65,15 +74,15 @@
             <!-- 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">Select an analytical module to continue.</p>
+                <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">DEMO</div>
+                            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 for Indian roads.</p>
+                        <p class="text-[10px] font-medium leading-relaxed" style="color:#a89f97">Vehicle counting, classification, and flow analysis</p>
                     </div>
                 </div>
             </div>
@@ -84,13 +93,13 @@
                     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">Source Media</h2>
-                <p class="text-[13px] font-medium mb-8 text-center" style="color:#a89f97">Submit camera footage to begin traffic analysis.</p>
+                <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 file</span>
+                    <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">
@@ -125,7 +134,7 @@
                     </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 Boundary</button>
+                        style="background:none;border:none;">Reset </button>
                 </div>
             </div>
 
@@ -185,9 +194,9 @@
             <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 a production service.</li>
-                <li>UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results may vary slightly across runs due to the nature of real-time frame-by-frame inference.</li>
-                <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>
+                <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>
@@ -206,28 +215,28 @@
             <button onclick="closeAppModal('termsModal')"
                 style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
             <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms &amp; Conditions</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this demo platform, you agree to the
+            <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 demo to evaluate UrbanFlow&rsquo;s traffic detection and analytics capabilities.</li>
+                <li>Use this application to evaluate UrbanFlow&rsquo;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 demo in research or internal evaluation, with proper attribution.</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&rsquo;s capability.</li>
                 <li>Reverse-engineer, extract, or attempt to replicate the underlying model or processing pipeline.</li>
-                <li>Use the platform for unlawful, harmful, or safety-critical operational purposes.</li>
-                <li>Misrepresent demo outputs as certified or regulatory-grade traffic data.</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 platform 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 or planning 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">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">Questions: <strong
+            <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>
@@ -238,17 +247,17 @@
             <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">Drop a video file from any traffic camera.</p>
+                <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">Set a Counting Boundary</h3>
-                <p class="text-xs" style="color:#777;line-height:1.7">Mark two points to define a virtual line. Vehicles crossing this line will be counted & classified.</p>
+                <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 &amp; Export</h3>
-                <p class="text-xs" style="color:#777;line-height:1.7">Watch real-time charts populate as inference runs. Download annotated video, reports, and structured JSON when complete.</p>
+                <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>

frontend/js/initial.js

@@ -308,10 +308,14 @@ function closeOnboarding() {
     if (overlay) overlay.style.display = 'none';
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+function openOnboarding() {
     const onboard = document.getElementById('onboard-overlay');
     if (onboard) {
+        _obStep = 0;
+        document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
+        document.querySelectorAll('.onboard-dot').forEach((d, i)  => d.classList.toggle('active', i === _obStep));
+        document.getElementById('onboard-next').innerText = 'Next';
         onboard.style.display = 'flex';
         triggerIconPulse();
     }
-});
+}

frontend/js/vehicles.js

@@ -197,15 +197,19 @@ function switchTab(tab) {
 
         // =========== Keyboard Shortcuts ===========
         const TAB_KEYS = { '1': 'about', '2': 'overview', '3': 'run-details', '4': 'reports', '5': 'settings', '6': 'help', '7': 'feedback' };
+        function downloadArtifacts() {
+            const vid = document.body.dataset.lastVideoId;
+            if (vid) {
+                window.open(`bundle/${vid}`, '_blank');
+                showToast('Download started', 'success');
+            }
+        }
+
         document.addEventListener('keydown', function(e) {
             if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
             if (TAB_KEYS[e.key]) { switchTab(TAB_KEYS[e.key]); return; }
             if (e.key === 'd' || e.key === 'D') {
-                const vid = document.body.dataset.lastVideoId;
-                if (vid) {
-                    window.open(`bundle/${vid}`, '_blank');
-                    showToast('Download started', 'success');
-                }
+                downloadArtifacts();
             }
         });
 
@@ -1113,6 +1117,8 @@ function switchTab(tab) {
             document.getElementById('post-process-cards').classList.remove('hidden');
             const grid = document.getElementById('reports-grid');
             grid.classList.remove('hidden');
+            const mobileBtn = document.getElementById('mobile-download-wrap');
+            if (mobileBtn) mobileBtn.classList.remove('hidden');
             grid.innerHTML = '';
 
             data.files.forEach(name => {
@@ -1241,7 +1247,7 @@ function switchTab(tab) {
                 Want to try another video?
             </p>
             <p style="color:#a89f97;font-size:11px;margin:0">
-                Tap <b style="color:#f0ece6">&#9881; Settings</b> to reset &amp; re-run
+                Go to <b style="color:#f0ece6">&#9881; Settings</b> &amp; click 'Analyze again'
             </p>
             <div id="retry-bubble-arrow"></div>
         `;

frontend/vehicles.html

@@ -152,47 +152,45 @@
                         what gets built for production.
                     </p>
                     <p style="font-size:13px;color:#777">
-                        The production system will support RTSP live-stream input, interactive dashboards, REST APIs,
-                        and advanced analytics.
-                        This demo accepts video upload only.
+                        The production system will support live-streaming and more advanced analytics.
+                        This application only accepts video clips.
                     </p>
                 </div>
 
                 <div class="grid grid-cols-2 gap-12 pt-8 text-left border-t max-w-5xl mx-auto"
                     style="border-color:#1a1a1a">
                     <div class="space-y-4">
-                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Get
-                        </h4>
+                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Will Get Here</h4>
                         <ul class="text-xs space-y-3 pl-1">
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
-                                <span>Class-wise vehicle counts across 14 Indian road categories</span>
+                                <span>Class-wise vehicle counts</span>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
-                                <span>Directional flow analysis &mdash; incoming vs outgoing at any boundary</span>
+                                <span>Directional Flow Analysis &mdash; incoming vs outgoing</span>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
-                                <span>Congestion trends, peak detection, and temporal flow charts</span>
+                                <span>Congestion Analytics,Peak Detection, and temporal Trends</span>
                             </li>
                             <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                     style="color:#c89a6c"></i>
-                                <span>Downloadable reports (PDF/PNG) and annotated video exports</span>
+                                <span>Exportable Reports</span>
                             </li>
                         </ul>
                     </div>
                     <div class="space-y-4">
-                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Precision &
+                        <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Inference
                             Accuracy
                         </h4>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
-                            UrbanFlow provides an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
-                            may vary slightly across runs due to the nature of real-time frame-by-frame inference.
+                            UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. Results
+                            may vary slightly across runs due to frame-by-frame inference variability
                         </p>
                         <p class="text-xs leading-relaxed" style="color:#a89f97">
-                            For research or planning use, we recommend processing the same video 2–3 times and taking
-                            the average count for maximum reliability.
+                            For research or planning use, process the same footage 2–3 times 
+                            and average the results for improved reliability.
                         </p>
                     </div>
                 </div>
@@ -225,8 +223,8 @@
                 </div>
             </div>
             <div class="flex items-center space-x-6 text-xs font-bold text-white whitespace-nowrap">
-                <span id="proc-frames">0 / 0 Frames</span>
-                <span id="proc-pct">0%</span>
+                <span id="proc-frames">Awaiting Input</span>
+                <span id="proc-pct">Idle</span>
                 <div class="uf-select-wrap" id="live-palette-wrap">
                     <div class="uf-select-trigger" id="live-palette-trigger" onclick="ufSelectToggle('live-palette')">
                         <span class="uf-select-label" id="live-palette-label">Default</span>
@@ -255,16 +253,16 @@
             <!-- Empty State Overlay -->
             <div id="stats-empty-state" class="stats-empty-overlay">
                 <i class="fa-solid fa-chart-column text-4xl mb-4" style="color:#333"></i>
-                <span class="text-sm font-bold" style="color:#555">Processing not started</span>
-                <span class="text-[11px] mt-1" style="color:#444">Charts will populate in real-time once analysis
-                    begins</span>
+                <span class="text-sm font-bold" style="color:#555">Awaiting Processing</span>
+                <span class="text-[11px] mt-1" style="color:#444">Charts will update dynamically as analysis
+                    progresses.</span>
             </div>
 
             <!-- Congestion Index -->
             <div
                 class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
                 <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Real-time Congestion Index
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Congestion Index
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
                             <span class="info-tip">Count of active tracked vehicles visible in each processed
                                 frame.</span></span>
@@ -280,14 +278,13 @@
                 class="col-span-6 xl:col-span-3 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col items-center justify-center min-h-0">
                 <h3 class="font-bold text-slate-900 text-sm mb-2 self-start flex items-center">Directional Distribution
                     <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
-                        <span class="info-tip">Incoming vs outgoing vehicles analyzed within the spatial
-                            boundary.</span></span>
+                        <span class="info-tip">Incoming vs outgoing vehicles detected along the defined path</span></span>
                 </h3>
                 <div class="relative w-full flex-1 min-h-[180px] flex items-center justify-center">
                     <canvas id="doughnutChart"></canvas>
                     <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                         <span class="text-3xl font-black text-slate-900" id="cnt-total">0</span>
-                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Units</span>
+                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Total Count</span>
                         <span class="text-[9px] font-bold mt-1 uppercase tracking-wider" style="color:#8b5e3c"
                             id="cnt-pcu-wrap"
                             title="Passenger Car Units (IRC:106-1990) — normalizes mixed traffic for capacity analysis">
@@ -307,7 +304,7 @@
                                 spatial boundary.</span></span>
                     </h3>
                 </div>
-                <div class="text-[10px] text-slate-400 mb-3 uppercase tracking-widest">Inventory Breakdown</div>
+                <div class="text-[10px] text-slate-400 mb-3 uppercase tracking-widest">Class Breakdown</div>
                 <div class="flex-1 overflow-y-auto pr-2 space-y-2" id="class-breakdown"></div>
             </div>
 
@@ -315,13 +312,12 @@
             <div
                 class="col-span-12 xl:col-span-6 bg-white rounded-xl p-5 border border-slate-200 shadow-sm flex flex-col min-h-0">
                 <div class="flex justify-between items-center mb-2 relative">
-                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Category Dominance
+                    <h3 class="font-bold text-slate-900 text-sm flex items-center">Big Picture
                         <span class="info-wrap"><span class="info-btn"><i class="fa-solid fa-info"></i></span>
                             <span class="info-tip">Aggregated vehicle count grouped by dominant category.</span></span>
                     </h3>
                     <span
-                        class="text-[10px] text-slate-500 font-bold uppercase tracking-wider whitespace-nowrap">Dominant
-                        Intelligence</span>
+                        class="text-[10px] text-slate-500 font-bold uppercase tracking-wider whitespace-nowrap">Category Dominance</span>
                 </div>
                 <div class="flex-1 w-full relative min-h-[220px]">
                     <canvas id="dominanceChart"></canvas>
@@ -435,11 +431,10 @@
         <!-- TAB: Reports -->
         <div id="tab-reports" class="hidden flex-1 min-h-0 overflow-y-auto">
             <div id="reports-pending-message"
-                class="mb-4 text-center p-8 border border-[#222] bg-[#0a0a0a] rounded-xl flex flex-col items-center justify-center gap-4 shadow-sm min-h-[200px]">
-                <i id="reports-pending-icon" class="fa-solid fa-layer-group text-3xl text-[#c89a6c] opacity-50"></i>
+                class="mb-4 text-center p-8 flex flex-col items-center justify-center gap-4 min-h-[200px]">
                 <span id="reports-pending-text"
                     class="text-xs text-[#a89f97] font-medium tracking-wide uppercase leading-relaxed max-w-[240px]">
-                    Please return once processing is 100% complete to access artifacts.
+                    Return once processing is complete to access results.
                 </span>
             </div>
 
@@ -456,13 +451,19 @@
                         </h3>
                     </div>
                     <div class="flex-1 flex items-center justify-center" id="pcu-stats-card">
-                        <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>
+                        <div class="text-center text-slate-600 text-xs"><i></i><br>Available after processing</div>
                     </div>
                 </div>
             </div>
 
             <div id="reports-grid" class="hidden grid grid-cols-2 xl:grid-cols-3 gap-4"></div>
+
+            <!-- Mobile Download Button (visible at the very bottom of Artifacts tab after processing) -->
+            <div id="mobile-download-wrap" class="hidden lg:hidden flex justify-center mt-6 mb-4">
+                <button onclick="downloadArtifacts()" class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg active:scale-95" style="background:var(--cocoa-l);color:#000">
+                    <i class="fa-solid fa-download"></i> Download All
+                </button>
+            </div>
         </div>
 
         <!-- TAB: Settings -->
@@ -582,16 +583,16 @@
                         <div class="s-row" data-param="report">
                             <div>
                                 <div class="text-xs font-semibold text-slate-300">Chart Format</div>
-                                <div class="text-[10px] text-slate-500">Format for separate KPI chart files</div>
+                                <div class="text-[10px] text-slate-500">Format for each KPI chart</div>
                             </div>
                             <div class="uf-select-wrap" id="sv-report-wrap">
                                 <div class="uf-select-trigger" id="sv-report-trigger" onclick="ufSelectToggle('sv-report')">
-                                    <span class="uf-select-label" id="sv-report-label">PNG Image</span>
+                                    <span class="uf-select-label" id="sv-report-label">PNG</span>
                                     <i class="fa-solid fa-chevron-down uf-select-arrow" id="sv-report-arrow"></i>
                                 </div>
                                 <div class="uf-select-dropdown hidden" id="sv-report-dropdown">
-                                    <div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG Image')">PNG Image</div>
-                                    <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF Document')">PDF Document</div>
+                                    <div class="uf-select-option uf-select-option-active" data-value="png" onclick="ufSelectPick('sv-report','png','PNG Image')">PNG</div>
+                                    <div class="uf-select-option" data-value="pdf" onclick="ufSelectPick('sv-report','pdf','PDF Document')">PDF</div>
                                 </div>
                                 <input type="hidden" id="sv-report" value="png">
                             </div>
@@ -662,9 +663,8 @@
                                     <span class="info-wrap ml-1">
                                         <span class="info-btn" style="background:#1a1a1a;color:#888"><i
                                                 class="fa-solid fa-info"></i></span>
-                                        <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>
+                                        <span class="info-tip">Enable before processing completes 
+                                            to automatically download the report.</span>
                                     </span>
                                 </div>
                                 <div class="text-[10px] text-slate-500">Save reports automatically</div>
@@ -673,11 +673,11 @@
                                 <div class="toggle-thumb"></div>
                             </div>
                         </div>
-                        <div class="s-row hidden">
+                        <div class="s-row hidden"> 
                             <div>
                                 <div class="text-xs font-semibold text-slate-300">Interface Mode</div>
                                 <div class="text-[10px] text-slate-500">Locked to Professional Dark</div>
-                            </div>
+                            </div> 
                             <div class="text-xs font-bold text-white px-3 py-1 bg-slate-800 rounded-full">Dark Mode Only
                             </div>
                         </div>
@@ -714,7 +714,7 @@
                             <h3 class="font-bold text-white text-sm flex items-center">Navigator</h3>
                             <p class="text-[10px] mt-0.1 uppercase tracking-widest font-medium" style="color:#a89f97">
                                 Quick
-                                assistance and platform documentation</p>
+                                assistance & Documentation</p>
                         </div>
                     </div>
 
@@ -754,8 +754,7 @@
                                         style="color:#777">
                                         Auto-download failures are typically caused by browser popup blockers. Please
                                         ensure you have allowed popups for this site in your browser settings.
-                                        Alternatively, you can use the keyboard shortcut 'D' to trigger a bundled ZIP
-                                        report download once processing reaches 100%.
+                                        Alternatively, you can manually trigger the bundled ZIP download once processing reaches 100% by using the 'D' keyboard shortcut on Desktop, or tapping the 'Download All' button on Mobile.
                                     </div>
                                 </div>
                                 <div
@@ -768,9 +767,9 @@
                                     </button>
                                     <div id="h3-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
-                                        To analyze a new video, navigate to the 'Settings' tab and select the 'Analyze
-                                        Another Video' button. This will reset your current session state and return you
-                                        to the upload interface without requiring a full browser refresh.
+                                        To analyze a new video, go to 'Settings' and click 'Analyze again'
+                                        This resets current session state and return you
+                                        to the Home screen.
                                     </div>
                                 </div>
                                 <div
@@ -784,29 +783,21 @@
                                     </button>
                                     <div id="h4-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
-                                        In the field of computer vision, no model achieves 100% accuracy under all
-                                        conditions. UrbanFlow provides highly reliable analytical overviews, but
-                                        variables such as severe occlusion, extreme lighting, or complex
-                                        mis-classifications can occur. Our development goal is constant iteration toward
-                                        human-level perception.
+                                        UrbanFlow delivers an estimated accuracy of ±5–8% on dense mixed-traffic footage. While highly reliable, no computer vision model achieves 100% accuracy under all conditions. Results may vary slightly across runs due to frame-by-frame inference variability, severe occlusion, or extreme lighting. Our goal is constant iteration toward human-level perception.
                                     </div>
                                 </div>
                                 <div
                                     class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
                                     <button onclick="toggleHelp('h5')"
                                         class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
-                                        <span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis
-                                            and
-                                            which speed metrics are calculated?</span>
+                                        <span class="text-sm font-semibold" style="color:#a89f97">What is PCU analysis?</span>
                                         <i id="h5-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
                                     </button>
                                     <div id="h5-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
                                         Passenger Car Unit (PCU) is a standard metric used in transportation engineering
                                         to convert heterogeneous traffic (bikes, trucks, cars) into a common denominator
-                                        for capacity analysis. Speed profile metrics provide insights into velocity
-                                        distribution, helping identify congestion bottlenecks and overall throughput
-                                        efficiency.
+                                        for capacity analysis. This allows UrbanFlow to accurately calculate standardized traffic loads and identify congestion bottlenecks regardless of vehicle composition.
                                     </div>
                                 </div>
                             </div>
@@ -838,16 +829,12 @@
                                     class="bg-[#050505] border border-slate-900 rounded-lg overflow-hidden transition hover:border-[#1a1a1a]">
                                     <button onclick="toggleHelp('h7')"
                                         class="w-full px-6 py-5 text-left flex items-center justify-between hover:bg-[#080808] transition">
-                                        <span class="text-sm font-semibold" style="color:#a89f97">Why is this demo
-                                            focused on a single model?</span>
+                                        <span class="text-sm font-semibold" style="color:#a89f97">Why is this application designed to be simple and focused?</span>
                                         <i id="h7-icon" class="fa-solid fa-plus text-xs" style="color:#555"></i>
                                     </button>
                                     <div id="h7-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
-                                        This platform serves as a focused demonstration of a specific computer vision
-                                        model for requirements gathering. The full production suite integrates multiple
-                                        specialized models, real-time edge processing, and advanced telemetry designed
-                                        for complex enterprise-grade deployments.
+                                        This platform is intentionally built as a streamlined demo. We created it to allow users to explore and provide us with valuable feedback. This user feedback directly helps us continuously improve our models and guides the development of our full, enterprise-grade production suite.
                                     </div>
                                 </div>
                                 <div
@@ -906,7 +893,7 @@
                                     </button>
                                     <div id="h11-ans" class="hidden px-6 pb-6 text-xs leading-relaxed"
                                         style="color:#777">
-                                        Our roadmap includes multi-model fusion, real-time edge processing, advanced
+                                        Our roadmap includes multi-model fusion, real-time processing, advanced
                                         ANPR integration, and deeper predictive analytics to support smarter city
                                         infrastructure.
                                     </div>
@@ -1169,7 +1156,7 @@
             <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">
                 <li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is
-                    not a production service.</li>
+                    not yet a complete production service.</li>
                 <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>
                 <li>We do not use your footage to train models, sell it, or share it with any third party.</li>
@@ -1192,7 +1179,7 @@
             <button onclick="closeAppModal('termsModal')"
                 style="position:absolute;top:16px;right:18px;background:none;border:none;color:#a89f97;font-size:18px;cursor:pointer">&times;</button>
             <h2 style="color:#f0ece6;font-size:1.1rem;font-weight:700;margin-bottom:8px">Terms &amp; Conditions</h2>
-            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this demo platform, you agree to the
+            <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">You can:</p>
             <ul