feedback updated; minor key improvements..

README.md

@@ -6,48 +6,37 @@ colorTo: yellow
 sdk: docker
 pinned: true
 license: apache-2.0
-short_description: Monitoring Made Easy
+short_description: High performance, cloud native perception engine
 thumbnail: >-
   https://cdn-uploads.huggingface.co/production/uploads/66c6048d0bf40704e4159a23/2EUWmy9YzOM4eHft6E04y.png
 ---
 
-# UrbanFlow 🚛
-Monitoring made Easy with Computer Vision
+# Perception365: UrbanFlow
 
-Full-stack traffic analytics dashboard. YOLO + ByteTrack backend processes uploaded videos, counts vehicles crossing a user-drawn line, and streams results to the browser in real time via WebSocket.
+Welcome to the official repository for **UrbanFlow** — a high-performance, cloud-native perception engine engineered for the complexities of modern urban mobility and traffic intelligence.
 
-## Stack
+> Transforming raw visual data into institutional-grade actionable insights.
 
-- **Backend**: FastAPI, Ultralytics YOLO (OpenVINO), ByteTrack, OpenCV
-- **Frontend**: Vanilla HTML/JS, TailwindCSS CDN, Chart.js
-- **Infra**: Docker, CPU-only inference
+The gap between curated benchmarks and operational reality is where most vision systems fail. Generic datasets often overlook the chaotic density, extreme occlusion, and heterogeneous vehicle mix of real-world urban intersections. 
 
-## Run Locally with Docker
-save tokens in .env 
-```bash
-HF_TOKEN=hf_xxxxx...
-```
+**UrbanFlow** is designed to bridge this gap.
 
-```bash
-docker build -t urbanflow .
-docker run -p 7860:7860 --env-file .env urbanflow
+### Strategic Vision
+We focus on **production-grade cloud inference**, moving beyond the constraints and maintenance overhead of hardware-locked edge devices. By leveraging scalable cloud architectures, UrbanFlow delivers high-throughput analytics and sub-pixel tracking accuracy for transport authorities and smart city planners.
 
-```
+### Core Capabilities
+*   **Precision Class Detection**: Optimized for 14+ vehicle classes including those unique to the Indian road environment.
+*   **Institutional Metrics**: Native support for PCU analysis (Passenger Car Units) aligned with IRC:106-1990 standards.
+*   **Temporal Flow Tracking**: Advanced pixel-displacement speed profiling and temporal congestion mapping.
+*   **Enterprise Interoperability**: Structured JSON/CSV telemetry designed for direct integration with Transport Management Systems (TMS).
 
-Open `http://localhost:7860`
+### Our Methodology
+Each model in the UrbanFlow ecosystem is validated against raw, uncontrolled urban and highway footage. We prioritize:
+- **Resilience**: Robust tracking through dense traffic saturation and adverse lighting.
+- **Scalability**: High-performance inference pipelines that scale with institutional demand.
+- **Integrity**: Gated access for verified researchers and planning authorities to ensure methodological rigor.
 
-## Run Locally
+Perception is the foundation of the modern smart city.  
+We are building the intelligence layer that makes urban flow actionable.
 
-```bash
-pip install -r requirements.txt
-python backend/server.py
-```
-
-## Flow
-
-1. Select Traffic Analytics module
-2. Upload video file
-3. System auto-calculates optimal inference settings (adjustable)
-4. Draw counting line on first frame
-5. Engine processes frames, dashboard updates in real time
-6. View run details and live analytics
+**Built for Precision. Optimized for the Cloud.**

frontend/vehicles.html

@@ -442,6 +442,24 @@
             color: #fff;
             box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
         }
