fix: switch regen to /gradio_api/call/{api_name} for proper ZeroGPU quota attribution

The old /gradio_api/queue/join endpoint bypasses HF's proxy auth injection,
causing ZeroGPU to treat regen calls as unauthenticated (2min quota) even
for Pro users. The newer /gradio_api/call/{api_name} endpoint is what
Gradio's own Svelte client uses and correctly carries the session through
HF's proxy so quota is attributed to the logged-in account.

Also updates _listenAndApply to use the call-based SSE stream
(/gradio_api/call/{api_name}/{event_id}) with named events (generating,
complete, error) instead of the queue/data message format.

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

app.py

@@ -2070,13 +2070,7 @@ _GLOBAL_JS = """
       }
     }
 
-    const fnIndex = getFnIndex(apiName);
-    if (fnIndex === undefined) {
-      console.warn('[fireRegen] fn_index not found for api_name:', apiName, 'cache:', _fnIndexCache);
-      return;
-    }
-
-    console.log('[fireRegen] calling api', apiName, 'fn_index', fnIndex, 'seg', seg_idx);
+    console.log('[fireRegen] calling api', apiName, 'seg', seg_idx);
 
     // Snapshot current waveform HTML + video src before mutating anything,
     // so we can restore on error (e.g. quota exceeded).
@@ -2091,27 +2085,27 @@ _GLOBAL_JS = """
     const lbl = document.getElementById('wf_seglabel_' + slot_id);
     if (lbl) lbl.textContent = 'Regenerating Seg ' + (seg_idx + 1) + '...';
 
-    fetch('/gradio_api/queue/join', {
+    // 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, {
       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);
+      _listenAndApply(j.event_id, slot_id, seg_idx, _preRegenWaveHtml, _preRegenVideoSrc, apiName);
     }).catch(function(e) {
       console.error('[fireRegen] fetch error:', e);
       if (lbl) lbl.textContent = 'Error — see console';
       var sb = document.getElementById('wf_statusbar_' + slot_id);
-      if (sb) { sb.style.color = '#e05252'; sb.textContent = '⚠ Request failed: ' + e.message; }
+      if (sb) { sb.style.color = '#e05252'; sb.textContent = '\u26a0 Request failed: ' + e.message; }
     });
   }
 
@@ -2148,15 +2142,18 @@ _GLOBAL_JS = """
     }, isError ? 8000 : 3000);
   }
 
-  function _listenAndApply(eventId, slot_id, seg_idx, preRegenWaveHtml, preRegenVideoSrc) {
+  function _listenAndApply(eventId, slot_id, seg_idx, preRegenWaveHtml, preRegenVideoSrc, apiName) {
     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;
-      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;
+    // 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) {
         if (out && out.data) {
           // data[0] = video update, data[1] = waveform HTML update
           var vidUpdate  = out.data[0];
@@ -2198,75 +2195,82 @@ _GLOBAL_JS = """
             }
           }
         }
+      })(out);
+    });
 
-        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);
-
-            // Restore waveform HTML FIRST — the pending spinner may have replaced
-            // the container (including the statusbar span), so we need the original
-            // HTML back before we can write the error message into it.
-            if (preRegenWaveHtml !== null) {
-              var waveEl = document.getElementById('slot_wave_' + slot_id);
-              if (waveEl) waveEl.innerHTML = preRegenWaveHtml;
-            }
-
-            // Restore video src to pre-regen snapshot
-            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(); }
-              }
-            }
-
-            // Now write error into status bar (container is restored so element exists)
-            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);
-            }
-
-            // Also update the segment label below the waveform
-            var lbl2 = document.getElementById('wf_seglabel_' + slot_id);
-            if (lbl2) lbl2.textContent = 'Quota exceeded — try again later';
-          } else {
-            if (lbl) lbl.textContent = 'Done';
-
-            // 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);
-              }
-            }
+    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 === 'close_stream') { es.close(); }
-    };
+    }
+
+    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);
+    });
+
     es.onerror = function() { es.close(); };
   }