.

app.py

@@ -1290,47 +1290,79 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       plugins = [regionsPlugin];
     }}
 
-    const ws = WaveSurfer.create({{
-      container:     '#wf_{slot_id}',
-      waveColor:     '#4a9eff',
-      progressColor: '#1a5fa8',
-      height:        80,
-      barWidth:      2,
-      barGap:        1,
-      barRadius:     2,
-      interact:      false,
-      url:           '{data_uri}',
-      plugins:       plugins,
-    }});
-
-    // Silence the WaveSurfer audio immediately and on ready
-    ws.setVolume(0);
-    ws.on('ready', function() {{
+    // 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}');
+    function createWS() {{
+      const ws = WaveSurfer.create({{
+        container:     '#wf_{slot_id}',
+        waveColor:     '#4a9eff',
+        progressColor: '#1a5fa8',
+        height:        80,
+        barWidth:      2,
+        barGap:        1,
+        barRadius:     2,
+        url:           '{data_uri}',
+        plugins:       plugins,
+      }});
+
+      // Silence immediately — waveform is display-only, video plays the audio
       ws.setVolume(0);
-      const segments = {segs_json};
-      const colors   = {json.dumps(colors)};
-      if (regionsPlugin) {{
-        segments.forEach(function(seg, idx) {{
-          regionsPlugin.addRegion({{
-            id:      'seg_' + idx,
-            start:   seg[0],
-            end:     seg[1],
-            color:   colors[idx % colors.length],
-            drag:    false,
-            resize:  false,
-            content: 'Seg ' + (idx + 1),
+      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)};
+        if (regionsPlugin) {{
+          segments.forEach(function(seg, idx) {{
+            regionsPlugin.addRegion({{
+              id:      'seg_' + idx,
+              start:   seg[0],
+              end:     seg[1],
+              color:   colors[idx % colors.length],
+              drag:    false,
+              resize:  false,
+              content: 'Seg ' + (idx + 1),
+            }});
           }});
-        }});
-        regionsPlugin.on('region-clicked', function(region, e) {{
-          e.stopPropagation();
-          const idx = parseInt(region.id.replace('seg_', ''));
-          showPopup(idx, e.clientX, e.clientY);
-        }});
-      }}
-      attachVideoSync(ws);
-    }});
+          regionsPlugin.on('region-clicked', function(region, e) {{
+            e.stopPropagation();
+            const idx = parseInt(region.id.replace('seg_', ''));
+            showPopup(idx, e.clientX, e.clientY);
+          }});
+        }}
+        attachVideoSync(ws);
+      }});
+
+      // Also silence if WaveSurfer tries to play for any reason
+      ws.on('play', function() {{ ws.pause(); ws.setVolume(0); }});
+
+      window["_wf_ws_{slot_id}"] = ws;
+    }}
 
-    window["_wf_ws_{slot_id}"] = ws;
+    // Use ResizeObserver: fire createWS as soon as the container has width
+    if (wfContainer && wfContainer.offsetWidth > 0) {{
+      createWS();
+    }} else if (wfContainer) {{
+      const ro = new ResizeObserver(function(entries) {{
+        for (const entry of entries) {{
+          if (entry.contentRect.width > 0) {{
+            ro.disconnect();
+            createWS();
+            break;
+          }}
+        }}
+      }});
+      ro.observe(wfContainer);
+      // Fallback: also try after a short delay in case ResizeObserver fires late
+      setTimeout(function() {{
+        if (!window["_wf_ws_{slot_id}"]) {{ ro.disconnect(); createWS(); }}
+      }}, 800);
+    }} else {{
+      // Container not in DOM yet — wait for it
+      setTimeout(loadWS, 200);
+    }}
   }}
 
   // Load WaveSurfer + Regions scripts once (idempotent)
@@ -1442,7 +1474,15 @@ def _update_slot_visibility(n):
 #                       GRADIO UI                                     #
 # ================================================================== #
 
-with gr.Blocks(title="Generate Audio for Video") as demo:
+_SLOT_CSS = """
+/* Cap generated videos so the waveform below is never pushed out of view */
+.gradio-video video {
+    max-height: 340px;
+    object-fit: contain;
+}
+"""
+
+with gr.Blocks(title="Generate Audio for Video", css=_SLOT_CSS) as demo:
     gr.Markdown(
         "# Generate Audio for Video\n"
         "Choose a model and upload a video to generate synchronized audio.\n\n"