[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69c10d246b448191b1b47ca14d5a20e9","versionInt","title","Training Vs Inference Visualization","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Play, Pause, RotateCcw } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\n\nconst fullSentence = [\n \"Be\",\n \"the\",\n \"change\",\n \"that\",\n \"you\",\n \"wish\",\n \"to\",\n \"see\",\n \"in\",\n \"the\",\n \"world.\"\n];\n\nconst promptTokens = [\"Be\", \"the\", \"change\", \"that\", \"you\"];\nconst generatedTokens = [\"wish\", \"to\", \"see\", \"in\", \"the\", \"world.\"];\n\nfunction Token({ text, tone = \"neutral\", pulse = false, faded = false }) {\n const tones = {\n neutral: \"bg-white border-slate-300 text-slate-900\",\n prompt: \"bg-slate-100 border-slate-300 text-slate-900\",\n active: \"bg-amber-100 border-amber-400 text-amber-900\",\n generated: \"bg-slate-900 border-slate-900 text-white\",\n future: \"bg-slate-50 border-dashed border-slate-300 text-slate-400\",\n train: \"bg-emerald-100 border-emerald-300 text-emerald-900\",\n };\n\n return (\n \n

{text}

\n \n );\n}\n\nfunction StagePill({ active, children }) {\n return (\n \n {children}\n \n );\n}\n\nfunction TrainingView() {\n const [showPredictions, setShowPredictions] = useState(false);\n const [playing, setPlaying] = useState(false);\n const [runId, setRunId] = useState(0);\n\n useEffect(() => {\n setShowPredictions(false);\n setPlaying(true);\n const revealId = setTimeout(() => setShowPredictions(true), 1200);\n const stopId = setTimeout(() => setPlaying(false), 3200);\n return () => {\n clearTimeout(revealId);\n clearTimeout(stopId);\n };\n }, [runId]);\n\n const rows = fullSentence.map((_, rowIndex) => {\n const visibleContext = fullSentence.slice(0, rowIndex);\n const target = fullSentence[rowIndex];\n const future = fullSentence.slice(rowIndex + 1);\n return { visibleContext, target, future, rowIndex };\n });\n\n return (\n

\n Single forward pass\n

→

\n All autoregressive predictions in parallel\n

\n setRunId((n) => n + 1)}\n >\n {playing ? : }\n {playing ? \"Playing\" : \"Play again\"}\n \n

\n Watch the blue words appear together.\n

\n\n

\n One training sequence creates many next-token predictions at once\n

\n\n

\n {rows.map((row) => (\n \n

\n Row {row.rowIndex + 1}\n

\n\n

\n {row.visibleContext.length === 0 ? (\n

\n start\n

\n ) : (\n row.visibleContext.map((token, i) => (\n \n ))\n )}\n\n

→

\n\n \n \n \n\n {row.future.map((_, i) => (\n \n ))}\n

\n \n ))}\n

\n\n

\n All blue predictions are computed in parallel.\n

\n Each row represents one next-token prediction, but during training they are all produced simultaneously in the same forward pass.\n

\n );\n}\n\nfunction InferenceView() {\n const [step, setStep] = useState(0);\n const [playing, setPlaying] = useState(false);\n const totalSteps = generatedTokens.length + 1;\n const inPrefill = step === 0;\n const generatedCount = Math.max(0, step - 1);\n\n useEffect(() => {\n if (!playing) return;\n if (step >= totalSteps) {\n setPlaying(false);\n return;\n }\n const id = setTimeout(() => setStep((s) => Math.min(s + 1, totalSteps)), 1200);\n return () => clearTimeout(id);\n }, [playing, step, totalSteps]);\n\n const visibleGenerated = useMemo(() => generatedTokens.slice(0, generatedCount), [generatedCount]);\n const currentToken = generatedTokens[generatedCount] ?? null;\n const futureCount = generatedTokens.length - visibleGenerated.length - (currentToken ? 1 : 0);\n\n return (\n

\n 1. Prefill\n

→

\n 2. Decode\n

\n \n {\n setPlaying(false);\n setStep(0);\n }}\n >\n Reset\n \n

\n\n

\n {inPrefill ? \"Prefill sees the whole prompt at once\" : \"Decode generates the rest one token at a time\"}\n

\n {promptTokens.map((token, i) => (\n \n ))}\n\n {visibleGenerated.map((token, i) => (\n \n ))}\n\n {currentToken ? : null}\n\n {Array.from({ length: futureCount }).map((_, i) => (\n \n ))}\n

\n\n

\n {inPrefill ? (\n <>\n

\n Prefill processes “Be the change that you” in one forward pass.\n

\n {promptTokens.map((token, i) => (\n \n ))}\n

→

\n \n

\n \n ) : (\n <>\n

\n Decode now continues sequentially.\n

\n Each new token requires another forward pass.\n

\n \n )}\n

\n );\n}\n\nexport default function TrainingVsInferenceVisualization() {\n const [mode, setMode] = useState(\"training\");\n\n return (\n

Training vs Inference

\n Same sentence, two different execution patterns.\n

\n\n

\n setMode(\"training\")}\n >\n Training\n \n setMode(\"inference\")}\n >\n Inference\n \n

\n\n {mode === \"training\" ? : }\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17615918773304889882","traceTime",1779841968620]