| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1" />
|
| <title>FitCheck - what AI can your computer run?</title>
|
| <meta name="description" content="Tell FitCheck about your computer in plain words. Get an honest answer about what AI you can actually run on it, from chatbots to object detection, and how to start." />
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="/static/style.css" />
|
| </head>
|
| <body>
|
| <header class="topbar">
|
| <div class="logo">
|
| <span class="logo-mark"><span class="ic" data-ic="check"></span></span>
|
| <span>Fit<span class="tick">Check</span></span>
|
| </div>
|
| <div class="spacer"></div>
|
| <nav>
|
| <a href="#how">How it works</a>
|
| <a href="#glossary-anchor">Jargon, explained</a>
|
| </nav>
|
| <div class="statuschip"><span class="dot"></span><span class="lbl">engine</span> <b id="cat-version-chip">local</b></div>
|
| </header>
|
|
|
| <main class="container">
|
| <section class="hero">
|
| <h1>What AI can <span class="accent">your computer</span> actually run?</h1>
|
| <p>Tell FitCheck about your setup in plain words. It tells you honestly what you
|
| can run today, from chatbots to object detection, what it will feel like, and exactly how to start.</p>
|
| </section>
|
|
|
| <div class="layout">
|
|
|
| <aside class="panel form-panel">
|
| <div class="panel-head"><span class="lbl">input</span><span class="lbl">01</span></div>
|
| <div class="panel-body">
|
|
|
| <div class="field" style="margin-bottom:var(--s-5)">
|
| <div class="segmented" id="mode-seg">
|
| <button class="seg-btn active" data-val="have"><span class="ic" data-ic="monitor"></span>Check my computer</button>
|
| <button class="seg-btn" data-val="buy"><span class="ic" data-ic="search"></span>Help me pick one</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="step" id="machine-step">
|
| <div class="step-head"><span class="step-num">1</span><h2>Your computer</h2></div>
|
|
|
| <div class="field">
|
| <span class="label">Describe it in your own words <span class="optional">(fastest)</span></span>
|
| <textarea id="paste" placeholder="'Dell XPS, RTX 3050, 16GB' - or paste your dxdiag / Task Manager output..."></textarea>
|
| <button class="parse-btn" id="parse-btn">Fill the form from this</button>
|
| <div class="hint" id="parse-hint">A small model fine-tuned for this reads your text and fills the pickers below. On a sealed test it gets fields right about 88% of the time, but it still guesses sometimes (about 18% invented-field rate) - so double-check the pickers, and anything you didn't say should stay blank.</div>
|
| </div>
|
|
|
| <div class="field">
|
| <span class="label">What kind of computer?</span>
|
| <div class="segmented" id="computer-seg">
|
| <button class="seg-btn active" data-val="Windows laptop"><span class="ic brand" data-ic="brand-windows"></span>Windows laptop</button>
|
| <button class="seg-btn" data-val="Windows desktop"><span class="ic brand" data-ic="brand-windows"></span>Windows desktop</button>
|
| <button class="seg-btn" data-val="Mac"><span class="ic brand" data-ic="brand-apple"></span>Mac</button>
|
| <button class="seg-btn" data-val="Linux PC"><span class="ic brand" data-ic="brand-linux"></span>Linux PC</button>
|
| <button class="seg-btn" data-val="Mini PC / Raspberry Pi" style="grid-column:1/-1"><span class="ic brand" data-ic="brand-raspberrypi"></span>Mini PC / Raspberry Pi</button>
|
| </div>
|
| </div>
|
|
|
| <div class="field">
|
| <span class="label" id="ram-label">Memory (RAM)</span>
|
| <select id="ram">
|
| <option>2 GB</option><option>4 GB</option><option>8 GB</option>
|
| <option selected>16 GB</option><option>24 GB</option><option>32 GB</option>
|
| <option>48 GB</option><option>64 GB</option><option>96 GB</option><option>128 GB</option>
|
| </select>
|
| <div class="hint">Not sure? See "How do I find my specs?" below.</div>
|
| </div>
|
|
|
| <div class="field" id="provider-field">
|
| <span class="label">Graphics (GPU)</span>
|
| <div class="segmented cols-3" id="provider-seg">
|
| <button class="seg-btn active" data-val="none">None / built-in</button>
|
| <button class="seg-btn" data-val="nvidia"><span class="ic brand" data-ic="brand-nvidia"></span>NVIDIA</button>
|
| <button class="seg-btn" data-val="amd"><span class="ic brand" data-ic="brand-amd"></span>AMD</button>
|
| <button class="seg-btn" data-val="apple"><span class="ic brand" data-ic="brand-apple"></span>Apple</button>
|
| <button class="seg-btn" data-val="intel"><span class="ic brand" data-ic="brand-intel"></span>Intel</button>
|
| <button class="seg-btn" data-val="unsure">Not sure</button>
|
| </div>
|
| <select id="gpu" style="margin-top:var(--s-3); display:none"></select>
|
| </div>
|
|
|
| <details class="disc" id="advanced-disc">
|
| <summary>Advanced: enter exact numbers <span class="chev ic" data-ic="chevron"></span></summary>
|
| <div class="disc-body">
|
| <div class="field">
|
| <span class="label">Graphics memory (VRAM), if you know it</span>
|
| <input type="number" id="vram" placeholder="e.g. 8" min="0" max="200" step="1" />
|
| <div class="hint" id="vram-hint">Overrides the GPU picker above. Leave blank to use the picker.</div>
|
| </div>
|
| </div>
|
| </details>
|
| </div>
|
|
|
|
|
| <div class="step">
|
| <div class="step-head"><span class="step-num">2</span><h2>What do you want to do? <span class="optional">(pick one or several)</span></h2></div>
|
| <div class="task-toggle" id="task-toggle" role="tablist"
|
| data-tip="Running a model and fine-tuning it need very different memory. Switch this and the recommendations below recompute for training.">
|
| <button class="tt-opt active" data-task="run" role="tab"><span class="ic" data-ic="run"></span>Run a model</button>
|
| <button class="tt-opt" data-task="finetune" role="tab"><span class="ic" data-ic="finetune"></span>Train / fine-tune</button>
|
| <span class="tt-slider" aria-hidden="true"></span>
|
| </div>
|
| <div id="usecase-picker"></div>
|
| <div class="field" id="repo-field" style="margin-top:var(--s-3); margin-bottom:0; display:none">
|
| <span class="label">Paste the model to check</span>
|
| <input type="text" id="repo-check" placeholder="Hugging Face model id or link, e.g. lerobot/smolvla_base" />
|
| <div class="hint">FitCheck gives a full breakdown for <b>many</b> models, memory, and for text models speed and a comparison, <b>even ones not in our catalogue</b>, via a live Hugging Face lookup (needs Safetensors metadata). The lookup needs network; the deterministic advice is local.</div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="step" id="priority-step">
|
| <div class="step-head"><span class="step-num">3</span><h2>What matters most? <span class="optional">(optional)</span></h2></div>
|
| <div class="field" style="margin-bottom:0">
|
| <div class="segmented" id="priority-seg">
|
| <button class="seg-btn active" data-val="balanced" data-tip="Our default: the best mix of quality and speed your machine can comfortably handle."><span class="ic" data-ic="balanced"></span>Balanced</button>
|
| <button class="seg-btn" data-val="quality" data-tip="Pick the most capable model that runs, even if it's slower or tight on memory."><span class="ic" data-ic="quality"></span>Best quality</button>
|
| <button class="seg-btn" data-val="speed" data-tip="Prefer the snappiest model (smaller, or mixture-of-experts) for instant replies."><span class="ic" data-ic="speed"></span>Fastest</button>
|
| <button class="seg-btn" data-val="open" data-tip="Prefers open-licensed, ungated, commercial-friendly models (no sign-in or non-commercial licence). Any downloaded model then runs locally."><span class="ic" data-ic="offline"></span>Fully open</button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <button class="cta" id="check-btn">Check my setup <span class="ic" data-ic="arrow"></span></button>
|
|
|
| <details class="disc" id="find-specs">
|
| <summary><span class="ic sum-ic" data-ic="search"></span>How do I find my specs? <span class="chev ic" data-ic="chevron"></span></summary>
|
| <div class="disc-body" id="find-specs-body"></div>
|
| </details>
|
|
|
| <span id="glossary-anchor"></span>
|
| <details class="disc" id="glossary">
|
| <summary><span class="ic sum-ic" data-ic="book"></span>What do these words mean? <span class="chev ic" data-ic="chevron"></span></summary>
|
| <div class="disc-body">
|
| <dl>
|
| <div><dt>Model</dt><dd>The AI's "brain". Bigger means smarter, but heavier.</dd></div>
|
| <div><dt>Parameters (e.g. 7B)</dt><dd>How big the brain is. 7B is 7 billion. More means smarter and hungrier for memory.</dd></div>
|
| <div><dt>Quantisation (4-bit, 8-bit)</dt><dd>Shrinking a model so it fits. 4-bit is the popular sweet spot: much smaller, barely-noticeable quality loss.</dd></div>
|
| <div><dt>VRAM</dt><dd>The fast memory on a graphics card. The biggest factor in what runs quickly.</dd></div>
|
| <div><dt>RAM</dt><dd>Your computer's normal memory. Models can use it too, but it is slower.</dd></div>
|
| <div><dt>GGUF</dt><dd>A single-file model format made for running locally.</dd></div>
|
| </dl>
|
| </div>
|
| </details>
|
| </div>
|
| </aside>
|
|
|
|
|
| <section class="panel results-panel" id="results">
|
| <div class="empty-state">
|
| <div class="big"><span class="ic" data-ic="monitor"></span></div>
|
| <h2>Your honest answer appears here</h2>
|
| <p>Fill in your computer and what you want to do, then press <b>Check my setup</b>. Results update as you change things.</p>
|
| </div>
|
| </section>
|
| </div>
|
|
|
| <footer class="foot" id="how">
|
| <p>FitCheck gives <b>conservative</b> estimates from a transparent rules engine.
|
| GGUF sizes are <b>real Hugging Face file sizes</b> (shown rounded); other sizes and all chat-memory
|
| figures are deliberately pessimistic estimates. It would rather under-promise than over-promise. Real speed depends on your exact chip, drivers and settings.</p>
|
| <p style="margin-top:var(--s-2)">Catalogue of real models last verified <b id="cat-version">local</b>. Built for the Hugging Face Build Small hackathon.</p>
|
| </footer>
|
| </main>
|
|
|
| <script src="/static/icons.js"></script>
|
| <script src="/static/app.js"></script>
|
| </body>
|
| </html>
|
|
|
