Spaces:

JackIsNotInTheBox
/

Generate_Audio_for_Video

Running on Zero

BoxOfColors commited on 5 days ago

Commit

fcc4220

1 Parent(s): 6390bb5

Fix waveform rendering: use iframe srcdoc to ensure JS executes

Gradio's gr.HTML updates via innerHTML which strips/ignores <script>
tags. Moving canvas + Web Audio API logic into an iframe srcdoc ensures
scripts always execute on every update. The iframe accesses window.parent
directly (same-origin sandbox) to trigger the Gradio regen hidden input.
Playhead sync polls window.parent for the video element every 50ms.

Files changed (1) hide show

app.py +187 -204

app.py CHANGED Viewed

@@ -1108,274 +1108,257 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
                   "rgba(255,220,80,0.35)",  "rgba(80,220,220,0.35)",
                   "rgba(255,100,100,0.35)", "rgba(180,255,180,0.35)"]
-    return f"""
-<div id="wf_container_{slot_id}"
-     style="background:#1a1a1a;border-radius:8px;padding:10px;margin-top:6px;position:relative;">
-  <div style="position:relative;width:100%;height:80px;">
-    <canvas id="wf_canvas_{slot_id}"
-            style="width:100%;height:80px;display:block;border-radius:4px;"></canvas>
-    <canvas id="wf_playhead_{slot_id}"
-            style="position:absolute;top:0;left:0;width:100%;height:80px;pointer-events:none;"></canvas>
-  </div>
-  <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
-    <span style="color:#888;font-size:11px;">Click a segment to regenerate &nbsp;|&nbsp; Playhead syncs to video</span>
-    <a href="{data_uri}" download="audio_{slot_id}.wav"
-       style="margin-left:auto;background:#333;color:#eee;border:1px solid #555;
-              border-radius:4px;padding:3px 10px;font-size:12px;text-decoration:none;">
-      &#8595; Download</a>
-  </div>
-  <div id="wf_seglabel_{slot_id}"
-       style="color:#aaa;font-size:11px;margin-top:4px;min-height:16px;"></div>
-  <!-- Popup that appears on segment click -->
-  <div id="wf_popup_{slot_id}"
-       style="display:none;position:fixed;z-index:9999;
-              background:#2a2a2a;border:1px solid #555;border-radius:6px;
-              padding:8px 12px;box-shadow:0 4px 16px rgba(0,0,0,0.5);">
-    <div id="wf_popup_label_{slot_id}"
-         style="color:#ccc;font-size:11px;margin-bottom:6px;white-space:nowrap;"></div>
-    <button id="wf_regen_btn_{slot_id}"
-            style="background:#1d6fa5;color:#fff;border:none;border-radius:4px;
-                   padding:5px 14px;font-size:12px;cursor:pointer;width:100%;">
-      &#10227; Regenerate
-    </button>
-  </div>
 </div>
 <script>
 (function() {{
-  // Clean up any previous listeners for this slot
-  if (window["_wf_video_unlisten_{slot_id}"]) {{
-    try {{ window["_wf_video_unlisten_{slot_id}"](); }} catch(e) {{}}
-    window["_wf_video_unlisten_{slot_id}"] = null;
-  }}
-  console.log('[waveform {slot_id}] script executing');
-  const segments  = {segs_json};
   const segColors = {json.dumps(seg_colors)};
   let   audioDuration = 0;
-  let   _pendingSegIdx_{slot_id} = null;
-  // ── Popup helpers ──────────────────────────────────────────────────
-  function fireRegen(idx) {{
-    document.getElementById('wf_popup_{slot_id}').style.display = 'none';
-    const lbl = document.getElementById('wf_seglabel_{slot_id}');
-    if (lbl) lbl.textContent = 'Regenerating Seg ' + (idx+1) +
-      ' (' + segments[idx][0].toFixed(2) + 's \u2013 ' + segments[idx][1].toFixed(2) + 's)\u2026';
-    const el = document.getElementById('{hidden_input_id}');
-    if (el) {{
-      const input = el.querySelector('input, textarea');
-      if (input) {{
-        const desc = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')
-                  || Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value');
-        if (desc && desc.set) desc.set.call(input, '{slot_id}|' + idx);
-        else input.value = '{slot_id}|' + idx;
-        input.dispatchEvent(new Event('input', {{bubbles:true}}));
-      }}
-    }}
-  }}
   function showPopup(idx, mx, my) {{
-    _pendingSegIdx_{slot_id} = idx;
-    const popup = document.getElementById('wf_popup_{slot_id}');
-    const plbl  = document.getElementById('wf_popup_label_{slot_id}');
-    if (plbl) plbl.textContent = 'Seg '+(idx+1)+'  ('+segments[idx][0].toFixed(2)+'s \u2013 '+segments[idx][1].toFixed(2)+'s)';
     popup.style.display = 'block';
-    popup.style.left = (mx+10)+'px'; popup.style.top = (my+10)+'px';
     requestAnimationFrame(function() {{
       const r=popup.getBoundingClientRect(), vw=window.innerWidth, vh=window.innerHeight;
-      if (r.right>vw-8)  popup.style.left=(vw-r.width-8)+'px';
-      if (r.bottom>vh-8) popup.style.top=(vh-r.height-8)+'px';
     }});
   }}
-  function hidePopup() {{
-    document.getElementById('wf_popup_{slot_id}').style.display='none';
-    _pendingSegIdx_{slot_id} = null;
-  }}
-  (function tryWireBtn() {{
-    const btn = document.getElementById('wf_regen_btn_{slot_id}');
-    if (btn) {{ btn.onclick = function(e) {{ e.stopPropagation(); if (_pendingSegIdx_{slot_id}!==null) fireRegen(_pendingSegIdx_{slot_id}); }}; }}
-    else setTimeout(tryWireBtn, 100);
-  }})();
   document.addEventListener('click', function(e) {{
-    const p=document.getElementById('wf_popup_{slot_id}');
-    if (p && p.style.display!=='none' && !p.contains(e.target)) hidePopup();
   }}, true);
-  // ── Canvas waveform drawing ────────────────────────────────────────
   function drawWaveform(channelData, duration) {{
     audioDuration = duration;
-    const canvas  = document.getElementById('wf_canvas_{slot_id}');
-    if (!canvas) {{ console.error('[waveform {slot_id}] drawWaveform: canvas element missing'); return; }}
     const dpr = window.devicePixelRatio || 1;
-    const rect = canvas.getBoundingClientRect();
-    const W   = rect.width
-             || (canvas.parentElement ? canvas.parentElement.getBoundingClientRect().width : 0)
-             || 600;
     const H   = 80;
-    console.log('[waveform {slot_id}] drawWaveform W=' + W + ' H=' + H + ' dpr=' + dpr + ' rect=' + JSON.stringify(rect));
-    canvas.width  = W * dpr;
-    canvas.height = H * dpr;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {{ console.error('[waveform {slot_id}] drawWaveform: could not get 2d context'); return; }}
     ctx.scale(dpr, dpr);
-    // Background
     ctx.fillStyle = '#1e1e2e';
     ctx.fillRect(0, 0, W, H);
-    // Segment region overlays
     segments.forEach(function(seg, idx) {{
       const x1 = (seg[0] / duration) * W;
       const x2 = (seg[1] / duration) * W;
       ctx.fillStyle = segColors[idx % segColors.length];
       ctx.fillRect(x1, 0, x2-x1, H);
-      // Segment label
       ctx.fillStyle = 'rgba(255,255,255,0.6)';
       ctx.font = '10px sans-serif';
       ctx.fillText('Seg '+(idx+1), x1+3, 12);
     }});
-    // Waveform bars
     const samples = channelData.length;
-    const barW    = 2, gap = 1, step = barW + gap;
     const numBars = Math.floor(W / step);
     const blockSz = Math.floor(samples / numBars);
     ctx.fillStyle = '#4a9eff';
-    for (let i = 0; i < numBars; i++) {{
-      let max = 0;
-      const start = i * blockSz;
-      for (let j = 0; j < blockSz; j++) {{
-        const v = Math.abs(channelData[start + j] || 0);
-        if (v > max) max = v;
       }}
-      const barH = Math.max(1, max * H);
-      ctx.fillRect(i * step, (H - barH) / 2, barW, barH);
     }}
-    // Segment boundary lines
     segments.forEach(function(seg) {{
-      [seg[0], seg[1]].forEach(function(t) {{
-        const x = (t / duration) * W;
-        ctx.strokeStyle = 'rgba(255,255,255,0.4)';
-        ctx.lineWidth = 1;
-        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
       }});
     }});
-    // Click handler for segment selection
-    canvas.onclick = function(e) {{
-      const rect = canvas.getBoundingClientRect();
-      const xRel = (e.clientX - rect.left) / rect.width;
-      const tClick = xRel * duration;
-      let hit = -1;
-      segments.forEach(function(seg, idx) {{ if (tClick >= seg[0] && tClick <= seg[1]) hit = idx; }});
-      if (hit >= 0) showPopup(hit, e.clientX, e.clientY);
       else hidePopup();
     }};
   }}
-  // ── Playhead drawing ──────────────────────────────────────────────
   function drawPlayhead(progress) {{
-    const canvas = document.getElementById('wf_playhead_{slot_id}');
-    if (!canvas) return;
     const dpr = window.devicePixelRatio || 1;
-    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');
-    ctx.clearRect(0, 0, W*dpr, H*dpr);
-    ctx.scale(dpr, dpr);
-    const x = progress * W;
-    ctx.strokeStyle = '#fff';
-    ctx.lineWidth   = 2;
-    ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
-    // Reset transform for next call
-    ctx.setTransform(1,0,0,1,0,0);
-  }}
-  // ── Video sync ────────────────────────────────────────────────────
-  function findSlotVideo() {{
-    let node = document.getElementById('wf_container_{slot_id}');
-    while (node && node !== document.body) {{
-      const v = node.querySelector('video');
-      if (v) return v;
-      node = node.parentElement;
-    }}
-    return null;
   }}
-  function attachVideoSync() {{
-    (function tryAttach() {{
-      const video = findSlotVideo();
-      if (!video) {{ setTimeout(tryAttach, 300); return; }}
-      function onTimeUpdate() {{
-        if (!video.duration || !isFinite(video.duration)) return;
-        drawPlayhead(video.currentTime / video.duration);
       }}
-      video.addEventListener('timeupdate', onTimeUpdate);
-      window["_wf_video_unlisten_{slot_id}"] = function() {{
-        video.removeEventListener('timeupdate', onTimeUpdate);
-      }};
-    }})();
-  }}
-  // ── Decode audio & render ─────────────────────────────────────────
-  // Decode audio immediately (doesn't need canvas dimensions).
-  // Drawing is deferred until the canvas actually has a non-zero width.
   const b64str = '{b64}';
-  console.log('[waveform {slot_id}] b64 length=' + b64str.length);
   const bin = atob(b64str);
   const buf = new Uint8Array(bin.length);
-  for (let i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
-  console.log('[waveform {slot_id}] decoded buf size=' + buf.byteLength + ' bytes');
-  // 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;
-      try {{ tmpCtx.close(); }} catch(e) {{}}
-      console.log('[waveform {slot_id}] decoded OK, duration=' + duration + 's, samples=' + channelData.length);
-      function tryDraw() {{
-        const canvas = document.getElementById('wf_canvas_{slot_id}');
-        if (!canvas) {{ console.log('[waveform {slot_id}] canvas not in DOM yet'); setTimeout(tryDraw, 100); return; }}
-        let W = canvas.getBoundingClientRect().width;
-        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();
-    }};
-    // decodeAudioData — use callback form only to avoid double-calling doRender
-    console.log('[waveform {slot_id}] calling decodeAudioData, buf byteLength=' + buf.buffer.byteLength);
     try {{
-      tmpCtx.decodeAudioData(buf.buffer.slice(0), doRender, function(err) {{
-        console.error('[waveform {slot_id}] decodeAudioData error:', err);
-      }});
-    }} catch(e) {{
-      console.error('[waveform {slot_id}] decodeAudioData threw:', e);
-    }}
   }}
 }})();
 </script>
 """

                   "rgba(255,220,80,0.35)",  "rgba(80,220,220,0.35)",
                   "rgba(255,100,100,0.35)", "rgba(180,255,180,0.35)"]
