export options, product manager mindset..

backend/visualize.py

@@ -169,7 +169,7 @@ def export_csv(raw_events, out_dir):
         writer.writerows(raw_events)
     return "raw_data.csv"
 
-def spatial_heatmap(heatmap_points, video_path, out_dir):
+def spatial_heatmap(heatmap_points, video_path, out_dir, fmt="png"):
     if not heatmap_points or not video_path or not os.path.exists(video_path):
         return None
     
@@ -200,9 +200,21 @@ def spatial_heatmap(heatmap_points, video_path, out_dir):
     overlay = frame.copy()
     overlay[mask] = cv2.addWeighted(frame[mask], 0.3, heatmap[mask], 0.7, 0).squeeze()
 
-    path = os.path.join(out_dir, "heatmap.png")
-    cv2.imwrite(path, overlay)
-    return "heatmap.png"
+    if fmt == "pdf":
+        # Wrap OpenCV image in matplotlib for PDF export
+        overlay_rgb = cv2.cvtColor(overlay, cv2.COLOR_BGR2RGB)
+        fig, ax = plt.subplots(figsize=(10, 6), facecolor=C_BG)
+        ax.imshow(overlay_rgb)
+        ax.set_title("Spatial Density Heatmap", fontsize=13, fontweight="700", color=C_PRIMARY, pad=14)
+        ax.axis('off')
+        path = os.path.join(out_dir, "heatmap.pdf")
+        fig.savefig(path, dpi=200, bbox_inches="tight", facecolor=C_BG, edgecolor="none")
+        plt.close(fig)
+        return "heatmap.pdf"
+    else:
+        path = os.path.join(out_dir, "heatmap.png")
+        cv2.imwrite(path, overlay)
+        return "heatmap.png"
 
 
 def generate_all(data, model_classes, out_dir, report_format="png"):
@@ -230,7 +242,7 @@ def generate_all(data, model_classes, out_dir, report_format="png"):
         lambda: congestion_chart(data.get("congestion", []), out_dir, fmt),
         lambda: class_dominance(data["class_in"], data["class_out"], model_classes, out_dir, fmt),
         lambda: confidence_dist(data.get("conf_scores", []), out_dir, fmt),
-        lambda: spatial_heatmap(heatmap_points, video_path, out_dir),
+        lambda: spatial_heatmap(heatmap_points, video_path, out_dir, fmt),
         lambda: export_csv(raw_events, out_dir),
     ]:
         name = fn()

frontend/initial.html

@@ -98,20 +98,15 @@
                 Automated <br>Vision Intelligence
             </h1>
             <p class="font-bold mb-8 text-sm uppercase tracking-[0.2em] flex items-center" style="color:#a89f97">
-                <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">v1.0 CORE</span>
-                Powered by Deep Learning 
+                <span class="core-badge px-3 py-1 rounded-full text-[10px] mr-3">DEMO</span>
+                Cloud-Native 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-5 text-xl" style="color:#c89a6c"></i> Real-time
-                    spatial detection and tracking</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Multi-class
-                    object categorization</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Bidirectional
-                    movement analysis</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> High-performance
-                    multi-object tracking</li>
-                <li class="flex items-center"><i class="fa-solid fa-check mr-5 text-xl" style="color:#c89a6c"></i> Intelligent
-                    processing optimization</li>
+                <li class="flex items-center"><i class="fa-solid fa-check 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-5 text-xl" style="color:#c89a6c"></i> Granular vehicle counts across 14 Indian road classes</li>
+                <li class="flex items-center"><i class="fa-solid fa-check 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-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-5 text-xl" style="color:#c89a6c"></i> Built for Indian roads &mdash; tested on real field conditions</li>
             </ul>
         </div>
 

frontend/vehicles.html

@@ -363,10 +363,10 @@
 
         <!-- TAB: About -->
         <div id="tab-about" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="bg-black border border-slate-800 rounded-xl p-12 shadow-2xl space-y-12 min-h-full flex flex-col justify-center">
+            <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">
+                <div class="max-w-5xl mx-auto bg-white rounded-xl border border-slate-200 shadow-sm p-10 space-y-8">
                 <div class="text-center">
-                    <p class="text-[13px] font-montserrat font-bold italic leading-relaxed max-w-3xl mx-auto"
-                        style="color:#a89f97">
+                    <p class="text-sm italic font-bold leading-relaxed max-w-3xl mx-auto" style="color:#c89a6c;font-family:'Montserrat',sans-serif">
                         &ldquo;Traffic data has always existed on Indian roads &mdash; in the movement of every vehicle,
                         every crossing, every congested junction.
                         UrbanFlow is built to read that data precisely, and return it in a form that practitioners can
