static/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</title>
<meta name="description" content="See which GGUF quants of a model fit your GPU, Mac or CPU, how much VRAM and RAM each needs, and the llama.cpp command to run it.">
<meta name="color-scheme" content="light dark">
<link rel="stylesheet" href="/static/styles.css">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2316202b'/%3E%3Crect x='5' y='12' width='13' height='8' rx='2' fill='%230e9aa5'/%3E%3Crect x='19' y='12' width='8' height='8' rx='2' fill='%23d69532'/%3E%3C/svg%3E">
</head>
<body>
<a class="skip" href="#results">Skip to results</a>
<header class="top">
  <div class="shell top-row">
    <a class="brand" href="/">
      <svg class="brand-mark" viewBox="0 0 32 20" aria-hidden="true"><rect x="0" y="4" width="17" height="12" rx="3" class="fill-gpu"/><rect x="19" y="4" width="13" height="12" rx="3" class="fill-ram"/></svg>
      <span>Local Model Explorer</span>
    </a>
    <nav aria-label="Site">
      <a href="/stats">Community stats</a>
      <a href="https://huggingface.co/datasets/LocalLLaMA/local-model-explorer-data" target="_blank" rel="noopener">Dataset</a>
      <a href="#about">How it works</a>
    </nav>
  </div>
</header>

<main class="shell layout">
  <aside class="rig" aria-labelledby="rig-h">
    <h2 id="rig-h">Your hardware</h2>
    <form id="rig" autocomplete="off">
      <fieldset class="seg" id="kind">
        <legend class="sr">Hardware type</legend>
        <label><input type="radio" name="kind" value="gpu" checked><span>GPU</span></label>
        <label><input type="radio" name="kind" value="unified"><span>Mac / unified</span></label>
        <label><input type="radio" name="kind" value="cpu"><span>CPU only</span></label>
      </fieldset>

      <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 per card (GB)</label>
          <input id="custom-vram" type="number" min="1" max="256" step="1" value="24">
        </div>
        <div class="field">
          <label for="gpu-count">Number of cards</label>
          <select id="gpu-count"></select>
        </div>
      </div>
      <div data-show="gpu">
        <div id="gpu2-block" 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 per card (GB)</label>
              <input id="custom-vram2" type="number" min="1" max="256" step="1" value="8">
            </div>
            <div class="field">
              <label for="gpu2-count">Number of cards</label>
              <select id="gpu2-count"></select>
            </div>
          </div>
        </div>
        <button type="button" class="btn small" id="gpu2-toggle">Add a different card</button>
      </div>

      <div class="field" data-show="unified">
        <label for="unified-system">System</label>
        <select id="unified-system"></select>
      </div>
      <p class="hint" id="unified-note" data-show="unified" hidden></p>
      <div class="field" data-show="unified">
        <label for="unified-mem">Memory</label>
        <select id="unified-mem"></select>
      </div>

      <div class="field" data-show="gpu cpu">
        <label for="ram">System RAM</label>
        <select id="ram"></select>
      </div>

      <div class="capacity" id="capacity" aria-live="polite"></div>

      <div class="field">
        <label for="context">Context length</label>
        <select id="context"></select>
      </div>
      <div class="field">
        <label for="kv">KV cache precision</label>
        <select id="kv">
          <option value="f16">Full (f16), llama.cpp default</option>
          <option value="q8_0">8-bit (q8_0)</option>
          <option value="q4_0">4-bit (q4_0)</option>
        </select>
      </div>
      <div class="field">
        <label for="mmproj">Vision projector (vision models)</label>
        <select id="mmproj">
          <option value="gpu">On the GPU, llama-server 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>
      <fieldset class="seg" id="priority">
        <legend>Prefer</legend>
        <label><input type="radio" name="priority" value="balanced" checked><span>Balanced</span></label>
        <label><input type="radio" name="priority" value="quality"><span>Quality</span></label>
        <label><input type="radio" name="priority" value="small"><span>Smallest</span></label>
      </fieldset>
      <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">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 (no RAM offload)</label>
      <label class="check"><input type="checkbox" id="fits-only"> Only models that run on this hardware</label>
      <p class="hint" id="detect-hint" hidden></p>
    </form>
  </aside>

  <section class="results-col" aria-labelledby="results-h">
    <div class="intro">
      <h1 id="results-h">GGUF models that fit your hardware</h1>
      <p>Set your GPU, Mac or CPU. Each model lists its GGUF quants from all uploaders, how much of each goes into VRAM and RAM, and the command to run it.</p>
    </div>
    <form id="filters" class="filters" role="search" autocomplete="off">
      <div class="field grow">
        <label for="search" class="sr">Search models</label>
        <input id="search" type="search" placeholder="Search models, e.g. qwen3.6, gemma-4, 70b" maxlength="80">
      </div>
      <div class="field">
        <label for="family" class="sr">Family</label>
        <select id="family"><option value="">All families</option></select>
      </div>
      <div class="field">
        <label for="size" class="sr">Size</label>
        <select id="size"><option value="">Any size</option></select>
      </div>
      <div class="field">
        <label for="sort" class="sr">Sort</label>
        <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>
      <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>
    </form>
    <div class="legend" aria-hidden="true">
      <span><i class="sw gpu"></i>On GPU</span><span><i class="sw exp"></i>Experts in RAM</span><span><i class="sw ram"></i>In RAM</span><span><i class="sw over"></i>Over capacity</span>
    </div>
    <p class="notice" id="notice" hidden></p>
    <p class="count" id="count" aria-live="polite"></p>
    <ol class="results" id="results"></ol>
    <div class="more"><button type="button" id="more" class="btn" hidden>Show more models</button></div>
  </section>
