revert: back to queue/join — call endpoint gives 404 Session not found

/gradio_api/call/{api_name} requires a different session registration
that our queue/join session_hash doesn't satisfy, causing 404 errors.
Revert to the working queue/join + queue/data SSE approach.

The quota attribution issue (Pro vs anon) remains a known limitation —
the queue/join path with credentials:include is the best we can do
without server-side gr.Request changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -2085,22 +2085,27 @@ _GLOBAL_JS = """
     const lbl = document.getElementById('wf_seglabel_' + slot_id);
     if (lbl) lbl.textContent = 'Regenerating Seg ' + (seg_idx + 1) + '...';
 
-    // Use the newer /gradio_api/call/{api_name} endpoint — this is what Gradio's
-    // own Svelte client uses and correctly carries the HF session through the
-    // proxy so ZeroGPU can attribute quota to the logged-in user's Pro account.
-    fetch('/gradio_api/call/' + apiName, {
+    const fnIndex = getFnIndex(apiName);
+    if (fnIndex === undefined) {
+      console.warn('[fireRegen] fn_index not found for api_name:', apiName);
+      return;
+    }
+    fetch('/gradio_api/queue/join', {
       method: 'POST',
       credentials: 'include',
       headers: {'Content-Type': 'application/json'},
       body: JSON.stringify({
         data: data,
+        fn_index: fnIndex,
         session_hash: window.__gradio_session_hash__,
+        event_data: null,
+        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);
       // Subscribe to SSE stream and apply outputs when ready
-      _listenAndApply(j.event_id, slot_id, seg_idx, _preRegenWaveHtml, _preRegenVideoSrc, apiName);
+      _listenAndApply(j.event_id, slot_id, seg_idx, _preRegenWaveHtml, _preRegenVideoSrc);
     }).catch(function(e) {
       console.error('[fireRegen] fetch error:', e);
       if (lbl) lbl.textContent = 'Error — see console';
@@ -2142,49 +2147,31 @@ _GLOBAL_JS = """
     }, isError ? 8000 : 3000);
   }
 
