Spaces:
Running on Zero
Running on Zero
File size: 10,402 Bytes
c97ad08 e34beb2 c97ad08 e34beb2 c97ad08 e34beb2 c97ad08 ca2bb8e c97ad08 1bbff15 c97ad08 e34beb2 c97ad08 e34beb2 c97ad08 e34beb2 c97ad08 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | <!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=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>
|