// Top controls — rethought IA. // Row 1: brand · prominent prompt field · help button // Row 2: transport (reset · play · step) · stage path · speed · temp const STAGE_LABELS = ['TOKENIZE', 'EMBED', 'ATTEND', 'MLP', 'SAMPLE']; const IconPlay = ({ size = 14, color = 'currentColor' }) => ( ); const IconPause = ({ size = 14, color = 'currentColor' }) => ( ); const IconStep = ({ size = 12, color = 'currentColor' }) => ( ); const IconReset = ({ size = 12, color = 'currentColor' }) => ( ); const IconHelp = ({ size = 13, color = 'currentColor' }) => ( ); const IconEdit = ({ size = 11, color = 'currentColor' }) => ( ); // --- Shared tooltip ----------------------------------------------------- // Rich tooltip matching the SPEED/TEMP hint style. Use via . // // Usage: // // // // // Opens above the hosted element, clamped into the viewport. function TooltipHost({ children, title, body, shortcut, width = 240, disabled = false }) { const [hover, setHover] = React.useState(false); const [focused, setFocused] = React.useState(false); const [pos, setPos] = React.useState(null); const ref = React.useRef(null); const show = !disabled && (hover || focused) && (title || body); React.useLayoutEffect(() => { if (!show || !ref.current) { setPos(null); return; } const update = () => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const margin = 12; // Center tooltip on the element, clamp into viewport let left = r.left + r.width / 2 - width / 2; if (left < margin) left = margin; if (left + width > window.innerWidth - margin) left = window.innerWidth - width - margin; const estHeight = 80; const openAbove = r.top > estHeight + margin; const top = openAbove ? r.top - 8 : r.bottom + 8; const transform = openAbove ? 'translateY(-100%)' : 'translateY(0)'; setPos({ left, top, width, transform }); }; update(); window.addEventListener('scroll', update, true); window.addEventListener('resize', update); return () => { window.removeEventListener('scroll', update, true); window.removeEventListener('resize', update); }; }, [show, width]); // Clone single child to attach ref + handlers without adding a wrapper
const child = React.Children.only(children); const clonedChild = React.cloneElement(child, { ref: (node) => { ref.current = node; const { ref: origRef } = child; if (typeof origRef === 'function') origRef(node); else if (origRef && typeof origRef === 'object') origRef.current = node; }, onMouseEnter: (e) => { setHover(true); child.props.onMouseEnter?.(e); }, onMouseLeave: (e) => { setHover(false); child.props.onMouseLeave?.(e); }, onFocus: (e) => { setFocused(true); child.props.onFocus?.(e); }, onBlur: (e) => { setFocused(false); child.props.onBlur?.(e); }, }); return ( <> {clonedChild} {show && pos && ReactDOM.createPortal(
{(title || shortcut) && (
{title && (
{title}
)} {shortcut && (
{shortcut}
)}
)} {body && (
{body}
)}
, document.body )} ); } // Structured rows inside a tooltip body: [value, meaning] pairs. function TipRows({ rows }) { return (
{rows.map(([k, v], i) => (
{k}
{v}
 ))}
); } // Subtle footnote row at the bottom of a tooltip — italic-feeling secondary line. function TipFootnote({ children }) { return (
{children}
); } function Controls({ prompt, onPromptChange, playing, onPlayToggle, onStep, onReset, speed, onSpeedChange, temperature, onTempChange, tokenCount, stepIdx, progress, onJumpStage, onHelp, autoScroll, onAutoScrollToggle, }) { return (
{/* Row 1: brand · prompt · help */}
A working diagram of how a language model picks its next word. No real weights harmed in the making of this demo.
The green dot means it's running. Or bored. Hard to tell. } width={280} >
TRANSFORMER·LIVE
{/* Row 2: transport · stage path · sliders */}
`${v.toFixed(1)}×`} hintTitle="ANIMATION SPEED" hint={<>
How fast the visualization plays.
Only affects the animation. Real models don't have this knob (unfortunately). } /> v.toFixed(2)} hintTitle="TEMPERATURE" hint={<>
Controls how random the next-word pick is.
Pause on Stage 05 and drag the slider — watch the probability bars argue it out. } />
); } function PromptField({ value, onChange }) { const [focused, setFocused] = React.useState(false); const inputRef = React.useRef(null); return ( ); } function Transport({ playing, onPlayToggle, onStep, onReset }) { return (
Clear all generated tokens and start over from your prompt.
Useful after tweaking TEMP or when the model says something cursed. } shortcut="R" >
{playing ? 'Freeze the animation where it is.' : 'Start the pipeline animating.'}
{playing ? 'Good moment to drag TEMP and watch the probabilities panic.' : 'Or tap → to creep forward one stage at a time.'} } shortcut="SPACE" > {playing ? : } {playing ? 'PAUSE' : 'PLAY'}
Pause and advance exactly one stage forward.
The patient way to actually see what's happening. } shortcut="→" >
); } const TransportBtn = React.forwardRef(function TransportBtn({ children, onClick, primary, playing, onMouseEnter, onMouseLeave, onFocus, onBlur }, ref) { const [hover, setHover] = React.useState(false); // Primary (play/pause): outlined-with-glow when playing, filled when paused (invites click). // The pulse on the whole bar + the stage progress already signal "playing" — keep this quiet during motion. let bg, color, shadow; if (primary) { if (playing) { bg = hover ? 'color-mix(in oklch, var(--ink) 18%, transparent)' : 'color-mix(in oklch, var(--ink) 10%, transparent)'; color = 'var(--ink)'; shadow = hover ? '0 0 14px color-mix(in oklch, var(--ink) 40%, transparent), inset 0 0 8px color-mix(in oklch, var(--ink) 18%, transparent)' : 'inset 0 0 6px color-mix(in oklch, var(--ink) 14%, transparent)'; } else { bg = hover ? 'var(--ink)' : 'color-mix(in oklch, var(--ink) 88%, transparent)'; color = 'var(--bg)'; shadow = '0 0 12px color-mix(in oklch, var(--ink) 45%, transparent)'; } } else { bg = hover ? 'rgba(140,255,160,0.12)' : 'transparent'; color = 'var(--ink)'; shadow = 'none'; } return ( ); }); function AutoScrollToggle({ on, onToggle }) { const [hover, setHover] = React.useState(false); const active = !!on; // Follows the same "outlined monospace chip, filled when active" vocabulary as the brand chip / HELP. return (
Auto-scroll the panel view to the stage that's currently running.
Currently {active ? 'ON' : 'OFF'} — leash is {active ? 'attached' : 'off'}. } shortcut="F" > ); } function StagePath({ stepIdx, progress, onJumpStage }) { const descriptions = [ 'Chop the prompt into token IDs the model can read. Spaces are tokens too. Sorry.', 'Turn each token ID into a high-dimensional vector — coordinates in a meaning-space where similar words sit near each other.', 'Every token looks at every other token. This is where the magic happens, and also most of the compute.', 'Feed-forward layers process each position independently. Nobody really knows what they learn.', 'Turn the final vector into probabilities, roll the dice, pick the next token.', ]; return (
{STAGE_LABELS.map((label, i) => { const isActive = i === stepIdx; const isPast = i < stepIdx; const fill = isActive ? progress : (isPast ? 1 : 0); return ( {descriptions[i]}
} shortcut={String(i + 1)} > {i < STAGE_LABELS.length - 1 && (
)} ); })}
); } function HelpBtn({ onClick }) { const [hover, setHover] = React.useState(false); return (
A stage-by-stage walkthrough of the whole pipeline.
} shortcut="?" > ); } function SliderControl({ label, value, min, max, step, onChange, format, hint, hintTitle, shortcut }) { const ref = React.useRef(null); return ( ); } window.Controls = Controls;