Show ZeroGPU execution-count (runs) quota from new endpoint field

index.html

@@ -1506,6 +1506,7 @@ let resultAudioUrl = null;
 let modalFileData = null;
 let history = JSON.parse(localStorage.getItem("zl_history") || "[]");
 let quotaTimer = null;
+let lastQuota = null;
 
 // ── IndexedDB ──
 
@@ -1704,6 +1705,17 @@ function fmtDuration(sec) {
   return m > 0 ? `${m}m ${s}s` : `${s}s`;
 }
 
+function fmtResetsIn(iso) {
+  if (!iso) return null;
+  const ms = new Date(iso).getTime() - Date.now();
+  if (isNaN(ms) || ms <= 0) return null;
+  const mins = Math.round(ms / 60000);
+  if (mins < 60) return `${mins}m`;
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  return m > 0 ? `${h}h ${m}m` : `${h}h`;
+}
+
 async function refreshQuota() {
   if (!accessToken) return;
   const tracker = document.getElementById("usage-tracker");
@@ -1713,24 +1725,39 @@ async function refreshQuota() {
     });
     if (!res.ok) throw new Error(`quota ${res.status}`);
     const q = await res.json();
+    lastQuota = q;
+
     const base = q.base || 0;
     const remaining = Math.max(0, q.current || 0);
-    const used = Math.max(0, base - remaining);
-    const pct = base > 0 ? Math.min((used / base) * 100, 100) : 0;
+    const secUsed = Math.max(0, base - remaining);
+    const runs = q.runs;
 
     const fill = document.getElementById("usage-fill");
-    fill.style.width = `${pct}%`;
-    fill.className = "usage-fill" + (pct > 80 ? " danger" : pct > 50 ? " warning" : "");
-
-    document.getElementById("usage-value").textContent = `${fmtDuration(remaining)} left`;
-
-    let sub = `${fmtDuration(used)} of ${fmtDuration(base)} ${isPro ? "Pro" : "free"} GPU quota`;
-    if (q.overquotaUsed > 0) sub += ` · +${fmtDuration(q.overquotaUsed)} over`;
-    if (q.resetsAt) {
-      const t = new Date(q.resetsAt);
-      if (!isNaN(t)) sub += ` · resets ${t.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+    const value = document.getElementById("usage-value");
+    const sub = document.getElementById("usage-sub");
+
+    if (runs && runs.limit > 0) {
+      // Free tier: the daily execution count is the binding limit — headline it.
+      const pct = Math.min((runs.used / runs.limit) * 100, 100);
+      fill.style.width = `${pct}%`;
+      fill.className = "usage-fill" + (pct >= 100 ? " danger" : pct > 60 ? " warning" : "");
+      value.textContent = `${Math.round(runs.used)}/${Math.round(runs.limit)} runs`;
+      let line = `${Math.max(0, Math.round(runs.remaining))} free runs left · ${fmtDuration(remaining)} GPU`;
+      const resetIn = fmtResetsIn(runs.resetsAt);
+      if (resetIn) line += ` · resets in ${resetIn}`;
+      sub.textContent = line;
+    } else {
+      // Pro / paid: GPU-seconds are the only limit.
+      const pct = base > 0 ? Math.min((secUsed / base) * 100, 100) : 0;
+      fill.style.width = `${pct}%`;
+      fill.className = "usage-fill" + (pct > 80 ? " danger" : pct > 50 ? " warning" : "");
+      value.textContent = `${fmtDuration(remaining)} left`;
+      let line = `${fmtDuration(secUsed)} of ${fmtDuration(base)} ${isPro ? "Pro" : ""} GPU quota`.replace(/\s+/g, " ");
+      if (q.overquotaUsed > 0) line += ` · +${fmtDuration(q.overquotaUsed)} over`;
+      const resetIn = fmtResetsIn(q.resetsAt);
+      if (resetIn) line += ` · resets in ${resetIn}`;
+      sub.textContent = line;
     }
-    document.getElementById("usage-sub").textContent = sub;
     if (tracker) tracker.style.display = "";
   } catch (err) {
     if (tracker) tracker.style.display = "none";
@@ -1741,17 +1768,29 @@ async function refreshQuota() {
 
 // Build the body of a status bar for an error. The ZeroGPU backend sends a
 // misleading seconds-based message to free users whose real blocker is the
-// daily free-run count (8/day), and wrongly offers paid GPU credits (Pro-only).
-// We reframe by the known account tier (isPro) rather than the backend text.
+// daily execution count, and wrongly offers paid GPU credits (Pro-only).
+// We reframe using the real quota data (lastQuota.runs) and account tier.
 function quotaErrorBodyHtml(errMsg) {
   if (!errMsg.includes("GPU quota")) {
     return `<div class="status-text">${errMsg}</div>`;
   }
+  const runs = lastQuota && lastQuota.runs;
+  // Free tier hit the daily execution limit (runs present and exhausted).
+  if (runs && runs.limit > 0 && runs.remaining <= 0) {
+    const limit = Math.round(runs.limit);
+    const resetIn = fmtResetsIn(runs.resetsAt);
+    let html = `<div class="status-text">You've used all ${limit} free ZeroGPU runs for today.</div>
+      <a class="status-cta upgrade" href="https://huggingface.co/subscribe/pro?from=ZeroGPU" target="_blank">🤗 Subscribe to HF Pro &mdash; 40 min/day of GPU quota</a>`;
+    if (resetIn) html += `<div style="font-size:11px;color:var(--text-muted);margin-top:2px">Your free runs reset in ${resetIn}</div>`;
+    return html;
+  }
+  // Free tier with runs left, or unknown tier: ran out of GPU minutes.
   if (!isPro) {
-    return `<div class="status-text">You've used all 8 free ZeroGPU runs for today.</div>
+    return `<div class="status-text">You've used your free daily ZeroGPU minutes.</div>
       <a class="status-cta upgrade" href="https://huggingface.co/subscribe/pro?from=ZeroGPU" target="_blank">🤗 Subscribe to HF Pro &mdash; 40 min/day of GPU quota</a>
       <div style="font-size:11px;color:var(--text-muted);margin-top:2px">Your free quota resets every 24h</div>`;
   }