@@ -374,37 +374,43 @@
                     </p>
                 </div>
 
-                <div class="space-y-6 leading-relaxed text-sm text-center max-w-5xl mx-auto" style="color:#a89f97">
+                <div class="space-y-5 leading-relaxed text-sm text-center" style="color:#a89f97">
                     <p>
-                        UrbanFlow is a computer vision system purpose-built for traffic analysis on Indian roads.
-                        It processes video footage and returns structured outputs &mdash; vehicle counts by class,
-                        directional flow totals, and temporal traffic patterns &mdash; without requiring new hardware
-                        or on-site installation.
+                        UrbanFlow is a cloud-based traffic intelligence platform that turns raw camera footage from Indian roads 
+                        into structured, actionable data &mdash; vehicle counts by class, directional flow totals, congestion patterns, 
+                        and downloadable reports &mdash; without requiring new hardware or on-site installation.
                     </p>
                     <p>
-                        The system is designed for practitioners working in traffic planning, urban mobility research,
-                        and transport infrastructure assessment. Footage is submitted, inference runs in the cloud,
-                        and results are returned as structured KPI outputs and downloadable reports.
+                        This is a <strong style="color:#f0ece6">public demo</strong>. It exists so that traffic engineers, urban planners, 
+                        transport authorities, and researchers can evaluate what UrbanFlow delivers &mdash; and tell us what they actually need.
+                        We are in the <strong style="color:#f0ece6">requirements gathering phase</strong>, and your feedback directly shapes 
+                        what gets built for production.
                     </p>
+                    <p style="font-size:11px;color:#666">
+                        The production system will support RTSP live-stream input, institutional dashboards, REST APIs, and advanced analytics. 
+                        This demo serves video upload only.
+                    </p>
+                </div>
+
                     <div class="grid grid-cols-3 gap-8 pt-8 text-left border-t border-slate-900 max-w-5xl mx-auto">
                         <div class="space-y-4">
-                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What It Does</h4>
+                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What You Get</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>Vehicle detection across 14 classes</span>
+                                    <span>Class-wise vehicle counts across 14 Indian road categories</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>Bidirectional crossing count at defined boundary</span>
+                                    <span>Directional flow analysis &mdash; incoming vs outgoing at any boundary</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>Temporal flow analysis per second of footage</span>
+                                    <span>Congestion trends, peak detection, and temporal flow charts</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>Annotated video export with spatial overlays</span>
+                                    <span>Downloadable reports (PDF/PNG) and annotated video exports</span>
                                 </li>
                             </ul>
                         </div>
@@ -413,44 +419,54 @@
                             <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>Upload footage from any existing camera source</span>
+                                    <span>Upload footage from any existing camera &mdash; phone, CCTV, dashcam</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>Define a spatial boundary to count vehicle crossings</span>
+                                    <span>Draw a counting boundary on the first frame</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>Inference runs in the cloud &mdash; no on-site compute required</span>
+                                    <span>Inference runs in the cloud &mdash; no local GPU or setup needed</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>Download structured reports and annotated outputs</span>
+                                    <span>Review live KPIs and download bundled artifacts when complete</span>
                                 </li>
                             </ul>
                         </div>
                         <div class="space-y-4">
-                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">Where It's Going</h4>
+                            <h4 class="font-bold text-[13px] uppercase tracking-wider" style="color:#f0ece6">What's Coming</h4>
                             <ul class="text-xs space-y-3 pl-1" style="color:#a89f97">
                                 <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                         style="color:#8b5e3c"></i>
-                                    <span>Cloud-native inference &mdash; horizontally scalable for concurrent institutional sessions</span>
+                                    <span>RTSP live-stream support &mdash; connect directly to IP cameras</span>
                                 </li>
                                 <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                         style="color:#8b5e3c"></i>
-                                    <span>Per-analysis and subscription pricing model for government and research clients</span>
+                                    <span>REST API for integration with city ATCC and ITS platforms</span>
                                 </li>
                                 <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                         style="color:#8b5e3c"></i>
-                                    <span>REST API layer for direct integration with city ATCC and ITS platforms</span>
+                                    <span>Advanced analytics &mdash; speed estimation, helmet compliance, illegal parking</span>
                                 </li>
                                 <li class="flex items-start gap-3"><i class="fa-solid fa-circle text-[5px] mt-1.5"
                                         style="color:#8b5e3c"></i>
