Spaces:

JackIsNotInTheBox
/

Generate_Audio_for_Video

Running on Zero

App Files Files Community

BoxOfColors commited on 7 days ago

Commit

41d322f

1 Parent(s): fcc4220

Fix waveform: popup via postMessage, regen, playhead, Too many args

Browse files

Files changed (1) hide show

app.py +123 -75

app.py CHANGED Viewed

@@ -1125,17 +1125,6 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
   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>
@@ -1143,71 +1132,38 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
   <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');
@@ -1289,14 +1245,29 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
     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 ───────────────────────────────────────────────────
@@ -1375,7 +1346,6 @@ def _make_output_slots(tab_prefix: str) -> tuple:
             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",
             ))
             # Hidden textbox: JS writes "<slot_id>|<seg_idx>" here to trigger regen
             regen_triggers.append(gr.Textbox(
@@ -1449,7 +1419,85 @@ _SLOT_CSS = """
 }
 """
-with gr.Blocks(title="Generate Audio for Video", css=_SLOT_CSS) as demo:
     gr.Markdown(
         "# Generate Audio for Video\n"
         "Choose a model and upload a video to generate synchronized audio.\n\n"

   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; }}
 </style>
 </head>
 <body>
   <canvas id="cv"></canvas>
   <canvas id="cvp"></canvas>
 </div>
 <script>
 (function() {{
   const SLOT_ID  = '{slot_id}';
   const segments = {segs_json};
   const segColors = {json.dumps(seg_colors)};
   let   audioDuration = 0;
+  // ── Popup via postMessage to parent global listener ─────────────────
+  // The parent page (Gradio) has a global window.addEventListener('message',...)
+  // set up via gr.Blocks(js=...) that handles popup show/hide and regen trigger.
   function showPopup(idx, mx, my) {{
+    // Convert iframe-local coords to parent page coords
+    try {{
+      const fr = window.frameElement ? window.frameElement.getBoundingClientRect() : {{left:0,top:0}};
+      window.parent.postMessage({{
+        type:'wf_popup', action:'show',
+        slot_id: SLOT_ID, seg_idx: idx,
+        t0: segments[idx][0], t1: segments[idx][1],
+        x: mx + fr.left, y: my + fr.top
+      }}, '*');
+    }} catch(e) {{
+      window.parent.postMessage({{
+        type:'wf_popup', action:'show',
+        slot_id: SLOT_ID, seg_idx: idx,
+        t0: segments[idx][0], t1: segments[idx][1],
+        x: mx, y: my
+      }}, '*');
     }}
+  }}
+  function hidePopup() {{
+    window.parent.postMessage({{type:'wf_popup', action:'hide'}}, '*');
+  }}
   // ── Canvas waveform ────────────────────────────────────────────────
   const cv  = document.getElementById('cv');
     ctx.restore();
   }}
+  // Poll parent for video time — find the video in the same wf_container slot
+  function findSlotVideo() {{
     try {{
+      const par = window.parent.document;
+      // Walk up from our iframe to find wf_container_{slot_id}, then find its sibling video
+      const container = par.getElementById('wf_container_{slot_id}');
+      if (!container) return par.querySelector('video');
+      // The video is inside the same gr.Group — walk up to find it
+      let node = container.parentElement;
+      while (node && node !== par.body) {{
+        const v = node.querySelector('video');
+        if (v) return v;
+        node = node.parentElement;
       }}
+      return null;
+    }} catch(e) {{ return null; }}
+  }}
+  setInterval(function() {{
+    const vid = findSlotVideo();
+    if (vid && vid.duration && isFinite(vid.duration) && audioDuration > 0) {{
+      drawPlayhead(vid.currentTime / vid.duration);
+    }}
   }}, 50);
   // ── Decode audio ───────────────────────────────────────────────────
             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>",
             ))
             # Hidden textbox: JS writes "<slot_id>|<seg_idx>" here to trigger regen
             regen_triggers.append(gr.Textbox(
 }
 """
+_GLOBAL_JS = """
+() => {
+  // Global postMessage handler for waveform iframe events.
+  // Runs once on page load (Gradio js= parameter).
+  // Handles: popup open/close relay, regen trigger.
+  if (window._wf_global_listener) return;  // already registered
+  window._wf_global_listener = true;
+  // Shared popup element created once and reused across all slots
+  let _popup = null;
+  let _pendingSlot = null, _pendingIdx = null;
+  function ensurePopup() {
+    if (_popup) return _popup;
+    _popup = document.createElement('div');
+    _popup.style.cssText = 'display:none;position:fixed;z-index:99999;' +
+      '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;';
+    _popup.innerHTML =
+      '<div id="_wf_popup_lbl" style="color:#ccc;font-size:11px;margin-bottom:6px;white-space:nowrap;"></div>' +
+      '<button id="_wf_popup_btn" style="background:#1d6fa5;color:#fff;border:none;' +
+        'border-radius:4px;padding:5px 14px;font-size:12px;cursor:pointer;width:100%;">&#10227; Regenerate</button>';
+    document.body.appendChild(_popup);
+    document.getElementById('_wf_popup_btn').onclick = function(e) {
+      e.stopPropagation();
+      if (_pendingSlot !== null && _pendingIdx !== null) {
+        fireRegen(_pendingSlot, _pendingIdx);
+      }
+      hidePopup();
+    };
+    document.addEventListener('click', function() { hidePopup(); }, true);
+    return _popup;
+  }
+  function hidePopup() {
+    if (_popup) _popup.style.display = 'none';
+    _pendingSlot = null; _pendingIdx = null;
+  }
+  function fireRegen(slot_id, idx) {
+    const hidden_id = 'regen_trigger_' + slot_id;
+    const el = document.getElementById(hidden_id);
+    if (!el) { console.warn('[wf global] regen el not found:', hidden_id); return; }
+    const input = el.querySelector('input, textarea');
+    if (!input) { console.warn('[wf global] regen input not found in', hidden_id); return; }
+    const desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')
+              || Object.getOwnPropertyDescriptor(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}));
+    // Update status label
+    const lbl = document.getElementById('wf_seglabel_' + slot_id);
+    if (lbl) lbl.textContent = 'Regenerating Seg ' + (idx + 1) + '...';
+  }
+  window.addEventListener('message', function(e) {
+    const d = e.data;
+    if (!d || d.type !== 'wf_popup') return;
+    const p = ensurePopup();
+    if (d.action === 'hide') { hidePopup(); return; }
+    // action === 'show'
+    _pendingSlot = d.slot_id;
+    _pendingIdx  = d.seg_idx;
+    const lbl = document.getElementById('_wf_popup_lbl');
+    if (lbl) lbl.textContent = 'Seg ' + (d.seg_idx + 1) +
+      '  (' + d.t0.toFixed(2) + 's – ' + d.t1.toFixed(2) + 's)';
+    p.style.display = 'block';
+    p.style.left = (d.x + 10) + 'px';
+    p.style.top  = (d.y + 10) + 'px';
+    requestAnimationFrame(function() {
+      const r = p.getBoundingClientRect();
+      if (r.right  > window.innerWidth  - 8) p.style.left = (window.innerWidth  - r.width  - 8) + 'px';
+      if (r.bottom > window.innerHeight - 8) p.style.top  = (window.innerHeight - r.height - 8) + 'px';
+    });
+  });
+}
+"""
+with gr.Blocks(title="Generate Audio for Video", css=_SLOT_CSS, js=_GLOBAL_JS) as demo:
     gr.Markdown(
         "# Generate Audio for Video\n"
         "Choose a model and upload a video to generate synchronized audio.\n\n"