Spaces:
Running on Zero
Running on Zero
| <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=Plus+Jakarta+Sans:wght@600;700;800&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> | |
| </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"> | |
| <!-- ============================== INPUTS ============================== --> | |
| <aside class="panel form-panel"> | |
| <!-- Mode: check what I own, or advise what to buy --> | |
| <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> | |
| <!-- Step 1: machine --> | |
| <div class="step" id="machine-step"> | |
| <div class="step-head"><span class="step-num">1</span><h2>Your computer</h2></div> | |
| <div class="hint" id="detect-hint" style="display:none; margin-bottom:var(--s-3)"></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. It never guesses: anything you didn't say stays 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">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">Overrides the GPU picker above. Leave blank to use the picker.</div> | |
| </div> | |
| </div> | |
| </details> | |
| </div> | |
| <!-- Step 2: goal --> | |
| <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 id="usecase-picker"><!-- rendered by app.js --></div> | |
| <div class="field" id="custom-uc-field" style="display:none; margin-top:var(--s-3)"> | |
| <span class="label">Describe what you want to build</span> | |
| <input type="text" id="custom-uc" placeholder="e.g. real-time hand tracking from my webcam" /> | |
| </div> | |
| <div class="field" id="repo-field" style="margin-top:var(--s-4); margin-bottom:0"> | |
| <span class="label">Have a specific model in mind? <span class="optional">(optional)</span></span> | |
| <input type="text" id="repo-check" placeholder="Paste a Hugging Face model id or link, e.g. lerobot/smolvla_base" /> | |
| <div class="hint">Checks that exact model with a live Hugging Face lookup (the rest of FitCheck runs fully offline).</div> | |
| </div> | |
| </div> | |
| <!-- Step 3: preference --> | |
| <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"><span class="ic" data-ic="balanced"></span>Balanced</button> | |
| <button class="seg-btn" data-val="quality"><span class="ic" data-ic="quality"></span>Best quality</button> | |
| <button class="seg-btn" data-val="speed"><span class="ic" data-ic="speed"></span>Fastest</button> | |
| <button class="seg-btn" data-val="offline"><span class="ic" data-ic="offline"></span>Fully offline</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"><!-- filled by app.js per computer type --></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> | |
| </aside> | |
| <!-- ============================== RESULTS ============================== --> | |
| <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. | |
| Model sizes are the <b>exact file sizes on Hugging Face</b>; the rest is careful, deliberately | |
| pessimistic math. It would rather under-promise than over-promise. Real speed depends on your exact chip, drivers and settings.</p> | |
| <p style="margin-top:8px">Catalogue of real models last verified <b id="cat-version">—</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> | |