+        .fb-emoji-btn {
+            background: #111;
+            border: 1px solid #2a2a2a;
+            border-radius: 8px;
+            color: #555;
+            flex: 1;
+            text-align: center;
+            padding: 10px 4px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .fb-emoji-btn:hover { border-color: #444; color: #888; }
+        .fb-emoji-btn.active {
+            border-color: var(--cocoa-l);
+            background: #1a1a1a;
+            color: var(--cocoa-l);
+            box-shadow: 0 0 15px rgba(200, 154, 108, 0.15);
+        }
     </style>
 </head>
 
@@ -1125,8 +1143,8 @@
 
         <!-- TAB: Feedback -->
         <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:24px">
-            <div class="max-w-6xl mx-auto w-full">
-                <div class="bg-black border border-slate-800 rounded-2xl p-10 shadow-2xl space-y-10">
+            <div class="w-full h-full">
+                <div class="bg-black border border-slate-800 rounded-2xl p-10 shadow-2xl space-y-10 min-h-full">
                     <div class="text-center space-y-3">
                         <h2 class="text-2xl font-bold tracking-tight" style="color:#f0ece6">Share Your Feedback</h2>
                         <p class="text-xs" style="color:#777">We are actively refining UrbanFlow. Your technical insights directly drive our roadmap.</p>
@@ -1149,17 +1167,44 @@
                                         <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
                                     </div>
                                 </div>
+                                <div>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Recommend Product</label>
+                                    <div class="flex gap-2" id="fb-recommend">
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Unlikely')"><i class="fa-solid fa-face-frown text-xl"></i><span class="block mt-1 text-[8px] uppercase">Unlikely</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Maybe')"><i class="fa-solid fa-face-meh text-xl"></i><span class="block mt-1 text-[8px] uppercase">Maybe</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Likely')"><i class="fa-solid fa-face-smile text-xl"></i><span class="block mt-1 text-[8px] uppercase">Likely</span></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-recommend', 'Highly')"><i class="fa-solid fa-face-grin-stars text-xl"></i><span class="block mt-1 text-[8px] uppercase">Highly</span></div>
+                                    </div>
+                                </div>
+                            </div>
 
+                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+                                <div>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Security</label>
+                                    <div class="flex gap-2" id="fb-security">
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-security', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Integrations</label>
+                                    <div class="flex gap-2" id="fb-integration">
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-integration', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                    </div>
+                                </div>
                                 <div>
-                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Primary Use Case</label>
-                                    <select class="fb-select w-full" id="fb-usecase">
-                                        <option value="" disabled selected>Select your use case</option>
-                                        <option value="research">Academic / Traffic Research</option>
-                                        <option value="planning">Urban Planning & Capacity</option>
-                                        <option value="highway">Highway Authority (NHAI/State)</option>
-                                        <option value="smartcity">Smart City Integrator</option>
-                                        <option value="other">Other Institutional</option>
-                                    </select>
+                                    <label class="text-[10px] font-bold uppercase tracking-widest block mb-3" style="color:#a89f97">Ease of Use</label>
+                                    <div class="flex gap-2" id="fb-ease">
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Poor')"><i class="fa-solid fa-face-frown text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Fair')"><i class="fa-solid fa-face-meh text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Good')"><i class="fa-solid fa-face-smile text-lg"></i></div>
+                                        <div class="fb-emoji-btn" onclick="setEmoji(this, 'fb-ease', 'Great')"><i class="fa-solid fa-face-grin-stars text-lg"></i></div>
+                                    </div>
                                 </div>
                             </div>
 
@@ -1332,12 +1377,29 @@
 
         // =========== Feedback ===========
         let _fbRating = 0;
+        let _fbEmojis = {
+            'fb-recommend': null,
+            'fb-security': null,
+            'fb-integration': null,
+            'fb-ease': null
+        };
+
         function setRating(n) {
             _fbRating = n;
             document.querySelectorAll('.fb-star').forEach(s => {
                 s.classList.toggle('active', parseInt(s.dataset.v) <= n);
             });
         }
+
+        function setEmoji(el, qId, val) {
+            _fbEmojis[qId] = val;
+            const container = document.getElementById(qId);
+            if (container) {
+                container.querySelectorAll('.fb-emoji-btn').forEach(btn => btn.classList.remove('active'));
+            }
+            el.classList.add('active');
+        }
+
         async function submitFeedback() {
             const type = document.getElementById('fb-type').value;
             const text = document.getElementById('fb-text').value.trim();
@@ -1348,13 +1410,14 @@
                 priorities.push(c.getAttribute('data-val'));
             });
 
-            if (!text && _fbRating === 0) {
-                showToast("Please provide a rating or some word feedback", "error");
+            if (!text && _fbRating === 0 && !_fbEmojis['fb-recommend'] && !_fbEmojis['fb-security'] && !_fbEmojis['fb-integration'] && !_fbEmojis['fb-ease']) {
+                showToast("Please provide a rating, some emojis, or word feedback", "error");
                 return;
             }
 
             const payload = {
                 rating: _fbRating,
+                emojis: _fbEmojis,
                 type: type,
                 usecase: usecase,
                 priorities: priorities,
@@ -1370,6 +1433,14 @@
                 showToast('Thank you for your feedback!', 'success');
                 document.getElementById('fb-text').value = '';
                 document.querySelectorAll('#fb-priorities .fb-chip').forEach(c => c.classList.remove('active'));
+                
+                // Reset Emojis
+                Object.keys(_fbEmojis).forEach(k => {
+                    _fbEmojis[k] = null;
+                    const c = document.getElementById(k);
+                    if (c) c.querySelectorAll('.fb-emoji-btn').forEach(b => b.classList.remove('active'));
+                });
+
                 _fbRating = 0;
                 setRating(0);
             } else {
@@ -2057,6 +2128,16 @@
                         adToggle.style.pointerEvents = 'none';
                         adToggle.style.opacity = '0.4';
                     }
+                    const jsonToggle = document.getElementById('sv-export-json');
+                    if (jsonToggle) {
+                        jsonToggle.style.pointerEvents = 'none';
+                        jsonToggle.style.opacity = '0.4';
+                    }
+                    const csvToggle = document.getElementById('sv-export-csv');
+                    if (csvToggle) {
+                        csvToggle.style.pointerEvents = 'none';
+                        csvToggle.style.opacity = '0.4';
+                    }
 
                     // Show New Analysis button in Settings
                     const newWrap = document.getElementById('new-analysis-wrap');