Blame for index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Local Model Explorer + quant picks</title>
<meta name="description" content="Which GGUF models fit your GPU, Mac or CPU, and exactly which quant to download for each.">
<style>
  html,body{margin:0;background:#190d16;color:#ecdcd0;font:15px monospace,sans-serif}
  .shell{max-width:1120px;margin:0 auto;padding:20px}
  header.top h1{font-size:20px;margin:0;color:#fce694}
  header.top h1 .tag{font-size:12px;border:1px solid #fce694;color:#fce694;border-radius:6px;padding:1px 9px;white-space:nowrap}
  header.top p{margin:4px 0 14px;color:#6e4f62;font-size:13.5px}
  .layout{display:grid;grid-template-columns:290px 1fr;gap:12px}
  @media(max-width:860px){.layout{grid-template-columns:1fr}.rig{position:static !important}}
  .rig{border:2px solid #fce694;border-radius:6px;padding:14px;height:fit-content;position:sticky;top:12px;background:#291825}
  .rig h2{font-size:15px;margin:0 0 6px;color:#fce694}
  .field{margin:10px 0}
  .field label{display:block;font-size:12.5px;color:#6e4f62;margin-bottom:4px}
  .field select,.field input[type=search]{width:100%;background:#190d16;color:#ecdcd0;border:1px solid #fce694;border-radius:6px;padding:7px 9px;font-size:14px;box-sizing:border-box;font-family:monospace}
  .seg{display:flex;gap:6px;flex-wrap:wrap}
  .seg label{border:1px solid #6e4f62;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}
  .seg input,.check input{accent-color:#fce694}
  .check{display:flex;gap:7px;align-items:center;font-size:13.5px;margin:8px 0;cursor:pointer}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .btn{background:#fce694;border:0;color:#190d16;border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer;font-family:monospace}
  .btn.ghost{background:none;border:1px solid #fce694;color:#fce694;font-size:13px;padding:5px 12px}
  .btn.small{font-size:12.5px;padding:4px 10px}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .filters .grow{flex:1;min-width:180px}
  .filters select,.filters input[type=search]{background:#291825;color:#ecdcd0;border:1px solid #6e4f62;border-radius:6px;padding:7px 9px;font-size:14px;font-family:monospace}
  .toggles{display:flex;gap:12px;align-items:center}
  .card{border:1px solid #6e4f62;border-radius:6px;padding:14px 16px;margin:0 0 12px;background:#291825}
  .card h3{margin:0;font-size:17px}
  .card h3 button{background:none;border:0;color:#fce694;font-size:17px;cursor:pointer;padding:0;text-align:left;font-family:monospace}
  .meta{color:#6e4f62;font-size:13px;margin:3px 0 8px}
  .r-side{display:flex;gap:14px;align-items:baseline;margin:6px 0}
  .score{font-size:22px;font-weight:700;color:#fce694}
  .choice{font-size:14.5px;margin:6px 0}
  .choice b{font-size:16px;color:#fce694}
  .warn{color:#f08135;font-size:13px;margin:4px 0}
  .muted{color:#6e4f62;font-size:13px}
  .rail{display:flex;gap:3px;height:10px;margin:8px 0 2px}
  .rail .pool{position:relative;background:#190d16;border-radius:6px;overflow:hidden;height:100%}
  .rail i{position:absolute;left:0;top:0;bottom:0}
  .rail i.gpu{background:#fce694}.rail i.ram{background:#f08135}.rail i.exp{background:#e053a6}.rail i.over{background:#eb445a}
  .legend{display:flex;gap:14px;color:#6e4f62;font-size:12.5px;margin:8px 0}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
  table.quants{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  table.quants th,table.quants td{text-align:left;padding:5px 8px;border-bottom:1px solid #6e4f62}
  table.quants td.num,table.quants th.num{text-align:right;font-variant-numeric:tabular-nums}
  tr.is-pick td{background:#190d16;color:#fce694}
  pre.cmd{background:#0d050c;border:1px solid #6e4f62;border-radius:6px;padding:10px;overflow-x:auto;font-size:12.5px;color:#ecdcd0}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .kv-strip{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:#6e4f62}
  .kv-strip b{color:#ecdcd0}
  footer{color:#6e4f62;font-size:12.5px;margin-top:24px}
  footer a{color:#e053a6}
  #count{color:#6e4f62}
  #more{display:block;margin:12px auto}
  dialog#detail{background:#291825;color:#ecdcd0;border:2px solid #fce694;border-radius:6px;max-width:860px;width:calc(100vw - 40px);max-height:calc(100vh - 60px);overflow:auto;padding:16px 18px}
  dialog#detail::backdrop{background:rgba(13,5,12,.8)}
  dialog#detail .dlg-x{float:right}
  dialog#detail .dlg-title{color:#fce694;margin:0 0 8px;font-size:18px}
  dialog#detail a{color:#e053a6}
  dialog#detail h3{color:#f08135}
</style>
</head>
<body>
<div class="shell">
  <header class="top">
    <h1>Local Model Explorer <span class="tag">+ quant picks</span></h1>
    <p>Set your GPU, Mac or CPU. Each model names its exact best quant for your machine, with the command to run it.</p>
  </header>
  <div class="layout">
    <aside class="rig" aria-label="Your hardware">
      <h2>Your hardware</h2>
      <div class="seg" id="kind">
        <label><input type="radio" name="kind" value="gpu" checked> GPU</label>
        <label><input type="radio" name="kind" value="unified"> Mac / unified</label>
        <label><input type="radio" name="kind" value="cpu"> CPU only</label>
      </div>
      <div class="field" data-show="gpu"><label for="gpu">Graphics card</label><select id="gpu"></select></div>
      <div class="row2" data-show="gpu">
        <div class="field" id="custom-vram-field" hidden><label for="custom-vram">VRAM/card (GB)</label><select id="custom-vram"></select></div>
        <div class="field"><label for="gpu-count">Cards</label><select id="gpu-count"></select></div>
      </div>
      <div data-show="gpu" id="gpu2-wrap" hidden>
        <div class="field"><label for="gpu2">Other card</label><select id="gpu2"></select></div>
        <div class="row2">
          <div class="field" id="custom-vram2-field" hidden><label for="custom-vram2">VRAM/card (GB)</label><select id="custom-vram2"></select></div>
          <div class="field"><label for="gpu2-count">Cards</label><select id="gpu2-count"></select></div>
        </div>
      </div>
      <div data-show="gpu"><button type="button" class="btn ghost small" id="gpu2-toggle">Add a different card</button></div>
      <div class="field" data-show="unified"><label for="usys">System</label><select id="usys"></select></div>
      <div class="field" data-show="unified"><label for="umem">Memory</label><select id="umem"></select></div>
      <div class="field" data-show="gpu cpu"><label for="ram">System RAM</label><select id="ram"></select></div>
      <div class="field"><label for="ctx">Context length</label><select id="ctx"></select></div>
      <div class="field"><label for="kv">KV cache precision</label><select id="kv">
        <option value="f16/f16">Full (f16)</option>
        <option value="q8_0/q8_0">q8_0</option>
        <option value="q8_0/q5_0">q8_0/q5_0</option>
        <option value="q5_0/q4_1" selected>q5_0/q4_1</option>
        <option value="q4_1/q4_1">q4_1</option>
        <option value="iq4_nl/iq4_nl">iq4_nl</option>
      </select></div>
      <div class="field"><label for="mmproj">Vision projector (vision models)</label><select id="mmproj">
        <option value="gpu">On the GPU, llama serve default</option>
        <option value="ram">In system RAM (--no-mmproj-offload)</option>
        <option value="off">Don't load it, text only (--no-mmproj)</option>
      </select></div>
      <div class="field"><label>Keep free (headroom)</label><div class="row2">
        <div><label for="vram-spare">VRAM (GB)</label><select id="vram-spare">
          <option value="0" selected>0</option><option value="1">1</option>
          <option value="2">2</option><option value="4">4</option>
          <option value="8">8</option>
        </select></div>
        <div><label for="ram-spare">RAM (GB)</label><select id="ram-spare">
          <option value="0" selected>0</option><option value="1">1</option>
          <option value="2">2</option><option value="4">4</option>
          <option value="8">8</option>
        </select></div>
      </div></div>
      <div class="field"><label for="min-bits">Lowest quant to consider</label><select id="min-bits">
        <option value="0">Any, down to 1-bit</option>
        <option value="2">2-bit and up</option>
        <option value="3" selected>3-bit and up</option>
        <option value="4">4-bit and up (Q4, IQ4, MXFP4)</option>
        <option value="5">5-bit and up</option>
        <option value="6">6-bit and up</option>
        <option value="8">8-bit and up</option>
      </select></div>
      <label class="check" data-show="gpu"><input type="checkbox" id="vram-only"> Keep the whole model in VRAM</label>
      <label class="check"><input type="checkbox" id="fits-only"> Only models that run on this hardware</label>
    </aside>
    <section>
      <div class="filters">
        <div class="grow"><input type="search" id="search" placeholder="Search models, e.g. qwen3, gemma, 70b" maxlength="80" style="width:100%"></div>
        <select id="family"><option value="">All families</option></select>
        <select id="size"><option value="">Any size</option></select>
        <select id="sort">
          <option value="best">Best for my hardware</option>
          <option value="popular">Most downloaded</option>
          <option value="recent">Newest</option>
          <option value="community">Most community reports</option>
        </select>
        <div class="toggles">
          <label class="check"><input type="checkbox" id="moe-only"> MoE</label>
          <label class="check"><input type="checkbox" id="vision-only"> Vision</label>
        </div>
      </div>
      <div class="legend"><span><i style="background:#fce694"></i>On GPU</span><span><i style="background:#e053a6"></i>Experts in RAM</span><span><i style="background:#f08135"></i>In RAM</span><span><i style="background:#eb445a"></i>Over capacity</span></div>
      <p id="count"></p>
      <div id="results"></div>
      <button type="button" id="more" class="btn" hidden>Show more models</button>
    </section>
  </div>
  <footer>Model catalog and fit estimates live from <a href="https://huggingface.co/spaces/LocalLLaMA/local-model-explorer">codelion's Local Model Explorer</a>. Quant picks use measured KL-divergence benchmarks (<a href="quant_scores.json">quant_scores.json</a>): full offloads preferred, dominated formats skipped when a better twin is in the same repo.</footer>
</div>
<script src="rankQuants.js"></script>
<script src="fork.js"></script>
</body>
</html>