BoxOfColors Claude Sonnet 4.6 commited on
Commit
4afe095
·
1 Parent(s): 110c8ab

feat: show quota error in status bar instead of toast

Browse files

Toast approach was unreliable due to Gradio's iframe/document context.
Instead write the error directly into the wf_statusbar_<slot_id> span
which is always in our own DOM. Text turns red with the full ZeroGPU
quota message, then resets to normal after 15s so user can retry.

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

Files changed (1) hide show
  1. app.py +16 -5
app.py CHANGED
@@ -1843,7 +1843,7 @@ def _build_waveform_html(audio_path: str, segments: list, slot_id: str,
1843
  scrolling="no"></iframe>
1844
  </div>
1845
  <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
1846
- <span style="color:#888;font-size:11px;">Click a segment to regenerate &nbsp;|&nbsp; Playhead syncs to video</span>
1847
  <a href="{audio_url}" download="audio_{slot_id}.wav"
1848
  style="margin-left:auto;background:#333;color:#eee;border:1px solid #555;
1849
  border-radius:4px;padding:3px 10px;font-size:12px;text-decoration:none;">
@@ -2109,7 +2109,8 @@ _GLOBAL_JS = """
2109
  }).catch(function(e) {
2110
  console.error('[fireRegen] fetch error:', e);
2111
  if (lbl) lbl.textContent = 'Error — see console';
2112
- _showRegenToast('Request failed: ' + e.message, true);
 
2113
  });
2114
  }
2115
 
@@ -2206,9 +2207,19 @@ _GLOBAL_JS = """
2206
  var lbl = document.getElementById('wf_seglabel_' + slot_id);
2207
 
2208
  if (hadError) {
2209
- // Show toast with the full error message (includes quota countdown)
2210
  var toastMsg = typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg);
2211
- _showRegenToast('⚠ ' + toastMsg, true);
 
 
 
 
 
 
 
 
 
 
 
2212
 
2213
  // Restore waveform HTML to pre-regen snapshot
2214
  if (preRegenWaveHtml !== null) {
@@ -2225,7 +2236,7 @@ _GLOBAL_JS = """
2225
  }
2226
  }
2227
 
2228
- if (lbl) lbl.textContent = 'Regen failed — quota exceeded';
2229
  } else {
2230
  if (lbl) lbl.textContent = 'Done';
2231
 
 
1843
  scrolling="no"></iframe>
1844
  </div>
1845
  <div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
1846
+ <span id="wf_statusbar_{slot_id}" style="color:#888;font-size:11px;">Click a segment to regenerate &nbsp;|&nbsp; Playhead syncs to video</span>
1847
  <a href="{audio_url}" download="audio_{slot_id}.wav"
1848
  style="margin-left:auto;background:#333;color:#eee;border:1px solid #555;
1849
  border-radius:4px;padding:3px 10px;font-size:12px;text-decoration:none;">
 
2109
  }).catch(function(e) {
2110
  console.error('[fireRegen] fetch error:', e);
2111
  if (lbl) lbl.textContent = 'Error — see console';
2112
+ var sb = document.getElementById('wf_statusbar_' + slot_id);
2113
+ if (sb) { sb.style.color = '#e05252'; sb.textContent = '⚠ Request failed: ' + e.message; }
2114
  });
2115
  }
2116
 
 
2207
  var lbl = document.getElementById('wf_seglabel_' + slot_id);
2208
 
2209
  if (hadError) {
 
2210
  var toastMsg = typeof errMsg === 'string' ? errMsg : JSON.stringify(errMsg);
2211
+
2212
+ // Show error in the status bar (always in our DOM, no cross-origin issues)
2213
+ var statusBar = document.getElementById('wf_statusbar_' + slot_id);
2214
+ if (statusBar) {
2215
+ statusBar.style.color = '#e05252';
2216
+ statusBar.textContent = '⚠ ' + toastMsg;
2217
+ // Reset after 15s so user can try again
2218
+ setTimeout(function() {
2219
+ statusBar.style.color = '#888';
2220
+ statusBar.textContent = 'Click a segment to regenerate \u00a0|\u00a0 Playhead syncs to video';
2221
+ }, 15000);
2222
+ }
2223
 
2224
  // Restore waveform HTML to pre-regen snapshot
2225
  if (preRegenWaveHtml !== null) {
 
2236
  }
2237
  }
2238
 
2239
+ if (lbl) lbl.textContent = 'Regen failed';
2240
  } else {
2241
  if (lbl) lbl.textContent = 'Done';
2242