Spaces:
Running
Running
| <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> | |