zip file download, layout centering, upload stability jitter fix

backend/server.py

@@ -28,6 +28,7 @@ REPORT_DIR = Path(tempfile.gettempdir()) / "funky_reports"
 REPORT_DIR.mkdir(exist_ok=True)
 
 videos = {}
+video_info = {}
 run_results = {}
 model = None
 
@@ -77,6 +78,7 @@ async def upload(file: UploadFile = File(...)):
         print(f"[BACKEND] Successfully stored: {path} ({file_size} bytes)")
 
         videos[video_id] = str(path)
+        video_info[video_id] = file.filename
         return {"video_id": video_id}
     except Exception as e:
         print(f"[BACKEND] Upload failed: {str(e)}")
@@ -135,6 +137,28 @@ def get_report(video_id: str, name: str):
     return FileResponse(str(path), media_type=media)
 
 
+@app.get("/reports/zip/{video_id}")
+def download_all_reports(video_id: str):
+    base_path = REPORT_DIR / video_id
+    if not base_path.exists():
+        return Response(status_code=404)
+    
+    # Create zip in temp dir
+    zip_base = REPORT_DIR / f"bundle_{video_id}"
+    shutil.make_archive(str(zip_base), 'zip', str(base_path))
+    
+    final_zip = Path(f"{zip_base}.zip")
+    
+    original_name = video_info.get(video_id, "UrbanFlow_Analysis")
+    safe_name = "".join(x for x in original_name if x.isalnum() or x in "._-").rsplit(".", 1)[0]
+    
+    return FileResponse(
+        str(final_zip), 
+        media_type="application/zip", 
+        filename=f"{safe_name}_UrbanFlow.zip"
+    )
+
+
 @app.websocket("/ws/run")
 async def ws_run(ws: WebSocket):
     await ws.accept()

frontend/initial.html

@@ -213,6 +213,11 @@
             if (name === 'upload') {
                 document.getElementById('upload-progress-container').classList.add('hidden');
                 document.getElementById('dropzone').classList.remove('hidden');
+                // Reset Progress Bar state for new uploads
+                document.getElementById('upload-bar').style.width = '0%';
+                document.getElementById('upload-percentage').innerText = '0%';
+                document.getElementById('upload-text').innerText = 'Uploading...';
+                document.getElementById('upload-text').classList.remove('text-red-500');
             }
             if (name === 'draw') loadFirstFrame();
         }
@@ -236,7 +241,11 @@
             });
         }
 
+        let currentXHR = null;
         function uploadFile(file) {
+            // Abort previous upload if it exists to prevent jitter/multiple requests
+            if (currentXHR) currentXHR.abort();
+
             const dropzoneEl = document.getElementById('dropzone');
             const prog = document.getElementById('upload-progress-container');
             const bar = document.getElementById('upload-bar');
@@ -250,6 +259,7 @@
             form.append('file', file);
 
             const xhr = new XMLHttpRequest();
+            currentXHR = xhr;
             xhr.open('POST', '/upload');
 
             xhr.upload.onprogress = e => {

frontend/vehicles.html

@@ -798,7 +798,7 @@
                 </div>
 
                 <!-- New Analysis Button (visible only after processing completes) -->
-                <div class="col-span-3 pb-4 hidden justify-center" id="new-analysis-wrap">
+                <div class="col-span-3 pb-4 hidden flex justify-center" id="new-analysis-wrap">
                     <button onclick="startNewAnalysis()"
                         class="w-fit px-16 py-4 font-bold text-sm rounded-full transition flex items-center justify-center gap-2 shadow-lg hover:scale-105 active:scale-95"
                         style="background:var(--cocoa-l);color:#000">
@@ -1510,24 +1510,16 @@
 
                             // Auto-Download Logic (Respects live toggle state)
                             if (document.getElementById('sv-auto-download').classList.contains('active')) {
-                                const preferredFmt = document.getElementById('sv-report').value; 
-                                console.log(`[UrbanFlow] Auto-downloading ${preferredFmt} reports...`);
-                                
-                                // Download the primary charts in the user's preferred format
-                                data.files.forEach(targetFile => {
-                                    // We only auto-download the primary KPI charts, not everything
-                                    const isTarget = targetFile.endsWith(`.${preferredFmt}`) && 
-                                                   (targetFile.includes('congestion') || targetFile.includes('direction') || targetFile.includes('flow'));
-                                    
-                                    if (isTarget) {
-                                        const link = document.createElement('a');
-                                        link.href = `/reports/${d.video_id}/${targetFile}`;
-                                        link.download = targetFile;
-                                        document.body.appendChild(link);
-                                        link.click();
-                                        document.body.removeChild(link);
-                                    }
-                                });
+                                // Download the full bundle ZIP
+                                setTimeout(() => {
+                                    console.log('[UrbanFlow] Auto-downloading ZIP bundle...');
+                                    const link = document.createElement('a');
+                                    link.href = `/reports/zip/${d.video_id}`;
+                                    link.download = `UrbanFlow_Analysis.zip`;
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                }, 500); 
                             }
                         });
                     }
@@ -1729,6 +1721,7 @@
     </div>
 
     <script>
+
         function openAppModal(id) {
             const el = document.getElementById('appModal-' + id);
             if (el) { el.style.display = 'flex'; document.body.style.overflow = 'hidden'; }