+  // Pro / paid: real seconds message + credits CTA (credits are Pro-only).
   let html = `<div class="status-text">${errMsg}</div>
     <a class="status-cta credits" href="https://huggingface.co/settings/billing" target="_blank">Buy additional GPU credits &mdash; $1 per 10 min</a>`;
   const m = errMsg.match(/Try again in ([\d:]+)/);
@@ -1761,10 +1800,11 @@ function quotaErrorBodyHtml(errMsg) {
   return html;
 }
 
-function showStatusWithCTA(errorMsg) {
+async function showStatusWithCTA(errorMsg) {
   const el = document.getElementById("status");
   el.className = "status-bar visible error";
   el.innerHTML = quotaErrorBodyHtml(errorMsg);
+  if (errorMsg.includes("GPU quota")) { await refreshQuota(); el.innerHTML = quotaErrorBodyHtml(errorMsg); }
 }
 
 function showStatus(type, msg) {
@@ -2149,10 +2189,11 @@ function showDesignStatus(type, msg) {
   el.innerHTML = `<div class="status-text">${msg}</div>`;
 }
 
-function showDesignStatusWithCTA(errMsg) {
+async function showDesignStatusWithCTA(errMsg) {
   const el = document.getElementById("design-status");
   el.className = "status-bar visible error";
   el.innerHTML = quotaErrorBodyHtml(errMsg);
+  if (errMsg.includes("GPU quota")) { await refreshQuota(); el.innerHTML = quotaErrorBodyHtml(errMsg); }
 }
 
 const designAudioEl = document.getElementById("design-audio-player");
@@ -2324,10 +2365,11 @@ function showTranscribeStatus(type, msg) {
   el.innerHTML = `<div class="status-text">${msg}</div>`;
 }
 
-function showTranscribeStatusWithCTA(errMsg) {
+async function showTranscribeStatusWithCTA(errMsg) {
   const el = document.getElementById("transcribe-status");
   el.className = "status-bar visible error";
   el.innerHTML = quotaErrorBodyHtml(errMsg);
+  if (errMsg.includes("GPU quota")) { await refreshQuota(); el.innerHTML = quotaErrorBodyHtml(errMsg); }
 }
 
 window.copyTranscript = function() {
@@ -2884,10 +2926,11 @@ function showStatusOn(elId, type, msg) {
   el.innerHTML = `<div class="status-text">${msg}</div>`;
 }
 
-function showStatusCtaOn(elId, errMsg) {
+async function showStatusCtaOn(elId, errMsg) {
   const el = document.getElementById(elId);
   el.className = "status-bar visible error";
   el.innerHTML = quotaErrorBodyHtml(errMsg);
+  if (errMsg.includes("GPU quota")) { await refreshQuota(); el.innerHTML = quotaErrorBodyHtml(errMsg); }
 }
 
 function wireUploadArea(areaId, inputId, labelId, onFile) {