finephrase

Running on CPU Upgrade

App Files Files Community

joelniklaus HF Staff commited on Feb 21

Commit

9fab25e

1 Parent(s): b531a96

made inference throughput visualization more elaborate

Browse files

Files changed (2) hide show

app/src/content/chapters/5-infrastructure.mdx +4 -2
app/src/content/embeds/inference-throughput.html +573 -290

app/src/content/chapters/5-infrastructure.mdx CHANGED Viewed

@@ -447,10 +447,12 @@ With a trillion-parameter model you won't be generating billions of tokens per h
 #### Visualizing Throughput
-To get an intuition for what these throughput numbers feel like, <FigRef target="inference-throughput" /> lets you pick a model and scale up the number of GPUs. Each page represents roughly 500 tokens of generated text. At high enough throughput, pages roll up into books (200 pages each).
 <HtmlEmbed
   id="inference-throughput"
   src="inference-throughput.html"
-  caption="Interactive GPU throughput simulator. Select a model and adjust the number of H100 GPUs to see how fast pages (500 tokens each) or books (200 pages each) are generated."
 />

 #### Visualizing Throughput
+To get an intuition for what these throughput numbers feel like, <FigRef target="inference-throughput" /> lets you pick a model and scale up the number of GPUs. Each page represents roughly 500 tokens of generated text. At high enough throughput, pages roll up into books (250 pages each), and books into bookshelves (250 books each).
+<Wide>
 <HtmlEmbed
   id="inference-throughput"
   src="inference-throughput.html"
+  caption="Interactive GPU throughput simulator. Select a model and adjust the number of H100 GPUs to see how fast pages (500 tokens), books (250 pages), or bookshelves (250 books) are generated."
 />
+</Wide>

app/src/content/embeds/inference-throughput.html CHANGED Viewed

