.

app.py

@@ -1085,26 +1085,14 @@ def _pad_outputs(outputs: list) -> list:
 # WaveSurfer waveform + segment marker HTML builder                   #
 # ------------------------------------------------------------------ #
 
-_WAVESURFER_CDN = "https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/7.8.7/wavesurfer.min.js"
-_REGIONS_CDN    = "https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/7.8.7/plugins/regions.min.js"
-
 def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
                          hidden_input_id: str) -> str:
-    """Return a self-contained HTML block with a WaveSurfer waveform (display only),
+    """Return a self-contained HTML block with a Canvas waveform (display only),
     segment boundary markers, and a download link.
 
-    The waveform is SILENT — no audio plays from it.  The playhead tracks the
-    Gradio <video> element in the same slot via its `timeupdate` event.
-
-    Clicking a region shows a small popup near the cursor with a
-    "Regenerate" button.  Clicking elsewhere dismisses the popup.
-    Clicking "Regenerate" fires the hidden Gradio textbox to trigger Python.
-
-    Args:
-        audio_path:       absolute path to the .wav file
-        segments:         list of (start_s, end_s) tuples
-        slot_id:          unique string id for this slot (e.g. "taro_0")
-        hidden_input_id:  elem_id of the hidden gr.Textbox to fire
+    Uses Web Audio API + Canvas — no external libraries.
+    The waveform is SILENT. The playhead tracks the Gradio <video> element
+    in the same slot via its timeupdate event.
     """
     if not audio_path or not os.path.exists(audio_path):
         return "<p style='color:#888;font-size:12px'>No audio yet.</p>"
@@ -1115,15 +1103,20 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
 
     segs_json = json.dumps(segments)
 
-    colors = ["rgba(100,180,255,0.22)", "rgba(255,160,100,0.22)",
-              "rgba(120,220,140,0.22)", "rgba(220,120,220,0.22)",
-              "rgba(255,220,80,0.22)",  "rgba(80,220,220,0.22)",
-              "rgba(255,100,100,0.22)", "rgba(180,255,180,0.22)"]
+    seg_colors = ["rgba(100,180,255,0.35)", "rgba(255,160,100,0.35)",
+                  "rgba(120,220,140,0.35)", "rgba(220,120,220,0.35)",
+                  "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 id="wf_{slot_id}" style="width:100%;min-height:80px;"></div>
+  <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"
@@ -1150,260 +1143,207 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
 </div>
 <script>
 (function() {{
-  // Each time this HTML is injected (new audio or regen), destroy any previous
-  // WaveSurfer instance for this slot so we get a fresh waveform.
-  if (window["_wf_ws_{slot_id}"]) {{
-    try {{ window["_wf_ws_{slot_id}"].destroy(); }} catch(e) {{}}
-    window["_wf_ws_{slot_id}"] = null;
-  }}
-  // Remove previous video timeupdate listener if any
+  // 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;
   }}
 
-  let _pendingSegIdx_{slot_id} = null;
+  const segments  = {segs_json};
+  const segColors = {json.dumps(seg_colors)};
+  let   audioDuration = 0;
+  let   _pendingSegIdx_{slot_id} = null;
 
+  // ── Popup helpers ──────────────────────────────────────────────────
   function fireRegen(idx) {{
-    const popup = document.getElementById('wf_popup_{slot_id}');
-    if (popup) popup.style.display = 'none';
+    document.getElementById('wf_popup_{slot_id}').style.display = 'none';
     const lbl = document.getElementById('wf_seglabel_{slot_id}');
-    const segs = {segs_json};
     if (lbl) lbl.textContent = 'Regenerating Seg ' + (idx+1) +
-      ' (' + segs[idx][0].toFixed(2) + 's \u2013 ' + segs[idx][1].toFixed(2) + 's)\u2026';
-    // Trigger Gradio via the hidden textbox
+      ' (' + 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 nativeSetter =
-          Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value') ||
-          Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value');
-        if (nativeSetter && nativeSetter.set) {{
-          nativeSetter.set.call(input, '{slot_id}|' + idx);
-        }} else {{
-          input.value = '{slot_id}|' + idx;
-        }}
-        input.dispatchEvent(new Event('input', {{ bubbles: true }}));
+        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, mouseX, mouseY) {{
+  function showPopup(idx, mx, my) {{
     _pendingSegIdx_{slot_id} = idx;
-    const segs  = {segs_json};
     const popup = document.getElementById('wf_popup_{slot_id}');
     const plbl  = document.getElementById('wf_popup_label_{slot_id}');
-    if (plbl) plbl.textContent =
-      'Seg ' + (idx+1) + '  (' + segs[idx][0].toFixed(2) + 's \u2013 ' + segs[idx][1].toFixed(2) + 's)';
-    if (popup) {{
-      popup.style.display = 'block';
-      const vw = window.innerWidth, vh = window.innerHeight;
-      popup.style.left = (mouseX + 10) + 'px';
-      popup.style.top  = (mouseY + 10) + 'px';
-      requestAnimationFrame(function() {{
-        const r = popup.getBoundingClientRect();
-        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';
-      }});
-    }}
+    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() {{
-    const popup = document.getElementById('wf_popup_{slot_id}');
-    if (popup) popup.style.display = 'none';
+    document.getElementById('wf_popup_{slot_id}').style.display='none';
     _pendingSegIdx_{slot_id} = null;
   }}
 
-  // Wire the Regenerate button (poll until the element exists)
   (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);
-    }}
+    if (btn) {{ btn.onclick = function(e) {{ e.stopPropagation(); if (_pendingSegIdx_{slot_id}!==null) fireRegen(_pendingSegIdx_{slot_id}); }}; }}
+    else setTimeout(tryWireBtn, 100);
   }})();
 
-  // Dismiss popup on click outside
   document.addEventListener('click', function(e) {{
-    const popup = document.getElementById('wf_popup_{slot_id}');
-    if (popup && popup.style.display !== 'none') {{
-      if (!popup.contains(e.target)) hidePopup();
-    }}
+    const p=document.getElementById('wf_popup_{slot_id}');
+    if (p && p.style.display!=='none' && !p.contains(e.target)) hidePopup();
   }}, true);
 
-  // -----------------------------------------------------------------------
-  // Find the <video> element that lives in the same Gradio slot as this
-  // waveform.  Walk up the DOM from the waveform container until we find
-  // a parent that also contains a <video> tag.
-  // -----------------------------------------------------------------------
+  // ── Canvas waveform drawing ────────────────────────────────────────
+  function drawWaveform(channelData, duration) {{
+    audioDuration = duration;
+    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 H   = 80;
+    canvas.width  = W * dpr;
+    canvas.height = H * dpr;
+    const ctx = canvas.getContext('2d');
+    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.offsetWidth  || canvas.parentElement.offsetWidth || 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() {{
-    const wfEl = document.getElementById('wf_container_{slot_id}');
-    if (!wfEl) return null;
-    let node = wfEl.parentElement;
+    let node = document.getElementById('wf_container_{slot_id}');
     while (node && node !== document.body) {{
-      const vid = node.querySelector('video');
-      if (vid) return vid;
+      const v = node.querySelector('video');
+      if (v) return v;
       node = node.parentElement;
     }}
     return null;
   }}
 
-  function attachVideoSync(ws) {{
-    // Poll until the video element appears (Gradio may render it after the HTML)
-    function tryAttach() {{
+  function attachVideoSync() {{
+    (function tryAttach() {{
       const video = findSlotVideo();
-      if (!video) {{
-        setTimeout(tryAttach, 300);
-        return;
-      }}
+      if (!video) {{ setTimeout(tryAttach, 300); return; }}
       function onTimeUpdate() {{
         if (!video.duration || !isFinite(video.duration)) return;
-        const progress = video.currentTime / video.duration;
-        try {{ ws.seekTo(Math.max(0, Math.min(1, progress))); }} catch(e) {{}}
+        drawPlayhead(video.currentTime / video.duration);
       }}
       video.addEventListener('timeupdate', onTimeUpdate);
-      // Store cleanup fn so we can detach when this HTML is replaced
       window["_wf_video_unlisten_{slot_id}"] = function() {{
         video.removeEventListener('timeupdate', onTimeUpdate);
       }};
-    }}
-    tryAttach();
+    }})();
   }}
 
-  function loadWS() {{
-    if (!window.WaveSurfer) {{
-      setTimeout(loadWS, 200);
-      return;
-    }}
-
-    // Use MediaElement backend so WaveSurfer renders the waveform from the
-    // audio data but we keep the backing <audio> muted — no sound output.
-    let plugins = [];
-    let regionsPlugin = null;
-    if (window.WaveSurfer.Regions) {{
-      regionsPlugin = window.WaveSurfer.Regions.create();
-      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}');
-    function createWS() {{
-      const ws = WaveSurfer.create({{
-        container:     '#wf_{slot_id}',
-        waveColor:     '#4a9eff',
-        progressColor: '#1a5fa8',
-        height:        80,
-        barWidth:      2,
-        barGap:        1,
-        barRadius:     2,
-        url:           blobUrl,
-        plugins:       plugins,
-      }});
-
-      // Silence immediately — waveform is display-only, video plays the audio
-      ws.setVolume(0);
-      ws.on('ready', function() {{
-        ws.setVolume(0);
-        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);
-      }});
-
-      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); }});
-
-      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 after 1s in case ResizeObserver fires late
-      setTimeout(function() {{
-        if (!window["_wf_ws_{slot_id}"]) {{ ro.disconnect(); createWS(); }}
-      }}, 1000);
-    }} else {{
-      // Container not in DOM yet — wait for it
-      setTimeout(loadWS, 200);
-    }}
+  // ── 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) {{
+      const channelData = audioBuffer.getChannelData(0);
+      drawWaveform(channelData, audioBuffer.duration);
+      attachVideoSync();
+      actx.close();
+    }}, function(err) {{
+      console.error('[waveform {slot_id}] decodeAudioData error:', err);
+    }});
   }}
 
-  // Load WaveSurfer + Regions scripts once (idempotent)
-  function loadScripts(cb) {{
-    if (window.WaveSurfer) {{ cb(); return; }}
-    if (document.getElementById('wavesurfer_script')) {{
-      // Script tag exists but WaveSurfer not yet defined — wait
-      const t = setInterval(function() {{
-        if (window.WaveSurfer) {{ clearInterval(t); cb(); }}
-      }}, 100);
-      return;
-    }}
-    const s = document.createElement('script');
-    s.id  = 'wavesurfer_script';
-    s.src = '{_WAVESURFER_CDN}';
-    s.onload = function() {{
-      if (document.getElementById('wavesurfer_regions_script')) {{
-        cb(); return;
-      }}
-      const r = document.createElement('script');
-      r.id  = 'wavesurfer_regions_script';
-      r.src = '{_REGIONS_CDN}';
-      r.onload = cb;
-      document.head.appendChild(r);
-    }};
-    document.head.appendChild(s);
+  // 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);
   }}
-
-  loadScripts(loadWS);
 }})();
 </script>
 """
@@ -1486,20 +1426,7 @@ def _update_slot_visibility(n):
 #                       GRADIO UI                                     #
 # ================================================================== #
 
-_SLOT_CSS = """
-/* 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;
-}
-"""
+_SLOT_CSS = ""
 
 with gr.Blocks(title="Generate Audio for Video", css=_SLOT_CSS) as demo:
     gr.Markdown(