Restore usage tracker, backed by real ZeroGPU quota endpoint

index.html

@@ -235,6 +235,46 @@ body {
 .voice-card:hover .delete-voice { opacity: 1; }
 .voice-card .delete-voice:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
 
+/* ── Usage tracker ── */
+.usage-tracker {
+  padding: 12px;
+  margin: 0 12px 12px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+
+.usage-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.usage-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
+.usage-value { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+
+.usage-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--surface3);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.usage-fill {
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.5s ease;
+}
+
+.usage-fill.warning { background: var(--warning); }
+.usage-fill.danger { background: var(--danger); }
+
+.usage-sub { font-size: 10px; color: var(--text-muted); }
+
 /* ── Content ── */
 .content {
   overflow-y: auto;
@@ -874,6 +914,16 @@ pre {
       </button>
     </div>
 
+    <!-- Usage Tracker -->
+    <div class="usage-tracker" id="usage-tracker">
+      <div class="usage-header">
+        <span class="usage-label">ZeroGPU Quota</span>
+        <span class="usage-value" id="usage-value">—</span>
+      </div>
+      <div class="usage-bar"><div class="usage-fill" id="usage-fill" style="width:0%"></div></div>
+      <div class="usage-sub" id="usage-sub">Loading…</div>
+    </div>
+
   </div>
 
   <div class="content">
@@ -1455,6 +1505,7 @@ let selectedVoice = null;
 let resultAudioUrl = null;
 let modalFileData = null;
 let history = JSON.parse(localStorage.getItem("zl_history") || "[]");
+let quotaTimer = null;
 
 // ── IndexedDB ──
 
@@ -1644,6 +1695,48 @@ document.addEventListener("click", () => {
   document.getElementById("voice-picker")?.classList.remove("visible");
 });
 
+// ── Usage Tracker (real ZeroGPU quota) ──
+
+function fmtDuration(sec) {
+  sec = Math.max(0, Math.round(sec));
+  const m = Math.floor(sec / 60);
+  const s = sec % 60;
+  return m > 0 ? `${m}m ${s}s` : `${s}s`;
+}
+
+async function refreshQuota() {
+  if (!accessToken) return;
+  const tracker = document.getElementById("usage-tracker");
+  try {
+    const res = await fetch("https://huggingface.co/api/spaces/zero-gpu/quota", {
+      headers: { Authorization: `Bearer ${accessToken}` }
+    });
+    if (!res.ok) throw new Error(`quota ${res.status}`);
+    const q = await res.json();
+    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 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" })}`;
+    }
+    document.getElementById("usage-sub").textContent = sub;
+    if (tracker) tracker.style.display = "";
+  } catch (err) {
+    if (tracker) tracker.style.display = "none";
+  }
+}
+
 // ── Smart Error CTAs ──
 
 function showStatusWithCTA(errorMsg) {
@@ -2037,6 +2130,7 @@ window.generateDesign = async function() {
             result.classList.add("visible");
             showDesignStatus("success", `Generated in ${wallSec.toFixed(1)}s`);
             addToHistory(text, "Voice Design", wallSec, designAudioUrl);
+            refreshQuota();
           } else {
             const errMsg = data.output?.error || "Generation failed";
             showDesignStatusWithCTA(errMsg);
@@ -2225,6 +2319,7 @@ window.transcribe = async function() {
             document.getElementById("transcribe-text").textContent = transcript;
             result.style.display = "block";
             showTranscribeStatus("success", `Transcribed in ${wallSec.toFixed(1)}s`);
+            refreshQuota();
             addToHistory(transcript.slice(0, 120) + (transcript.length > 120 ? "…" : ""), `Transcribe (${transcribeFile.name})`, wallSec, null);
           } else {
             showTranscribeStatusWithCTA(data.output?.error || "Transcription failed");
@@ -2367,6 +2462,9 @@ function showApp() {
   renderPresets();
   renderVoicesPage();
   renderHistory();
+  refreshQuota();
+  if (quotaTimer) clearInterval(quotaTimer);
+  quotaTimer = setInterval(refreshQuota, 60000);
 }
 
 // ── Pages ──
@@ -3188,6 +3286,7 @@ window.voiceChange = async function() {
     setPlayerMeta("vc", `${vcSource.name} → ${vcTarget.name}`);
     result.classList.add("visible");
     showStatusOn("vc-status", "success", `Converted in ${wallClock.toFixed(1)}s`);
+    refreshQuota();
     addToHistory(`${vcSource.name} → ${vcTarget.name}`, "Voice Changer", wallClock, url);
   } catch (err) {
     showStatusCtaOn("vc-status", err.message);
@@ -3259,6 +3358,7 @@ window.voiceIsolate = async function() {
     setPlayerMeta("iso", isoFile.name);
     result.classList.add("visible");
     showStatusOn("iso-status", "success", `Done in ${wallClock.toFixed(1)}s`);
+    refreshQuota();
     addToHistory(isoFile.name, denoiseOnly ? "Voice Cleaner (noise)" : "Voice Cleaner (enhance)", wallClock, url);
   } catch (err) {
     showStatusCtaOn("iso-status", err.message);
@@ -3313,6 +3413,7 @@ window.soundEffect = async function() {
     setPlayerMeta("sfx", `Prompt: "${prompt.slice(0,40)}${prompt.length>40?"...":""}"`);
     result.classList.add("visible");
     showStatusOn("sfx-status", "success", `Generated in ${wallClock.toFixed(1)}s`);
+    refreshQuota();
     addToHistory(prompt, "Sound Effects", wallClock, url);
   } catch (err) {
     showStatusCtaOn("sfx-status", err.message);
@@ -3431,6 +3532,7 @@ window.generate = async function() {
             result.classList.add("visible");
             showStatus("success", `Generated in ${wallSec.toFixed(1)}s`);
             addToHistory(text, selectedVoice.name, wallSec, resultAudioUrl);
+            refreshQuota();
           } else {
             const errMsg = data.output?.error || "Generation failed";
             showStatusWithCTA(errMsg);