url/colibri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

site: official website — animated demo, expert brain, 3-D atlas, Pages deploy

Browse Source 
A zero-build static site under site/, deployed to GitHub Pages by Actions:

- hero with the pixel hummingbird, key numbers, CTA
- 'watch it think': a chat replay paced at measured decode speeds
  (6x5090 / 128GB CPU / 5070 Ti / 25GB floor), with a live tok/s meter
  and the full 19,456-expert grid — colour = tier, brightness = heat,
  routed experts flash white per token
- the expert atlas as a draggable 3-D galaxy (measured-affinity clusters)
- three-tier explainer and the measured hardware ladder
- single HTML file, no dependencies, no build step; custom domain later
  is just a site/CNAME + DNS
This commit is contained in:
ZacharyZcR
2026-07-19 23:31:37 +08:00
parent 61004dcb84
commit 3e45074bf2
4 changed files with 597 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/site.yml
+36
View File
@@ -0,0 +1,36 @@
name: Deploy website
# Publishes site/ to GitHub Pages. One-time repo setup:
# Settings → Pages → Build and deployment → Source: "GitHub Actions".
# Custom domain later: add site/CNAME with the bare domain, point DNS
# (A/AAAA to GitHub Pages IPs or CNAME to <org>.github.io), done.
on:
push:
branches: [main]
paths: ['site/**', '.github/workflows/site.yml']
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: pages
cancel-in-progress: true
jobs:
deploy:
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/checkout@v4
- uses: actions/configure-pages@v5
- uses: actions/upload-pages-artifact@v3
with:
path: site
- id: deployment
uses: actions/deploy-pages@v4
site/colibri-icon.svg
+50
View File
@@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 168 168">
<rect width="168" height="168" rx="36" fill="#080b0d"/>
<g transform="translate(7 21)" shape-rendering="crispEdges">
<rect x="56" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="42" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="56" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="98" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="140" y="14" width="14" height="14" fill="#5fd7d7"/>
<rect x="56" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="98" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="126" y="28" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="28" width="14" height="14" fill="#5fd7d7"/>
<rect x="0" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="14" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="28" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="42" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="56" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="70" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="42" width="14" height="14" fill="#fff"/>
<rect x="98" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="42" width="14" height="14" fill="#5fd7d7"/>
<rect x="126" y="42" width="14" height="14" fill="#5fd7d7"/>
<rect x="56" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="70" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="126" y="56" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="56" width="14" height="14" fill="#5fd7d7"/>
<rect x="70" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="126" y="70" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="70" width="14" height="14" fill="#5fd7d7"/>
<rect x="84" y="84" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="84" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="84" width="14" height="14" fill="#5fd7d7"/>
<rect x="126" y="84" width="14" height="14" fill="#5fd7d7"/>
<rect x="98" y="98" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="98" width="14" height="14" fill="#5fd7d7"/>
<rect x="112" y="112" width="14" height="14" fill="#5fd7d7"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

site/colibri.svg
+55
View File
@@ -0,0 +1,55 @@
<svg xmlns="http://www.w3.org/2000/svg" width="620" height="140" viewBox="0 0 620 140">
<g shape-rendering="crispEdges">
<rect x="56" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="0" width="14" height="14" fill="#d75fd7"/>
<rect x="42" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="56" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="98" y="14" width="14" height="14" fill="#d75fd7"/>
<rect x="140" y="14" width="14" height="14" fill="#5fd7d7"/>
<rect x="56" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="70" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="84" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="98" y="28" width="14" height="14" fill="#d75fd7"/>
<rect x="126" y="28" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="28" width="14" height="14" fill="#5fd7d7"/>
<rect x="0" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="14" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="28" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="42" y="42" width="14" height="14" fill="#ff8700"/>
<rect x="56" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="70" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="42" width="14" height="14" fill="#ffffff"/>
<rect x="98" y="42" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="42" width="14" height="14" fill="#5fd7d7"/>
<rect x="126" y="42" width="14" height="14" fill="#5fd7d7"/>
<rect x="56" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="70" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="56" width="14" height="14" fill="#00afaf"/>
<rect x="126" y="56" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="56" width="14" height="14" fill="#5fd7d7"/>
<rect x="70" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="84" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="70" width="14" height="14" fill="#00afaf"/>
<rect x="126" y="70" width="14" height="14" fill="#5fd7d7"/>
<rect x="140" y="70" width="14" height="14" fill="#5fd7d7"/>
<rect x="84" y="84" width="14" height="14" fill="#00afaf"/>
<rect x="98" y="84" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="84" width="14" height="14" fill="#5fd7d7"/>
<rect x="126" y="84" width="14" height="14" fill="#5fd7d7"/>
<rect x="98" y="98" width="14" height="14" fill="#00afaf"/>
<rect x="112" y="98" width="14" height="14" fill="#5fd7d7"/>
<rect x="112" y="112" width="14" height="14" fill="#5fd7d7"/>
</g>
<text x="252" y="62" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
font-size="52" font-weight="bold" fill="#00afaf">colibr&#236;</text>
<text x="252" y="94" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
font-size="19" fill="#808080" font-style="italic">tiny engine, immense model</text>
<text x="252" y="122" font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
font-size="15" fill="#9a9a9a">GLM-5.2 &#183; 744B MoE &#183; int4 &#183; streaming CPU</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

