// Deterministic pseudo-random so numbers are stable per token function mulberry32(seed) { return function() { let t = seed += 0x6D2B79F5; t = Math.imul(t ^ t >>> 15, t | 1); t ^= t + Math.imul(t ^ t >>> 7, t | 61); return ((t ^ t >>> 14) >>> 0) / 4294967296; }; } function seededRand(seed) { return mulberry32(seed); } // Format a float as a small signed decimal like "+0.23" / "-1.04" function fmt(n, digits = 2) { if (!isFinite(n)) return ' NaN'; const s = n.toFixed(digits); return (n >= 0 ? '+' : '') + s; } // Toy tokenizer: splits on spaces + punctuation, keeps leading space like real BPE function toyTokenize(text) { if (!text) return []; // split keeping the separators so " the" is distinguishable from "the" const parts = []; let buf = ''; for (let i = 0; i < text.length; i++) { const ch = text[i]; if (ch === ' ') { if (buf) parts.push(buf); buf = ' '; } else if (/[.,!?;:'"()[\]{}]/.test(ch)) { if (buf) parts.push(buf); parts.push(ch); buf = ''; } else { buf += ch; } } if (buf) parts.push(buf); // give each a deterministic id return parts.map((t) => { let h = 2166136261; for (let i = 0; i < t.length; i++) { h ^= t.charCodeAt(i); h = Math.imul(h, 16777619); } const id = Math.abs(h) % 50000; return { text: t, id }; }); } // Lerp and clamp const clamp = (v, a, b) => Math.max(a, Math.min(b, v)); const lerp = (a, b, t) => a + (b - a) * t; const smooth = (t) => t * t * (3 - 2 * t); // A single "digit" in the flowing number column function Glyph({ ch, alpha = 1, color = 'var(--ink)' }) { return ( {ch} ); } // Cell with flicker — used inside tensor grids function TensorCell({ value, highlight = 0, color = 'var(--ink)', tiny = false }) { const alpha = 0.25 + 0.75 * Math.min(1, Math.abs(value)); const pulse = highlight; const c = highlight > 0 ? `color-mix(in oklch, ${color}, var(--amber) ${Math.round(pulse * 100)}%)` : color; return ( 0 ? `0 0 8px ${c}` : `0 0 4px ${c}`, transition: 'color 200ms, opacity 200ms, text-shadow 200ms', }}>{fmt(value)} ); } // Simple tiny panel chrome function Panel({ title, subtitle, stage, active, progress, children, style, onExplain }) { const bar = active ? Math.round((progress || 0) * 100) : 0; const [helpHover, setHelpHover] = React.useState(false); return (
{active && (
)}
STAGE {String(stage).padStart(2, '0')}
{title}
{subtitle &&
{subtitle}
}
{onExplain && ( )} {active && } {active ? `${bar.toString().padStart(3, '0')}%` : '···'}
{children} {/* progress underline — thicker when active */}
); } // ── residualRNG ─────────────────────────────────────────────────────────── // Shared deterministic-per-(token, layer, head, seed) value source. 2D // Stage 03/04 and the 3D scene-3d.jsx both sample this so a single prompt // produces the same magnitude / attention / MLP values in both views. // Seeds used across the app (namespace): // 1 — residual magnitude (cell Y-scale in 3D, row strength in 2D) // 3 — attention per-head-per-src contribution // 7 — attention per-target-layer modulation // 11 — MLP write strength // Keep seeds disjoint so the three surfaces don't visually rhyme. function residualRNG(token, layer, head = 0, seed = 1) { let h = 2166136261; const s = `${seed}|${token}|${layer}|${head}`; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 1000) / 1000; } // Expose globals Object.assign(window, { mulberry32, seededRand, fmt, toyTokenize, clamp, lerp, smooth, Glyph, TensorCell, Panel, residualRNG });