</main>

<dialog id="detail" aria-labelledby="d-title">
  <div class="d-head">
    <div>
      <p class="d-kicker" id="d-kicker"></p>
      <h2 id="d-title"></h2>
      <p class="d-facts" id="d-facts"></p>
    </div>
    <button type="button" class="icon-btn" id="d-close" aria-label="Close">×</button>
  </div>
  <div class="d-body" id="d-body"></div>
</dialog>

<section class="shell about" id="about" aria-labelledby="about-h">
  <h2 id="about-h">How it works</h2>
  <div class="about-grid">
    <div>
      <h3>What is compared</h3>
      <p>The most downloaded and trending GGUF repos on Hugging Face, grouped by the model they quantize. Abliterated, uncensored and other modified versions are listed as models of their own. Draft models for speculative decoding are left out. The list refreshes every six hours, and MLX and ONNX builds have their own explorers, linked from each model.</p>
    </div>
    <div>
      <h3>How a fit is estimated</h3>
      <p>Layer and attention sizes come from each GGUF's header. Placement follows llama.cpp: layers go to the GPU with <code>-ngl</code>, and MoE experts can stay in RAM with <code>--n-cpu-moe</code>. The KV cache is sized for llama-server's defaults, a vision projector counts when there is one, and each GPU keeps 0.5 GB for its driver. These are memory estimates, not speeds.</p>
    </div>
    <div>
      <h3>How the score is worked out</h3>
      <p>Out of 100, for each model's best quant on your hardware: fit (35), how large a model that is for your memory (20), downloads (25), how new it is (10) and community reports (10). It isn't a quality rating, so an older model with more downloads can outrank a newer one. Open a model to see its breakdown.</p>
    </div>
    <div>
      <h3>Privacy</h3>
      <p>No account, cookies, IP addresses or user agents are stored. A visit sends one anonymous summary (filters, hardware class, which models were opened) to a public dataset, and nothing else unless you submit a report. Browsers sending Global Privacy Control or Do Not Track send nothing unless you opt in.</p>
      <label class="check"><input type="checkbox" id="optout"> Don't send anonymous usage from this browser</label>
      <p class="hint" id="gpc-note" hidden>Your browser asked sites not to track you, so nothing is sent. Untick the box to allow it.</p>
    </div>
  </div>
</section>
<footer class="shell foot"><span>A community tool for local LLM users.</span><a href="/stats">Stats</a><a href="https://huggingface.co/datasets/LocalLLaMA/local-model-explorer-data" target="_blank" rel="noopener">Dataset</a></footer>
<script src="/static/app.js"></script>
</body>
</html>