@@ -2,379 +2,662 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Demo 6: GPU Page Generator</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: #fff; font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 30px; }
-  .subtitle { color: #666; margin-bottom: 20px; font-size: 14px; }
-  .controls { display: flex; gap: 24px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; justify-content: center; }
-  .control-group { display: flex; flex-direction: column; gap: 4px; }
-  .control-group label { font-size: 12px; font-weight: 600; color: #444; text-transform: uppercase; letter-spacing: 0.5px; }
-  select, input[type=range] { font-size: 14px; font-family: inherit; }
-  select { padding: 6px 10px; border: 2px solid #000; background: #fff; cursor: pointer; }
-  input[type=range] { width: 200px; accent-color: #2e5f7e; }
-  .gpu-count { font-size: 14px; font-weight: 700; color: #2e5f7e; min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
-  canvas { border: 2px solid #000; background: #fafafa; }
-  .metrics { display: flex; gap: 32px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
-  .metric { text-align: center; }
-  .metric .value { font-size: 28px; font-weight: 700; color: #2e5f7e; font-variant-numeric: tabular-nums; }
-  .metric .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
 </style>
 </head>
 <body>
-<div class="subtitle">1 page ≈ 500 tokens ≈ 1,800 characters</div>
-<div class="controls">
-  <div class="control-group">
-    <label>Model</label>
-    <select id="model">
-      <option value="45540">SmolLM2-135M (45,540 tps/gpu)</option>
-      <option value="8086">Qwen3-4B (8,086 tps/gpu)</option>
-      <option value="6443">Qwen3-8B (6,443 tps/gpu)</option>
-      <option value="6117">GPT-OSS-120B (6,117 tps/gpu)</option>
-      <option value="1724">Gemma-3-27B (1,724 tps/gpu)</option>
-    </select>
   </div>
-  <div class="control-group">
-    <label>GPUs</label>
-    <div style="display:flex;align-items:center;gap:8px;">
-      <input type="range" id="gpus" min="0" max="10" step="0.01" value="0">
-      <span class="gpu-count" id="gpuLabel">1</span>
-    </div>
-  </div>
-</div>
-<canvas id="c" width="1000" height="400"></canvas>
-<div class="metrics">
-  <div class="metric">
-    <div class="value" id="pps">0</div>
-    <div class="label" id="ppsLabel">Pages / second</div>
   </div>
-  <div class="metric">
-    <div class="value" id="tps">0</div>
-    <div class="label">Tokens / second</div>
   </div>
-  <div class="metric">
-    <div class="value" id="total">0</div>
-    <div class="label" id="totalLabel">Pages generated</div>
   </div>
 </div>
 <script>
   const canvas = document.getElementById('c');
   const ctx = canvas.getContext('2d');
-  const W = 1000, H = 400;
-  const TOKENS_PER_PAGE = 500;
-  const GPU_AREA_X = 10, GPU_AREA_Y = 10, GPU_AREA_W = 200, GPU_AREA_H = H - 20;
-  const FADE_START = W - 120;
-  function getSpawnX() {
-    return GPU_AREA_X + GPU_AREA_W + 15;
   }
   const modelSelect = document.getElementById('model');
   const gpuSlider = document.getElementById('gpus');
-  const gpuLabel = document.getElementById('gpuLabel');
   const ppsEl = document.getElementById('pps');
   const ppsLabelEl = document.getElementById('ppsLabel');
   const tpsEl = document.getElementById('tps');
   const totalEl = document.getElementById('total');
   const totalLabelEl = document.getElementById('totalLabel');
-  const PAGES_PER_BOOK = 200; // ~100K tokens per book
-  let pages = [];
-  let totalPages = 0;
-  let spawnAccum = 0;
-  let lastTime = performance.now();
-  // Page colors — slight variations
-  const pageColors = ['#f5f0e8', '#f0ece4', '#ebe7df', '#f2ede5', '#e8e4dc'];
-  function getGpuCount() {
-    // Logarithmic slider: 0-10 maps to 1-1024
-    return Math.round(Math.pow(2, gpuSlider.value));
   }
-  function getTps() {
-    return parseInt(modelSelect.value) * getGpuCount();
   }
-  function getPps() {
-    return getTps() / TOKENS_PER_PAGE;
   }
-  gpuSlider.addEventListener('input', () => {
-    gpuLabel.textContent = getGpuCount().toLocaleString();
-  });
-  function drawGPUs() {
-    const count = getGpuCount();
-    const ax = GPU_AREA_X, ay = GPU_AREA_Y, aw = GPU_AREA_W, ah = GPU_AREA_H;
-    // Compute grid layout: find cols/rows that fit the area
-    // Aim for roughly square-ish cells that fill the area
     let cols, rows;
     if (count === 1) { cols = 1; rows = 1; }
     else if (count === 2) { cols = 2; rows = 1; }
     else if (count <= 4) { cols = 2; rows = 2; }
-    else if (count <= 8) { cols = 4; rows = 2; }
-    else if (count <= 16) { cols = 4; rows = 4; }
-    else if (count <= 32) { cols = 8; rows = 4; }
-    else if (count <= 64) { cols = 8; rows = 8; }
-    else if (count <= 128) { cols = 16; rows = 8; }
-    else if (count <= 256) { cols = 16; rows = 16; }
-    else if (count <= 512) { cols = 32; rows = 16; }
-    else { cols = 32; rows = 32; }
-    const gap = count <= 16 ? 3 : count <= 64 ? 2 : 1;
-    const cellW = (aw - gap * (cols - 1)) / cols;
-    const cellH = (ah - gap * (rows - 1)) / rows;
-    const gw = Math.min(cellW, cellH * 0.6); // GPU aspect ratio ~0.6
     const gh = gw / 0.6;
-    // Center the grid
-    const totalW = cols * gw + (cols - 1) * gap;
-    const totalH = rows * gh + (rows - 1) * gap;
-    const offX = ax + (aw - totalW) / 2;
-    const offY = ay + (ah - totalH) / 2;
     const fanSpeed = (performance.now() / 200) * Math.min(getPps(), 100);
     for (let i = 0; i < count; i++) {
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      const x = offX + col * (gw + gap);
-      const y = offY + row * (gh + gap);
-      // GPU body
-      ctx.fillStyle = '#2a2a2a';
-      ctx.fillRect(x, y, gw, gh);
-      ctx.strokeStyle = '#000';
-      ctx.lineWidth = count <= 16 ? 1.5 : 0.5;
-      ctx.strokeRect(x, y, gw, gh);
-      if (gw >= 12) {
-        // Fan area
-        const fanSize = gw * 0.7;
-        const fanX = x + (gw - fanSize) / 2;
-        const fanY = y + gw * 0.08;
-        ctx.fillStyle = '#1a1a1a';
-        ctx.fillRect(fanX, fanY, fanSize, fanSize);
-        // Fan circle + blades
-        const fcx = fanX + fanSize / 2;
-        const fcy = fanY + fanSize / 2;
-        const fr = fanSize / 2 - 2;
-        ctx.beginPath();
-        ctx.arc(fcx, fcy, fr, 0, Math.PI * 2);
-        ctx.fillStyle = '#333';
-        ctx.fill();
-        if (gw >= 20) {
-          // Fan blades
-          const bladeR = fr - 2;
-          ctx.save();
-          ctx.translate(fcx, fcy);
-          ctx.rotate(fanSpeed + i * 0.5); // offset per GPU
-          const bladeCount = gw >= 40 ? 7 : 5;
-          for (let b = 0; b < bladeCount; b++) {
-            ctx.rotate(Math.PI * 2 / bladeCount);
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            ctx.quadraticCurveTo(bladeR * 0.5, bladeR * 0.3, bladeR * 0.85, 0);
-            ctx.quadraticCurveTo(bladeR * 0.5, -bladeR * 0.3, 0, 0);
-            ctx.fillStyle = '#555';
-            ctx.fill();
-          }
-          ctx.restore();
-        }
-        // Heatsink lines below fan
-        const heatY = fanY + fanSize + 2;
-        const heatH = gh - (heatY - y) - gw * 0.15;
-        if (heatH > 4) {
-          const lineH = Math.max(1, Math.min(4, heatH / 6));
-          const lineGap = lineH * 1.5;
-          for (let li = 0; li * lineGap < heatH; li++) {
-            ctx.fillStyle = li % 2 === 0 ? '#444' : '#383838';
-            ctx.fillRect(x + gw * 0.1, heatY + li * lineGap, gw * 0.8, lineH);
-          }
-        }
-        // Gold pins at bottom
-        if (gw >= 30) {
-          ctx.fillStyle = '#c4a020';
-          const pinW = Math.max(1, gw * 0.06);
-          const pinCount = Math.floor(gw * 0.7 / (pinW * 2));
-          const pinStart = x + (gw - pinCount * pinW * 2) / 2;
-          for (let p = 0; p < pinCount; p++) {
-            ctx.fillRect(pinStart + p * pinW * 2, y + gh, pinW, Math.max(2, gw * 0.08));
-          }
         }
-      } else {
-        // Too small for detail — just a green LED dot
-        ctx.fillStyle = '#8a8';
-        const dotR = Math.max(0.5, gw * 0.1);
-        ctx.fillRect(x + gw/2 - dotR, y + gh * 0.8, dotR * 2, dotR * 2);
       }
     }
   }
-  // Book cover colors
-  const bookColors = ['#8b4513','#2e4057','#6b3a3a','#3a5a3a','#4a3a6b','#5a3a2e','#2e3a5a','#6b5a3a'];
-  function drawItem(p) {
-    const alpha = p.x > FADE_START ? 1 - (p.x - FADE_START) / (W - FADE_START) : 1;
-    ctx.globalAlpha = alpha;
-    if (p.type === 'book') {
-      const bw = 16, bh = 20;
-      // Shadow
-      ctx.fillStyle = 'rgba(0,0,0,0.12)';
-      ctx.fillRect(p.x + 2, p.y + 2, bw, bh);
-      // Cover
-      ctx.fillStyle = p.color;
-      ctx.fillRect(p.x, p.y, bw, bh);
-      // Spine
-      ctx.fillStyle = 'rgba(0,0,0,0.25)';
-      ctx.fillRect(p.x, p.y, 3, bh);
-      // Page edges (right side lighter stripe)
-      ctx.fillStyle = '#f0ece4';
-      ctx.fillRect(p.x + bw - 2, p.y + 1, 2, bh - 2);
-      // Title lines on cover
-      ctx.fillStyle = 'rgba(255,255,255,0.3)';
-      ctx.fillRect(p.x + 5, p.y + 5, 8, 1.5);
-      ctx.fillRect(p.x + 5, p.y + 8, 6, 1.5);
-      // Border
-      ctx.strokeStyle = '#333';
-      ctx.lineWidth = 0.5;
-      ctx.strokeRect(p.x, p.y, bw, bh);
-    } else {
-      const pw = 14, ph = 18;
-      // Shadow
-      ctx.fillStyle = 'rgba(0,0,0,0.08)';
-      ctx.fillRect(p.x + 2, p.y + 2, pw, ph);
-      // Page body
-      ctx.fillStyle = p.color;
-      ctx.fillRect(p.x, p.y, pw, ph);
-      ctx.strokeStyle = '#aaa';
-      ctx.lineWidth = 0.5;
-      ctx.strokeRect(p.x, p.y, pw, ph);
-      // Text lines
-      ctx.fillStyle = '#ccc';
-      for (let i = 0; i < 4; i++) {
-        const lw = 6 + Math.sin(p.id + i) * 4;
-        ctx.fillRect(p.x + 2, p.y + 3 + i * 3, lw, 1);
-      }
     }
-    ctx.globalAlpha = 1;
   }
-  function isBookMode() {
-    return getPps() / PAGES_PER_BOOK >= 1;
   }
   function spawnItem() {
-    const yMin = 30, yMax = H - 60;
-    const y = yMin + Math.random() * (yMax - yMin);
-    const bookMode = isBookMode();
-    // Use effective rate for speed calculation
-    const rate = bookMode ? getPps() / PAGES_PER_BOOK : getPps();
-    const baseSpeed = 2 + Math.log10(Math.max(1, rate)) * 2;
-    const speed = baseSpeed + Math.random() * baseSpeed;
-    pages.push({
-      x: getSpawnX() + Math.random() * 20,
-      y,
-      speed,
-      type: bookMode ? 'book' : 'page',
-      color: bookMode
-        ? bookColors[Math.floor(Math.random() * bookColors.length)]
-        : pageColors[Math.floor(Math.random() * pageColors.length)],
-      id: totalPages
     });
-    totalPages += bookMode ? PAGES_PER_BOOK : 1;
   }
-  function formatNum(n) {
-    if (n >= 1_000_000_000) return (n / 1_000_000_000).toFixed(1) + 'B';
-    if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
-    if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
-    return n.toFixed(0);
   }
   function frame(now) {
-    const dt = Math.min((now - lastTime) / 1000, 0.1); // cap at 100ms
-    lastTime = now;
     ctx.clearRect(0, 0, W, H);
-    // Background gradient hint
-    ctx.fillStyle = '#fafafa';
-    ctx.fillRect(0, 0, W, H);
-    // Arrow flow hint (subtle)
-    ctx.strokeStyle = '#e0e0e0';
-    ctx.lineWidth = 1;
-    ctx.setLineDash([4, 8]);
-    for (let y = 60; y < H - 30; y += 40) {
-      ctx.beginPath();
-      ctx.moveTo(getSpawnX(), y);
-      ctx.lineTo(W - 20, y);
-      ctx.stroke();
-    }
     ctx.setLineDash([]);
-    // Spawn items — books when fast enough, pages otherwise
-    const pps = getPps();
-    const bookMode = isBookMode();
-    const spawnRate = bookMode ? pps / PAGES_PER_BOOK : pps;
     spawnAccum += spawnRate * dt;
-    while (spawnAccum >= 1) {
-      spawnItem();
-      spawnAccum -= 1;
-    }
-    // Update and draw items
-    for (let i = pages.length - 1; i >= 0; i--) {
-      pages[i].x += pages[i].speed;
-      if (pages[i].x > W + 40) {
-        pages.splice(i, 1);
         continue;
       }
-      drawItem(pages[i]);
     }
-    // Draw GPUs on top
-    drawGPUs();
-    // Update metrics — switch to books when throughput is high enough
-    const totalTps = getTps();
-    const bps = pps / PAGES_PER_BOOK;
-    if (bps >= 1) {
-      ppsEl.textContent = formatNum(bps);
-      ppsLabelEl.textContent = 'Books / second';
-    } else {
-      ppsEl.textContent = formatNum(pps);
-      ppsLabelEl.textContent = 'Pages / second';
-    }
-    tpsEl.textContent = formatNum(totalTps);
-    const totalBooks = totalPages / PAGES_PER_BOOK;
-    if (totalBooks >= 1) {
-      totalEl.textContent = formatNum(totalBooks);
-      totalLabelEl.textContent = 'Books generated';
-    } else {
-      totalEl.textContent = formatNum(totalPages);
-      totalLabelEl.textContent = 'Pages generated';
     }
     requestAnimationFrame(frame);
   }
-  gpuLabel.textContent = getGpuCount().toLocaleString();
   requestAnimationFrame(frame);
 </script>
 </body>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
+<title>GPU Page Generator</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #fff; font-family: system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 16px 0; }
+  .viz { width: 100%; max-width: 1200px; }
+  .legend { color: #888; font-size: 12px; text-align: center; margin-bottom: 10px; }
+  .legend b { color: #555; }
+  .control-group { display: flex; flex-direction: column; gap: 3px; }
+  .control-group label { font-size: 11px; font-weight: 600; color: #444; text-transform: uppercase; letter-spacing: 0.5px; }
+  select { font-size: 13px; font-family: inherit; padding: 5px 8px; border: 2px solid #000; background: #fff; cursor: pointer; }
+  .canvas-row { display: flex; gap: 8px; align-items: stretch; }
+  .canvas-row .side-panel { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
+  .canvas-row canvas { flex: 1; min-width: 0; }
+  .slider-area { position: relative; width: 100%; margin-bottom: 4px; }
+  .slider-area input[type=range] { width: 100%; margin: 0; display: block; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; outline: none; cursor: pointer; }
+  .slider-area input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #2e5f7e; cursor: pointer; margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+  .slider-area input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #2e5f7e; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+  .landmark-row { position: relative; width: 100%; height: 14px; }
+  .landmark { position: absolute; transform: translateX(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
+  .landmark-row.a1 .landmark, .landmark-row.a2 .landmark, .landmark-row.a3 .landmark { bottom: 0; }
+  .landmark-row.b1 .landmark, .landmark-row.b2 .landmark, .landmark-row.b3 .landmark { top: 0; }
+  .landmark .tick { width: 1.5px; height: 4px; flex-shrink: 0; }
+  .landmark .name { font-size: 8px; font-weight: 600; white-space: nowrap; letter-spacing: 0.3px; line-height: 1.1; }
+  .landmark:hover .name { color: #000 !important; }
+  .landmark-row.a1 .tick, .landmark-row.a2 .tick, .landmark-row.a3 .tick { background: #b45309; }
+  .landmark-row.a1 .name, .landmark-row.a2 .name, .landmark-row.a3 .name { color: #b45309; }
+  .landmark-row.b1 .tick, .landmark-row.b2 .tick, .landmark-row.b3 .tick { background: #2e5f7e; }
+  .landmark-row.b1 .name, .landmark-row.b2 .name, .landmark-row.b3 .name { color: #2e5f7e; }
+  .landmark .tooltip { display: none; position: absolute; left: 50%; transform: translateX(-50%); background: #1a1a2e; color: #fff; font-size: 11px; padding: 8px 12px; border-radius: 5px; width: 260px; white-space: normal; z-index: 10; pointer-events: none; line-height: 1.45; text-align: left; }
+  .landmark-row.a1 .tooltip, .landmark-row.a2 .tooltip, .landmark-row.a3 .tooltip { bottom: calc(100% + 4px); }
+  .landmark-row.b1 .tooltip, .landmark-row.b2 .tooltip, .landmark-row.b3 .tooltip { top: calc(100% + 4px); }
+  .landmark .tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 5px solid transparent; }
+  .landmark .tooltip.tip-right::after { left: auto; right: 16px; transform: none; }
+  .landmark .tooltip.tip-left::after { left: 16px; transform: none; }
+  .landmark-row.a1 .tooltip::after, .landmark-row.a2 .tooltip::after, .landmark-row.a3 .tooltip::after { top: 100%; border-top-color: #1a1a2e; }
+  .landmark-row.b1 .tooltip::after, .landmark-row.b2 .tooltip::after, .landmark-row.b3 .tooltip::after { bottom: 100%; border-bottom-color: #1a1a2e; }
+  .landmark:hover .tooltip { display: block; }
+  canvas { width: 100%; border: 2px solid #000; background: #fafafa; display: block; }
+  .metrics { display: flex; gap: 24px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
+  .metric { text-align: center; min-width: 100px; }
+  .metric .value { font-size: 24px; font-weight: 700; color: #2e5f7e; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; }
+  .metric .label { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
+  .datasets { margin-top: 12px; width: 100%; }
+  .datasets-title { font-size: 10px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; margin-bottom: 6px; }
+  .dataset-bars { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
+  .dataset-item { display: flex; align-items: center; gap: 5px; font-size: 11px; min-width: 140px; position: relative; cursor: pointer; }
+  .dataset-item .ds-check { font-size: 13px; width: 16px; text-align: center; }
+  .dataset-item .ds-name { font-weight: 600; color: #333; }
+  .dataset-item .ds-time { color: #2e5f7e; font-weight: 700; font-variant-numeric: tabular-nums; }
+  .dataset-item .ds-size { color: #999; font-size: 10px; }
+  .dataset-item.done .ds-name { color: #16a34a; }
+  .dataset-item.done .ds-time { color: #16a34a; }
+  .dataset-item .ds-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1a1a2e; color: #fff; font-size: 11px; padding: 8px 12px; border-radius: 5px; width: 240px; white-space: normal; z-index: 10; pointer-events: none; line-height: 1.45; text-align: left; }
+  .dataset-item .ds-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a2e; }
+  .dataset-item:hover .ds-tip { display: block; }
 </style>
 </head>
 <body>
+<div class="viz">
+  <div class="legend">
+    1 📄 <b>Page</b> = 500 tokens &asymp; 1,800 characters &nbsp;|&nbsp;
+    1 📖 <b>Book</b> = 250 pages = 125K tokens &nbsp;|&nbsp;
+    1 📚 <b>Bookshelf</b> = 250 books = 31.25M tokens
   </div>
+  <div class="slider-area">
+    <div class="landmark-row a3" id="row-a3"></div>
+    <div class="landmark-row a2" id="row-a2"></div>
+    <div class="landmark-row a1" id="row-a1"></div>
+    <input type="range" id="gpus" min="0" max="1" step="0.001" value="0">
+    <div class="landmark-row b1" id="row-b1"></div>
+    <div class="landmark-row b2" id="row-b2"></div>
+    <div class="landmark-row b3" id="row-b3"></div>
+  </div>
+  <div class="canvas-row">
+    <div class="side-panel">
+      <div class="control-group">
+        <label>Model</label>
+        <select id="model">
+          <option value="45540">SmolLM2-135M (45,540 tps/gpu)</option>
+          <option value="8086">Qwen3-4B (8,086 tps/gpu)</option>
+          <option value="6443">Qwen3-8B (6,443 tps/gpu)</option>
+          <option value="6117">GPT-OSS-120B (6,117 tps/gpu)</option>
+          <option value="1724">Gemma-3-27B (1,724 tps/gpu)</option>
+        </select>
+      </div>
+    </div>
+    <canvas id="c"></canvas>
   </div>
+  <div class="metrics">
+    <div class="metric"><div class="value" id="pps">0</div><div class="label" id="ppsLabel">Pages / second</div></div>
+    <div class="metric"><div class="value" id="tps">0</div><div class="label">Tokens / second</div></div>
+    <div class="metric"><div class="value" id="totalTokens">0</div><div class="label">Tokens generated</div></div>
+    <div class="metric"><div class="value" id="total">0</div><div class="label" id="totalLabel">Pages generated</div></div>
   </div>
+  <div class="datasets">
+    <div class="datasets-title">Time to generate dataset at current throughput</div>
+    <div class="dataset-bars" id="datasetBars"></div>
   </div>
 </div>
 <script>
   const canvas = document.getElementById('c');
   const ctx = canvas.getContext('2d');
+  function resizeCanvas() {
+    const w = canvas.clientWidth;
+    canvas.width = w * 2;
+    canvas.height = Math.round(w * 0.28) * 2;
+    canvas.style.height = Math.round(w * 0.28) + 'px';
+  }
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+  const TOKENS_PER_PAGE = 500;
+  const TOKENS_PER_BOOK = 125_000;
+  const TOKENS_PER_BOOKSHELF = 31_250_000;
+  const GPUS_PER_NODE = 8;
+  const GPUS_PER_RACK = 32;
+  const GPUS_PER_SUPERPOD = 256;
+  const MIN_GPUS = 1, MAX_GPUS = 1_000_000;
+  const LOG_MIN = Math.log(MIN_GPUS), LOG_MAX = Math.log(MAX_GPUS);
+  const DATASETS = [
+    { name: 'BookCorpus', tokens: 1e9,
+      desc: '<b>BookCorpus</b> (2015)<br>11K unpublished books scraped from smashwords.com. Used to train the original BERT and GPT-1.' },
+    { name: 'Wikipedia', tokens: 4.3e9,
+      desc: '<b>English Wikipedia</b><br>All articles from en.wikipedia.org. A staple ingredient in virtually every LLM pretraining mix.' },
+    { name: 'C4', tokens: 156e9,
+      desc: '<b>C4</b> (Colossal Clean Crawled Corpus, 2020)<br>Cleaned version of Common Crawl used to train T5. Aggressive filtering removed 99% of the raw crawl.' },
+    { name: 'The Pile', tokens: 330e9,
+      desc: '<b>The Pile</b> (EleutherAI, 2020)<br>22 diverse sources including PubMed, ArXiv, GitHub, StackExchange. Used to train GPT-Neo and GPT-J.' },
+    { name: 'FinePhrase', tokens: 1e12,
+      desc: '<b>FinePhrase</b> (Hugging Face, 2026)<br>1T tokens of LLM-rephrased web text. Synthetic data that teaches small models to punch above their weight.' },
+    { name: 'FineWeb', tokens: 15e12,
+      desc: '<b>FineWeb</b> (Hugging Face, 2024)<br>15T tokens of deduplicated, quality-filtered Common Crawl. The largest open pretraining dataset.' },
+    { name: 'RedPajama', tokens: 100e12,
+      desc: '<b>RedPajama v2</b> (Together AI, 2023)<br>100T raw tokens from 84 Common Crawl snapshots with quality signals. Covers 5 languages.' },
+    { name: 'Common Crawl', tokens: 3e15,
+      desc: '<b>Common Crawl</b> (ongoing since 2008)<br>The raw web archive. Petabytes of HTML from billions of pages. The upstream source for most web-text datasets.' },
+    { name: 'The Internet', tokens: 100e15,
+      desc: '<b>The entire Internet</b> (estimate)<br>Rough estimate of all text ever published online. Nobody has actually tokenized it all.' },
+  ];
+  let dsDone = DATASETS.map(() => false);
+  const TRAINING_RUNS = [
+    { gpus: 8,       name: 'BERT',       row: 'a3',
+      desc: '<b>BERT</b> (Google, 2018)<br>16 TPU v3 chips. 340M params.<br>Trained on BooksCorpus + Wikipedia. Introduced masked language modeling. Changed NLP forever.' },
+    { gpus: 32,      name: 'GPT-2',      row: 'a1',
+      desc: '<b>GPT-2</b> (OpenAI, 2019)<br>\u224832 V100 GPUs. 1.5B params.<br>"Too dangerous to release." Trained on 40 GB of internet text (WebText). Showed scaling up autoregressive LMs produces strong zero-shot results.' },
+    { gpus: 2_048,   name: 'Llama 1',    row: 'a2',
+      desc: '<b>Llama 1</b> (Meta, 2023)<br>2,048 A100 GPUs. 65B params.<br>Trained on 1.4T tokens of public data only. Llama-13B outperformed GPT-3 (175B). Open-sourced and ignited the open LLM movement.' },
+    { gpus: 2_788,   name: 'DeepSeek',   row: 'a3',
+      desc: '<b>DeepSeek V3</b> (DeepSeek, 2024)<br>2,048 H800 GPUs. 671B MoE params (37B active).<br>Only 2.8M GPU-hours using FP8 mixed precision. One of the most cost-efficient frontier model training runs ever (\u2248$5.6M).' },
+    { gpus: 10_000,  name: 'GPT-3',      row: 'a1',
+      desc: '<b>GPT-3</b> (OpenAI, 2020)<br>10,000 V100 GPUs. 175B params.<br>Trained on 300B tokens. Demonstrated few-shot learning. Sparked the LLM revolution. Training cost estimated at $4.6M.' },
+    { gpus: 16_384,  name: 'Llama 3',    row: 'a2',
+      desc: '<b>Llama 3</b> (Meta, 2024)<br>16,384 H100 GPUs. 405B params.<br>Trained on 15T tokens. Meta\u2019s largest open model. Used two 24K-GPU clusters with custom Tectonic filesystem for checkpointing.' },
+    { gpus: 25_000,  name: 'GPT-4',      row: 'a3',
+      desc: '<b>GPT-4</b> (OpenAI, 2023, estimated)<br>\u224825K A100 GPUs. \u22481.8T MoE params.<br>Trained on \u224813T tokens over \u2248100 days. Estimated cost $63M. First GPT model to use mixture-of-experts (16 experts).' },
+    { gpus: 50_000,  name: 'GPT-5',      row: 'a1',
+      desc: '<b>GPT-5</b> (OpenAI, 2025, estimated)<br>\u224850K H100-equiv GPUs (est.).<br>Used less training compute than GPT-4.5 due to focus on post-training scaling. Trained on Stargate infrastructure.' },
+  ];
+  const INFRA_LANDMARKS = [
+    { gpus: 1,       name: '1 GPU',       row: 'b1',
+      desc: '<b>NVIDIA H100 SXM</b><br>80 GB HBM3, 3.96 PFLOPS FP8.<br>The workhorse of modern AI training and inference.' },
+    { gpus: 8,       name: '1 node',      row: 'b2',
+      desc: '<b>DGX H100</b> \u2014 8\u00d7H100 SXM<br>640 GB HBM3, NVLink 900 GB/s, 32 PFLOPS FP8.<br>NVIDIA\u2019s flagship AI server, fits in a single 10U chassis.' },
+    { gpus: 32,      name: '1 rack',      row: 'b3',
+      desc: '<b>DGX SuperPOD rack</b> \u2014 4\u00d7DGX H100<br>32 GPUs, 2.5 TB HBM3, 40+ kW per rack.<br>The building block of enterprise AI clusters.' },
+    { gpus: 256,     name: 'SuperPOD',    row: 'b1',
+      desc: '<b>DGX SuperPOD (1 SU)</b> \u2014 32 nodes, 256 GPUs<br>NDR400 InfiniBand, 256 PFLOPS FP8.<br>NVIDIA\u2019s reference architecture for large-scale AI.' },
+    { gpus: 10_752,  name: 'ALPS',        row: 'b2',
+      desc: '<b>ALPS</b> \u2014 CSCS, Lugano, Switzerland<br>10,752 GH200 Grace-Hopper superchips, 270 PFLOPS.<br>#7 on TOP500. Used by Swiss AI Initiative to pre-train 70B-parameter LLMs.' },
+    { gpus: 12_288,  name: 'ByteDance',   row: 'b3',
+      desc: '<b>ByteDance MegaScale</b><br>12,288 GPUs (A100/H800 mix).<br>Trained a 175B model at 55.2% MFU (1.34\u00d7 Megatron-LM). Published at NSDI \u201924. Full-stack optimization for 10K+ GPU training.' },
+    { gpus: 64_000,  name: 'Stargate',    row: 'b1',
+      desc: '<b>Stargate</b> \u2014 OpenAI / Oracle, Abilene, TX<br>64K GB200 GPUs (planned end 2026), 1.2 GW.<br>$500B joint venture (OpenAI, Oracle, SoftBank, MGX). 875-acre campus, 8 AI factory buildings.' },
+    { gpus: 100_000, name: 'Tencent',     row: 'b2',
+      desc: '<b>Tencent Xingmai 2.0</b><br>100K GPUs (H800/A800 mix) in a single cluster.<br>60% comms efficiency gain over v1. 3.2 TB/s inter-server bandwidth. Supports training and fine-tuning at scale.' },
+    { gpus: 200_000, name: 'Colossus',    row: 'b3',
+      desc: '<b>Colossus</b> \u2014 xAI, Memphis, TN<br>200K H100/H200 GPUs, 250 MW.<br>Built in 122 days (vs 18\u201324 months typical). Powered by 35 gas turbines + 208 Tesla Megapacks.' },
+    { gpus: 250_000, name: 'CoreWeave',   row: 'b1',
+      desc: '<b>CoreWeave</b> \u2014 250K+ GPUs across 32 data centers<br>Mix of H100, H200, GB200, GB300.<br>Largest GPU-native cloud. IPO\u2019d 2025. Clients: OpenAI, Microsoft, Meta.' },
+    { gpus: 600_000, name: 'Meta',        row: 'b2',
+      desc: '<b>Meta AI fleet</b> \u2014 600K H100-equivalent GPUs<br>\u2248350K H100 + A100s. $12B+ GPU investment.<br>Organized into 24K-GPU clusters (RoCE + InfiniBand). Trained Llama 3 405B.' },
+    { gpus: 800_000, name: 'Rainier',     row: 'b3',
+      desc: '<b>Project Rainier</b> \u2014 AWS / Anthropic<br>500K Trainium 2 chips (\u2248800K H100-equiv).<br>$8B across 30 data centers in Indiana. Scaling to 1M chips. Used to train Claude.' },
+    { gpus: 1_000_000, name: 'Colossus 2', row: 'b1',
+      desc: '<b>Colossus 2</b> \u2014 xAI (planned)<br>1M+ H100-equivalent GPUs, 2 GW power.<br>$20B Series E from NVIDIA, Cisco, and others. Expanding across Memphis-area facilities.' },
+  ];
+  function gpusToSlider(gpus) { return (Math.log(Math.max(gpus, 1)) - LOG_MIN) / (LOG_MAX - LOG_MIN); }
+  function sliderToGpus(val) { return Math.round(Math.exp(LOG_MIN + val * (LOG_MAX - LOG_MIN))); }
+  // Audio: short tick sound via Web Audio API
+  let audioCtx = null;
+  function playTick() {
+    if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    osc.frequency.value = 880;
+    osc.type = 'sine';
+    gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.06);
+    osc.start(audioCtx.currentTime);
+    osc.stop(audioCtx.currentTime + 0.06);
   }
   const modelSelect = document.getElementById('model');
   const gpuSlider = document.getElementById('gpus');
   const ppsEl = document.getElementById('pps');
   const ppsLabelEl = document.getElementById('ppsLabel');
   const tpsEl = document.getElementById('tps');
+  const totalTokensEl = document.getElementById('totalTokens');
   const totalEl = document.getElementById('total');
   const totalLabelEl = document.getElementById('totalLabel');
+  let floatingItems = [], totalTokens = 0, spawnAccum = 0, lastTime = performance.now(), lastMetricUpdate = 0;
+  function getGpuCount() { return sliderToGpus(parseFloat(gpuSlider.value)); }
+  function getTps() { return parseInt(modelSelect.value) * getGpuCount(); }
+  function getPps() { return getTps() / TOKENS_PER_PAGE; }
+  function updateSliderGradient() {
+    const val = parseFloat(gpuSlider.value) * 100;
+    gpuSlider.style.background = 'linear-gradient(to right, #2e5f7e 0%, #c0392b ' + (val * 0.5) + '%, #c4a020 ' + val + '%, #ddd ' + val + '%)';
+  }
+  updateSliderGradient();
+  gpuSlider.addEventListener('input', updateSliderGradient);
+  function formatGpuLabel(gpus) {
+    if (gpus < GPUS_PER_NODE) return gpus + ' GPU' + (gpus > 1 ? 's' : '');
+    const nodes = Math.round(gpus / GPUS_PER_NODE);
+    const gpuStr = gpus >= 1000 ? (gpus / 1000).toFixed(gpus >= 10000 ? 0 : 1) + 'K' : gpus.toLocaleString();
+    if (nodes === 1) return '1 node (' + gpuStr + ' GPUs)';
+    const nodeStr = nodes >= 1000 ? (nodes / 1000).toFixed(nodes >= 10000 ? 0 : 1) + 'K' : nodes.toLocaleString();
+    return nodeStr + ' nodes (' + gpuStr + ' GPUs)';
   }
+  const rowEls = { a3: document.getElementById('row-a3'), a2: document.getElementById('row-a2'), a1: document.getElementById('row-a1'),
+    b1: document.getElementById('row-b1'), b2: document.getElementById('row-b2'), b3: document.getElementById('row-b3') };
+  function addLandmark(lm) {
+    const pct = gpusToSlider(lm.gpus) * 100;
+    const isAbove = lm.row.startsWith('a');
+    const el = document.createElement('div');
+    el.className = 'landmark';
+    el.style.left = pct + '%';
+    let tipClass = 'tooltip';
+    let tipStyle = '';
+    if (pct > 80) { tipClass += ' tip-right'; tipStyle = 'left:auto;right:0;transform:none;'; }
+    else if (pct < 20) { tipClass += ' tip-left'; tipStyle = 'left:0;transform:none;'; }
+    const tip = '<div class="' + tipClass + '" style="' + tipStyle + '">' + lm.desc + '</div>';
+    el.innerHTML = isAbove
+      ? '<div class="name">' + lm.name + '</div><div class="tick"></div>' + tip
+      : '<div class="tick"></div><div class="name">' + lm.name + '</div>' + tip;
+    el.addEventListener('click', () => { gpuSlider.value = gpusToSlider(lm.gpus); updateSliderGradient(); resetCountdown(); });
+    rowEls[lm.row].appendChild(el);
   }
+  TRAINING_RUNS.forEach(addLandmark);
+  INFRA_LANDMARKS.forEach(addLandmark);
+  const datasetBarsEl = document.getElementById('datasetBars');
+  const dsEls = DATASETS.map(ds => {
+    const el = document.createElement('div');
+    el.className = 'dataset-item';
+    el.innerHTML = '<span class="ds-check">\u23f3</span><span class="ds-name">' + ds.name + '</span><span class="ds-time">-</span><span class="ds-size">(' + formatNumInt(ds.tokens) + ' tok)</span><div class="ds-tip">' + ds.desc + '</div>';
+    datasetBarsEl.appendChild(el);
+    return el;
+  });
+  function resetCountdown() {
+    dsDone = DATASETS.map(() => false);
+    totalTokens = 0;
+    floatingItems = [];
+    spawnAccum = 0;
+    dsEls.forEach(el => { el.classList.remove('done'); el.querySelector('.ds-check').textContent = '\u23f3'; el.querySelector('.ds-time').textContent = '-'; });
   }
+  gpuSlider.addEventListener('input', () => { resetCountdown(); });
+  modelSelect.addEventListener('change', resetCountdown);
+  function formatNum(n) {
+    if (n >= 1e15) return (n / 1e15).toFixed(1) + 'Q';
+    if (n >= 1e12) return (n / 1e12).toFixed(1) + 'T';
+    if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+    if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+    if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+    return Math.round(n).toString();
+  }
+  function formatNumInt(n) {
+    const fmt = (v, s) => (v % 1 === 0 ? v.toFixed(0) : v.toFixed(1)) + s;
+    if (n >= 1e15) return fmt(n / 1e15, 'Q');
+    if (n >= 1e12) return fmt(n / 1e12, 'T');
+    if (n >= 1e9) return fmt(n / 1e9, 'B');
+    if (n >= 1e6) return fmt(n / 1e6, 'M');
+    if (n >= 1e3) return fmt(n / 1e3, 'K');
+    return Math.round(n).toString();
+  }
+  function formatDuration(seconds) {
+    if (!isFinite(seconds) || seconds < 0) return '\u221e';
+    if (seconds < 1) return '<1s';
+    if (seconds < 60) return Math.round(seconds) + 's';
+    if (seconds < 3600) return Math.round(seconds / 60) + 'm';
+    if (seconds < 86400) return (seconds / 3600).toFixed(1) + 'h';
+    if (seconds < 86400 * 365) return (seconds / 86400).toFixed(1) + 'd';
+    const years = seconds / (86400 * 365);
+    if (years < 1000) return years.toFixed(1) + 'y';
+    if (years < 1e6) return (years / 1e3).toFixed(1) + 'Ky';
+    if (years < 1e9) return (years / 1e6).toFixed(1) + 'My';
+    return (years / 1e9).toFixed(1) + 'By';
+  }
+  function getW() { return canvas.width; }
+  function getH() { return canvas.height; }
+  // Hardware display: GPU → node → rack → superpod → cluster grid
+  function getHardwareLevel(gpus) {
+    if (gpus < GPUS_PER_NODE) return 'gpu';
+    if (gpus < GPUS_PER_RACK) return 'node';
+    if (gpus < GPUS_PER_SUPERPOD) return 'rack';
+    return 'cluster';
+  }
+  function drawHardware() {
+    const W = getW(), H = getH();
+    const gpus = getGpuCount();
+    const labelH = 40;
+    const aw = W * 0.32, ah = H - 20 - labelH, ax = 10, ay = 10 + labelH;
+    const level = getHardwareLevel(gpus);
+    // GPU count label above hardware
+    ctx.fillStyle = '#2e5f7e';
+    ctx.font = 'bold 32px system-ui, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'top';
+    ctx.fillText(formatGpuLabel(gpus), ax + aw / 2, 8);
+    ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
+    if (level === 'gpu') {
+      drawGpuGrid(gpus, ax, ay, aw, ah);
+    } else if (level === 'node') {
+      const nodeCount = Math.max(1, Math.round(gpus / GPUS_PER_NODE));
+      drawNodeGrid(nodeCount, ax, ay, aw, ah);
+    } else if (level === 'rack') {
+      const rackCount = Math.max(1, Math.round(gpus / GPUS_PER_RACK));
+      drawRackGrid(rackCount, ax, ay, aw, ah);
+    } else {
+      const pods = Math.round(gpus / GPUS_PER_SUPERPOD);
+      drawPodGrid(pods, ax, ay, aw, ah);
+    }
+  }
+  function drawGpuGrid(count, ax, ay, aw, ah) {
     let cols, rows;
     if (count === 1) { cols = 1; rows = 1; }
     else if (count === 2) { cols = 2; rows = 1; }
     else if (count <= 4) { cols = 2; rows = 2; }
+    else { cols = 4; rows = 2; }
+    const gap = 3;
+    const gw = Math.min((aw - gap * (cols - 1)) / cols, ((ah - gap * (rows - 1)) / rows) * 0.6);
     const gh = gw / 0.6;
+    const offX = ax + (aw - (cols * gw + (cols - 1) * gap)) / 2;
+    const offY = ay + (ah - (rows * gh + (rows - 1) * gap)) / 2;
     const fanSpeed = (performance.now() / 200) * Math.min(getPps(), 100);
+    for (let i = 0; i < count; i++) {
+      const c = i % cols, r = Math.floor(i / cols);
+      drawSingleGpu(offX + c * (gw + gap), offY + r * (gh + gap), gw, gh, fanSpeed + i * 0.5);
+    }
+  }
+  function drawSingleGpu(x, y, gw, gh, fanPhase) {
+    ctx.fillStyle = '#2a2a2a'; ctx.fillRect(x, y, gw, gh);
+    ctx.strokeStyle = '#000'; ctx.lineWidth = 1.5; ctx.strokeRect(x, y, gw, gh);
+    if (gw < 12) { ctx.fillStyle = '#1a1a1a'; ctx.fillRect(x + gw * 0.15, y + gw * 0.08, gw * 0.7, gw * 0.7); return; }
+    const fs = gw * 0.7, fx = x + (gw - fs) / 2, fy = y + gw * 0.08;
+    ctx.fillStyle = '#1a1a1a'; ctx.fillRect(fx, fy, fs, fs);
+    const cx = fx + fs / 2, cy = fy + fs / 2, fr = fs / 2 - 2;
+    ctx.beginPath(); ctx.arc(cx, cy, fr, 0, Math.PI * 2); ctx.fillStyle = '#333'; ctx.fill();
+    if (gw >= 20) {
+      const br = fr - 2; ctx.save(); ctx.translate(cx, cy); ctx.rotate(fanPhase);
+      const n = gw >= 40 ? 7 : 5;
+      for (let b = 0; b < n; b++) {
+        ctx.rotate(Math.PI * 2 / n); ctx.beginPath(); ctx.moveTo(0, 0);
+        ctx.quadraticCurveTo(br * 0.5, br * 0.3, br * 0.85, 0);
+        ctx.quadraticCurveTo(br * 0.5, -br * 0.3, 0, 0);
+        ctx.fillStyle = '#555'; ctx.fill();
+      }
+      ctx.restore();
+    }
+    const hy = fy + fs + 2, hh = gh - (hy - y) - gw * 0.15;
+    if (hh > 4) { const lh = Math.max(1, Math.min(4, hh / 6)), lg = lh * 1.5;
+      for (let i = 0; i * lg < hh; i++) { ctx.fillStyle = i % 2 === 0 ? '#444' : '#383838'; ctx.fillRect(x + gw * 0.1, hy + i * lg, gw * 0.8, lh); } }
+    if (gw >= 30) { ctx.fillStyle = '#c4a020'; const pw = Math.max(1, gw * 0.06), pc = Math.floor(gw * 0.7 / (pw * 2)), ps = x + (gw - pc * pw * 2) / 2;
+      for (let p = 0; p < pc; p++) ctx.fillRect(ps + p * pw * 2, y + gh, pw, Math.max(2, gw * 0.08)); }
+  }
+  // Grid of DGX nodes
+  function drawNodeGrid(count, ax, ay, aw, ah) {
+    const gap = 6;
+    const cols = count <= 2 ? 1 : 2;
+    const rows = Math.ceil(count / cols);
+    const nw = (aw - gap * (cols - 1)) / cols;
+    const nh = Math.min((ah - gap * (rows - 1)) / rows, aw * 0.35);
+    const tw = cols * nw + (cols - 1) * gap;
+    const th = rows * nh + (rows - 1) * gap;
+    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
     for (let i = 0; i < count; i++) {
+      const c = i % cols, r = Math.floor(i / cols);
+      drawSingleNode(ox + c * (nw + gap), oy + r * (nh + gap), nw, nh);
+    }
+  }
+  function drawSingleNode(nx, ny, nw, nh) {
+    ctx.fillStyle = '#1a1a2e';
+    ctx.beginPath(); ctx.roundRect(nx, ny, nw, nh, 4); ctx.fill();
+    ctx.strokeStyle = '#555'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.roundRect(nx, ny, nw, nh, 4); ctx.stroke();
+    const slotW = (nw - 20) / 8, slotH = nh * 0.6;
+    const slotY = ny + (nh - slotH) / 2;
+    const fanPhase = (performance.now() / 200) * Math.min(getPps(), 100);
+    for (let i = 0; i < 8; i++) {
+      const sx = nx + 10 + i * slotW;
+      drawSingleGpu(sx + 1, slotY, slotW - 2, slotH, fanPhase + i * 0.5);
+    }
+    ctx.fillStyle = '#4ade80';
+    ctx.beginPath(); ctx.arc(nx + 8, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#60a5fa';
+    ctx.beginPath(); ctx.arc(nx + 18, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
+  }
+  // Grid of racks
+  function drawRackGrid(count, ax, ay, aw, ah) {
+    const gap = 4;
+    const cols = count <= 3 ? count : Math.min(4, Math.ceil(Math.sqrt(count)));
+    const rows = Math.ceil(count / cols);
+    const rw = (aw - gap * (cols - 1)) / cols;
+    const rh = Math.min((ah - gap * (rows - 1)) / rows, ah * 0.95);
+    const tw = cols * rw + (cols - 1) * gap;
+    const th = rows * rh + (rows - 1) * gap;
+    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
+    for (let i = 0; i < count; i++) {
+      const c = i % cols, r = Math.floor(i / cols);
+      drawSingleRack(ox + c * (rw + gap), oy + r * (rh + gap), rw, rh);
+    }
+  }
+  function drawSingleRack(rx, ry, rw, rh) {
+    ctx.fillStyle = '#111'; ctx.beginPath(); ctx.roundRect(rx, ry, rw, rh, 4); ctx.fill();
+    ctx.strokeStyle = '#555'; ctx.lineWidth = 2;
+    ctx.beginPath(); ctx.roundRect(rx, ry, rw, rh, 4); ctx.stroke();
+    const nodeCount = 4, pad = 4, gap = 3;
+    const nodeH = (rh - 2 * pad - (nodeCount - 1) * gap) / nodeCount;
+    const nodeW = rw - 2 * pad;
+    const fanPhase = (performance.now() / 200) * Math.min(getPps(), 100);
+    for (let n = 0; n < nodeCount; n++) {
+      const ny = ry + pad + n * (nodeH + gap), nx = rx + pad;
+      ctx.fillStyle = '#1a1a2e';
+      ctx.beginPath(); ctx.roundRect(nx, ny, nodeW, nodeH, 2); ctx.fill();
+      ctx.strokeStyle = '#444'; ctx.lineWidth = 1;
+      ctx.beginPath(); ctx.roundRect(nx, ny, nodeW, nodeH, 2); ctx.stroke();
+      const slotCount = 8, slotW = (nodeW - 6) / slotCount;
+      for (let g = 0; g < slotCount; g++) {
+        const gx = nx + 3 + g * slotW, gy = ny + 2;
+        ctx.fillStyle = '#2a2a2a'; ctx.fillRect(gx, gy, slotW - 1, nodeH - 4);
+        const fcx = gx + (slotW - 1) / 2, fcy = gy + (nodeH - 4) * 0.35;
+        const fr = Math.min((slotW - 1) * 0.35, (nodeH - 4) * 0.25);
+        if (fr > 1) {
+          ctx.beginPath(); ctx.arc(fcx, fcy, fr, 0, Math.PI * 2); ctx.fillStyle = '#444'; ctx.fill();
+          ctx.save(); ctx.translate(fcx, fcy); ctx.rotate(fanPhase + g * 0.3 + n);
+          for (let b = 0; b < 4; b++) { ctx.rotate(Math.PI / 2); ctx.beginPath(); ctx.moveTo(0, 0);
+            ctx.lineTo(fr * 0.8, fr * 0.3); ctx.lineTo(fr * 0.8, -fr * 0.3); ctx.fillStyle = '#666'; ctx.fill(); }
+          ctx.restore();
         }
       }
+      ctx.fillStyle = '#4ade80';
+      ctx.beginPath(); ctx.arc(nx + nodeW - 6, ny + nodeH / 2, Math.min(2, nodeH * 0.15), 0, Math.PI * 2); ctx.fill();
     }
   }
+  // SuperPod grid: draw abstract pods
+  function drawPodGrid(pods, ax, ay, aw, ah) {
+    const vn = Math.min(pods, 1024);
+    let cols, rows;
+    if (vn <= 2) { cols = 1; rows = vn; } else if (vn <= 4) { cols = 2; rows = 2; }
+    else if (vn <= 8) { cols = 2; rows = 4; } else if (vn <= 16) { cols = 4; rows = 4; }
+    else if (vn <= 32) { cols = 4; rows = 8; } else if (vn <= 64) { cols = 8; rows = 8; }
+    else if (vn <= 128) { cols = 8; rows = 16; } else if (vn <= 256) { cols = 16; rows = 16; }
+    else if (vn <= 512) { cols = 16; rows = 32; } else { cols = 32; rows = 32; }
+    const gap = vn <= 16 ? 3 : vn <= 64 ? 2 : 1;
+    const cw = (aw - gap * (cols - 1)) / cols, ch = (ah - gap * (rows - 1)) / rows;
+    const tw = cols * cw + (cols - 1) * gap, th = rows * ch + (rows - 1) * gap;
+    const ox = ax + (aw - tw) / 2, oy = ay + (ah - th) / 2;
+    for (let i = 0; i < vn; i++) {
+      const c = i % cols, r = Math.floor(i / cols);
+      drawPodUnit(ox + c * (cw + gap), oy + r * (ch + gap), cw, ch, vn);
+    }
+    if (pods > vn) {
+      ctx.fillStyle = 'rgba(0,0,0,0.7)';
+      const lh = 24, lw = aw - 20, lx = ax + (aw - lw) / 2, ly = ay + ah - lh - 5;
+      ctx.fillRect(lx, ly, lw, lh); ctx.fillStyle = '#fff';
+      ctx.font = 'bold 12px system-ui, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      const ns = pods >= 1000 ? (pods / 1000).toFixed(pods >= 10000 ? 0 : 1) + 'K' : pods.toLocaleString();
+      ctx.fillText(ns + ' SuperPODs', lx + lw / 2, ly + lh / 2);
+      ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
+    }
+  }
+  function drawPodUnit(x, y, nw, nh, total) {
+    const r = Math.min(2, nw * 0.1);
+    ctx.fillStyle = '#1a1a2e'; ctx.beginPath(); ctx.roundRect(x, y, nw, nh, r); ctx.fill();
+    ctx.strokeStyle = '#444'; ctx.lineWidth = total <= 16 ? 1 : 0.5;
+    ctx.beginPath(); ctx.roundRect(x, y, nw, nh, r); ctx.stroke();
+    if (nw < 4) return;
+    const lr = Math.max(0.8, Math.min(2, nw * 0.06)), ly = y + nh * 0.2;
+    ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
+    if (nw >= 8) { ctx.fillStyle = '#60a5fa'; ctx.beginPath(); ctx.arc(x + nw * 0.4, ly, lr, 0, Math.PI * 2); ctx.fill(); }
+    if (nw >= 6) { ctx.fillStyle = '#c4a020'; ctx.beginPath(); ctx.arc(x + nw * 0.6, ly, lr, 0, Math.PI * 2); ctx.fill(); }
+    if (nw >= 10) {
+      const vy = y + nh * 0.45, vh = nh * 0.4, lc = Math.min(6, Math.floor(nw / 4));
+      ctx.strokeStyle = '#333'; ctx.lineWidth = 0.5;
+      for (let i = 0; i < lc; i++) { const lx = x + nw * 0.2 + (nw * 0.6) * i / lc; ctx.beginPath(); ctx.moveTo(lx, vy); ctx.lineTo(lx, vy + vh); ctx.stroke(); }
     }
+  }
+  function getVisualMode() {
+    const bps = getPps() / 250;
+    if (bps >= 250) return 'shelf';
+    if (bps >= 1) return 'book';
+    return 'page';
   }
+  const EMOJI = { page: '\u{1F4C4}', book: '\u{1F4D6}', shelf: '\u{1F4DA}' };
+  const EMOJI_SIZE = { page: 28, book: 34, shelf: 40 };
+  function drawItem(p) {
+    const W = getW();
+    const fadeStart = W - W * 0.1;
+    const alpha = p.x > fadeStart ? 1 - (p.x - fadeStart) / (W - fadeStart) : 1;
+    ctx.globalAlpha = alpha;
+    const sz = EMOJI_SIZE[p.type];
+    ctx.font = sz + 'px system-ui, sans-serif';
+    ctx.textBaseline = 'top';
+    ctx.fillText(EMOJI[p.type], p.x, p.y);
+    ctx.globalAlpha = 1;
   }
   function spawnItem() {
+    const H = getH(), W = getW();
+    const spawnX = W * 0.34;
+    const yMin = 30, yMax = H - 60, y = yMin + Math.random() * (yMax - yMin);
+    const mode = getVisualMode();
+    const pps = getPps();
+    const rate = mode === 'shelf' ? pps / 62500 : mode === 'book' ? pps / 250 : pps;
+    const bs = 0.8 + Math.log10(Math.max(1, rate)) * 0.8;
+    const tokens = mode === 'shelf' ? TOKENS_PER_BOOKSHELF : mode === 'book' ? TOKENS_PER_BOOK : TOKENS_PER_PAGE;
+    floatingItems.push({
+      x: spawnX + Math.random() * 20, y, speed: bs + Math.random() * bs,
+      type: mode, tokens
     });
   }
+  // Throttle sound: max one tick per 50ms
+  let lastTickTime = 0;
+  function maybePlayTick() {
+    const now = performance.now();
+    if (now - lastTickTime > 50) { lastTickTime = now; playTick(); }
   }
   function frame(now) {
+    const dt = Math.min((now - lastTime) / 1000, 0.1); lastTime = now;
+    const W = getW(), H = getH();
     ctx.clearRect(0, 0, W, H);
+    ctx.fillStyle = '#fafafa'; ctx.fillRect(0, 0, W, H);
+    const spawnX = W * 0.34;
+    ctx.strokeStyle = '#e0e0e0'; ctx.lineWidth = 1; ctx.setLineDash([4, 8]);
+    for (let y = 60; y < H - 30; y += 40) { ctx.beginPath(); ctx.moveTo(spawnX, y); ctx.lineTo(W - 20, y); ctx.stroke(); }
     ctx.setLineDash([]);
+    const pps = getPps(), mode = getVisualMode();
+    const spawnRate = mode === 'shelf' ? Math.min(pps / 62500, 60) : mode === 'book' ? Math.min(pps / 250, 120) : Math.min(pps, 400);
     spawnAccum += spawnRate * dt;
+    while (spawnAccum >= 1) { spawnItem(); spawnAccum -= 1; }
+    for (let i = floatingItems.length - 1; i >= 0; i--) {
+      floatingItems[i].x += floatingItems[i].speed;
+      if (floatingItems[i].x > W + 40) {
+        // Item exited: count its tokens and play sound
+        totalTokens += floatingItems[i].tokens;
+        maybePlayTick();
+        floatingItems.splice(i, 1);
         continue;
       }
+      drawItem(floatingItems[i]);
     }
+    drawHardware();
+    // Throttle DOM metric updates to ~4 Hz to prevent flickering
+    if (now - lastMetricUpdate > 100) {
+      lastMetricUpdate = now;
+      const tps = getTps();
+      const bps = pps / 250;
+      const sps = bps / 250;
+      if (sps >= 1) { ppsEl.textContent = formatNum(sps); ppsLabelEl.textContent = '📚 Shelves / second'; }
+      else if (bps >= 1) { ppsEl.textContent = formatNum(bps); ppsLabelEl.textContent = '📖 Books / second'; }
+      else { ppsEl.textContent = formatNum(pps); ppsLabelEl.textContent = '📄 Pages / second'; }
+      tpsEl.textContent = formatNum(tps);
+      totalTokensEl.textContent = formatNum(totalTokens);
+      const totalShelves = totalTokens / TOKENS_PER_BOOKSHELF;
+      const totalBooks = totalTokens / TOKENS_PER_BOOK;
+      const totalPages = totalTokens / TOKENS_PER_PAGE;
+      if (totalShelves >= 1) { totalEl.textContent = formatNum(totalShelves); totalLabelEl.textContent = '📚 Bookshelves generated'; }
+      else if (totalBooks >= 1) { totalEl.textContent = formatNum(totalBooks); totalLabelEl.textContent = '📖 Books generated'; }
+      else { totalEl.textContent = formatNum(totalPages); totalLabelEl.textContent = '📄 Pages generated'; }
+      for (let i = 0; i < DATASETS.length; i++) {
+        if (dsDone[i]) continue;
+        const remaining = DATASETS[i].tokens - totalTokens;
+        if (remaining <= 0) {
+          dsDone[i] = true;
+          dsEls[i].classList.add('done');
+          dsEls[i].querySelector('.ds-check').textContent = '\u2705';
+          dsEls[i].querySelector('.ds-time').textContent = 'done';
+        } else {
+          dsEls[i].querySelector('.ds-time').textContent = formatDuration(remaining / tps);
+        }
+      }
     }
     requestAnimationFrame(frame);
   }
   requestAnimationFrame(frame);
 </script>
 </body>