ui/ux enhancements..

backend/server.py

@@ -253,6 +253,8 @@ async def ws_run(ws: WebSocket):
             "pixels": cfg.get("pixels", 0),
         }
         result["engine_config"] = cfg
+        result["export_json"] = data.get("export_json", False)
+        result["export_csv"] = data.get("export_csv", False)
         run_results[video_id] = result
         await ws.send_text(json.dumps({
             "done": True,

backend/visualize.py

@@ -236,22 +236,28 @@ def generate_all(data, model_classes, out_dir, report_format="png"):
     heatmap_points = data.get("heatmap_points", [])
     raw_events = data.get("raw_events", [])
 
-    files = []
-    for fn in [
+    tasks = [
         lambda: direction_pie(total_in, total_out, out_dir, fmt),
         lambda: flow_histogram(data.get("flow_times", []), out_dir, fmt),
         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, fmt),
-        lambda: export_csv(raw_events, out_dir),
-        lambda: export_json(
+    ]
+
+    if data.get("export_csv", False):
+        tasks.append(lambda: export_csv(raw_events, out_dir))
+    
+    if data.get("export_json", False):
+        tasks.append(lambda: export_json(
             data,
             data.get("video_meta", {}),
             data.get("engine_config", {}),
             out_dir,
-        ),
-    ]:
+        ))
+
+    files = []
+    for fn in tasks:
         name = fn()
         if name:
             files.append(name)

frontend/vehicles.html

@@ -467,8 +467,7 @@
                 class="text-[10px] font-bold uppercase tracking-widest transition w-full text-center py-1 rounded"
                 style="color:#a89f97" onmouseover="this.style.color='#c89a6c'"
                 onmouseout="this.style.color='#a89f97'">Terms &amp; Conditions</button>
-            <p class="text-[9px] mt-1" style="color:#333">&#169; 2026 UrbanFlow</p>
-            <p class="text-[8px] mt-0.5" style="color:#222" title="Keyboard shortcuts: 1-6 switch tabs, D downloads artifacts">⌨ Press 1-6 for tabs, D for download</p>
+            <p class="text-[9px] mt-1 mb-1" style="color:#333">&#169; 2026 UrbanFlow</p>
         </div>
     </aside>
 
@@ -740,9 +739,12 @@
                                 class="text-[10px] text-slate-400 mt-0.5 uppercase tracking-widest font-medium text-center">
                                 Execution Telemetry</p>
                         </div>
-                        <div id="results-status-badge"
-                            class="px-3 py-1.5 bg-amber-900/30 border border-amber-800/50 text-amber-500 text-[10px] font-bold rounded-full uppercase tracking-widest shadow-sm flex items-center gap-2">
-                            <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>System Standby
+                        <div class="flex items-center gap-3">
+                            <button id="run-analyze-again-btn" onclick="switchTab('settings')" class="hidden px-4 py-1.5 bg-[#c89a6c] text-white text-[10px] font-bold rounded-full shadow-sm hover:bg-[#8b5e3c] transition-colors"><i class="fa-solid fa-gear mr-1"></i> Configure & Analyze Again</button>
+                            <div id="results-status-badge"
+                                class="px-3 py-1.5 bg-amber-900/30 border border-amber-800/50 text-amber-500 text-[10px] font-bold rounded-full uppercase tracking-widest shadow-sm flex items-center gap-2">
+                                <div class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></div>System Standby
+                            </div>
                         </div>
                     </div>
                     <div class="p-8">
@@ -817,6 +819,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-4 border border-[#222] bg-[#0a0a0a] rounded-xl flex items-center justify-center gap-3 shadow-sm">
+                <i class="fa-solid fa-circle-notch fa-spin text-[#c89a6c]"></i>
+                <span class="text-xs text-[#a89f97] font-medium tracking-wide uppercase">Generating artifacts & rendering analytics... Please wait</span>
+            </div>
             <div id="reports-pending" class="grid grid-cols-2 xl:grid-cols-3 gap-4 w-full">
                 <!-- Skeleton Loader 1 -->
                 <div class="bg-[#0a0a0a] rounded-xl border border-[#222] shadow-sm flex flex-col overflow-hidden animate-pulse">
@@ -887,9 +893,9 @@
 
         <!-- TAB: Settings -->
         <div id="tab-settings" class="hidden flex-1 min-h-0 overflow-y-auto">
-            <div class="grid grid-cols-3 gap-6 w-full">
+            <div class="grid grid-cols-2 gap-6 w-full">
                 <!-- Processing Parameters -->
-                <div class="col-span-2 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+                <div class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
                     <div class="px-6 py-4 border-b border-slate-100 bg-slate-50/50">
                         <h3 class="font-bold text-slate-800 text-sm flex items-center">Inference Configuration Profile
                             <span class="info-wrap">
@@ -1016,13 +1022,41 @@
                     </div>
                 </div>
 
-                <!-- Display Preferences -->
+                <!-- Artifact Generation Settings -->
                 <div
                     class="col-span-1 bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
                     <div class="px-5 py-3 border-b border-slate-100 bg-slate-50/50">
-                        <h3 class="font-bold text-slate-800 text-sm">Display Preferences</h3>
+                        <h3 class="font-bold text-slate-800 text-sm">Artifact Generation Settings</h3>
                     </div>
                     <div class="px-5 py-4 flex-1 flex flex-col">
+                        <div class="s-row">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">Export Run Details (JSON)
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Include analysis.json payload with all run parameters and data structures.</span>
+                                    </span>
+                                </div>
+                                <div class="text-[10px] text-slate-400">Structurally represented technical details</div>
+                            </div>
+                            <div class="toggle-track" id="sv-export-json" onclick="this.classList.toggle('active')">
+                                <div class="toggle-thumb"></div>
+                            </div>
+                        </div>
+                        <div class="s-row">
+                            <div>
+                                <div class="text-xs font-semibold text-slate-700 flex items-center">Export CSV Results
+                                    <span class="info-wrap ml-1">
+                                        <span class="info-btn"><i class="fa-solid fa-info"></i></span>
+                                        <span class="info-tip">Include frame-by-frame data in raw CSV format.</span>
+                                    </span>
+                                </div>
+                                <div class="text-[10px] text-slate-400">Include raw metrics and detections</div>
+                            </div>
+                            <div class="toggle-track" id="sv-export-csv" onclick="this.classList.toggle('active')">
+                                <div class="toggle-thumb"></div>
+                            </div>
+                        </div>
                         <div class="s-row">
                             <div>
                                 <div class="text-xs font-semibold text-slate-700 flex items-center">Auto-Download Report
@@ -1070,43 +1104,57 @@
 
         <!-- TAB: Feedback -->
         <div id="tab-feedback" class="hidden flex-1 min-h-0 overflow-y-auto" style="padding:16px">
-            <div class="max-w-2xl mx-auto">
+            <div class="max-w-4xl mx-auto w-full">
                 <div class="bg-black border border-slate-800 rounded-xl p-8 shadow-2xl space-y-6">
                     <div class="text-center">
                         <h2 class="text-xl font-bold" style="color:#f0ece6">Share Your Feedback</h2>
                         <p class="text-xs mt-2" style="color:#777">We're in the requirements-gathering phase. Your input directly shapes what gets built.</p>
                     </div>
 
-                    <div class="space-y-4">
-                        <div>
-                            <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Overall Experience</label>
-                            <div class="fb-stars" id="fb-stars">
-                                <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
-                                <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
-                                <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
-                                <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
-                                <span class="fb-star" data-v="5" onclick="setRating(5)">&#9733;</span>
+                    <div class="space-y-6">
+                        <div class="grid grid-cols-2 gap-6">
+                            <div>
+                                <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Overall Experience</label>
+                                <div class="fb-stars" id="fb-stars">
+                                    <span class="fb-star" data-v="1" onclick="setRating(1)">&#9733;</span>
+                                    <span class="fb-star" data-v="2" onclick="setRating(2)">&#9733;</span>
+                                    <span class="fb-star" data-v="3" onclick="setRating(3)">&#9733;</span>
+                                    <span class="fb-star" data-v="4" onclick="setRating(4)">&#9733;</span>
+                                    <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-2" 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</option>
+                                </select>
                             </div>
                         </div>
 
                         <div>
                             <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Category</label>
-                            <select class="fb-select" id="fb-type">
+                            <select class="fb-select w-full" id="fb-type">
                                 <option value="general">General Feedback</option>
-                                <option value="bug">Bug Report</option>
-                                <option value="feature">Feature Request</option>
-                                <option value="accuracy">Detection Accuracy</option>
-                                <option value="ux">User Experience</option>
+                                <option value="bug">Bug Report / Processing Failure</option>
+                                <option value="feature">Feature Request / Enhancements</option>
+                                <option value="accuracy">Detection Accuracy (Misses/False Positives)</option>
+                                <option value="ux">User Experience / Interface</option>
                             </select>
                         </div>
 
                         <div>
                             <label class="text-[10px] font-bold uppercase tracking-widest block mb-2" style="color:#a89f97">Details</label>
-                            <textarea class="fb-textarea" id="fb-text" placeholder="Tell us what worked, what didn't, or what you'd like to see..."></textarea>
+                            <textarea class="fb-textarea w-full min-h-[140px]" id="fb-text" placeholder="Please provide specific details. If reporting accuracy issues, mention vehicle types or lighting conditions..."></textarea>
                         </div>
 
-                        <button onclick="submitFeedback()" class="w-full py-3 font-bold text-sm rounded-full transition hover:scale-[1.02] active:scale-95"
-                            style="background:#0a0a0a;border:1px solid var(--cocoa);color:var(--cocoa-l)">
+                        <button onclick="submitFeedback()" class="w-full py-4 font-bold text-sm rounded-xl transition hover:scale-[1.01] active:scale-95 shadow-lg"
+                            style="background:#111;border:1px solid var(--cocoa);color:var(--cocoa-l)">
                             Submit Feedback <i class="fa-solid fa-paper-plane ml-2 text-[10px]"></i>
                         </button>
                     </div>
@@ -1774,6 +1822,9 @@
                 track_id: document.getElementById('chip-track_id').classList.contains('active')
             };
 
+            const exportJson = document.getElementById('sv-export-json').classList.contains('active');
+            const exportCsv = document.getElementById('sv-export-csv').classList.contains('active');
+
             // Apply to config
             _params.config.imgsz = imgsz;
             _params.config.conf = conf;
@@ -1791,6 +1842,11 @@
             document.getElementById('proc-label').innerText = 'Processing';
 
             // Reset Run Tab Results to Awaiting
+            const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
+            if (analyzeAgainBtn) {
+                analyzeAgainBtn.classList.add('hidden');
+            }
+
             const badge = document.getElementById('results-status-badge');
             if (badge) {
                 badge.innerText = 'Processing';
@@ -1815,6 +1871,8 @@
                     config: _params.config,
                     annotated_video: annotated,
                     annotated_options: annotated_options,
+                    export_json: exportJson,
+                    export_csv: exportCsv,
                     report_format: reportFmt
                 }));
             };
@@ -1904,6 +1962,11 @@
                         badge.className = 'px-2.5 py-1 bg-white text-black text-[10px] font-bold rounded-full uppercase tracking-tighter';
                     }
 
+                    const analyzeAgainBtn = document.getElementById('run-analyze-again-btn');
+                    if (analyzeAgainBtn) {
+                        analyzeAgainBtn.classList.remove('hidden');
+                    }
+
                     document.getElementById('run-results-content').innerHTML =
                         detailRow('Inference Time', d.processing_time + ' sec') +
                         infoRow('Throughput (FPS)', d.actual_fps, 'Measured frame throughput during processing.', ' <span class="text-xs text-slate-400 font-normal">fps</span>') +
@@ -2005,6 +2068,7 @@
             if (!data.files || !data.files.length) return null;
 
             document.getElementById('reports-pending').classList.add('hidden');
+            document.getElementById('reports-pending-message').classList.add('hidden');
             document.getElementById('post-process-cards').classList.remove('hidden');
             const grid = document.getElementById('reports-grid');
             grid.classList.remove('hidden');