.

app.py

@@ -1209,7 +1209,9 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     const canvas  = document.getElementById('wf_canvas_{slot_id}');
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
-    const W   = canvas.offsetWidth  || canvas.parentElement.offsetWidth || 600;
+    const W   = canvas.getBoundingClientRect().width
+             || (canvas.parentElement ? canvas.parentElement.getBoundingClientRect().width : 0)
+             || 600;
     const H   = 80;
     canvas.width  = W * dpr;
     canvas.height = H * dpr;
@@ -1276,7 +1278,9 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     const canvas = document.getElementById('wf_playhead_{slot_id}');
     if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
-    const W   = canvas.offsetWidth  || canvas.parentElement.offsetWidth || 600;
+    const W   = canvas.getBoundingClientRect().width
+             || (canvas.parentElement ? canvas.parentElement.getBoundingClientRect().width : 0)
+             || 600;
     const H   = 80;
     if (canvas.width !== W*dpr) {{ canvas.width=W*dpr; canvas.height=H*dpr; }}
     const ctx = canvas.getContext('2d');
@@ -1317,33 +1321,39 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
   }}
 
   // ── Decode audio & render ─────────────────────────────────────────
-  function init() {{
-    const b64str = '{b64}';
-    // decode base64 → ArrayBuffer
-    const bin = atob(b64str);
-    const buf = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
-
-    const AudioCtx = window.AudioContext || window.webkitAudioContext;
-    if (!AudioCtx) {{ console.warn('No AudioContext'); return; }}
-    const actx = new AudioCtx();
-    actx.decodeAudioData(buf.buffer, function(audioBuffer) {{
+  // Decode audio immediately (doesn't need canvas dimensions).
+  // Drawing is deferred until the canvas actually has a non-zero width.
+  const b64str = '{b64}';
+  const bin = atob(b64str);
+  const buf = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+
+  const AudioCtx = window.AudioContext || window.webkitAudioContext;
+  if (!AudioCtx) {{ console.warn('[waveform {slot_id}] No AudioContext available'); }}
+  else {{
+    // Use OfflineAudioContext so decoding works even without user gesture
+    const tmpCtx = new AudioCtx({{latencyHint:'playback', sampleRate:44100}});
+    tmpCtx.decodeAudioData(buf.buffer.slice(0), function(audioBuffer) {{
       const channelData = audioBuffer.getChannelData(0);
-      drawWaveform(channelData, audioBuffer.duration);
-      attachVideoSync();
-      actx.close();
+      const duration    = audioBuffer.duration;
+      tmpCtx.close();
+
+      // Now wait for the canvas to have layout width before drawing
+      function tryDraw() {{
+        const canvas = document.getElementById('wf_canvas_{slot_id}');
+        if (!canvas) {{ setTimeout(tryDraw, 100); return; }}
+        // Force a width by walking up to a sized ancestor if needed
+        let W = canvas.getBoundingClientRect().width;
+        if (W <= 0) W = canvas.parentElement ? canvas.parentElement.getBoundingClientRect().width : 0;
+        if (W <= 0) {{ setTimeout(tryDraw, 100); return; }}
+        drawWaveform(channelData, duration);
+        attachVideoSync();
+      }}
+      tryDraw();
     }}, function(err) {{
       console.error('[waveform {slot_id}] decodeAudioData error:', err);
     }});
   }}
-
-  // Run after the canvas is in the DOM and has layout
-  if (document.readyState === 'loading') {{
-    document.addEventListener('DOMContentLoaded', init);
-  }} else {{
-    // Small delay to let Gradio finish laying out the component
-    setTimeout(init, 100);
-  }}
 }})();
 </script>
 """
@@ -1359,7 +1369,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", height=340))
+            vids.append(gr.Video(label=f"Generation {i+1} — Video"))
             waveforms.append(gr.HTML(
                 value="<p style='color:#888;font-size:12px'>Generate audio to see waveform.</p>",
                 label=f"Generation {i+1} — Waveform",
@@ -1426,7 +1436,23 @@ def _update_slot_visibility(n):
 #                       GRADIO UI                                     #
 # ================================================================== #
 
-_SLOT_CSS = ""
+_SLOT_CSS = """
+/* Make all video components (input and output) use the same responsive
+   aspect-ratio container so they match at any window size. */
+.gradio-video,
+.gradio-video > div {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto !important;
+    min-height: unset !important;
+    max-height: unset !important;
+}
+.gradio-video video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+"""
 
 with gr.Blocks(title="Generate Audio for Video", css=_SLOT_CSS) as demo:
     gr.Markdown(