Fix regen: add _listenAndApply SSE handler + elem_id on output slots

app.py

@@ -1416,10 +1416,13 @@ def _make_output_slots(tab_prefix: str) -> tuple:
     """
     grps, vids, waveforms = [], [], []
     for i in range(MAX_SLOTS):
+        slot_id = f"{tab_prefix}_{i}"
         with gr.Group(visible=(i == 0)) as g:
-            vids.append(gr.Video(label=f"Generation {i+1} — Video"))
+            vids.append(gr.Video(label=f"Generation {i+1} — Video",
+                                 elem_id=f"slot_vid_{slot_id}"))
             waveforms.append(gr.HTML(
                 value="<p style='color:#888;font-size:12px'>Generate audio to see waveform.</p>",
+                elem_id=f"slot_wave_{slot_id}",
             ))
         grps.append(g)
     return grps, vids, waveforms
@@ -1597,6 +1600,10 @@ _GLOBAL_JS = """
 
     console.log('[fireRegen] calling api', apiName, 'fn_index', fnIndex, 'seg', seg_idx);
 
+    // Show spinner immediately
+    const lbl = document.getElementById('wf_seglabel_' + slot_id);
+    if (lbl) lbl.textContent = 'Regenerating Seg ' + (seg_idx + 1) + '...';
+
     fetch('/gradio_api/queue/join', {
       method: 'POST',
       headers: {'Content-Type': 'application/json'},
@@ -1608,14 +1615,71 @@ _GLOBAL_JS = """
         trigger_id: null
       })
     }).then(function(r) { return r.json(); }).then(function(j) {
+      if (!j.event_id) { console.error('[fireRegen] no event_id:', j); return; }
       console.log('[fireRegen] queued, event_id:', j.event_id);
-      const lbl = document.getElementById('wf_seglabel_' + slot_id);
-      if (lbl) lbl.textContent = 'Regenerating Seg ' + (seg_idx + 1) + '...';
+      // Subscribe to SSE stream and apply outputs when ready
+      _listenAndApply(j.event_id, slot_id, seg_idx);
     }).catch(function(e) {
       console.error('[fireRegen] fetch error:', e);
+      if (lbl) lbl.textContent = 'Error — see console';
     });
   }
 
+  // Subscribe to Gradio SSE stream for an event and apply outputs to DOM.
+  // For regen handlers, output[0] = video update, output[1] = waveform HTML update.
+  function _listenAndApply(eventId, slot_id, seg_idx) {
+    const es = new EventSource('/gradio_api/queue/data?session_hash=' + window.__gradio_session_hash__);
+    es.onmessage = function(e) {
+      var msg;
+      try { msg = JSON.parse(e.data); } catch(_) { return; }
+      if (msg.event_id !== eventId) return;
+      if (msg.msg === 'process_generating' || msg.msg === 'process_completed') {
+        var out = msg.output;
+        if (out && out.data) {
+          // data[0] = video update, data[1] = waveform HTML update
+          var vidUpdate  = out.data[0];
+          var waveUpdate = out.data[1];
+          // Apply video: update the <video> src inside the slot_vid element
+          if (vidUpdate && vidUpdate.value) {
+            var vidEl = document.getElementById('slot_vid_' + slot_id);
+            if (vidEl) {
+              var video = vidEl.querySelector('video');
+              if (video) {
+                var newSrc = vidUpdate.value.url || vidUpdate.value;
+                if (typeof newSrc === 'string') {
+                  video.src = newSrc;
+                  video.load();
+                }
+              }
+            }
+          }
+          // Apply waveform HTML: update innerHTML of the slot_wave element
+          if (waveUpdate && waveUpdate.value) {
+            var waveEl = document.getElementById('slot_wave_' + slot_id);
+            if (waveEl) {
+              // Find the inner content div (Gradio wraps HTML component)
+              var inner = waveEl.querySelector('.prose') || waveEl.querySelector('div');
+              if (inner) inner.innerHTML = waveUpdate.value;
+              else waveEl.innerHTML = waveUpdate.value;
+              // Also update the data-state on the new wf_container
+              var newContainer = waveEl.querySelector('#wf_container_' + slot_id);
+              // data-state is already embedded in the returned HTML
+            }
+          }
+        }
+        if (msg.msg === 'process_completed') {
+          es.close();
+          var lbl = document.getElementById('wf_seglabel_' + slot_id);
+          if (lbl) lbl.textContent = msg.output && msg.output.error ?
+            'Error regenerating' : 'Done';
+          console.log('[fireRegen] completed for', slot_id, 'success:', msg.success);
+        }
+      }
+      if (msg.msg === 'close_stream') { es.close(); }
+    };
+    es.onerror = function() { es.close(); };
+  }
+
   // Shared popup element created once and reused across all slots
   let _popup = null;
   let _pendingSlot = null, _pendingIdx = null;