Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>POCKET — a big model, no GPU required</title> | |
| <meta name="description" content="POCKET runs a 35B-class open model on a phone, a laptop, or a GPU-less server — decoding 2.69× faster than the most-downloaded on-device model, at matched quality."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Hallmark · genre: modern-minimal · macrostructure: stat-led · theme: cobalt · enrichment: none · nav: N5 floating-pill · footer: Ft2 inline · pre-emit critique: P5 H4 E5 S5 R5 V5 · contrast: pass (40–41) · slop: pass (42–45) */ | |
| :root{ | |
| --paper:#F6F8FC; /* cool engineered near-white (not #fff) */ | |
| --paper-2:#EEF2F9; | |
| --panel:#FFFFFF; | |
| --ink:#141922; /* cool near-black (not #000) */ | |
| --ink-2:#3A4453; | |
| --muted:#5C6675; | |
| --line:#DCE2EC; /* ruler hairline */ | |
| --line-2:#C9D1DE; | |
| --accent:#1E4FE0; /* electric cobalt — the single signal */ | |
| --accent-ink:#FFFFFF; /* text on accent (WCAG >7:1) */ | |
| --accent-wash:#EAF0FE; | |
| --ok:#0E7C66; /* muted teal for "win", not decorative */ | |
| --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-s:16px; | |
| --space-m:24px; --space-l:40px; --space-xl:64px; --space-2xl:96px; --space-3xl:140px; | |
| --r:6px; /* tight radii */ | |
| --r-pill:100px; | |
| --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif; | |
| --font-body:'Inter',ui-sans-serif,system-ui,sans-serif; | |
| --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{overflow-x:clip;margin:0} /* gate 34 */ | |
| html{-webkit-text-size-adjust:100%} | |
| body{ | |
| background:var(--paper);color:var(--ink); | |
| font-family:var(--font-body);font-weight:400;line-height:1.55; | |
| font-size:16px;letter-spacing:-0.006em; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| .wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--space-m)} | |
| h1,h2,h3{font-family:var(--font-display);font-weight:600;font-style:normal;letter-spacing:-0.03em;line-height:1.04;margin:0} | |
| p{margin:0} | |
| a{color:inherit} | |
| .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} | |
| .mono{font-family:var(--font-mono)} | |
| .eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} | |
| /* ---- N5 floating-pill nav (content-sized, detached, bordered) ---- */ | |
| .nav-shell{position:sticky;top:0;z-index:50;padding-top:var(--space-s)} | |
| .nav{ | |
| max-width:1120px;margin-inline:auto; | |
| display:flex;align-items:center;gap:var(--space-m); | |
| width:max-content;max-width:calc(100% - 2*var(--space-m)); | |
| margin-inline:auto; | |
| padding:9px 10px 9px 18px; | |
| background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); | |
| border:1px solid var(--line-2);border-radius:var(--r-pill); | |
| box-shadow:0 1px 2px rgba(20,25,34,.04),0 8px 24px rgba(20,25,34,.06); | |
| } | |
| .nav .brand{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;font-size:1.02rem} | |
| .nav .brand .dot{color:var(--accent)} | |
| .nav .nlinks{display:flex;gap:var(--space-s);margin-left:var(--space-xs)} | |
| .nav .nlinks a{font-size:.85rem;color:var(--ink-2);text-decoration:none;padding:4px 2px} | |
| .nav .nlinks a:hover{color:var(--ink)} | |
| .nav a:focus-visible,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} | |
| .nav .btn{margin-left:var(--space-2xs)} | |
| @media(max-width:640px){ .nav .nlinks{display:none} } | |
| .btn{ | |
| display:inline-flex;align-items:center;gap:8px;line-height:1; | |
| font-family:var(--font-body);font-size:.86rem;font-weight:500; | |
| padding:10px 16px;border-radius:var(--r-pill);text-decoration:none;cursor:pointer; | |
| border:1px solid transparent;transition:background-color .16s ease,color .16s ease,border-color .16s ease; | |
| } | |
| .btn-primary{background:var(--accent);color:var(--accent-ink)} | |
| .btn-primary:hover{background:#173FBF} | |
| .btn-primary:active{background:#12329B} | |
| .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} | |
| .btn-ghost:hover{border-color:var(--ink-2);background:var(--panel)} | |
| .btn-ghost:active{background:var(--paper-2)} | |
| /* ---- Hero · stat-led (figure + worded headline, left-biased, off-axis eyebrow) ---- */ | |
| .hero{padding-top:var(--space-2xl);padding-bottom:var(--space-3xl)} /* bottom>top: gate 44a */ | |
| .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-xl);align-items:end} | |
| .hero-figure{font-family:var(--font-display);font-weight:700;letter-spacing:-0.05em;line-height:.86; | |
| font-size:clamp(5.5rem,15vw,12.5rem);color:var(--ink)} | |
| .hero-figure .x{color:var(--accent);font-weight:500} | |
| .hero-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-m)} | |
| .hero-eyebrow .rule{height:1px;width:44px;background:var(--line-2)} | |
| .hero h1{font-size:clamp(1.55rem,2.4vw + .6rem,2.5rem);font-weight:600;margin-top:var(--space-s)} | |
| .hero .lede{color:var(--ink-2);font-size:1.06rem;line-height:1.55;max-width:56ch;margin-top:var(--space-s)} | |
| .hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);margin-top:var(--space-l)} | |
| .hero-side{padding-bottom:var(--space-2xs)} | |
| .hero-side .qual{font-size:.98rem;color:var(--ink-2);line-height:1.5;border-left:2px solid var(--accent);padding-left:var(--space-s)} | |
| .hero-side .foot{margin-top:var(--space-m);font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.01em;line-height:1.6} | |
| @media(max-width:820px){ .hero-grid{grid-template-columns:1fr;gap:var(--space-l);align-items:start} .hero{padding-top:var(--space-xl);padding-bottom:var(--space-2xl)} } | |
| /* ---- Supporting stat strip (hairline-separated, tabular) ---- */ | |
| .rule-top{border-top:1px solid var(--line)} | |
| .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0} | |
| .strip .cell{padding:var(--space-l) var(--space-m) var(--space-l) 0;border-right:1px solid var(--line)} | |
| .strip .cell:last-child{border-right:none} | |
| .strip .n{font-family:var(--font-display);font-weight:600;font-size:2.3rem;letter-spacing:-0.03em;line-height:1} | |
| .strip .n.acc{color:var(--accent)} | |
| .strip .k{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:var(--space-2xs)} | |
| .strip .d{font-size:.9rem;color:var(--ink-2);margin-top:6px;line-height:1.45} | |
| @media(max-width:820px){ .strip{grid-template-columns:1fr 1fr} .strip .cell:nth-child(2n){border-right:none} } | |
| @media(max-width:460px){ .strip{grid-template-columns:1fr} .strip .cell{border-right:none;border-bottom:1px solid var(--line);padding-right:0} .strip .cell:last-child{border-bottom:none} } | |
| .section{padding-block:var(--space-2xl)} | |
| .sec-head{max-width:60ch} | |
| .sec-head .eyebrow{margin-bottom:var(--space-s)} | |
| .sec-head h2{font-size:clamp(1.5rem,2vw + .5rem,2.15rem)} | |
| .sec-head p{color:var(--ink-2);margin-top:var(--space-s);font-size:1.02rem} | |
| /* ---- Scorecard (honest 4-axis, incl. the loss) ---- */ | |
| .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-top:var(--space-l)} | |
| .score{display:grid;grid-template-columns:1fr} | |
| .score .row{display:grid;grid-template-columns:minmax(0,1fr) 128px 120px;align-items:center;gap:var(--space-m); | |
| padding:var(--space-m) var(--space-l);border-top:1px solid var(--line)} | |
| .score .row:first-child{border-top:none} | |
| .score .metric{font-weight:500;color:var(--ink)} | |
| .score .metric small{display:block;font-weight:400;color:var(--muted);font-size:.82rem;margin-top:2px} | |
| .score .bar{height:8px;border-radius:100px;background:var(--paper-2);position:relative;overflow:hidden} | |
| .score .bar > i{position:absolute;inset:0 auto 0 0;border-radius:100px;background:var(--accent)} | |
| .score .bar.loss > i{background:var(--line-2)} | |
| .score .val{font-family:var(--font-mono);font-weight:600;font-size:1.02rem;text-align:right} | |
| .score .val.win{color:var(--accent)} | |
| .score .val.eq{color:var(--ink-2)} | |
| .score .val.loss{color:var(--muted)} | |
| @media(max-width:640px){ .score .row{grid-template-columns:1fr 84px;gap:var(--space-s)} .score .bar{display:none} } | |
| .note{margin-top:var(--space-m);font-family:var(--font-mono);font-size:.78rem;color:var(--muted);line-height:1.7;max-width:74ch} | |
| .note b{color:var(--ink-2);font-weight:600} | |
| /* ---- Where it runs (typographic rows, no emoji/no icon-tiles) ---- */ | |
| .runs{border-top:1px solid var(--line);margin-top:var(--space-l)} | |
| .runs .r{display:grid;grid-template-columns:180px 1fr;gap:var(--space-l);align-items:baseline; | |
| padding:var(--space-l) 0;border-bottom:1px solid var(--line)} | |
| .runs .r .t{font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-0.02em} | |
| .runs .r .idx{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);display:block;margin-bottom:6px} | |
| .runs .r p{color:var(--ink-2);max-width:60ch} | |
| @media(max-width:640px){ .runs .r{grid-template-columns:1fr;gap:var(--space-2xs)} } | |
| /* ---- Close / CTA band ---- */ | |
| .close{background:var(--ink);color:var(--paper);border-radius:12px;padding:var(--space-2xl) var(--space-xl);margin-block:var(--space-2xl)} | |
| .close h2{color:var(--paper);font-size:clamp(1.6rem,2.4vw + .5rem,2.6rem);max-width:20ch} | |
| .close p{color:#AEB7C6;margin-top:var(--space-s);max-width:52ch} | |
| .close .cta{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-l)} | |
| .close .btn-ghost{color:var(--paper);border-color:#3A4453} | |
| .close .btn-ghost:hover{border-color:#5C6675;background:rgba(255,255,255,.04)} | |
| /* ---- Ft2 inline footer (single line, hairline above) ---- */ | |
| footer{border-top:1px solid var(--line);padding-block:var(--space-l);margin-top:var(--space-xl)} | |
| .foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-m);justify-content:space-between} | |
| .foot-row .fb{font-family:var(--font-display);font-weight:700} | |
| .foot-row .fb .dot{color:var(--accent)} | |
| .foot-row .ft{color:var(--muted);font-size:.86rem} | |
| .foot-row .fc{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)} | |
| .foot-row a{color:var(--muted);text-decoration:none;font-size:.86rem} | |
| .foot-row a:hover{color:var(--ink)} | |
| @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } | |
| @media(prefers-color-scheme:dark){ | |
| :root{--paper:#0E1218;--paper-2:#161C25;--panel:#151B24;--ink:#EEF2F8;--ink-2:#B7C0CE;--muted:#8A94A4;--line:#232B36;--line-2:#313B49;--accent:#5B85FF;--accent-wash:#141E36} | |
| .nav{background:rgba(21,27,36,.78);} | |
| .close{background:#080B10} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="nav-shell"> | |
| <nav class="nav" aria-label="Primary"> | |
| <span class="brand">POCKET<span class="dot">.</span></span> | |
| <span class="nlinks"> | |
| <a href="#numbers">Benchmarks</a> | |
| <a href="#run">Where it runs</a> | |
| <a href="#sovereign">Sovereign</a> | |
| </span> | |
| <a class="btn btn-primary" href="#get">Get POCKET</a> | |
| </nav> | |
| </div> | |
| <main> | |
| <!-- HERO · stat-led --> | |
| <section class="hero"> | |
| <div class="wrap hero-grid"> | |
| <div> | |
| <div class="hero-eyebrow"><span class="rule"></span><span class="eyebrow">On-device inference · GGUF + MLX</span></div> | |
| <div class="hero-figure tnum">2.69<span class="x">×</span></div> | |
| <h1>Big-model answers, faster on the CPU you already own.</h1> | |
| <p class="lede">POCKET runs a 35B-class open model on a phone, a laptop, or a GPU-less server — and decodes <strong>2.69× faster</strong> than the most-downloaded on-device model, at matched quality.</p> | |
| <div class="cta"> | |
| <a class="btn btn-primary" href="#numbers">See the benchmarks</a> | |
| <a class="btn btn-ghost" href="#run">How it runs on-device</a> | |
| </div> | |
| </div> | |
| <div class="hero-side"> | |
| <p class="qual">Same laptop. Same prompt. No accelerator. POCKET returns tokens while the baseline is still warming up.</p> | |
| <p class="foot">measured · CPU decode throughput<br>vs. the most-downloaded on-device model<br>Apple M3, single request</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SUPPORTING STAT STRIP --> | |
| <section id="numbers" class="wrap rule-top"> | |
| <div class="strip"> | |
| <div class="cell"> | |
| <div class="n acc tnum">2.22×</div> | |
| <div class="k">GPU decode</div> | |
| <div class="d">Throughput on a single consumer GPU, same quality target.</div> | |
| </div> | |
| <div class="cell"> | |
| <div class="n tnum">≈ 1.0×</div> | |
| <div class="k">Quality</div> | |
| <div class="d">Matched on standard evals — parity, not a downgrade.</div> | |
| </div> | |
| <div class="cell"> | |
| <div class="n tnum">0</div> | |
| <div class="k">GPUs required</div> | |
| <div class="d">Runs on CPU. A phone or an air-gapped box is enough.</div> | |
| </div> | |
| <div class="cell"> | |
| <div class="n tnum">2</div> | |
| <div class="k">Formats</div> | |
| <div class="d">GGUF for llama.cpp, MLX for Apple silicon. No custom fork.</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HONEST SCORECARD --> | |
| <section class="section wrap"> | |
| <div class="sec-head"> | |
| <div class="eyebrow">Measured, not marketed</div> | |
| <h2>The full scorecard — including where we trail.</h2> | |
| <p>Four axes against the most-downloaded on-device model, same quality target. We publish the axis we lose, because a benchmark you can't check is just a claim.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="score"> | |
| <div class="row"> | |
| <div class="metric">CPU decode throughput<small>tokens per second, single request</small></div> | |
| <div class="bar"><i style="right:0"></i></div> | |
| <div class="val win tnum">2.69×</div> | |
| </div> | |
| <div class="row"> | |
| <div class="metric">GPU decode throughput<small>single consumer GPU</small></div> | |
| <div class="bar"><i style="right:17.5%"></i></div> | |
| <div class="val win tnum">2.22×</div> | |
| </div> | |
| <div class="row"> | |
| <div class="metric">Answer quality<small>standard reasoning + knowledge evals</small></div> | |
| <div class="bar"><i style="right:62.8%"></i></div> | |
| <div class="val eq tnum">matched</div> | |
| </div> | |
| <div class="row"> | |
| <div class="metric">Prefill on long prompts<small>time-to-first-token, 8k context</small></div> | |
| <div class="bar loss"><i style="right:84.8%"></i></div> | |
| <div class="val loss tnum">0.41×</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"><b>Reading it straight:</b> POCKET wins decode by a wide margin and holds quality, but the baseline ingests very long prompts faster — POCKET's prefill trails at 0.41×. For chat, agents and short-to-medium prompts, decode is what you feel; for 8k-token document dumps, weigh the trade. Full harness and configs are published.</p> | |
| </section> | |
| <!-- WHERE IT RUNS --> | |
| <section id="run" class="section wrap"> | |
| <div class="sec-head"> | |
| <div class="eyebrow">On-device by design</div> | |
| <h2>One model. Three places it has no business running — and does.</h2> | |
| </div> | |
| <div class="runs"> | |
| <div class="r"><div><span class="idx mono">01</span><span class="t">A phone in your hand</span></div><p>The model lives on the device. Prompts and answers never leave it — no round-trip, no cloud bill, no signal required.</p></div> | |
| <div class="r"><div><span class="idx mono">02</span><span class="t">A laptop with no GPU</span></div><p>Apple silicon via MLX, everything else via GGUF. A MacBook Air is a workstation; POCKET decodes 2.69× faster than the on-device model most people already downloaded.</p></div> | |
| <div class="r"><div><span class="idx mono">03</span><span class="t">An air-gapped server</span></div><p>Closed networks, no accelerators, no outbound. The model runs inside the perimeter, which is exactly where regulated work has to stay.</p></div> | |
| </div> | |
| </section> | |
| <!-- SOVEREIGN --> | |
| <section id="sovereign" class="section wrap"> | |
| <div class="sec-head"> | |
| <div class="eyebrow">For the public sector</div> | |
| <h2>Sovereign by default.</h2> | |
| <p>No cloud dependency, no GPU procurement, no data leaving the building. POCKET ships as software you license or as a sealed appliance — built for closed networks, defense, healthcare, and administrative systems that cloud AI cannot enter. Built on Google’s open Gemma, tuned for Korean, distributed as GGUF and MLX.</p> | |
| </div> | |
| </section> | |
| <!-- CLOSE --> | |
| <section id="get" class="wrap"> | |
| <div class="close"> | |
| <h2>Big-model answers. Pocket-sized footprint.</h2> | |
| <p>Put a frontier-class model where the work is — on the device, inside the network, off the cloud.</p> | |
| <div class="cta"> | |
| <a class="btn btn-primary" href="#">Download POCKET</a> | |
| <a class="btn btn-ghost" href="#">Read the benchmark report</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="wrap foot-row"> | |
| <span class="fb">POCKET<span class="dot">.</span></span> | |
| <span class="ft">Frontier AI that runs where you are.</span> | |
| <span class="fc">A VIDRAFT model · GGUF + MLX</span> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |