.

app.py

@@ -785,16 +785,24 @@ def _splice_and_save(new_wav, seg_idx, meta, slot_id):
     else:
         full_wav = full_wav[:n_total]
 
-    # Save new audio
+    # Save new audio — use a new timestamped filename so Gradio / the browser
+    # treats it as a genuinely different file and reloads the video player.
+    import time as _time
+    _ts        = int(_time.time() * 1000)
     tmp_dir    = os.path.dirname(meta["audio_path"])
-    audio_path = meta["audio_path"]   # overwrite in-place
+    _base      = os.path.splitext(os.path.basename(meta["audio_path"]))[0]
+    # Strip any previous timestamp suffix before adding a new one
+    _base_clean = _base.rsplit("_regen_", 1)[0]
+    audio_path = os.path.join(tmp_dir, f"{_base_clean}_regen_{_ts}.wav")
     if stereo:
         torchaudio.save(audio_path, torch.from_numpy(np.ascontiguousarray(full_wav)), sr)
     else:
         torchaudio.save(audio_path, torch.from_numpy(np.ascontiguousarray(full_wav)).unsqueeze(0), sr)
 
-    # Re-mux video
-    video_path = meta["video_path"]   # overwrite in-place
+    # Re-mux into a new video file so the browser is forced to reload it
+    _vid_base   = os.path.splitext(os.path.basename(meta["video_path"]))[0]
+    _vid_base_clean = _vid_base.rsplit("_regen_", 1)[0]
+    video_path  = os.path.join(tmp_dir, f"{_vid_base_clean}_regen_{_ts}.mp4")
     if model == "hunyuan":
         # HunyuanFoley uses its own merge_audio_video
         _hf_path = str(Path("HunyuanVideo-Foley").resolve())
@@ -1082,8 +1090,11 @@ _REGIONS_CDN    = "https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/7.8.7/pl
 
 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,
-    segment boundary markers, a play/pause button, and a download link.
+    """Return a self-contained HTML block with a WaveSurfer 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.
@@ -1114,10 +1125,7 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
      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="display:flex;align-items:center;gap:8px;margin-top:6px;">
-    <button id="wf_playbtn_{slot_id}" onclick="wf_toggle_{slot_id}()"
-      style="background:#333;color:#eee;border:1px solid #555;border-radius:4px;
-             padding:3px 10px;font-size:12px;cursor:pointer;">&#9654; Play</button>
-    <span style="color:#888;font-size:11px;">Click a segment to regenerate</span>
+    <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;">
@@ -1142,9 +1150,17 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
 </div>
 <script>
 (function() {{
-  // Guard against double-init on Gradio re-renders
-  if (window["_wf_init_{slot_id}"]) return;
-  window["_wf_init_{slot_id}"] = true;
+  // 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
+  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;
 
@@ -1160,10 +1176,14 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     if (el) {{
       const input = el.querySelector('input, textarea');
       if (input) {{
-        const setter =
-          Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set ||
-          Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
-        setter.call(input, '{slot_id}|' + idx);
+        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 }}));
       }}
     }}
@@ -1178,12 +1198,9 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
       'Seg ' + (idx+1) + '  (' + segs[idx][0].toFixed(2) + 's \u2013 ' + segs[idx][1].toFixed(2) + 's)';
     if (popup) {{
       popup.style.display = 'block';
-      // Position near cursor, keep inside viewport
       const vw = window.innerWidth, vh = window.innerHeight;
-      let x = mouseX + 10, y = mouseY + 10;
-      popup.style.left = x + 'px';
-      popup.style.top  = y + 'px';
-      // nudge back if off screen
+      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';
@@ -1198,15 +1215,7 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     _pendingSegIdx_{slot_id} = null;
   }}
 
-  // Wire the Regenerate button
-  document.addEventListener('DOMContentLoaded', function() {{
-    const btn = document.getElementById('wf_regen_btn_{slot_id}');
-    if (btn) btn.addEventListener('click', function(e) {{
-      e.stopPropagation();
-      if (_pendingSegIdx_{slot_id} !== null) fireRegen(_pendingSegIdx_{slot_id});
-    }});
-  }});
-  // Also wire immediately in case DOM already loaded
+  // Wire the Regenerate button (poll until the element exists)
   (function tryWireBtn() {{
     const btn = document.getElementById('wf_regen_btn_{slot_id}');
     if (btn) {{
@@ -1227,79 +1236,130 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     }}
   }}, 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.
+  // -----------------------------------------------------------------------
+  function findSlotVideo() {{
+    const wfEl = document.getElementById('wf_container_{slot_id}');
+    if (!wfEl) return null;
+    let node = wfEl.parentElement;
+    while (node && node !== document.body) {{
+      const vid = node.querySelector('video');
+      if (vid) return vid;
+      node = node.parentElement;
+    }}
+    return null;
+  }}
+
+  function attachVideoSync(ws) {{
+    // Poll until the video element appears (Gradio may render it after the HTML)
+    function tryAttach() {{
+      const video = findSlotVideo();
+      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) {{}}
+      }}
+      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 || !window.WaveSurfer.Regions) {{
+    if (!window.WaveSurfer) {{
       setTimeout(loadWS, 200);
       return;
     }}
-    const RegionsPlugin = window.WaveSurfer.Regions.create();
+
+    // 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];
+    }}
+
     const ws = WaveSurfer.create({{
-      container:    '#wf_{slot_id}',
-      waveColor:    '#4a9eff',
-      progressColor:'#1a5fa8',
-      height:       80,
-      barWidth:     2,
-      barGap:       1,
-      barRadius:    2,
-      backend:      'WebAudio',
-      url:          '{data_uri}',
-      plugins:      [RegionsPlugin],
+      container:     '#wf_{slot_id}',
+      waveColor:     '#4a9eff',
+      progressColor: '#1a5fa8',
+      height:        80,
+      barWidth:      2,
+      barGap:        1,
+      barRadius:     2,
+      interact:      false,
+      url:           '{data_uri}',
+      plugins:       plugins,
     }});
-    window["_wf_ws_{slot_id}"] = ws;
-    window["wf_toggle_{slot_id}"] = function() {{ ws.playPause(); }};
-
-    const segments = {segs_json};
-    const colors   = {json.dumps(colors)};
 
+    // Silence the WaveSurfer audio immediately and on ready
+    ws.setVolume(0);
     ws.on('ready', function() {{
-      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.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),
+          }});
         }});
-      }});
-    }});
-
-    RegionsPlugin.on('region-clicked', function(region, e) {{
-      e.stopPropagation();
-      const idx = parseInt(region.id.replace('seg_', ''));
-      showPopup(idx, e.clientX, e.clientY);
+        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('play',   function() {{
-      const b = document.getElementById('wf_playbtn_{slot_id}');
-      if (b) b.textContent = '\u23f8 Pause';
-    }});
-    ws.on('pause',  function() {{
-      const b = document.getElementById('wf_playbtn_{slot_id}');
-      if (b) b.textContent = '\u25b6 Play';
-    }});
-    ws.on('finish', function() {{
-      const b = document.getElementById('wf_playbtn_{slot_id}');
-      if (b) b.textContent = '\u25b6 Play';
-    }});
+    window["_wf_ws_{slot_id}"] = ws;
   }}
 
-  if (!document.getElementById('wavesurfer_script')) {{
+  // 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 = loadWS;
+      r.onload = cb;
       document.head.appendChild(r);
     }};
     document.head.appendChild(s);
-  }} else {{
-    loadWS();
   }}
+
+  loadScripts(loadWS);
 }})();
 </script>
 """