-                                    <span>Production deployment pathway via institutional licensing and MoU agreements</span>
+                                    <span>Institutional deployment with dedicated SLAs and onboarding</span>
                                 </li>
                             </ul>
                         </div>
                     </div>
+
+                    <div class="text-center pt-6 border-t border-slate-900">
+                        <p class="text-[11px]" style="color:#666">
+                            We are an applied research team &mdash; using state-of-the-art detection models, fine-tuned on Indian traffic datasets, 
+                            to build systems that work in production. Not a black box. Not a benchmark demo. A working tool, built for real roads.
+                        </p>
+                        <p class="text-[10px] mt-3" style="color:#555">
+                            Feedback, collaboration, or questions: <strong style="color:#c89a6c">support@urbanflow.in</strong>
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1491,6 +1507,15 @@
                     document.getElementById('proc-label').innerText = 'Complete';
                     document.getElementById('proc-bar').style.width = '100%';
                     document.getElementById('proc-pct').innerText = '100%';
+                    // Force frame counter to n/n
+                    const framesEl = document.getElementById('proc-frames');
+                    if (framesEl) {
+                        const parts = framesEl.innerText.split('/');
+                        if (parts.length === 2) {
+                            const total = parts[1].trim().replace(' Frames', '');
+                            framesEl.innerText = `${total} / ${total} Frames`;
+                        }
+                    }
 
                     // Update Run Tab Badge
                     const badge = document.getElementById('results-status-badge');
@@ -1570,6 +1595,7 @@
             'confidence_dist.pdf': { title: 'Confidence Curve', desc: 'Distribution of detection confidences' },
             'annotated.mp4': { title: 'Annotated Video Export', desc: 'Rendered video with tracking overlays' },
             'heatmap.png': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
+            'heatmap.pdf': { title: 'Spatial Density Heatmap', desc: 'Aggregated path utilization mapping' },
             'raw_data.csv': { title: 'Raw Analytics Export', desc: 'Comma-separated values of all crossings' }
         };
 
@@ -1672,13 +1698,13 @@
             <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">
-                <li>Footage you submit is processed for detection and discarded immediately. Nothing is saved on our
-                    servers.</li>
-                <li>We do not use your footage to train models, sell it, or share it with anyone.</li>
-                <li>If you export an annotated video, only you can save it (download) on your device. We never receive a
-                    copy.</li>
-                <li>We do not use advertising cookies or behavioral tracking. We do not use cookies on this site.</li>
-                <li>For any queries contact: <strong style="color:#c89a6c">support@urbanflow.in</strong></li>
+                <li>This is a <strong style="color:#f0ece6">public demo</strong> hosted on Hugging Face Spaces. It is not a 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>
+                <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@urbanflow.in</strong></li>
             </ul>
             <p style="color:#555;font-size:10px;margin-top:20px">&mdash; Team UrbanFlow</p>
         </div>
@@ -1692,24 +1718,26 @@
             <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 platform, you agree to the
+            <p style="color:#a89f97;font-size:11px;margin-bottom:20px">By using this demo platform, you agree to the
                 following terms.</p>
             <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You can:</p>
             <ul
                 style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
-                <li>Use the platform to evaluate UrbanFlow&rsquo;s traffic detection capabilities.</li>
-                <li>Export annotated video outputs to your own device for personal review.</li>
-                <li>Contact us with feedback, suggestions, or questions.</li>
+                <li>Use this demo 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@urbanflow.in</strong>.</li>
+                <li>Reference this demo in research or internal evaluation, with proper attribution.</li>
             </ul>
             <p style="color:#c89a6c;font-size:11px;font-weight:700;margin-bottom:6px">You cannot:</p>
             <ul
                 style="color:#a89f97;font-size:11px;line-height:1.9;padding-left:16px;list-style:disc;margin-bottom:16px">
-                <li>Share, redistribute, or publicly post outputs without written permission.</li>
-                <li>Reverse-engineer or try to extract the model or attempt to extract its workflow under the hood.</li>
-                <li>Use the platform for unlawful or harmful purposes.</li>
+                <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>
             </ul>
-            <p style="color:#a89f97;font-size:11px">The platform is provided as-is for demonstration purposes only.
-                Outputs are not intended for operational or safety-critical use.</p>
+            <p style="color:#a89f97;font-size:11px">This platform is provided as-is for <strong style="color:#f0ece6">demonstration and evaluation purposes only</strong>.
+                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">Questions: <strong
                     style="color:#c89a6c">support@urbanflow.in</strong></p>
         </div>