// printer.jsx- input block → simple black box → token output // // Slide variants (driven by props): // 1.5- bare model. Input is one undifferentiated text blob. Model spits a // comical 220-token chaotic pile, no wrapper, no halt. // 1.6- divided input (system / user / assistant / user). The model produces // a coherent ~14-word sentence, then ⟨eos⟩ as the 15th token. Until // that EOS arrives the wrapper border is dark/quiet- only AFTER ⟨eos⟩ // does it light up bright orange and freeze the printer. // 1.7- same end-state as 1.6, no regeneration; two big 👁 overlays appear, // one over the input block, one over the output sequence. // // All three slides use a flex layout with `alignItems: center`, so the input // block, the LLM box, and the output sequence all share a vertical centerline. // // Props: // showWrapper - draw the API · WRAPPER frame // showStop - emit ⟨eos⟩ at the very end of the sequence // noDividers - render input as one undivided text blob (slide 1.5) // bigEyes - overlay two big 👁 (slide 1.7) // staticMode - pre-populate the full sequence + halt; no animation // maxOutputs - total tokens (default 220 chaotic; ≤50 → flow mode) const INPUT_TURNS = [ { role: 'system', text: "You are a helpful assistant. Be concise." }, { role: 'user', text: "what's the weather in berlin today?" }, { role: 'assistant', text: "Mostly cloudy, high near 15°C, light showers later." }, { role: 'user', text: "what about in france?" }, ]; // One continuous text blob (slide 1.5)- joins every turn with no role markers. const BLOB_TEXT = INPUT_TURNS.map(t => t.text).join(' '); // Long, varied pool for the 1.5 chaotic stream. const OUTPUT_POOL = [ "the","weather","in","berlin","today","is","mostly","cloudy","with","a", "high","near","fifteen","degrees","celsius","light","showers","later", "tonight","temperatures","drop","to","seven","wind","calm","skies", "clearing","by","sunrise","tomorrow","forecast","scattered","clouds", "mild","ranging","from","ten","eighteen","you","may","want","an", "umbrella","late","day","just","in","case","humidity","sixty","percent", "pressure","steady","one","thousand","fifteen","millibars","sunset","at", "seventeen","forty","two","translate","please","summary","follows", "first","then","second","note","key","ideas","appear","early", "ingredients","include","pasta","eggs","pancetta","cheese","pepper", "mix","stir","serve","warm","done","next","step","check","this","also", "remember","always","never","sometimes","probably","maybe","yes","no", ]; // Short coherent answer to "what about in france?"- 14 words, ⟨eos⟩ is #15. const SHORT_ANSWER = [ "in","paris","today,","partly","cloudy", "with","a","high","near","eighteen", "and","light","winds","later", ]; function PaperPrinter({ showWrapper = false, showStop = false, noDividers = false, bigEyes = false, staticMode = false, maxOutputs = 220, }) { const speed = useAnimSpeed(); const resetKey = useSlideResetKey(); const [outputs, setOutputs] = useState([]); const [eos, setEos] = useState(false); const [done, setDone] = useState(false); const counterRef = useRef(0); const flowMode = maxOutputs <= 50; // ≤50 → readable sentence-flow; otherwise chaotic pile // Reset on slide change useEffect(() => { setOutputs([]); setEos(false); setDone(false); counterRef.current = 0; }, [resetKey]); // Static mode (slide 1.7): pre-populate the full sequence and halt useEffect(() => { if (!staticMode) return; const items = []; for (let i = 1; i <= maxOutputs; i++) { const isStop = showStop && i === maxOutputs; const word = isStop ? '⟨eos⟩' : (flowMode ? SHORT_ANSWER[(i - 1) % SHORT_ANSWER.length] : OUTPUT_POOL[i % OUTPUT_POOL.length]); const cols = flowMode ? 5 : 12; const col = (i - 1) % cols; const row = Math.floor((i - 1) / cols); const cellW = flowMode ? 130 : 60; const cellH = flowMode ? 56 : 34; const x = col * cellW + (flowMode ? 0 : Math.sin(i * 11.3) * 10); const y = row * cellH + (flowMode ? 0 : Math.cos(i * 7.7) * 6); const rot = flowMode ? 0 : Math.sin(i * 13.1) * 9; const palette = ['#f5ebe6', '#fff8ef', '#ede2dc', '#f9f0e8', '#e8dcd1']; items.push({ id: i, w: word, isStop, x, y, rot, color: palette[i % palette.length] }); } setOutputs(items); setDone(true); if (showStop) setEos(true); }, [staticMode, resetKey, showStop, maxOutputs, flowMode]); // Live tick (non-static modes) useEffect(() => { if (staticMode || done || eos) return; const intervalMs = flowMode ? 240 : 130; const id = setInterval(() => { if (speed < 0.05) return; counterRef.current += 1; const i = counterRef.current; if (i > maxOutputs) { setDone(true); return; } const isStop = showStop && i === maxOutputs; const word = isStop ? '⟨eos⟩' : (flowMode ? SHORT_ANSWER[(i - 1) % SHORT_ANSWER.length] : OUTPUT_POOL[i % OUTPUT_POOL.length]); const cols = flowMode ? 5 : 12; const col = (i - 1) % cols; const row = Math.floor((i - 1) / cols); const cellW = flowMode ? 130 : 60; const cellH = flowMode ? 56 : 34; const x = col * cellW + (flowMode ? 0 : Math.sin(i * 11.3) * 10); const y = row * cellH + (flowMode ? 0 : Math.cos(i * 7.7) * 6); const rot = flowMode ? 0 : Math.sin(i * 13.1) * 9; const palette = ['#f5ebe6', '#fff8ef', '#ede2dc', '#f9f0e8', '#e8dcd1']; setOutputs(prev => [...prev, { id: i, w: word, isStop, x, y, rot, color: palette[i % palette.length], }]); if (isStop) setTimeout(() => setEos(true), 280); }, intervalMs / Math.max(0.05, speed)); return () => clearInterval(id); }, [resetKey, speed, eos, done, showStop, maxOutputs, flowMode, staticMode]); // Wrapper border is dark/quiet pre-EOS, then bright orange glow post-EOS const wrapperBorder = !showWrapper ? '1px solid transparent' : eos ? '6px solid #ffaa6a' : '2px solid #2a1f1c'; const wrapperShadow = !showWrapper ? 'none' : eos ? '0 0 80px rgba(255,170,106,0.85), 0 0 32px rgba(255,170,106,0.6), inset 0 0 60px rgba(255,170,106,0.16)' : 'none'; const wrapperBg = showWrapper ? 'rgba(15,10,9,0.4)' : 'transparent'; // Role accents for divided input const ROLE_COLORS = { system: { bg: '#3a2c2a', label: '#a89888' }, user: { bg: '#5a3a2c', label: '#f5d6c0' }, assistant: { bg: '#3a4a3a', label: '#bfd6c0' }, }; // Output area dimensions- match input box height in flow mode so the // big-eye overlays land at the same vertical centerline on slide 1.7. const outBoxH = flowMode ? 360 : 600; return (
{/* Wrapper label- sits fully inside the wrapper, top-left, never clipped */} {showWrapper && (
THE MODEL WRAPPER {eos ? '· ⟨EOS⟩ DETECTED · HALT' : ''}
)} {/* === INPUT COLUMN === */}
↓ INPUT
{noDividers ? ( // Slide 1.5: undifferentiated text blob- no role distinction
{BLOB_TEXT}
) : ( // Slide 1.6+: divided sections with role labels
{INPUT_TURNS.map((t, i) => { const c = ROLE_COLORS[t.role] || ROLE_COLORS.user; return (
{t.role.toUpperCase()}
{t.text}
); })}
)} {/* Big eye overlay (slide 1.7)- fades in and out of existence */} {bigEyes && (
👁
)}
{/* ARROW: input → LLM */}
→
{/* === LLM BOX === */}
LLM
{/* ARROW: LLM → output */}
→
{/* === OUTPUT COLUMN === */}
↓ OUTPUT
{outputs.map((o, idx) => (
{o.w}
))} {/* Big eye overlay over the output sequence (slide 1.7)- fades in/out, synced to the input eye */} {bigEyes && outputs.length > 0 && (
👁
)}
{/* Counter pill (absolute, bottom-right) */}
{outputs.length} TOKENS{eos ? ' · HALTED ⟨EOS⟩' : (done ? ' · NATURAL STOP' : '')}
); } // Inject keyframes once if (!document.getElementById('printer-keyframes')) { const s = document.createElement('style'); s.id = 'printer-keyframes'; s.textContent = ` @keyframes slipIn { 0% { opacity: 0; transform: translateX(-44px) rotate(0deg) scale(0.6); } 55% { opacity: 1; } 100% { opacity: 1; } } @keyframes eyeBlink { 0%, 100% { opacity: 0; transform: scale(0.65); } 18%, 82% { opacity: 0.96; transform: scale(1); } } `; document.head.appendChild(s); } const Printer = PaperPrinter; Object.assign(window, { PaperPrinter, Printer });