static/stats.js

"use strict";

(function () {
  const $ = (s) => document.querySelector(s);
  function el(tag, cls, text) {
    const n = document.createElement(tag);
    if (cls) n.className = cls;
    if (text != null) n.textContent = text;
    return n;
  }
  const LABELS = {
    sessions: "Visits", engaged_sessions: "Visits that opened a model", hardware_checks: "Hardware checks",
    browser_benchmarks: "GPU tests", feedback: "Reports", mlx_benchmarks: "MLX benchmarks",
  };
  const CHARTS = [
    ["families", "Model families"], ["sizes", "Model sizes"], ["ram_classes", "Mac memory (GB)"],
    ["contexts", "Target context"], ["priorities", "What matters most"], ["selected_models", "Most compared or visited models"],
    ["gpu_capability", "Browser GPU class"], ["webgpu_available", "WebGPU available"],
  ];
  const QCOLORS = { "2-bit": "#8a4f9e", "3-bit": "#7a5ab8", "4-bit": "#2f5d8c", "5-bit": "#3f7f86", "6-bit": "#2e7d4f", "8-bit": "#62802a" };
  const fmtKey = (k) => (k === true ? "yes" : k === false ? "no" : typeof k === "number" && k >= 4096 ? `${Math.round(k / 1024)}k` : String(k));

  function bars(items) {
    const box = el("div", "bars");
    if (!items.length) {
      box.append(el("p", "scale-note", "Not enough data yet."));
      return box;
    }
    const max = Math.max(...items.map((x) => x.count));
    for (const it of items) {
      const row = el("div", "bar");
      const track = el("div", "track");
      const fill = el("div", "fill");
      fill.style.width = `${(it.count / max) * 100}%`;
      track.append(fill);
      const key = fmtKey(it.key);
      const k = el("span", "k", key);
      k.title = key;
      row.append(k, track, el("span", "n", `${it.count.toLocaleString()} (${Math.round(it.share * 100)}%)`));
      box.append(row);
    }
    return box;
  }

  async function load() {
    let s;
    try {
      const r = await fetch("/api/stats");
      if (!r.ok) throw new Error(String(r.status));
      s = await r.json();
    } catch (e) {
      $("#updated").textContent = "Statistics couldn't be loaded. Refresh in a moment.";
      return;
    }
    $("#kmin").textContent = s.k_min;
    $("#totals").replaceChildren(...Object.entries(s.totals).map(([k, v]) => {
      const d = el("div", "total");
      d.append(el("b", null, v.toLocaleString()), el("span", null, LABELS[k] || k));
      return d;
    }));
    const q = Object.entries(s.quant_share).filter(([, v]) => v);
    const qs = $("#qshare");
    qs.replaceChildren(...q.map(([k, v]) => {
      const seg = el("span", null, v >= 0.08 ? `${k} ${Math.round(v * 100)}%` : "");
      seg.style.width = `${v * 100}%`;
      seg.style.background = QCOLORS[k] || "#7b8895";
      seg.title = `${k}: ${Math.round(v * 100)}%`;
      return seg;
    }));
    $("#qshare-note").textContent = q.length ? q.map(([k, v]) => `${k} ${Math.round(v * 100)}%`).join(", ") : "Not enough visits with a quantization filter yet.";
    $("#avgctx").textContent = s.average_target_context ? `Average target context: ${Math.round(s.average_target_context / 1024)}k tokens.` : "";
    $("#charts").replaceChildren(...CHARTS.map(([key, title]) => {
      const c = el("section", "chart");
      c.append(el("h2", null, title), bars(s[key] || []));
      return c;
    }));
    $("#updated").textContent = `Updated ${new Date().toLocaleString()}.`;
  }
  load();
})();