Upload folder using huggingface_hub

web_demo/templates/admin.html

@@ -264,6 +264,10 @@
           <h2>User Ratings</h2>
           <div class="chart-wrap"><canvas id="chartRatings"></canvas></div>
         </div>
+        <div class="chart-card">
+          <h2>Storage Breakdown</h2>
+          <div class="chart-wrap"><canvas id="chartStorage"></canvas></div>
+        </div>
       </div>
     </div>
 
@@ -628,13 +632,13 @@
       if (storageStats === null) return { label: "Storage used", value: "…", sub: "" };
       if (!storageStats.available) return { label: "Storage used", value: "n/a", sub: "persistence off" };
       const s = storageStats;
-      const pct = s.used_fraction != null ? (s.used_fraction * 100).toFixed(0) + "%" : "";
-      const p = s.prefixes || {};
-      const part = (k) => (p[k] ? `${k} ${fmtBytes(p[k].bytes)}` : "");
-      const sub = `${pct} of ${fmtBytes(s.quota_bytes)} · ` +
-        [part("photos"), part("results"), part("feedback")].filter(Boolean).join(" · ");
+      // Card is the at-a-glance headline only: % of quota + the quota it's
+      // measured against. The per-prefix breakdown lives in the Storage
+      // Breakdown doughnut below.
+      const pct = s.used_fraction != null ? (s.used_fraction * 100).toFixed(0) + "%" : fmtBytes(s.total_bytes);
+      const sub = `of ${fmtBytes(s.quota_bytes)}`;
       const subCls = (s.used_fraction != null && s.used_fraction > 0.8) ? "delta-down" : "";
-      return { label: "Storage used", value: fmtBytes(s.total_bytes), sub, subCls };
+      return { label: "Storage used", value: pct, sub, subCls };
     };
     const fmtDay = (iso) => {
       if (!iso) return "—";
@@ -791,6 +795,37 @@
       });
     };
 
+    // Storage breakdown doughnut — fed by the separate /api/admin/storage
+    // fetch (not the stats payload), so it has its own render path. Shows the
+    // per-prefix split plus a Free slice for quota context.
+    const renderStorageChart = () => {
+      const canvas = document.getElementById("chartStorage");
+      if (!canvas || !storageStats || !storageStats.available) return;
+      const s = storageStats;
+      const p = s.prefixes || {};
+      const segs = [
+        { label: "Photos", bytes: (p.photos || {}).bytes || 0, color: "#7a8b3d" },
+        { label: "Results", bytes: (p.results || {}).bytes || 0, color: "#d99c4f" },
+        { label: "Feedback", bytes: (p.feedback || {}).bytes || 0, color: "#3d6b8b" },
+      ].filter((seg) => seg.bytes > 0);
+      const free = Math.max(0, (s.quota_bytes || 0) - (s.total_bytes || 0));
+      if (free > 0) segs.push({ label: "Free", bytes: free, color: "rgba(45,33,33,0.10)" });
+      upsertChart("storage", canvas, {
+        type: "doughnut",
+        data: {
+          labels: segs.map((seg) => seg.label),
+          datasets: [{ data: segs.map((seg) => seg.bytes), backgroundColor: segs.map((seg) => seg.color) }],
+        },
+        options: {
+          responsive: true, maintainAspectRatio: false,
+          plugins: {
+            legend: { position: "right", labels: { boxWidth: 12, font: { size: 11 } } },
+            tooltip: { callbacks: { label: (ctx) => `${ctx.label}: ${fmtBytes(ctx.parsed)}` } },
+          },
+        },
+      });
+    };
+
     const loadStats = async () => {
       dashStatusLabel.textContent = "Loading...";
       const days = windowSelect.value;
@@ -820,6 +855,7 @@
         if (resp.status === 401) return;
         storageStats = await resp.json();
         if (lastStats) renderStatCards(lastStats);  // re-render so the card fills in
+        renderStorageChart();
       } catch (e) {
         console.error("Failed to load storage", e);
       }