.

app.py

@@ -1290,6 +1290,15 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       plugins = [regionsPlugin];
     }}
 
+    // Convert base64 audio to a Blob URL — WaveSurfer v7 handles blob: URLs
+    // much more reliably than data: URIs for waveform rendering.
+    const b64      = '{b64}';
+    const byteChars = atob(b64);
+    const byteNums  = new Uint8Array(byteChars.length);
+    for (let i = 0; i < byteChars.length; i++) byteNums[i] = byteChars.charCodeAt(i);
+    const blob    = new Blob([byteNums], {{type: 'audio/wav'}});
+    const blobUrl = URL.createObjectURL(blob);
+
     // Wait until the container has a non-zero width before creating WaveSurfer,
     // otherwise it renders blank (container is 0px when Gradio first injects HTML).
     const wfContainer = document.getElementById('wf_{slot_id}');
@@ -1302,7 +1311,7 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
         barWidth:      2,
         barGap:        1,
         barRadius:     2,
-        url:           '{data_uri}',
+        url:           blobUrl,
         plugins:       plugins,
       }});
 
@@ -1310,7 +1319,6 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       ws.setVolume(0);
       ws.on('ready', function() {{
         ws.setVolume(0);
-        // Prevent WaveSurfer from auto-playing (it shouldn't, but be safe)
         ws.pause();
         const segments = {segs_json};
         const colors   = {json.dumps(colors)};
@@ -1335,6 +1343,10 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
         attachVideoSync(ws);
       }});
 
+      ws.on('error', function(err) {{
+        console.error('[WaveSurfer {slot_id}] error:', err);
+      }});
+
       // Also silence if WaveSurfer tries to play for any reason
       ws.on('play', function() {{ ws.pause(); ws.setVolume(0); }});
 
@@ -1355,10 +1367,10 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
         }}
       }});
       ro.observe(wfContainer);
-      // Fallback: also try after a short delay in case ResizeObserver fires late
+      // Fallback after 1s in case ResizeObserver fires late
       setTimeout(function() {{
         if (!window["_wf_ws_{slot_id}"]) {{ ro.disconnect(); createWS(); }}
-      }}, 800);
+      }}, 1000);
     }} else {{
       // Container not in DOM yet — wait for it
       setTimeout(loadWS, 200);
@@ -1407,7 +1419,7 @@ def _make_output_slots(tab_prefix: str) -> tuple:
     for i in range(MAX_SLOTS):
         with gr.Group(visible=(i == 0)) as g:
             slot_id = f"{tab_prefix}_{i}"
-            vids.append(gr.Video(label=f"Generation {i+1} — Video"))
+            vids.append(gr.Video(label=f"Generation {i+1} — Video", height=340))
             waveforms.append(gr.HTML(
                 value="<p style='color:#888;font-size:12px'>Generate audio to see waveform.</p>",
                 label=f"Generation {i+1} — Waveform",
@@ -1475,9 +1487,16 @@ def _update_slot_visibility(n):
 # ================================================================== #
 
 _SLOT_CSS = """
-/* Cap generated videos so the waveform below is never pushed out of view */
-.gradio-video video {
-    max-height: 340px;
+/* Cap the entire video component (including the loading/processing state)
+   so the waveform below is never pushed out of view */
+.gradio-video {
+    max-height: 380px !important;
+    overflow: hidden;
+}
+.gradio-video video,
+.gradio-video .video-container,
+.gradio-video .wrap {
+    max-height: 340px !important;
     object-fit: contain;
 }
 """