Fix video update after regen: delay+MutationObserver to survive Svelte re-render

app.py

@@ -1636,7 +1636,21 @@ _GLOBAL_JS = """
 
   // 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 _applyVideoSrc(slot_id, newSrc) {
+    var vidEl = document.getElementById('slot_vid_' + slot_id);
+    if (!vidEl) return false;
+    var video = vidEl.querySelector('video');
+    if (!video) return false;
+    if (video.getAttribute('src') === newSrc) return true; // already correct
+    video.setAttribute('src', newSrc);
+    video.src = newSrc;
+    video.load();
+    console.log('[_applyVideoSrc] applied src to', 'slot_vid_' + slot_id, 'src:', newSrc.slice(-40));
+    return true;
+  }
+
   function _listenAndApply(eventId, slot_id, seg_idx) {
+    var _pendingVideoSrc = null;  // track the latest resolved video URL
     const es = new EventSource('/gradio_api/queue/data?session_hash=' + window.__gradio_session_hash__);
     es.onmessage = function(e) {
       var msg;
@@ -1648,48 +1662,26 @@ _GLOBAL_JS = """
           // data[0] = video update, data[1] = waveform HTML update
           var vidUpdate  = out.data[0];
           var waveUpdate = out.data[1];
-          console.log('[_listenAndApply] vidUpdate raw:', JSON.stringify(vidUpdate));
-          console.log('[_listenAndApply] waveUpdate type:', typeof waveUpdate,
-                      waveUpdate && typeof waveUpdate === 'object' ? Object.keys(waveUpdate) : waveUpdate && String(waveUpdate).slice(0,80));
 
-          // Extract video URL — Gradio 5 gr.Video outputs as {video:{url:"...",...},subtitles:null}
-          // or sometimes wrapped in {value:{video:{url:"..."}}}
+          // Extract video URL — Gradio 5 wraps final output as
+          // {value:{video:{url:"..."},subtitles:null},__type__:"update"}
           var newSrc = null;
           if (vidUpdate) {
-            if (vidUpdate.video && vidUpdate.video.url) {
-              newSrc = vidUpdate.video.url;          // Gradio 5 direct
-            } else if (vidUpdate.value && vidUpdate.value.video && vidUpdate.value.video.url) {
-              newSrc = vidUpdate.value.video.url;    // wrapped
+            if (vidUpdate.value && vidUpdate.value.video && vidUpdate.value.video.url) {
+              newSrc = vidUpdate.value.video.url;    // final update shape
+            } else if (vidUpdate.video && vidUpdate.video.url) {
+              newSrc = vidUpdate.video.url;          // direct shape
             } else if (vidUpdate.value && vidUpdate.value.url) {
               newSrc = vidUpdate.value.url;          // older style
             } else if (typeof vidUpdate.value === 'string') {
-              newSrc = vidUpdate.value;              // plain string
+              newSrc = vidUpdate.value;
             } else if (vidUpdate.url) {
-              newSrc = vidUpdate.url;                // flat
-            }
-          }
-          console.log('[_listenAndApply] resolved video src:', newSrc);
-
-          // Apply video: update the <video> src inside the slot_vid element
-          if (newSrc) {
-            var vidEl = document.getElementById('slot_vid_' + slot_id);
-            if (vidEl) {
-              var video = vidEl.querySelector('video');
-              if (video) {
-                // Gradio 5 uses Svelte — set src attribute AND property to force reload
-                video.setAttribute('src', newSrc);
-                video.src = newSrc;
-                video.load();
-                console.log('[_listenAndApply] set video src on', 'slot_vid_' + slot_id);
-              } else {
-                console.warn('[_listenAndApply] no <video> element found inside', 'slot_vid_' + slot_id);
-              }
-            } else {
-              console.warn('[_listenAndApply] no element with id slot_vid_' + slot_id);
+              newSrc = vidUpdate.url;
             }
           }
+          if (newSrc) _pendingVideoSrc = newSrc;
 
-          // Apply waveform HTML: update innerHTML of the slot_wave element
+          // Apply waveform HTML immediately (waveform is plain HTML, no Svelte reactivity)
           var waveHtml = null;
           if (waveUpdate) {
             if (typeof waveUpdate === 'string') {
@@ -1701,19 +1693,38 @@ _GLOBAL_JS = """
           if (waveHtml) {
             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 = waveHtml;
               else waveEl.innerHTML = waveHtml;
             }
           }
         }
+
         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);
+
+          // Apply video src AFTER Gradio/Svelte finishes its own re-render cycle.
+          // We try at 50ms, 300ms, and 800ms to catch whenever Svelte settles.
+          var src = _pendingVideoSrc;
+          if (src) {
+            _applyVideoSrc(slot_id, src);
+            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 50);
+            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 300);
+            setTimeout(function() { _applyVideoSrc(slot_id, src); }, 800);
+            // Also install a MutationObserver for 2s to re-apply if Svelte resets src
+            var vidEl = document.getElementById('slot_vid_' + slot_id);
+            if (vidEl) {
+              var obs = new MutationObserver(function() {
+                _applyVideoSrc(slot_id, src);
+              });
+              obs.observe(vidEl, {subtree: true, attributes: true, attributeFilter: ['src'], childList: true});
+              setTimeout(function() { obs.disconnect(); }, 2000);
+            }
+          }
         }
       }
       if (msg.msg === 'close_stream') { es.close(); }