+    # NOTE: Gradio updates gr.HTML via innerHTML which does NOT execute <script> tags.
+    # Solution: put the entire waveform (canvas + JS) inside an <iframe srcdoc="...">.
+    # iframes always execute their scripts. The iframe posts messages to the parent for
+    # segment-click events; the parent listens and fires the Gradio regen trigger.
+    # For playhead sync, the iframe polls window.parent for a <video> element.
+    iframe_inner = f"""<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  * {{ margin:0; padding:0; box-sizing:border-box; }}
+  body {{ background:#1a1a1a; overflow:hidden; }}
+  #wrap {{ position:relative; width:100%; height:80px; }}
+  canvas {{ display:block; }}
+  #cv  {{ position:absolute; top:0; left:0; width:100%; height:100%; }}
+  #cvp {{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }}
+  #popup {{
+    display:none; position:fixed; z-index:9999;
+    background:#2a2a2a; border:1px solid #555; border-radius:6px;
+    padding:8px 12px; box-shadow:0 4px 16px rgba(0,0,0,.5);
+    font-family:sans-serif;
+  }}
+  #popuplbl {{ color:#ccc; font-size:11px; margin-bottom:6px; white-space:nowrap; }}
+  #regenbtn  {{
+    background:#1d6fa5; color:#fff; border:none; border-radius:4px;
+    padding:5px 14px; font-size:12px; cursor:pointer; width:100%;
+  }}
+</style>
+</head>
+<body>
+<div id="wrap">
+  <canvas id="cv"></canvas>
+  <canvas id="cvp"></canvas>
+</div>
+<div id="popup">
+  <div id="popuplbl"></div>
+  <button id="regenbtn">&#10227; Regenerate</button>
 </div>
 <script>
 (function() {{
+  const SLOT_ID  = '{slot_id}';
+  const segments = {segs_json};
   const segColors = {json.dumps(seg_colors)};
   let   audioDuration = 0;
+  let   pendingIdx    = null;
+  // ── Popup ──────────────────────────────────────────────────────────
+  const popup   = document.getElementById('popup');
+  const popuplbl= document.getElementById('popuplbl');
+  const regenbtn= document.getElementById('regenbtn');
   function showPopup(idx, mx, my) {{
+    pendingIdx = idx;
+    popuplbl.textContent = 'Seg '+(idx+1)+'  ('+segments[idx][0].toFixed(2)+'s \u2013 '+segments[idx][1].toFixed(2)+'s)';
     popup.style.display = 'block';
+    popup.style.left = (mx+10)+'px';
+    popup.style.top  = (my+10)+'px';
     requestAnimationFrame(function() {{
       const r=popup.getBoundingClientRect(), vw=window.innerWidth, vh=window.innerHeight;
+      if (r.right >vw-8) popup.style.left=(vw-r.width-8)+'px';
+      if (r.bottom>vh-8) popup.style.top =(vh-r.height-8)+'px';
     }});
   }}
+  function hidePopup() {{ popup.style.display='none'; pendingIdx=null; }}
+  regenbtn.onclick = function(e) {{
+    e.stopPropagation();
+    if (pendingIdx !== null) {{
+      // Directly trigger Gradio hidden input in parent document (same-origin iframe)
+      try {{
+        const par = window.parent.document;
+        const el  = par.getElementById('{hidden_input_id}');
+        if (el) {{
+          const input = el.querySelector('input, textarea');
+          if (input) {{
+            const desc = Object.getOwnPropertyDescriptor(
+              window.parent.HTMLInputElement.prototype, 'value')
+              || Object.getOwnPropertyDescriptor(
+              window.parent.HTMLTextAreaElement.prototype, 'value');
+            if (desc && desc.set) desc.set.call(input, SLOT_ID+'|'+pendingIdx);
+            else input.value = SLOT_ID+'|'+pendingIdx;
+            input.dispatchEvent(new window.parent.Event('input', {{bubbles:true}}));
+          }}
+        }}
+        // Update status label in parent
+        const lbl = par.getElementById('wf_seglabel_{slot_id}');
+        if (lbl && segments[pendingIdx])
+          lbl.textContent = 'Regenerating Seg '+(pendingIdx+1)+
+            ' ('+segments[pendingIdx][0].toFixed(2)+'s \u2013 '+
+            segments[pendingIdx][1].toFixed(2)+'s)\u2026';
+      }} catch(err) {{
+        console.error('[wf iframe] regen trigger failed:', err);
+      }}
+      hidePopup();
+    }}
+  }};
   document.addEventListener('click', function(e) {{
+    if (popup.style.display!=='none' && !popup.contains(e.target)) hidePopup();
   }}, true);
+  // ── Canvas waveform ────────────────────────────────────────────────
+  const cv  = document.getElementById('cv');
+  const cvp = document.getElementById('cvp');
+  const wrap= document.getElementById('wrap');
   function drawWaveform(channelData, duration) {{
     audioDuration = duration;
     const dpr = window.devicePixelRatio || 1;
+    const W   = wrap.getBoundingClientRect().width  || window.innerWidth || 600;
     const H   = 80;
+    console.log('[wf iframe {slot_id}] drawWaveform W='+W+' H='+H);
+    cv.width  = W * dpr;  cv.height = H * dpr;
+    const ctx = cv.getContext('2d');
     ctx.scale(dpr, dpr);
     ctx.fillStyle = '#1e1e2e';
     ctx.fillRect(0, 0, W, H);
     segments.forEach(function(seg, idx) {{
       const x1 = (seg[0] / duration) * W;
       const x2 = (seg[1] / duration) * W;
       ctx.fillStyle = segColors[idx % segColors.length];
       ctx.fillRect(x1, 0, x2-x1, H);
       ctx.fillStyle = 'rgba(255,255,255,0.6)';
       ctx.font = '10px sans-serif';
       ctx.fillText('Seg '+(idx+1), x1+3, 12);
     }});
     const samples = channelData.length;
+    const barW=2, gap=1, step=barW+gap;
     const numBars = Math.floor(W / step);
     const blockSz = Math.floor(samples / numBars);
     ctx.fillStyle = '#4a9eff';
+    for (let i=0; i<numBars; i++) {{
+      let max=0;
+      const s=i*blockSz;
+      for (let j=0; j<blockSz; j++) {{
+        const v=Math.abs(channelData[s+j]||0);
+        if (v>max) max=v;
       }}
+      const barH=Math.max(1, max*H);
+      ctx.fillRect(i*step, (H-barH)/2, barW, barH);
     }}
     segments.forEach(function(seg) {{
+      [seg[0],seg[1]].forEach(function(t) {{
+        const x=(t/duration)*W;
+        ctx.strokeStyle='rgba(255,255,255,0.4)';
+        ctx.lineWidth=1;
+        ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke();
       }});
     }});
+    cv.onclick = function(e) {{
+      const r=cv.getBoundingClientRect();
+      const xRel=(e.clientX-r.left)/r.width;
+      const tClick=xRel*duration;
+      let hit=-1;
+      segments.forEach(function(seg,idx){{ if(tClick>=seg[0]&&tClick<=seg[1]) hit=idx; }});
+      if (hit>=0) showPopup(hit, e.clientX, e.clientY);
       else hidePopup();
     }};
   }}
   function drawPlayhead(progress) {{
     const dpr = window.devicePixelRatio || 1;
+    const W   = wrap.getBoundingClientRect().width || window.innerWidth || 600;
     const H   = 80;
+    if (cvp.width !== W*dpr) {{ cvp.width=W*dpr; cvp.height=H*dpr; }}
+    const ctx = cvp.getContext('2d');
+    ctx.clearRect(0,0,W*dpr,H*dpr);
+    ctx.save();
+    ctx.scale(dpr,dpr);
+    const x=progress*W;
+    ctx.strokeStyle='#fff';
+    ctx.lineWidth=2;
+    ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,H); ctx.stroke();
+    ctx.restore();
   }}
+  // Poll parent for video time
+  setInterval(function() {{
+    try {{
+      const vid = window.parent.document.querySelector('video');
+      if (vid && vid.duration && isFinite(vid.duration) && audioDuration > 0) {{
+        drawPlayhead(vid.currentTime / vid.duration);
       }}
+    }} catch(e) {{ /* cross-origin — ignore */ }}
+  }}, 50);
+  // ── Decode audio ───────────────────────────────────────────────────
   const b64str = '{b64}';
+  console.log('[wf iframe {slot_id}] b64 len='+b64str.length);
   const bin = atob(b64str);
   const buf = new Uint8Array(bin.length);
+  for (let i=0; i<bin.length; i++) buf[i]=bin.charCodeAt(i);
+  console.log('[wf iframe {slot_id}] raw bytes='+buf.byteLength);
+  const AudioCtx = window.AudioContext || window.webkitAudioContext;
+  if (!AudioCtx) {{
+    console.warn('[wf iframe {slot_id}] No AudioContext');
+  }} else {{
+    const tmpCtx = new AudioCtx({{sampleRate:44100}});
+    console.log('[wf iframe {slot_id}] calling decodeAudioData');
     try {{
+      tmpCtx.decodeAudioData(buf.buffer.slice(0),
+        function(ab) {{
+          console.log('[wf iframe {slot_id}] decoded OK duration='+ab.duration+'s');
+          try {{ tmpCtx.close(); }} catch(e) {{}}
+          function tryDraw() {{
+            const W = wrap.getBoundingClientRect().width || window.innerWidth;
+            console.log('[wf iframe {slot_id}] tryDraw W='+W);
+            if (W > 0) {{ drawWaveform(ab.getChannelData(0), ab.duration); }}
+            else {{ setTimeout(tryDraw, 100); }}
+          }}
+          tryDraw();
+        }},
+        function(err) {{ console.error('[wf iframe {slot_id}] decodeAudioData err:', err); }}
+      );
+    }} catch(e) {{ console.error('[wf iframe {slot_id}] decodeAudioData threw:', e); }}
   }}
 }})();
 </script>
+</body>
+</html>"""
+    # Escape for HTML attribute (srcdoc uses HTML entities)
+    import html as _html
+    srcdoc = _html.escape(iframe_inner, quote=True)
+    return f"""
+<div id="wf_container_{slot_id}"
+     style="background:#1a1a1a;border-radius:8px;padding:10px;margin-top:6px;position:relative;">
+  <div style="position:relative;width:100%;height:80px;">
+    <iframe id="wf_iframe_{slot_id}"
+            srcdoc="{srcdoc}"
+            sandbox="allow-scripts allow-same-origin"
+            style="width:100%;height:80px;border:none;border-radius:4px;display:block;"
+            scrolling="no"></iframe>
+  </div>
+  <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
+    <span style="color:#888;font-size:11px;">Click a segment to regenerate &nbsp;|&nbsp; Playhead syncs to video</span>
+    <a href="{data_uri}" download="audio_{slot_id}.wav"
+       style="margin-left:auto;background:#333;color:#eee;border:1px solid #555;
+              border-radius:4px;padding:3px 10px;font-size:12px;text-decoration:none;">
+      &#8595; Download</a>
+  </div>
+  <div id="wf_seglabel_{slot_id}"
+       style="color:#aaa;font-size:11px;margin-top:4px;min-height:16px;"></div>
+</div>
 """