site/index.html
+456
View File
@@ -0,0 +1,456 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>colibrì — tiny engine, immense model</title>
<meta name="description" content="Run GLM-5.2, a 744B-parameter Mixture-of-Experts model, on your own machine — pure C, zero dependencies, experts streamed from disk.">
<meta property="og:title" content="colibrì — tiny engine, immense model">
<meta property="og:description" content="A 744B MoE on consumer hardware: pure C, zero dependencies, 19,456 experts tiered across VRAM, RAM and disk.">
<meta property="og:image" content="https://raw.githubusercontent.com/JustVugg/colibri/main/docs/media/colibri-atlas.png">
<meta property="og:type" content="website">
<link rel="icon" type="image/svg+xml" href="colibri-icon.svg">
<style>
:root{
--bg:#05070f; --bg2:#0a0e1c; --panel:#0d1226; --line:#1c2444;
--txt:#dbe2f4; --dim:#7c88ad; --faint:#465074;
--magenta:#d75fd7; --cyan:#4dd8ff; --gold:#ffb84d; --green:#5ee88f;
--mono:ui-monospace,'Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
--sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;
padding:.7rem clamp(1rem,4vw,3rem);background:rgba(5,7,15,.82);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line)}
nav .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-weight:700;color:var(--txt)}
nav .brand img{width:22px;height:22px}
nav .links{margin-left:auto;display:flex;gap:1.4rem;font-size:.92rem}
nav .links a{color:var(--dim)} nav .links a:hover{color:var(--txt);text-decoration:none}
main{position:relative;z-index:1}
section,header.hero{padding:clamp(3rem,8vh,6rem) clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto}
.hero{text-align:center;padding-top:clamp(4rem,12vh,8rem)}
.hero img.logo{width:min(420px,80vw);image-rendering:pixelated;margin-bottom:1.2rem}
.hero h1{font-family:var(--mono);font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:500;color:var(--dim);letter-spacing:.02em}
.hero h1 b{color:var(--txt)}
.hero p.sub{max-width:46rem;margin:1.1rem auto 0;color:var(--dim);font-size:clamp(.95rem,1.6vw,1.08rem)}
.hero p.sub b{color:var(--txt);font-weight:600}
.cta{display:flex;gap:.9rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:.95rem;padding:.62rem 1.35rem;border-radius:8px;border:1px solid var(--line);
color:var(--txt);background:var(--panel);transition:border-color .2s,transform .15s}
.btn:hover{border-color:var(--magenta);text-decoration:none;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#7a2d8f,#b23eb2);border-color:#b23eb2}
.stats{display:flex;justify-content:center;gap:clamp(1.2rem,4vw,3rem);margin-top:2.8rem;flex-wrap:wrap}
.stats div{font-family:var(--mono)}
.stats .n{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:700;color:var(--txt)}
.stats .l{font-size:.78rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
h2{font-family:var(--mono);font-size:clamp(1.25rem,2.4vw,1.6rem);margin-bottom:.4rem}
h2 .hash{color:var(--magenta)}
.lead{color:var(--dim);max-width:52rem;margin-bottom:2rem}
.lead b{color:var(--txt)}
/* ---- demo ---- */
.profiles{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
.profiles button{font-family:var(--mono);font-size:.82rem;padding:.45rem .9rem;border-radius:7px;cursor:pointer;
background:var(--panel);border:1px solid var(--line);color:var(--dim);transition:all .15s}
.profiles button:hover{color:var(--txt)}
.profiles button.on{color:var(--txt);border-color:var(--magenta);background:#1a1030}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:1.1rem}
@media(max-width:900px){.demo-grid{grid-template-columns:1fr}}
.win{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}
.win .bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-bottom:1px solid var(--line);
font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.win .bar .dot{width:10px;height:10px;border-radius:50%;background:#2a3560}
.win .bar .dot.r{background:#e4576b}.win .bar .dot.y{background:#e2b34f}.win .bar .dot.g{background:#57c07a}
.win .bar .ttl{margin-left:.4rem}
#term{font-family:var(--mono);font-size:.8rem;line-height:1.55;padding:1rem;height:380px;overflow-y:auto;
white-space:pre-wrap;word-break:break-word;color:#b9c3e0}
#term .banner{color:var(--magenta)} #term .bannertxt{color:var(--faint)}
#term .you{color:var(--gold)} #term .ans{color:#d5dcf0} #term .statline{color:var(--green)}
#term .cursor{display:inline-block;width:.55em;height:1.05em;background:var(--cyan);vertical-align:-0.18em;
animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.brainwrap{padding:1rem;display:flex;flex-direction:column;gap:.8rem}
#brain{width:100%;image-rendering:pixelated;border-radius:6px;background:#070a18;display:block}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;font-family:var(--mono)}
.meter{background:#0a0f22;border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem}
.meter .v{font-size:1.25rem;font-weight:700}
.meter .v small{font-size:.7rem;font-weight:400;color:var(--faint)}
.meter .k{font-size:.68rem;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
#m-toks .v{color:var(--green)} #m-ttft .v{color:var(--cyan)} #m-hit .v{color:var(--gold)}
.legend{display:flex;gap:1.1rem;font-family:var(--mono);font-size:.72rem;color:var(--dim);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:.35rem;vertical-align:-1px}
.note{font-size:.78rem;color:var(--faint);margin-top:.9rem;font-family:var(--mono)}
/* ---- atlas ---- */
#atlas-sec{max-width:none;padding-left:0;padding-right:0}
#atlas-sec .inner{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.atlaswrap{position:relative;margin-top:1.6rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:radial-gradient(ellipse at 50% 40%,#0b1030 0%,var(--bg) 70%)}
#atlas{display:block;width:100%;height:min(72vh,640px);cursor:grab;touch-action:pan-y}
#atlas.grabbing{cursor:grabbing}
.alabel{position:absolute;font-family:var(--mono);font-size:.72rem;color:var(--dim);pointer-events:none;
transform:translate(-50%,-50%);text-shadow:0 0 6px #000;white-space:nowrap;transition:opacity .2s}
.ahint{position:absolute;bottom:.8rem;right:1.2rem;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
/* ---- how ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem}
.tier h3{font-family:var(--mono);font-size:.95rem;display:flex;align-items:center;gap:.5rem}
.tier h3 i{width:10px;height:10px;border-radius:3px;display:inline-block}
.tier .cap{font-family:var(--mono);font-size:.75rem;color:var(--faint);margin:.15rem 0 .55rem}
.tier p{font-size:.88rem;color:var(--dim)}
.flow{margin-top:1.4rem;font-family:var(--mono);font-size:.85rem;color:var(--dim);background:var(--panel);
border:1px solid var(--line);border-radius:12px;padding:1rem 1.3rem}
.flow b{color:var(--txt)}
/* ---- ladder ---- */
.ladder{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.85rem;margin-top:1.4rem}
.ladder th{color:var(--faint);font-weight:500;text-align:left;font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.ladder td{padding:.65rem .8rem;border-bottom:1px solid #131a36}
.ladder td.spd{color:var(--green);font-weight:700;white-space:nowrap}
.ladder tr:hover td{background:#0d1226}
.ladder .bar-td{width:38%;min-width:120px}
.ladder .sbar{height:8px;border-radius:4px;background:linear-gradient(90deg,#2a8f5a,var(--green));min-width:3px}
footer{border-top:1px solid var(--line);padding:2.2rem clamp(1rem,4vw,3rem);display:flex;gap:1.5rem;flex-wrap:wrap;
align-items:center;font-size:.85rem;color:var(--faint);position:relative;z-index:1}
footer .sp{margin-left:auto}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
#term .cursor{animation:none}
}
</style>
</head>
<body>
<canvas id="stars"></canvas>
<nav>
<a class="brand" href="#"><img src="colibri-icon.svg" alt=""> colibrì</a>
<div class="links">
<a href="#demo">demo</a>
<a href="#atlas-sec">atlas</a>
<a href="#how">how</a>
<a href="https://github.com/JustVugg/colibri/blob/main/docs/quickstart.md">quick start</a>
<a href="https://github.com/JustVugg/colibri">GitHub</a>
</div>
</nav>
<main>
<header class="hero">
<img class="logo" src="colibri.svg" alt="colibrì — pixel hummingbird logo">
<h1><b>tiny engine, immense model</b></h1>
<p class="sub">Run <b>GLM-5.2 — a 744-billion-parameter Mixture-of-Experts</b> — on your own machine.
Pure C, <b>zero dependencies</b>, experts streamed from disk. From a 25&nbsp;GB dev box to a
six-GPU workstation: same engine, same container, the hardware only changes where the experts live.</p>
<div class="cta">
<a class="btn primary" href="https://github.com/JustVugg/colibri">★ GitHub</a>
<a class="btn" href="https://github.com/JustVugg/colibri/blob/main/docs/quickstart.md">Quick start</a>
<a class="btn" href="https://github.com/JustVugg/colibri/blob/main/docs/benchmarks.md">Benchmarks</a>
</div>
<div class="stats">
<div><div class="n">744B</div><div class="l">parameters</div></div>
<div><div class="n">19,456</div><div class="l">experts</div></div>
<div><div class="n">~11 GB</div><div class="l">routed / token</div></div>
<div><div class="n">0</div><div class="l">dependencies</div></div>
<div><div class="n">25 GB</div><div class="l">min RAM</div></div>
</div>
</header>
<section id="demo" class="reveal">
<h2><span class="hash">#</span> watch it think</h2>
<p class="lead">A replay of the engine at work, paced to <b>measured decode speeds</b> from real hardware.
Every token routes through 8 experts in each of 75 MoE layers — the grid on the right is all
<b>19,456 experts</b>: colour is the storage tier, brightness is routing heat, and every expert
a token touches flashes white.</p>
<div class="profiles" id="profiles"></div>
<div class="demo-grid">
<div class="win">
<div class="bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="ttl">coli chat — <span id="prof-name"></span></span></div>
<div id="term"></div>
</div>
<div class="win">
<div class="bar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="ttl">the brain — 75 MoE layers × 256 experts + MTP</span></div>
<div class="brainwrap">
<canvas id="brain" width="256" height="76"></canvas>
<div class="meters">
<div class="meter" id="m-toks"><div class="v">0.0<small> tok/s</small></div><div class="k">decode</div></div>
<div class="meter" id="m-ttft"><div class="v">—<small> s</small></div><div class="k">ttft (measured)</div></div>
<div class="meter" id="m-hit"><div class="v">—<small> %</small></div><div class="k">resident hit</div></div>
</div>
<div class="legend">
<span><i style="background:var(--gold)"></i>VRAM tier</span>
<span><i style="background:var(--cyan)"></i>RAM tier</span>
<span><i style="background:#2a3560"></i>disk tier</span>
<span><i style="background:#fff"></i>routed now</span>
</div>
</div>
</div>
</div>
<p class="note">Simulation replays a fixed transcript at each profile's measured decode rate; TTFT shown is the measured value, not a live wait.</p>
</section>
<section id="atlas-sec" class="reveal">
<div class="inner">
<h2><span class="hash">#</span> the expert atlas</h2>
<p class="lead">Routing affinity is <b>measured, not assumed</b>. Characterised experts cluster by what
they actually fire on — poetry, law, Chinese, SQL, code, mathematics… Position below is measured
routing affinity, not a learned embedding. <b>Drag to spin.</b></p>
</div>
<div class="atlaswrap">
<canvas id="atlas"></canvas>
<div id="alabels"></div>
<div class="ahint">drag to spin · scroll past to release</div>
</div>
</section>
<section id="how" class="reveal">
<h2><span class="hash">#</span> how it fits</h2>
<p class="lead">A 744B MoE activates only <b>~40B parameters per token</b> — and only ~11&nbsp;GB of those
change from token to token (the routed experts). colibrì keeps the dense weights resident and tiers the
19,456 experts (~19&nbsp;MB each, int4) across three levels by measured heat:</p>
<div class="tiers">
<div class="tier"><h3><i style="background:var(--gold)"></i> VRAM</h3>
<div class="cap">hottest experts · grouped GPU matmuls</div>
<p>With CUDA or Metal, the hottest experts live on-device and are batched into grouped kernels.
Six RTX 5090s hold the entire routed set: disk reads drop to zero.</p></div>
<div class="tier"><h3><i style="background:var(--cyan)"></i> RAM</h3>
<div class="cap">warm experts · pinned &amp; wired</div>
<p>The warm set is pinned in RAM (<span style="font-family:var(--mono)">PIN_GB</span>), guided by
recorded usage stats, and served by AVX-512/NEON int4 kernels with an LRU cache behind it.</p></div>
<div class="tier"><h3><i style="background:#5a6aa8"></i> disk</h3>
<div class="cap">cold tail · streamed on demand</div>
<p>Everything else streams from NVMe with io_uring, prefetched a layer ahead by the router.
This is how 744B fits a 25&nbsp;GB machine at all — the proven floor.</p></div>
</div>
<div class="flow">token → router picks <b>8 of 256 experts</b> per layer → engine gathers them from
<b>VRAM / RAM / disk</b> → int4 matmuls → next token. Output is validated <b>token-exact</b> against the
reference transformers implementation.</div>
</section>
<section id="ladder-sec" class="reveal">
<h2><span class="hash">#</span> the ladder</h2>
<p class="lead">Same engine, same int4 container — measured decode on real machines,
from the proven floor to full residency.</p>
<table class="ladder">
<thead><tr><th>hardware</th><th>decode</th><th></th><th>where the experts live</th></tr></thead>
<tbody>
<tr><td>6× RTX 5090 · full residency</td><td class="spd">5.8–6.8 tok/s</td>
<td class="bar-td"><div class="sbar" style="width:100%"></div></td><td>all in VRAM+RAM · disk 0</td></tr>
<tr><td>128 GB CPU-only desktop</td><td class="spd">~1.8 tok/s</td>
<td class="bar-td"><div class="sbar" style="width:28%"></div></td><td>hot set pinned in RAM</td></tr>
<tr><td>single RTX 5070 Ti laptop-class</td><td class="spd">1.07 tok/s</td>
<td class="bar-td"><div class="sbar" style="width:17%"></div></td><td>GPU-resident pipeline</td></tr>
<tr><td>25 GB dev box · cold</td><td class="spd">0.05–0.1 tok/s</td>
<td class="bar-td"><div class="sbar" style="width:2%"></div></td><td>streamed from NVMe</td></tr>
</tbody>
</table>
<p class="note">Full tables, methodology and quality ablations: <a href="https://github.com/JustVugg/colibri/blob/main/docs/benchmarks.md">docs/benchmarks.md</a></p>
</section>
</main>
<footer>
<span>🐦 colibrì — MIT license</span>
<a href="https://github.com/JustVugg/colibri">GitHub</a>
<a href="https://github.com/JustVugg/colibri/blob/main/docs/api.md">API</a>
<a href="https://github.com/JustVugg/colibri/blob/main/docs/tuning.md">Tuning</a>
<span class="sp">the hummingbird: tiny, fast, precise.</span>
</footer>
<script>
'use strict';
const REDUCED = matchMedia('(prefers-reduced-motion: reduce)').matches;
/* seeded RNG so every visit renders the same universe */
function mulberry32(a){return function(){a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);
t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}
/* ---------- starfield ---------- */
(()=>{
const cv=document.getElementById('stars'),cx=cv.getContext('2d');
let stars=[];
function resize(){cv.width=innerWidth;cv.height=innerHeight;
const r=mulberry32(7);stars=[];
for(let i=0;i<Math.min(260,innerWidth*innerHeight/9000);i++)
stars.push({x:r()*cv.width,y:r()*cv.height,z:.3+r()*.7,p:r()*6.28});
draw(0);}
function draw(t){cx.clearRect(0,0,cv.width,cv.height);
for(const s of stars){const a=.25+.45*s.z*(REDUCED?1:.6+.4*Math.sin(t/1600+s.p));
cx.fillStyle=`rgba(190,205,255,${a})`;cx.fillRect(s.x,s.y,s.z>.75?2:1,s.z>.75?2:1);}}
addEventListener('resize',resize);resize();
if(!REDUCED)(function loop(t){draw(t);requestAnimationFrame(loop)})(0);
})();
/* ---------- scroll reveal ---------- */
(()=>{const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.08});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));})();
/* ---------- demo: terminal + brain ---------- */
(()=>{
const LAYERS=76,EXPERTS=256,N=LAYERS*EXPERTS;
const PROFILES=[
{name:'6× RTX 5090 · full residency',toks:6.4,ttft:'13',hit:100,vram:.62,ram:.38},
{name:'128 GB CPU desktop',toks:1.8,ttft:'41',hit:96.8,vram:0,ram:.34},
{name:'RTX 5070 Ti laptop-class',toks:1.07,ttft:'58',hit:93.5,vram:.08,ram:.24},
{name:'25 GB dev box (the floor)',toks:0.8,ttft:'190',hit:78.4,vram:0,ram:.06,floor:true},
];
/* the floor really decodes at 0.05–0.1 tok/s; replaying that verbatim means one token
every ~15 s, so the floor profile paces at 0.8 with an honesty note in its transcript. */
const QA=[
['how do you fit 744B parameters into 25 GB of RAM?',
'The model never needs all 744B at once. Each token activates ~40B parameters, and only ~11 GB of those change between tokens — the routed experts. colibrì keeps the dense weights resident, then treats the 19,456 experts as a cache problem: the hot set lives in RAM (or VRAM), the cold tail streams from NVMe, prefetched a layer ahead by the router. The engine is a single C file with zero dependencies — the same binary scales from this floor to a six-GPU workstation.'],
['what makes the output trustworthy?',
'Every kernel is validated token-exact against the reference transformers implementation — the int4 container, the AVX-512 and NEON paths, the CUDA grouped matmuls. Quality is measured, not assumed: the quantization cost is published in the benchmark tables, and the expert atlas itself comes from recorded routing statistics on real workloads.'],
['what am I looking at on the right?',
'All 19,456 experts — 75 MoE layers of 256, plus the MTP head. Gold experts sit in VRAM, cyan in RAM, dark blue on disk. Each token this terminal emits routes through 8 experts per layer, and each one it touches flashes white. Watch the same regions keep lighting up: routing affinity is real, and it is exactly what the tiering exploits.'],
];
const term=document.getElementById('term'),profDiv=document.getElementById('profiles'),
profName=document.getElementById('prof-name'),
brain=document.getElementById('brain'),bx=brain.getContext('2d'),
mToks=document.querySelector('#m-toks .v'),mTtft=document.querySelector('#m-ttft .v'),
mHit=document.querySelector('#m-hit .v');
const BANNER=
`<span class="banner"> ▄▀▀▀▄ ▄</span> colibrì v1.0
<span class="banner"> ▄▄▄▄▀▀▀▀▄▀▀</span> <span class="bannertxt">tiny engine, immense model</span>
<span class="banner"> ▀▀▀▀▀▀▀</span> <span class="bannertxt">GLM-5.2 · 744B MoE · int4</span>
<span class="banner"> ▀▀▀▀</span>
<span class="banner"> ▀</span>
`;
/* per-expert base heat: a few gaussian hotspots per layer (seeded) */
const heat=new Float32Array(N),flash=new Float32Array(N);
{const r=mulberry32(42);
for(let l=0;l<LAYERS;l++){
const nh=2+((r()*3)|0),cs=[];for(let h=0;h<nh;h++)cs.push([r()*EXPERTS,8+r()*26]);
for(let e=0;e<EXPERTS;e++){let v=.05+r()*.08;
for(const[c,s]of cs){const d=Math.min(Math.abs(e-c),EXPERTS-Math.abs(e-c));v+=Math.exp(-d*d/(2*s*s))}
heat[l*EXPERTS+e]=Math.min(v,1);}}}
const order=[...heat.keys()].sort((a,b)=>heat[b]-heat[a]); /* heat rank → tier split */
const tier=new Uint8Array(N);
let P=PROFILES[0];
function setTiers(){const nv=Math.round(N*P.vram),nr=Math.round(N*P.ram);
for(let i=0;i<N;i++)tier[order[i]]=i<nv?2:i<nv+nr?1:0;}
/* render: ImageData at native 256×76, CSS scales it up pixelated */
const img=bx.createImageData(EXPERTS,LAYERS);
const TC=[[42,53,96],[77,216,255],[255,184,77]]; /* disk, ram, vram */
function drawBrain(){const d=img.data;
for(let i=0;i<N;i++){const t=TC[tier[i]],h=.28+.72*heat[i],f=flash[i],o=i*4;
d[o]=t[0]*h+(255-t[0]*h)*f; d[o+1]=t[1]*h+(255-t[1]*h)*f; d[o+2]=t[2]*h+(255-t[2]*h)*f; d[o+3]=255;
flash[i]*=.86;}
bx.putImageData(img,0,0);}
/* routing: per layer, drifting topic centres + jitter — clusters, like real affinity */
const centres=new Float32Array(LAYERS);
{const r=mulberry32(9);for(let l=0;l<LAYERS;l++)centres[l]=r()*EXPERTS;}
let drift=0;
function routeToken(){drift+=.7;
for(let l=0;l<LAYERS;l++){const base=centres[l]+Math.sin((l*.61+drift)*.13)*40;
for(let k=0;k<8;k++){
let e=Math.round(base+(Math.random()*2-1)*(Math.random()*30))%EXPERTS;if(e<0)e+=EXPERTS;
flash[l*EXPERTS+e]=1;}}}
/* terminal typing */
let timer=null,qi=0,emitted=[],running=true;
function rate(){const now=performance.now();emitted=emitted.filter(t=>now-t<4000);
return emitted.length/4;}
function setMeters(live){mToks.innerHTML=(live?rate():0).toFixed(1)+'<small> tok/s</small>';
mTtft.innerHTML=P.ttft+'<small> s</small>';mHit.innerHTML=P.hit.toFixed(1)+'<small> %</small>';}
function startTranscript(){
clearTimeout(timer);term.innerHTML=BANNER;qi=0;emitted=[];nextQA();}
function nextQA(){
const[q,aRaw]=QA[qi%QA.length];qi++;
const a=(P.floor&&qi%QA.length===1)
?aRaw+' (This box really decodes at 0.05–0.1 tok/s — the replay is sped up so you do not grow old here. It works. Slowly. That is the point.)'
:aRaw;
const you=document.createElement('div');you.className='you';you.textContent='▸ you: '+q;term.append(you);
const ans=document.createElement('div');ans.className='ans';term.append(ans);
const cur=document.createElement('span');cur.className='cursor';ans.append(cur);
const words=a.split(/(?=\s)/);let w=0;const t0=performance.now();
(function emit(){
if(!running){timer=setTimeout(emit,300);return}
if(w>=words.length){cur.remove();
const dt=(performance.now()-t0)/1000;
const sl=document.createElement('div');sl.className='statline';
sl.textContent=`[turn] ${words.length} tok · ${(words.length/dt).toFixed(1)} tok/s · hit ${P.hit.toFixed(1)}% · tier vram ${(P.vram*100)|0}% ram ${(P.ram*100)|0}%`;
term.append(sl,document.createElement('br'));term.scrollTop=term.scrollHeight;
timer=setTimeout(nextQA,3200);return}
/* MTP flavour: occasionally two tokens land in one step */
const burst=Math.random()<.18?2:1;
for(let b=0;b<burst&&w<words.length;b++){
cur.before(document.createTextNode(words[w++]));emitted.push(performance.now());routeToken();}
term.scrollTop=term.scrollHeight;setMeters(true);
const jitter=.75+Math.random()*.5;
timer=setTimeout(emit,1000/P.toks*jitter*burst);})();}
/* profile buttons */
PROFILES.forEach((p,i)=>{const b=document.createElement('button');
b.textContent=p.name;if(i===0)b.className='on';
b.onclick=()=>{profDiv.querySelectorAll('button').forEach(x=>x.className='');b.className='on';
P=p;profName.textContent=p.name;setTiers();setMeters(false);startTranscript();};
profDiv.append(b);});
profName.textContent=P.name;setTiers();setMeters(false);
/* pause when offscreen */
new IntersectionObserver(es=>{running=es[0].isIntersecting},{threshold:.05})
.observe(document.getElementById('demo'));
(function paint(){drawBrain();requestAnimationFrame(paint)})();
startTranscript();
})();
/* ---------- atlas: 3-D galaxy ---------- */
(()=>{
const cv=document.getElementById('atlas'),cx=cv.getContext('2d'),
labelBox=document.getElementById('alabels'),wrap=cv.parentElement;
const r=mulberry32(175); /* #175: the measured-atlas issue */
const TOPICS=['poetry','law','中文','SQL','code','math','biology','music','history',
'chemistry','finance','physics','recipes','日本語','geometry','philosophy'];
const CL=36,pts=[];const labels=[];
for(let c=0;c<CL;c++){
const phi=Math.acos(1-2*(c+.5)/CL),th=Math.PI*(1+Math.sqrt(5))*c,
R=.55+r()*.45,cxp=R*Math.sin(phi)*Math.cos(th),cyp=R*Math.cos(phi)*.72,czp=R*Math.sin(phi)*Math.sin(th),
n=c<TOPICS.length?220+(r()*380|0):60+(r()*160|0),
spread=.05+r()*.07,hue=(c*47+r()*20)%360;
if(c<TOPICS.length)labels.push({t:TOPICS[c],x:cxp,y:cyp,z:czp,el:null});
for(let i=0;i<n;i++){
const g=()=> (r()+r()+r()-1.5)*spread*2;
pts.push({x:cxp+g(),y:cyp+g(),z:czp+g(),h:hue,rep:r()<.08});}}
for(let i=0;i<2600;i++){const R=.2+r()*1.05,a=r()*6.283,b=(r()-.5)*2;
pts.push({x:R*Math.cos(a)*Math.sqrt(1-b*b),y:R*b*.72,z:R*Math.sin(a)*Math.sqrt(1-b*b),h:225,halo:true});}
labels.forEach(L=>{const el=document.createElement('div');el.className='alabel';el.textContent=L.t;
labelBox.append(el);L.el=el;});
let ry=.6,vy=REDUCED?0:.0022,dragging=false,lx=0,visible=false;
const TILT=.32,ct=Math.cos(TILT),st=Math.sin(TILT);
function resize(){const dpr=Math.min(devicePixelRatio||1,2);
cv.width=wrap.clientWidth*dpr;cv.height=cv.clientHeight*dpr;}
addEventListener('resize',resize);resize();
cv.addEventListener('pointerdown',e=>{dragging=true;lx=e.clientX;vy=0;cv.classList.add('grabbing');cv.setPointerCapture(e.pointerId)});
cv.addEventListener('pointermove',e=>{if(!dragging)return;const dx=e.clientX-lx;lx=e.clientX;ry+=dx*.006;vy=dx*.0006});
cv.addEventListener('pointerup',()=>{dragging=false;cv.classList.remove('grabbing')});
new IntersectionObserver(es=>{visible=es[0].isIntersecting},{threshold:.02}).observe(cv);
function frame(){
requestAnimationFrame(frame);if(!visible)return;
if(!dragging){ry+=vy;if(!REDUCED)vy+=(.0022-vy)*.01;}
const W=cv.width,H=cv.height,S=Math.min(W,H)*.42,cy0=H*.5,cx0=W*.5,
cr=Math.cos(ry),sr=Math.sin(ry);
cx.clearRect(0,0,W,H);
for(const p of pts){
const x1=p.x*cr+p.z*sr,z1=-p.x*sr+p.z*cr,
y2=p.y*ct-z1*st,z2=p.y*st+z1*ct,
pz=1/(1.9+z2),sx=cx0+x1*S*pz*1.9,sy=cy0+y2*S*pz*1.9;
if(sx<0||sx>W||sy<0||sy>H)continue;
const depth=Math.max(0,Math.min(1,(1.1-z2)*.62));
if(p.halo){cx.fillStyle=`hsla(225,40%,60%,${.10*depth})`;cx.fillRect(sx,sy,1.5,1.5);continue}
const sz=p.rep?3:1.8;
cx.fillStyle=`hsla(${p.h},${p.rep?90:65}%,${p.rep?72:60}%,${(.24+.5*depth).toFixed(3)})`;
cx.fillRect(sx,sy,sz*pz*2.2,sz*pz*2.2);}
const rect=cv.getBoundingClientRect(),k=rect.width/W;
for(const L of labels){
const x1=L.x*cr+L.z*sr,z1=-L.x*sr+L.z*cr,
y2=L.y*ct-z1*st,z2=L.y*st+z1*ct,
pz=1/(1.9+z2),sx=cx0+x1*S*pz*1.9,sy=cy0+y2*S*pz*1.9;
L.el.style.left=(sx*k)+'px';L.el.style.top=(sy*k)+'px';
L.el.style.opacity=z2<0? '0.9':'0.15';}}
frame();
})();
</script>
</body>
</html>