Fix progress bar by replacing img onerror with MutationObserver elapsed counter

The img onerror JS trick failed in Gradio's Svelte context because
getElementById couldn't find sibling elements at fire time. Replaced with
a data-ppb-duration attribute read by a MutationObserver installed at page
load, which starts a 0.1s interval timer showing "Xs / Ys". Also rounds
estimated duration down to nearest 5s instead of up.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/api/session_api.py

@@ -272,7 +272,7 @@ def estimate_duration(endpoint, audio_duration_s=None, audio_id=None,
     if device == "CPU":
         estimate *= ESTIMATE_CPU_MULTIPLIER
 
-    rounded = math.ceil(estimate / 5) * 5
+    rounded = max(5, math.floor(estimate / 5) * 5)
 
     return {
         "endpoint": endpoint,

src/ui/event_wiring.py

@@ -1,10 +1,7 @@
 """Event wiring — connects all Gradio component events."""
 import gradio as gr
 
-from config import (
-    DEV_TAB_VISIBLE,
-    PROGRESS_PROCESS_AUDIO, PROGRESS_RESEGMENT, PROGRESS_RETRANSCRIBE,
-)
+from config import DEV_TAB_VISIBLE
 from src.core.zero_gpu import QuotaExhaustedError
 from src.pipeline import (
     process_audio, resegment_audio,
@@ -99,7 +96,7 @@ def _wire_extract_chain(c):
                 audio_dur = len(arr) / sr
         est = estimate_duration("process_audio_session", audio_dur, model_name=model, device=device)
         est_s = est.get("estimated_duration_s") or 30
-        bar_html = pipeline_progress_bar_html(est_s, list(PROGRESS_PROCESS_AUDIO.values()))
+        bar_html = pipeline_progress_bar_html(est_s)
 
         # Yield 1: show progress bar, hide extract button
         _skip = gr.update()
@@ -194,7 +191,7 @@ def _wire_resegment_chain(c):
         audio_dur = len(audio) / 16000 if audio is not None and hasattr(audio, '__len__') else None
         est = estimate_duration("resegment_session", audio_dur, model_name=model, device=device)
         est_s = est.get("estimated_duration_s") or 15
-        bar_html = pipeline_progress_bar_html(est_s, list(PROGRESS_RESEGMENT.values()))
+        bar_html = pipeline_progress_bar_html(est_s)
 
         _skip = gr.update()
         yield (
@@ -269,9 +266,7 @@ def _wire_retranscribe_chain(c):
         audio_dur = len(audio) / 16000 if audio is not None and hasattr(audio, '__len__') else None
         est = estimate_duration("retranscribe_session", audio_dur, model_name=model_name, device=device)
         est_s = est.get("estimated_duration_s") or 15
-        opposite = "Large" if model_name == "Base" else "Base"
-        stages = [(f, lbl.format(model=opposite)) for f, lbl in PROGRESS_RETRANSCRIBE.values()]
-        bar_html = pipeline_progress_bar_html(est_s, stages)
+        bar_html = pipeline_progress_bar_html(est_s)
 
         _skip = gr.update()
         yield (

src/ui/js_config.py

@@ -38,6 +38,46 @@ def build_js_head(surah_ligatures: dict) -> str:
     core_js = (_STATIC_DIR / "animation-core.js").read_text(encoding="utf-8")
     all_js = (_STATIC_DIR / "animate-all.js").read_text(encoding="utf-8")
 
+    ppb_observer_js = """
+// Pipeline progress bar timer — fires when a bar is added to the DOM
+(function() {
+    var _timers = {};
+    function _startPpbTimer(el) {
+        var uid = el.id;
+        if (!uid || _timers[uid]) return;
+        var dur = parseInt(el.getAttribute('data-ppb-duration'), 10) || 30;
+        var textEl = document.getElementById(uid + '-text');
+        if (!textEl) return;
+        var start = Date.now();
+        _timers[uid] = setInterval(function() {
+            if (!document.getElementById(uid)) {
+                clearInterval(_timers[uid]);
+                delete _timers[uid];
+                return;
+            }
+            var elapsed = (Date.now() - start) / 1000;
+            textEl.textContent = Math.floor(elapsed * 10) / 10 + 's / ' + dur + 's';
+        }, 100);
+    }
+    var _obs = new MutationObserver(function(mutations) {
+        for (var i = 0; i < mutations.length; i++) {
+            var added = mutations[i].addedNodes;
+            for (var j = 0; j < added.length; j++) {
+                var node = added[j];
+                if (node.nodeType !== 1) continue;
+                if (node.hasAttribute && node.hasAttribute('data-ppb-duration')) {
+                    _startPpbTimer(node);
+                } else if (node.querySelectorAll) {
+                    var found = node.querySelectorAll('[data-ppb-duration]');
+                    for (var k = 0; k < found.length; k++) _startPpbTimer(found[k]);
+                }
+            }
+        }
+    });
+    _obs.observe(document.body, { childList: true, subtree: true });
+})();
+"""
+
     return (
         "<script>\n"
         f"{config}\n"
@@ -45,5 +85,6 @@ def build_js_head(surah_ligatures: dict) -> str:
         f"{core_js}\n"
         f"{all_js}\n"
         "})();\n"
+        f"{ppb_observer_js}\n"
         "</script>"
     )

src/ui/progress_bar.py

@@ -1,42 +1,19 @@
-"""Pipeline progress bar — CSS-animated fill with timed stage labels."""
+"""Pipeline progress bar — CSS-animated fill with elapsed counter."""
 
-import json
 import random
 
 
-def pipeline_progress_bar_html(estimated_duration_s, stages):
+def pipeline_progress_bar_html(estimated_duration_s):
     """Return HTML for a continuous progress bar timed to *estimated_duration_s*.
 
-    *stages* is a list of ``(fraction, label)`` tuples taken from the
-    ``PROGRESS_*`` config dicts.  The label text changes at each fraction of
-    the total duration via an ``img onerror`` JS trick (Gradio strips
-    ``<script>`` tags from innerHTML updates).
+    The container ``<div>`` carries a ``data-ppb-duration`` attribute that a
+    MutationObserver in the page head reads to start a 0.1 s elapsed-time
+    counter (``Xs / Ys``).
     """
     uid = f"ppb{random.randint(0, 999999)}"
-    duration = max(estimated_duration_s, 1)
+    duration = max(estimated_duration_s, 5)
 
-    # Build JS array of [delay_ms, label] for the stage switcher
-    stage_entries = []
-    for frac, label in stages:
-        delay_ms = int(frac * duration * 1000)
-        stage_entries.append([delay_ms, label])
-    stages_json = json.dumps(stage_entries)
-
-    first_label = stages[0][1] if stages else "Processing..."
-
-    counter_js = f'''<img src="data:," style="display:none"
-        onerror="(function(){{
-            var stages={stages_json},
-                el=document.getElementById('{uid}-text');
-            if(!el)return;
-            for(var i=0;i<stages.length;i++){{
-                (function(lbl,delay){{
-                    setTimeout(function(){{el.textContent=lbl;}},delay);
-                }})(stages[i][1],stages[i][0]);
-            }}
-        }})()" />'''
-
-    return f'''<div id="{uid}" style="
+    return f'''<div id="{uid}" data-ppb-duration="{duration}" style="
         position:relative; width:100%; height:40px;
         background:#e5e7eb; border-radius:8px; overflow:hidden;
         font-family:system-ui,sans-serif; font-size:14px;
@@ -52,12 +29,11 @@ def pipeline_progress_bar_html(estimated_duration_s, stages):
             align-items:center; justify-content:center;
             color:#1f2937; font-weight:600; z-index:1;
             text-shadow:0 0 4px rgba(255,255,255,0.8);
-        ">{first_label}</span>
+        ">0s / {duration}s</span>
         <style>
             @keyframes {uid}-grow {{
                 from {{ width:0%; }}
                 to   {{ width:100%; }}
             }}
         </style>
-        {counter_js}
     </div>'''