.

app.py

@@ -1328,31 +1328,45 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
   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) {{
+  // OfflineAudioContext for decoding — works without user gesture, no playback
+  const OfflineCtx = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+  const AudioCtx   = window.AudioContext || window.webkitAudioContext;
+  if (!OfflineCtx && !AudioCtx) {{
+    console.warn('[waveform {slot_id}] No AudioContext available');
+  }} else {{
+    // Decode using a throwaway AudioContext (OfflineAudioContext.decodeAudioData
+    // has the same user-gesture restriction in some browsers, so use regular one)
+    const tmpCtx = new (AudioCtx || OfflineCtx)({{sampleRate: 44100}});
+    const doRender = function(audioBuffer) {{
       const channelData = audioBuffer.getChannelData(0);
       const duration    = audioBuffer.duration;
-      tmpCtx.close();
+      try {{ tmpCtx.close(); }} catch(e) {{}}
+      console.log('[waveform {slot_id}] decoded OK, duration=' + duration + 's, samples=' + channelData.length);
 
-      // 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
+        if (!canvas) {{ console.log('[waveform {slot_id}] canvas not in DOM yet'); setTimeout(tryDraw, 100); return; }}
         let W = canvas.getBoundingClientRect().width;
-        if (W <= 0) W = canvas.parentElement ? canvas.parentElement.getBoundingClientRect().width : 0;
-        if (W <= 0) {{ setTimeout(tryDraw, 100); return; }}
+        if (W <= 0 && canvas.parentElement) W = canvas.parentElement.getBoundingClientRect().width;
+        if (W <= 0 && canvas.parentElement && canvas.parentElement.parentElement)
+          W = canvas.parentElement.parentElement.getBoundingClientRect().width;
+        console.log('[waveform {slot_id}] tryDraw W=' + W);
+        if (W <= 0) {{ setTimeout(tryDraw, 150); return; }}
         drawWaveform(channelData, duration);
         attachVideoSync();
       }}
       tryDraw();
-    }}, function(err) {{
+    }};
+
+    // decodeAudioData with promise fallback
+    const decodePromise = tmpCtx.decodeAudioData(buf.buffer.slice(0), doRender, function(err) {{
       console.error('[waveform {slot_id}] decodeAudioData error:', err);
     }});
+    if (decodePromise && typeof decodePromise.then === 'function') {{
+      decodePromise.then(doRender).catch(function(err) {{
+        console.error('[waveform {slot_id}] decodeAudioData promise error:', err);
+      }});
+    }}
   }}
 }})();
 </script>
@@ -1437,19 +1451,11 @@ def _update_slot_visibility(n):
 # ================================================================== #
 
 _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;
-}
+/* Responsive video: fills column width, height auto from aspect ratio */
 .gradio-video video {
-    width: 100%;
-    height: 100%;
+    width: 100% !important;
+    height: auto !important;
+    max-height: 60vh !important;
     object-fit: contain;
 }
 """