fitcheck/app.js

/* Vramwise UI. © 2026 CyberMax. All rights reserved. */
(function () {
  "use strict";
  var F = window.Vramwise;
  var HF = "https://huggingface.co";
  var $ = function (id) { return document.getElementById(id); };
  var PRESETS = [
    ["Qwen3 8B", "Qwen/Qwen3-8B"], ["Llama 3.1 8B", "meta-llama/Llama-3.1-8B-Instruct"], ["gpt-oss 20B", "openai/gpt-oss-20b"],
    ["Qwen3 30B-A3B", "Qwen/Qwen3-30B-A3B"], ["Gemma 3 27B", "google/gemma-3-27b-it"], ["Mistral Small 24B", "mistralai/Mistral-Small-3.2-24B-Instruct-2506"],
    ["Qwen3 32B", "Qwen/Qwen3-32B"], ["Llama 3.3 70B", "meta-llama/Llama-3.3-70B-Instruct"], ["gpt-oss 120B", "openai/gpt-oss-120b"],
    ["DeepSeek V3", "deepseek-ai/DeepSeek-V3"]
  ];
  // One-pass decision / scoring models (no text generation). Ids checked on the Hugging Face API 15 Oct 2026; sizes are
  // always read live from each repo, never stored here.
  var DECISION_PRESETS = [
    ["MATILDA-jev v1", "Maincode/matilda-jev-v1"], ["MATILDA-jev v1.5", "Maincode/matilda-jev-v1.5"],
    ["MATILDA-jev FP4", "Maincode/matilda-jev-fp4"], ["Matilda Decision v1", "Maincode/matilda-decision-v1"],
    ["JEV 9B", "autotrust/JEV-9B"], ["JEV 27B", "autotrust/JEV-27B"], ["JEV 35B (MoE)", "autotrust/JEV-35B"],
    ["JEV 35B NVFP4", "autotrust/JEV-35B-NVFP4"], ["pplx-decider 27B", "perplexity-ai/pplx-decider-v1.1-27b"],
    ["Decider 2B", "Mapika/decider-2b"], ["Decider 4B", "Mapika/decider-4b"]
  ];
  var CTX = [2048, 4096, 8192, 16384, 32768, 65536, 131072, 262144];
  var model = null;   // describe() output, possibly edited
  var kind = "gpu";
  var lastRows = [];
  var loadSeq = 0;

  function toast(msg) { var t = $("toast"); t.textContent = msg; t.classList.add("show"); setTimeout(function () { t.classList.remove("show"); }, 1800); }
  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]; }); }
  function opt(v, t, sel) { var o = document.createElement("option"); o.value = v; o.textContent = t; if (sel) o.selected = true; return o; }
  function save() { try { localStorage.setItem("fitcheck", JSON.stringify(state())); } catch (e) {} }
  function load() { try { return JSON.parse(localStorage.getItem("fitcheck") || "{}"); } catch (e) { return {}; } }

  // ---------- hardware controls ----------
  F.GPUS.forEach(function (g) { $("gpu").appendChild(opt(g.name, g.name, g.name === "RTX 4090 24GB")); });
  F.APPLE.forEach(function (a) { $("chip").appendChild(opt(a.name, a.name, a.name === "M4 Pro")); });
  F.UNIFIED.forEach(function (u) { $("unified").appendChild(opt(u.name, u.name)); });
  CTX.forEach(function (c) { $("ctx").appendChild(opt(c, F.fmtCtx(c) + " tokens", c === 8192)); });
  function fillMacMem(pref) {
    var chip = F.APPLE.filter(function (a) { return a.name === $("chip").value; })[0];
    var sel = $("mac-mem"); sel.innerHTML = "";
    chip.mem.forEach(function (m) { sel.appendChild(opt(m, m + " GB", String(m) === String(pref))); });
    if (!sel.value || sel.selectedIndex < 0) sel.selectedIndex = sel.options.length - 1;
  }
  fillMacMem(48);

  function setKind(k) {
    kind = k;
    document.querySelectorAll(".seg button").forEach(function (b) { b.setAttribute("aria-checked", String(b.dataset.kind === k)); });
    document.querySelectorAll("[data-hw]").forEach(function (d) { d.hidden = d.dataset.hw !== k; });
    render();
  }
  document.querySelectorAll(".seg button").forEach(function (b) { b.addEventListener("click", function () { setKind(b.dataset.kind); }); });

  function hardware() {
    if (kind === "mac") return F.appleHardware($("chip").value, Number($("mac-mem").value), $("mac-raised").checked);
    if (kind === "unified") return F.unifiedHardware($("unified").value);
    if (kind === "custom") return { label: "Custom " + $("c-mem").value + " GB", usable: Number($("c-mem").value) || 0, bw: Number($("c-bw").value) || 1, ramGB: 0 };
    return F.gpuHardware($("gpu").value, $("gpu-count").value, $("ram").value, $("ram-bw").value);
  }

  // ---------- model loading ----------
  function getJSON(url, retried) {
    return fetch(url).then(function (r) {
      if (r.status === 429 && !retried) return new Promise(function (ok) { setTimeout(ok, 2500); }).then(function () { return getJSON(url, true); });
      if (!r.ok) { var e = new Error("HTTP " + r.status); e.status = r.status; throw e; }
      return r.json();
    });
  }
  function configFor(ids) {
    // Try each repo's config.json in turn (gated repos return 401).
    var i = 0;
    function next() {
      if (i >= ids.length) return Promise.resolve(null);
      var id = ids[i++];
      return getJSON(HF + "/" + id + "/resolve/main/config.json").then(function (c) { c.__from = id; return c; }, next);
    }
    return next();
  }
  function baseModels(meta) {
    var b = meta.cardData && meta.cardData.base_model;
    return (Array.isArray(b) ? b : b ? [b] : []).filter(function (x) { return typeof x === "string" && x.indexOf("/") > 0; });
  }

  function loadModel(raw) {
    var id = F.parseModelId(raw);
    if (!id) { info('<span class="err">Enter a model id like <b>Qwen/Qwen3-8B</b> or paste its Hugging Face URL.</span>'); return Promise.resolve(); }
    $("model").value = id;
    var seq = ++loadSeq;
    info("Reading <b>" + esc(id) + "</b> from Hugging Face…");
    return getJSON(HF + "/api/models/" + id + "?expand[]=safetensors&expand[]=gguf&expand[]=config&expand[]=gated&expand[]=cardData&expand[]=pipeline_tag&expand[]=tags")
      .then(function (meta) {
        var name = id.split("/")[1], org = id.split("/")[0];
        // Gated repos (Llama, Gemma) refuse config.json without a login: use a public mirror of the same weights.
        var tries = meta.gated ? [] : [id];
        baseModels(meta).forEach(function (b) { if (!(meta.gated && b.split("/")[0] === org)) tries.push(b); });
        if (meta.gated || !tries.length || !(meta.safetensors || meta.config)) tries.push("unsloth/" + name);
        return configFor(tries).then(function (cfg) { return { meta: meta, cfg: cfg }; });
      })
      .then(function (x) {
        if (seq !== loadSeq) return;
        if (!x.meta.id) x.meta.id = id;
        model = F.describe(x.meta, x.cfg);
        model.configFrom = x.cfg && x.cfg.__from;
        fillAdv();
        showInfo(x.meta);
        render();
        save();
      })
      .catch(function (e) {
        if (seq !== loadSeq) return;
        info('<span class="err">' + (e.status === 404 || e.status === 401 ? "Model not found (or private): <b>" + esc(id) + "</b>. Check the spelling, or fill in the model details below." : "Couldn't reach Hugging Face (" + esc(e.message) + "). Try again, or fill in the model details below.") + "</span>");
        $("adv").open = true;
      });
  }
  function info(html) { $("model-info").innerHTML = html; }
  function showInfo(meta) {
    var m = model, tags = [];
    tags.push(F.fmtParams(m.params) + " parameters");
    if (m.decision) tags.push("one-pass model · no text generation");
    if (m.moe) tags.push("MoE · " + F.fmtParams(m.activeParams) + " active" + (m.experts ? " · " + m.topK + " of " + m.experts + " experts" : ""));
    if (m.layers) tags.push(m.layers + " layers");
    if (m.mla) tags.push("MLA cache"); else if (m.kvHeads) tags.push(m.kvHeads + " KV heads");
    if (m.window) tags.push(m.slidingLayers + " sliding-window layers");
    if (m.linearLayers) tags.push(m.linearLayers + " linear-attention layers (fixed state)");
    if (m.maxContext) tags.push(F.fmtCtx(m.maxContext) + " max context");
    if (m.nativeLabel) tags.push("files: " + m.nativeLabel);
    var note = "";
    if (m.configFrom && m.configFrom !== m.id) note = '<div class="hint">Architecture read from <a href="' + HF + "/" + esc(m.configFrom) + '" target="_blank" rel="noopener">' + esc(m.configFrom) + "</a>" + (m.gated ? " because the original repo is gated." : ".") + "</div>";
    if (!m.hasShape) note += '<div class="hint err">Couldn\'t read layers/KV heads, so the KV cache is not counted. Fill them in under Model details.</div>';
    if (!m.params) note += '<div class="hint err">No parameter count published for this repo. Enter it under Model details.</div>';
    info('<a href="' + HF + "/" + esc(m.id) + '" target="_blank" rel="noopener"><b>' + esc(m.id) + '</b></a><div class="tags">' +
      tags.map(function (t) { return '<span class="tag">' + esc(t) + "</span>"; }).join("") + "</div>" + note);
  }
  function fillAdv() {
    $("m-params").value = model.params ? +(model.params / 1e9).toFixed(2) : "";
    $("m-active").value = model.activeParams ? +(model.activeParams / 1e9).toFixed(2) : "";
    $("m-layers").value = model.layers || "";
    $("m-kvheads").value = model.mla ? "" : model.kvHeads || "";
    $("m-headdim").value = model.mla ? "" : model.headDim || "";
    $("m-maxctx").value = model.maxContext || "";
    $("m-kvheads").disabled = $("m-headdim").disabled = !!model.mla;
  }
  function readAdv() {
    if (!model) model = F.describe({ id: "custom" }, {});
    var p = Number($("m-params").value) * 1e9, a = Number($("m-active").value) * 1e9;
    if (p) { if (model.nativeBytes && model.params) model.nativeBytes *= p / model.params; model.params = p; }
    model.activeParams = a && a <= model.params ? a : model.params;
    model.moe = model.activeParams < model.params * 0.97;
    model.layers = Number($("m-layers").value) || 0;
    if (!model.mla) { model.kvHeads = Number($("m-kvheads").value) || 0; model.headDim = Number($("m-headdim").value) || 0; }
    model.fullLayers = model.layers - (model.slidingLayers || 0);
    if (model.fullLayers < 0) { model.fullLayers = model.layers; model.slidingLayers = 0; }
    model.maxContext = Number($("m-maxctx").value) || 0;
    model.hasShape = !!(model.layers && (model.mla || (model.kvHeads && model.headDim)));
    render(); save();
  }
  ["m-params", "m-active", "m-layers", "m-kvheads", "m-headdim", "m-maxctx"].forEach(function (id) { $(id).addEventListener("change", readAdv); });

  // ---------- results ----------
  function render() {
    var tb = document.querySelector("#table tbody");
    if (!model || !model.params) { tb.innerHTML = ""; $("verdict").textContent = "Pick a model to see if it fits."; lastRows = []; return; }
    var hw = hardware(), ctx = Number($("ctx").value), kvBits = F.KV_TYPES[$("kv").value];
    var rows = F.quantRows(model).map(function (q) { return { q: q, r: F.estimate(model, hw, q, ctx, kvBits) }; });
    lastRows = rows;
    var best = rows.filter(function (x) { return x.r.fit === "yes"; })[0] || rows.filter(function (x) { return x.r.fit === "tight"; })[0];
    var off = rows.filter(function (x) { return x.r.fit === "offload"; })[0];
    var name = model.id.split("/").pop();
    var dec = !!model.decision;
    var ms = function (r) { var x = r.minMs || 0; return x >= 10 ? x.toFixed(0) : x.toFixed(1); };
    var v;
    if (best) v = "Yes: " + esc(name) + " runs on " + esc(hw.label) + " at <u>" + esc(best.q.label.split(" /")[0]) + "</u>" +
      "<small>" + F.fmtGB(best.r.total) + " GB of " + F.fmtGB(best.r.usable) + " GB usable at " + F.fmtCtx(ctx) + (dec ? " input tokens · one forward pass per call, at least " + ms(best.r) + " ms each (memory floor)" : " context · about " + Math.round(best.r.tpsLo) + "–" + Math.round(best.r.tpsHi) + " tokens/s") + "</small>";
    else if (off) v = "Only with CPU offload: " + esc(name) + " at " + esc(off.q.label.split(" /")[0]) + " on " + esc(hw.label) + "<small>" + Math.round(off.r.gpuShare * 100) + "% of the weights fit on the GPU; the rest runs from system RAM" + (dec ? ", so every call is slow." : " at roughly " + off.r.tpsLo.toFixed(1) + "–" + off.r.tpsHi.toFixed(1) + " tokens/s.") + "</small>";
    else v = "No: " + esc(name) + " doesn't fit " + esc(hw.label) + "<small>Even " + esc(rows[rows.length - 1].q.label) + " needs " + F.fmtGB(rows[rows.length - 1].r.total) + " GB and " + F.fmtGB(rows[rows.length - 1].r.usable) + " GB is usable. Try a shorter context, a smaller model or more memory.</small>";
    $("verdict").innerHTML = v;
    tb.innerHTML = rows.map(function (x) {
      var r = x.r, pct = Math.min(100, r.total / r.usable * 100);
      var fitTxt = { yes: "Fits", tight: "Tight", offload: "Offload", no: "No" }[r.fit];
      var speed = r.fit === "no" ? "—" : dec ? (r.minMs ? "≥ " + ms(r) + " ms" : "slow") : r.tpsHi >= 10 ? Math.round(r.tpsLo) + "–" + Math.round(r.tpsHi) : r.tpsLo.toFixed(1) + "–" + r.tpsHi.toFixed(1);
      return '<tr class="' + (best && x === best ? "best" : "") + '"><td><span class="q">' + esc(x.q.label) + '</span><span class="note">' + x.q.bits.toFixed(2).replace(/\.?0+$/, "") + " bits · " + esc(x.q.note) + "</span></td>" +
        '<td class="num">' + F.fmtGB(r.weights) + ' GB</td><td class="num">' + F.fmtGB(r.kv) + ' GB</td>' +
        '<td class="num">' + F.fmtGB(r.total) + ' GB<div class="meter"><i class="' + (r.total > r.usable ? "over" : "") + '" style="width:' + pct.toFixed(0) + '%"></i></div></td>' +
        '<td><span class="pill ' + r.fit + '">' + fitTxt + "</span></td>" +
        '<td class="num">' + (r.maxCtx ? F.fmtCtx(r.maxCtx) : "—") + '</td><td class="num">' + speed + "</td></tr>";
    }).join("");
    $("th-speed").textContent = dec ? "Per call" : "Speed (tok/s)";
    $("th-ctx").textContent = dec ? "Max input" : "Max context";
    $("decision-note").hidden = !dec;
    $("legend").textContent = hw.label + ": " + F.fmtGB(hw.usable * F.GB) + " GB usable" + (hw.unified ? " (unified memory)" : "") + ", " + hw.bw + " GB/s." + (kind === "gpu" && hw.ramGB ? " Offload uses up to " + Math.round(hw.ramGB * 0.85) + " GB of system RAM." : "");
    syncUrl();
  }
  ["gpu", "gpu-count", "ram", "ram-bw", "mac-mem", "mac-raised", "unified", "c-mem", "c-bw", "ctx", "kv"].forEach(function (id) {
    $(id).addEventListener("change", function () { render(); save(); });
    $(id).addEventListener("input", function () { if ($(id).type === "number") render(); });
  });
  $("chip").addEventListener("change", function () { fillMacMem($("mac-mem").value); render(); save(); });

  // ---------- state, share, CSV ----------
  function state() {
    return { model: model ? model.id : $("model").value, kind: kind, gpu: $("gpu").value, n: $("gpu-count").value, ram: $("ram").value, rbw: $("ram-bw").value,
      chip: $("chip").value, mem: $("mac-mem").value, raised: $("mac-raised").checked ? 1 : 0, uni: $("unified").value, cm: $("c-mem").value, cbw: $("c-bw").value,
      ctx: $("ctx").value, kv: $("kv").value };
  }
  function applyState(s) {
    if (s.kind) kind = s.kind;
    [["gpu", "gpu"], ["n", "gpu-count"], ["ram", "ram"], ["rbw", "ram-bw"], ["chip", "chip"], ["uni", "unified"], ["cm", "c-mem"], ["cbw", "c-bw"], ["ctx", "ctx"], ["kv", "kv"]].forEach(function (p) {
      if (s[p[0]] !== undefined && s[p[0]] !== null && s[p[0]] !== "") $(p[1]).value = s[p[0]];
    });
    fillMacMem(s.mem || 48);
    $("mac-raised").checked = String(s.raised) === "1";
  }
  function syncUrl() {
    var s = state(), q = new URLSearchParams();
    Object.keys(s).forEach(function (k) { if (s[k] !== "" && s[k] !== undefined) q.set(k, s[k]); });
    history.replaceState(null, "", "?" + q.toString());
  }
  $("btn-share").addEventListener("click", function () {
    var url = location.href;
    (navigator.clipboard ? navigator.clipboard.writeText(url) : Promise.reject()).then(function () { toast("Link copied"); }, function () { prompt("Copy this link", url); });
  });
  $("btn-csv").addEventListener("click", function () {
    if (!lastRows.length) return;
    var hw = hardware();
    var lines = [["model", "hardware", "context", "quantization", "bits_per_weight", "weights_gb", "kv_cache_gb", "total_gb", "usable_gb", "fits", "max_context", "tok_s_low", "tok_s_high", "min_ms_per_call"].join(",")];
    lastRows.forEach(function (x) {
      var r = x.r;
      lines.push([model.id, '"' + hw.label + '"', $("ctx").value, '"' + x.q.label + '"', x.q.bits.toFixed(2), F.fmtGB(r.weights), F.fmtGB(r.kv), F.fmtGB(r.total), F.fmtGB(r.usable), r.fit, r.maxCtx || 0, model.decision ? "" : r.tpsLo.toFixed(1), model.decision ? "" : r.tpsHi.toFixed(1), model.decision && r.minMs ? r.minMs.toFixed(1) : ""].join(","));
    });
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([lines.join("\n") + "\n"], { type: "text/csv" }));
    a.download = "vramwise-" + model.id.replace(/[^\w.-]+/g, "_") + ".csv";
    document.body.appendChild(a); a.click(); a.remove();
  });

  // ---------- model input ----------
  [[PRESETS, "presets"], [DECISION_PRESETS, "presets-decision"]].forEach(function (g) {
    g[0].forEach(function (p) {
      var b = document.createElement("button"); b.className = "chip"; b.textContent = p[0]; b.type = "button";
      b.addEventListener("click", function () { loadModel(p[1]); });
      $(g[1]).appendChild(b);
    });
  });
  $("btn-load").addEventListener("click", function () { loadModel($("model").value); });
  $("model").addEventListener("keydown", function (e) { if (e.key === "Enter") loadModel($("model").value); });
  var suggestTimer;
  $("model").addEventListener("input", function () {
    clearTimeout(suggestTimer);
    var q = $("model").value.trim();
    if (q.length < 3 || /\s/.test(q)) return;
    suggestTimer = setTimeout(function () {
      getJSON(HF + "/api/models?search=" + encodeURIComponent(q) + "&sort=downloads&limit=8").then(function (list) {
        var dl = $("model-suggest"); dl.innerHTML = "";
        list.forEach(function (m) { dl.appendChild(opt(m.id, m.id)); });
      }, function () {});
    }, 300);
  });

  // ---------- start ----------
  var params = new URLSearchParams(location.search);
  var init = {};
  params.forEach(function (v, k) { init[k] = v; });
  if (!init.model) init = load();
  applyState(init);
  setKind(kind);
  loadModel(init.model || "Qwen/Qwen3-8B");
  window.fitcheckApp = { loadModel: loadModel, rows: function () { return lastRows; }, model: function () { return model; } };
  if ("serviceWorker" in navigator && location.protocol === "https:") navigator.serviceWorker.register("sw.js").catch(function () {});
})();