-  function _listenAndApply(eventId, slot_id, seg_idx, preRegenWaveHtml, preRegenVideoSrc, apiName) {
-    var _pendingVideoSrc = null;  // track the latest resolved video URL
-    // Use the call-based SSE endpoint — same one Gradio's Svelte client uses,
-    // so HF's proxy correctly forwards the session for ZeroGPU quota attribution.
-    // Message format: event: generating|complete|error, data: JSON array
-    const es = new EventSource('/gradio_api/call/' + apiName + '/' + eventId);
-    es.addEventListener('generating', function(e) {
-      var data;
-      try { data = JSON.parse(e.data); } catch(_) { return; }
-      // data is a plain array: [vidUpdate, waveUpdate]
-      var out = { data: data };
-      (function handleData(out) {
+  function _listenAndApply(eventId, slot_id, seg_idx, preRegenWaveHtml, preRegenVideoSrc) {
+    var _pendingVideoSrc = null;
+    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];
-
-          // Extract video URL — Gradio 5 wraps final output as
-          // {value:{video:{url:"..."},subtitles:null},__type__:"update"}
           var newSrc = null;
           if (vidUpdate) {
-            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;
-            } else if (vidUpdate.url) {
-              newSrc = vidUpdate.url;
-            }
+            if (vidUpdate.value && vidUpdate.value.video && vidUpdate.value.video.url) newSrc = vidUpdate.value.video.url;
+            else if (vidUpdate.video && vidUpdate.video.url) newSrc = vidUpdate.video.url;
+            else if (vidUpdate.value && vidUpdate.value.url) newSrc = vidUpdate.value.url;
+            else if (typeof vidUpdate.value === 'string') newSrc = vidUpdate.value;
+            else if (vidUpdate.url) newSrc = vidUpdate.url;
           }
           if (newSrc) _pendingVideoSrc = newSrc;
-
-          // Apply waveform HTML immediately (waveform is plain HTML, no Svelte reactivity)
           var waveHtml = null;
           if (waveUpdate) {
-            if (typeof waveUpdate === 'string') {
-              waveHtml = waveUpdate;
-            } else if (waveUpdate.value && typeof waveUpdate.value === 'string') {
-              waveHtml = waveUpdate.value;
-            }
+            if (typeof waveUpdate === 'string') waveHtml = waveUpdate;
+            else if (waveUpdate.value && typeof waveUpdate.value === 'string') waveHtml = waveUpdate.value;
           }
           if (waveHtml) {
             var waveEl = document.getElementById('slot_wave_' + slot_id);
@@ -2195,82 +2182,49 @@ _GLOBAL_JS = """
             }
           }
         }
-      })(out);
-    });
-
-    function _onComplete(errMsg) {
-      es.close();
-      var hadError = !!errMsg;
-      console.log('[fireRegen] completed for', slot_id, 'error:', hadError, errMsg || '');
-      var lbl = document.getElementById('wf_seglabel_' + slot_id);
-      if (hadError) {
-        var toastMsg = typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg);
-        // Restore waveform HTML FIRST so the statusbar span exists
-        if (preRegenWaveHtml !== null) {
-          var waveEl = document.getElementById('slot_wave_' + slot_id);
-          if (waveEl) waveEl.innerHTML = preRegenWaveHtml;
-        }
-        // Restore video src
-        if (preRegenVideoSrc !== null) {
-          var vidElR = document.getElementById('slot_vid_' + slot_id);
-          if (vidElR) {
-            var vR = vidElR.querySelector('video');
-            if (vR) { vR.setAttribute('src', preRegenVideoSrc); vR.src = preRegenVideoSrc; vR.load(); }
-          }
-        }
-        // Write error into status bar
-        var statusBar = document.getElementById('wf_statusbar_' + slot_id);
-        if (statusBar) {
-          statusBar.style.color = '#e05252';
-          statusBar.textContent = '\u26a0 ' + toastMsg;
-          setTimeout(function() {
-            statusBar.style.color = '#888';
-            statusBar.textContent = 'Click a segment to regenerate \u00a0|\u00a0 Playhead syncs to video';
-          }, 15000);
-        }
-        var lbl2 = document.getElementById('wf_seglabel_' + slot_id);
-        if (lbl2) lbl2.textContent = 'Quota exceeded — try again later';
-      } else {
-        if (lbl) lbl.textContent = 'Done';
-        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);
-          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 === 'process_completed') {
+          es.close();
+          var errMsg = msg.output && msg.output.error;
+          var hadError = !!errMsg;
+          console.log('[fireRegen] completed for', slot_id, 'error:', hadError, errMsg || '');
+          var lbl = document.getElementById('wf_seglabel_' + slot_id);
+          if (hadError) {
+            var toastMsg = typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg);
+            if (preRegenWaveHtml !== null) {
+              var waveEl2 = document.getElementById('slot_wave_' + slot_id);
+              if (waveEl2) waveEl2.innerHTML = preRegenWaveHtml;
+            }
+            if (preRegenVideoSrc !== null) {
+              var vidElR = document.getElementById('slot_vid_' + slot_id);
+              if (vidElR) { var vR = vidElR.querySelector('video'); if (vR) { vR.setAttribute('src', preRegenVideoSrc); vR.src = preRegenVideoSrc; vR.load(); } }
+            }
+            var statusBar = document.getElementById('wf_statusbar_' + slot_id);
+            if (statusBar) {
+              statusBar.style.color = '#e05252';
+              statusBar.textContent = '\u26a0 ' + toastMsg;
+              setTimeout(function() { statusBar.style.color = '#888'; statusBar.textContent = 'Click a segment to regenerate \u00a0|\u00a0 Playhead syncs to video'; }, 15000);
+            }
+            if (lbl) lbl.textContent = 'Quota exceeded — try again later';
+          } else {
+            if (lbl) lbl.textContent = 'Done';
+            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);
+              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);
+              }
+            }
           }
         }
       }
-    }
-
-    es.addEventListener('complete', function(e) {
-      var data;
-      try { data = JSON.parse(e.data); } catch(_) { data = []; }
-      // Final output array — extract video URL if present
-      if (data && data[0]) {
-        var vidU = data[0];
-        var newSrc = null;
-        if (vidU.value && vidU.value.video && vidU.value.video.url) newSrc = vidU.value.video.url;
-        else if (vidU.video && vidU.video.url) newSrc = vidU.video.url;
-        else if (vidU.value && vidU.value.url) newSrc = vidU.value.url;
-        else if (typeof vidU.value === 'string') newSrc = vidU.value;
-        else if (vidU.url) newSrc = vidU.url;
-        if (newSrc) _pendingVideoSrc = newSrc;
-      }
-      _onComplete(null);
-    });
-
-    es.addEventListener('error', function(e) {
-      var errMsg = 'Unknown error';
-      try { var d = JSON.parse(e.data); errMsg = d.error || d.message || JSON.stringify(d); } catch(_) { errMsg = e.data || 'Unknown error'; }
-      _onComplete(errMsg);
-    });
-
+      if (msg.msg === 'close_stream') { es.close(); }
+    };
     es.onerror = function() { es.close(); };
   }