processing speed enhancements x 2

frontend/js/vehicles.js

@@ -1011,12 +1011,46 @@ window.switchTab = switchTab;
             let liveCongestion = [];
             let liveFlowTimes = [];
 
+            // ---- Smooth progress interpolation ----
+            // Predicts progress between real frame updates so the bar never "freezes"
+            let lastRealPct = 0;
+            let lastRealTime = 0;
+            let pctPerMs = 0;           // observed speed: % gained per ms
+            let interpPct = 0;          // current interpolated display %
+            let interpRAF = null;
+
+            function startProgressInterpolation() {
+                const bar = document.getElementById('proc-bar');
+                const pctEl = document.getElementById('proc-pct');
+
+                function tick() {
+                    if (processingDone) return;
+                    const now = performance.now();
+                    const elapsed = now - lastRealTime;
+
+                    if (pctPerMs > 0 && lastRealPct < 99.5) {
+                        // Predict forward, but cap at ~halfway to the next expected frame
+                        // to avoid overshoot before the next real update arrives
+                        const predicted = lastRealPct + (elapsed * pctPerMs * 0.85);
+                        const cap = Math.min(predicted, lastRealPct + (pctPerMs * 3000), 99.5);
+                        if (cap > interpPct) {
+                            interpPct = cap;
+                            bar.style.width = interpPct.toFixed(1) + '%';
+                            pctEl.innerText = Math.floor(interpPct) + '%';
+                        }
+                    }
+                    interpRAF = requestAnimationFrame(tick);
+                }
+                interpRAF = requestAnimationFrame(tick);
+            }
+
             ws.onmessage = e => {
                 const d = JSON.parse(e.data);
 
                 if (!firstMessageReceived) {
                     firstMessageReceived = true;
                     document.getElementById('proc-label').innerText = 'Processing';
+                    startProgressInterpolation();
                 }
 
                 // Hide empty state on first data
@@ -1024,6 +1058,7 @@ window.switchTab = switchTab;
                 if (emptyState) emptyState.style.display = 'none';
                 if (d.error) {
                     processingDone = true;
+                    if (interpRAF) cancelAnimationFrame(interpRAF);
                     document.getElementById('proc-label').innerText = 'Engine Error';
                     console.error('[UrbanFlow] Engine error:', d.detail || d.error);
                     document.getElementById('run-results-content').innerHTML = `
@@ -1040,6 +1075,7 @@ window.switchTab = switchTab;
 
                 if (d.done) {
                     processingDone = true;
+                    if (interpRAF) cancelAnimationFrame(interpRAF);
                     
                     // Stats Tracking (Scoped by email)
                     const session = (typeof getAuthSession === 'function') ? getAuthSession() : null;
@@ -1131,14 +1167,27 @@ window.switchTab = switchTab;
                     return;
                 }
 
-                let pct = ((d.frame_index / d.total_iters) * 100).toFixed(1);
-                if (d.frame_index >= d.total_iters - 1) pct = '100.0';
-                document.getElementById('proc-bar').style.width = pct + '%';
+                // ---- Real frame update: recalibrate interpolation ----
+                let pct = ((d.frame_index / d.total_iters) * 100);
+                if (d.frame_index >= d.total_iters - 1) pct = 100;
+
+                const now = performance.now();
+                if (lastRealTime > 0 && pct > lastRealPct) {
+                    const dt = now - lastRealTime;
+                    const dp = pct - lastRealPct;
+                    // Exponential moving average of speed for stability
+                    const newRate = dp / dt;
+                    pctPerMs = pctPerMs > 0 ? (pctPerMs * 0.6 + newRate * 0.4) : newRate;
+                }
+                lastRealPct = pct;
+                lastRealTime = now;
+
+                // Snap bar + percentage to real value (interpolation was just a prediction)
+                interpPct = pct;
+                const pctStr = pct.toFixed(1);
+                document.getElementById('proc-bar').style.width = pctStr + '%';
                 document.getElementById('proc-frames').innerText = `${d.frame_index} / ${d.total_iters} Frames`;
-                
-                const procPctEl = document.getElementById('proc-pct');
-                const currPct = parseFloat(procPctEl.innerText) || 0;
-                animateValue(procPctEl, currPct, pct + '%', 300);
+                document.getElementById('proc-pct').innerText = Math.floor(pct) + '%';
 
                 const totalIn = sumValues(d.class_in);
                 const totalOut = sumValues(d.class_out);
@@ -1168,7 +1217,6 @@ window.switchTab = switchTab;
                     }
                 }
 
-                const now = performance.now();
                 if (now - lastUIUpdate < 150) return;
                 lastUIUpdate = now;
 

frontend/vehicles.html

@@ -149,7 +149,7 @@
                 <span class="text-[11px] font-black text-white uppercase tracking-wider whitespace-nowrap"
                     id="proc-label">Waiting</span>
                 <div class="flex-1 h-2 bg-[#111111] rounded-full overflow-hidden relative border border-[#1a1a1a]">
-                    <div id="proc-bar" class="h-full bg-[#444444] rounded-full transition-all duration-500 ease-out"
+                    <div id="proc-bar" class="h-full bg-[#444444] rounded-full"
                         style="width: 0%"></div>
                 </div>
             </div>