https://labuladong.online/_next/static/chunks/28403.9f3ef4b75296aa51.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[28403],{28403:(e,t,s)=>{s.r(t),s.d(t,{default:()=>f});var a=s(95155),n=s(12115);let r=[{id:"template",holdMs:2400},{id:"tokenize",holdMs:2400},{id:"network",holdMs:2800},{id:"sample",holdMs:3600}],l=r.length-1,i="transition-[background-color,border-color,color,box-shadow,opacity,transform,width] duration-500 ease-out motion-reduce:transition-none",d=[{bar:"bg-cyan-500 shadow-[0_0_6px_rgba(6,182,212,0.45)]",text:"text-cyan-700 dark:text-cyan-200"},{bar:"bg-blue-500",text:"text-blue-700 dark:text-blue-200"},{bar:"bg-violet-500",text:"text-violet-700 dark:text-violet-200"},{bar:"bg-amber-500",text:"text-amber-700 dark:text-amber-200"}],o={zh:{accessibleLabel:"LLM 推理动画：先把 messages 按对话模板组装成文本，再由 tokenizer 切成 token 和编号。编号查 embedding 表后通过 28 层 Transformer 神经网络，得到整个词表的 logits。softmax 把分数转换成概率并抽出下一个 token“真”，拼回“今天天气”继续下一轮预测。",content:"今天天气",embedding:"Embedding",logits:"151,936\nlogits",output:"今天天气真",probabilities:[{token:"真",probability:30},{token:"不",probability:20},{token:"很",probability:12},{token:"好",probability:8}],stepLabels:{template:"组装模板",tokenize:"token 分词",network:"神经网络",sample:"概率选词"},tokens:[{text:"<|im_start|>",kind:"special"},{text:"user",kind:"role"},{text:"今天",id:"100644",kind:"content"},{text:"天气",id:"104307",kind:"content"},{text:"<|im_end|>",kind:"special"},{text:"<|im_start|>",kind:"special"},{text:"assistant",kind:"role"}],transformer:"Transformer \xd7 28"},en:{accessibleLabel:"LLM inference animation: messages are first assembled with the chat template, then split into tokens and IDs. The IDs are looked up in the embedding table and passed through 28 Transformer layers to produce logits for the full vocabulary. Softmax converts the scores to probabilities, samples the next token “is,” and appends it to “The weather” for the next prediction.",content:"The weather",embedding:"Embedding",logits:"151,936\nlogits",output:"The weather is",probabilities:[{token:"is",probability:30},{token:"feels",probability:20},{token:"will",probability:12},{token:"looks",probability:8}],stepLabels:{template:"Build prompt",tokenize:"Tokenize",network:"Neural net",sample:"Sample token"},tokens:[{text:"<|im_start|>",kind:"special"},{text:"user",kind:"role"},{text:"The",id:"785",kind:"content"},{text:"Ġweather",id:"9104",kind:"content"},{text:"<|im_end|>",kind:"special"},{text:"<|im_start|>",kind:"special"},{text:"assistant",kind:"role"}],transformer:"Transformer \xd7 28"}};function c(e){let{copy:t,phaseIndex:s}=e;return(0,a.jsxs)("div",{className:"relative grid grid-cols-4 gap-1 px-1","data-testid":"phase-track",children:[(0,a.jsx)("span",{className:"absolute z-0 h-px bg-border/65","data-testid":"phase-track-connector",style:{left:"12.5%",right:"12.5%",top:9}}),(0,a.jsx)("span",{className:`${i} absolute z-0 h-px bg-blue-500/75`,style:{left:"12.5%",top:9,width:`${25*s}%`}}),r.map((e,n)=>{let r=n<s?"complete":n===s?"current":"pending";return(0,a.jsxs)("div",{className:"relative flex min-w-0 flex-col items-center gap-1.5","data-step-state":r,"data-testid":`phase-step-${e.id}`,children:[(0,a.jsx)("span",{className:"relative z-10 flex size-5 items-center justify-center rounded-full bg-background","data-testid":`phase-step-circle-${e.id}`,children:(0,a.jsx)("span",{className:`${i} flex size-5 items-center justify-center rounded-full border font-mono text-[8px] font-semibold ${"current"===r?"scale-110 border-blue-500 bg-blue-500 text-white shadow-[0_0_0_3px_rgba(59,130,246,0.12)]":"complete"===r?"border-blue-500/65 bg-blue-500/15 text-blue-700 dark:text-blue-200":"border-border/70 bg-background text-muted-foreground/50"}`,children:n+1})}),(0,a.jsx)("span",{className:`${i} w-full text-center text-[9px] font-medium leading-3 sm:text-[10px] ${"current"===r?"text-foreground":"text-muted-foreground/55"}`,children:t.stepLabels[e.id]})]},e.id)})]})}function x(){return(0,a.jsxs)("span",{className:"flex shrink-0 animate-pulse items-center text-blue-500/80 motion-reduce:animate-none","aria-hidden":!0,

1children:[(0,a.jsx)("span",{className:"h-px bg-blue-500/45",style:{width:"clamp(0.5rem, 1vw, 0.75rem)"}}),(0,a.jsx)("span",{className:"-ml-0.5 text-sm",children:"›"})]})}function m(e){let{copy:t}=e;return(0,a.jsxs)("div",{className:"flex h-full min-w-0 items-center gap-1.5 sm:gap-2.5",children:[(0,a.jsx)("div",{className:"w-2/5 min-w-0 rounded-lg border border-blue-400/35 bg-blue-500/[0.05] p-2 shadow-[inset_2px_0_0_rgba(59,130,246,0.55)]",children:(0,a.jsxs)("div",{className:"rounded-md bg-blue-500/[0.08] px-2 py-1.5 text-[9px] leading-4 text-foreground/85 sm:text-[10px]",children:[(0,a.jsx)("span",{className:"font-mono text-blue-700 dark:text-blue-200",children:"user"}),(0,a.jsx)("div",{className:"truncate",children:t.content})]})}),(0,a.jsx)(x,{}),(0,a.jsx)("div",{className:"min-w-0 flex-1 rounded-lg border border-violet-400/40 bg-violet-500/[0.05] p-2 shadow-[inset_2px_0_0_rgba(139,92,246,0.55)]",children:(0,a.jsxs)("div",{className:"overflow-hidden font-mono text-[7px] leading-3.5 text-foreground/80 sm:text-[9px] sm:leading-4",children:[(0,a.jsxs)("div",{className:"truncate text-violet-700 dark:text-violet-200",children:["<|im_start|>",(0,a.jsx)("span",{className:"text-blue-700 dark:text-blue-200",children:"user"})]}),(0,a.jsxs)("div",{className:"truncate",children:[t.content,(0,a.jsx)("span",{className:"text-violet-700 dark:text-violet-200",children:"<|im_end|>"})]}),(0,a.jsxs)("div",{className:"truncate text-violet-700 dark:text-violet-200",children:["<|im_start|>",(0,a.jsx)("span",{className:"text-blue-700 dark:text-blue-200",children:"assistant"})]})]})})]})}function p(e){let{copy:t}=e;return(0,a.jsxs)("div",{className:"flex h-full flex-col items-center justify-center",children:[(0,a.jsx)("div",{className:"flex max-w-full flex-wrap justify-center gap-1 sm:gap-1.5","data-testid":"token-list",children:t.tokens.map((e,t)=>(0,a.jsx)("span",{className:`${i} rounded-md border px-1.5 py-1 font-mono text-[7px] sm:px-2 sm:text-[9px] ${"special"===e.kind?"border-violet-400/40 bg-violet-500/[0.07] text-violet-700 dark:text-violet-200":"role"===e.kind?"border-blue-400/40 bg-blue-500/[0.07] text-blue-700 dark:text-blue-200":"scale-[1.03] border-cyan-400/55 bg-cyan-500/10 text-cyan-700 shadow-[0_0_0_2px_rgba(6,182,212,0.07)] dark:text-cyan-200"}`,"data-token-kind":e.kind,children:e.text},`${e.text}-${t}`))}),(0,a.jsxs)("div",{className:"my-3 flex h-5 items-center gap-2 text-blue-500/70","aria-hidden":!0,children:[(0,a.jsx)("span",{className:"h-3 w-px bg-blue-500/40"}),(0,a.jsx)("span",{className:"size-1.5 animate-pulse rounded-full bg-blue-500 motion-reduce:animate-none"}),(0,a.jsx)("span",{className:"h-3 w-px bg-blue-500/40"})]}),(0,a.jsx)("div",{className:"flex flex-wrap justify-center gap-2",children:t.tokens.filter(e=>e.id).map(e=>(0,a.jsxs)("div",{className:"flex items-center gap-1 font-mono text-[9px] sm:text-[10px]",children:[(0,a.jsx)("span",{className:"text-foreground/70",children:e.text}),(0,a.jsx)("span",{className:"text-muted-foreground/55",children:"→"}),(0,a.jsx)("span",{className:"rounded bg-cyan-500/10 px-1.5 py-0.5 text-cyan-700 dark:text-cyan-200",children:e.id})]},e.text))})]})}function b(){return(0,a.jsx)("div",{className:"grid grid-cols-5 gap-0.5 sm:gap-1","aria-hidden":!0,children:Array.from({length:20},(e,t)=>(0,a.jsx)("span",{className:`${7===t||13===t?"bg-cyan-500/70":"bg-blue-500/15"} rounded-sm`,style:{height:"clamp(0.375rem, 0.8vw, 0.625rem)",width:"clamp(0.375rem, 0.8vw, 0.625rem)"}},t))})}

1function u(e){let{copy:t}=e;return(0,a.jsxs)("div",{className:"flex h-full min-w-0 items-center justify-center gap-1 sm:gap-2",children:[(0,a.jsx)("div",{className:"flex shrink-0 items-center",children:(0,a.jsx)("div",{className:"flex gap-1",children:t.tokens.filter(e=>e.id).map(e=>(0,a.jsx)("span",{className:"rounded bg-cyan-500/10 px-1 py-0.5 font-mono text-[8px] text-cyan-700 dark:text-cyan-200 sm:px-2 sm:text-[10px]",children:e.id},e.id))})}),(0,a.jsx)(x,{}),(0,a.jsxs)("div",{className:"flex shrink-0 flex-col items-center gap-1.5 rounded-md border border-blue-400/35 bg-blue-500/[0.04] sm:gap-2",style:{padding:"clamp(0.5rem, 1vw, 0.75rem)"},children:[(0,a.jsx)(b,{}),(0,a.jsx)("span",{className:"whitespace-pre-line text-center font-mono text-[7px] leading-3 text-blue-700 dark:text-blue-200 sm:text-[10px]",children:t.embedding})]}),(0,a.jsx)(x,{}),(0,a.jsxs)("div",{className:"relative flex shrink-0 items-center justify-center",style:{height:"clamp(5rem, 8.125vw, 6.5rem)",width:"clamp(4rem, 8.125vw, 6.5rem)"},children:[[2,1,0].map(e=>(0,a.jsx)("span",{className:"absolute rounded-md border border-violet-400/35 bg-background/90",style:{height:"clamp(3.5rem, 6.25vw, 5rem)",transform:`translate(${5*e}px, ${-(5*e)}px)`,width:"clamp(3.5rem, 6.25vw, 5rem)"}},e)),(0,a.jsxs)("div",{className:"relative z-10 flex flex-col items-center justify-center rounded-md bg-violet-500/[0.08] text-center shadow-[0_0_0_2px_rgba(139,92,246,0.06)]",style:{height:"clamp(3.5rem, 6.25vw, 5rem)",width:"clamp(3.5rem, 6.25vw, 5rem)"},children:[(0,a.jsx)("span",{className:"size-2 animate-pulse rounded-full bg-violet-500 shadow-[0_0_8px_rgba(139,92,246,0.65)] motion-reduce:animate-none sm:size-3"}),(0,a.jsx)("span",{className:"mt-1.5 font-mono text-[7px] leading-3 text-violet-700 dark:text-violet-200 sm:mt-2.5 sm:text-[10px] sm:leading-4",children:t.transformer})]})]}),(0,a.jsx)(x,{}),(0,a.jsx)("div",{className:"flex shrink-0 flex-col items-center gap-1.5",children:(0,a.jsx)("div",{className:"flex items-center justify-center rounded-md border border-amber-400/40 bg-amber-500/[0.07] font-mono text-[7px] leading-3 text-amber-700 dark:text-amber-200 sm:text-[10px] sm:leading-4",style:{height:"clamp(2.75rem, 5vw, 4rem)",width:"clamp(2.5rem, 5vw, 4rem)"},children:(0,a.jsx)("span",{className:"whitespace-pre-line text-center",children:t.logits})})})]})}function h(e){let{copy:t}=e,s=Math.max(...t.probabilities.map(e=>e.probability));return(0,a.jsxs)("div",{className:"flex h-full flex-col justify-center",children:[(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-2 sm:gap-3",children:[(0,a.jsx)("div",{className:"min-w-0 flex-1 space-y-1.5",children:t.probabilities.map((e,t)=>{let n=0===t,r=d[t];return(0,a.jsxs)("div",{className:"flex min-w-0 items-center gap-1.5","data-

1probability":e.probability,"data-selected":n?"true":"false","data-testid":"probability-row",children:[(0,a.jsx)("span",{className:`w-12 shrink-0 truncate text-right font-mono text-[9px] sm:text-[10px] ${r.text} ${n?"font-semibold":""}`,children:e.token}),(0,a.jsx)("span",{className:"h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-muted/70",children:(0,a.jsx)("span",{className:`${i} block h-full rounded-full ${r.bar}`,"data-testid":"probability-bar",style:{width:`${e.probability/s*100}%`}})}),(0,a.jsxs)("span",{className:`w-8 shrink-0 font-mono text-[8px] sm:text-[9px] ${r.text}`,children:[e.probability,"%"]})]},e.token)})}),(0,a.jsx)(x,{}),(0,a.jsx)("div",{className:"flex w-20 shrink-0 flex-col items-center gap-1.5 sm:w-24","data-testid":"selected-token",children:(0,a.jsxs)("span",{className:"relative flex size-11 items-center justify-center rounded-lg border border-cyan-400/65 bg-cyan-500/12 font-mono text-sm font-semibold text-cyan-700 shadow-[0_0_0_3px_rgba(6,182,212,0.08)] dark:text-cyan-100",children:[(0,a.jsx)("span",{className:"absolute inset-1 animate-ping rounded-md border border-cyan-400/20 motion-reduce:hidden"}),(0,a.jsx)("span",{className:"relative",children:t.probabilities[0].token})]})})]}),(0,a.jsxs)("div",{"aria-label":t.output,className:"mt-3 flex h-8 items-center justify-center gap-1.5 font-mono text-[10px] text-foreground/75 sm:text-[11px]","data-testid":"completed-text",children:[(0,a.jsx)("span",{children:t.content}),(0,a.jsx)("span",{className:"rounded bg-cyan-500/12 px-1.5 py-0.5 font-semibold text-cyan-700 dark:text-cyan-200",children:t.probabilities[0].token}),(0,a.jsx)("span",{className:"ml-1 text-muted-foreground/45",children:"↻"})]})]})}function f(e){let{active:t,locale:s}=e,[i,d]=(0,n.useState)(0),x=r[i],b=o[s];return(0,n.useEffect)(()=>{let e;if(!t)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return void d(l);let s=0;d(0);let a=()=>{e=setTimeout(()=>{d(s=s===l?0:s+1),a()},r[s].holdMs)};return a(),()=>clearTimeout(e)},[t]),(0,a.jsxs)("div",{"aria-label":b.accessibleLabel,className:"border-t border-border/40 pt-3.5","data-active":t?"true":"false","data-phase":x.id,role:"img",children:[(0,a.jsx)(c,{copy:b,phaseIndex:i}),(0,a.jsxs)("div",{className:"mt-2.5 h-52 min-w-0 overflow-hidden px-1 sm:px-2",children:["template"===x.id?(0,a.jsx)(m,{copy:b}):null,"tokenize"===x.id?(0,a.jsx)(p,{copy:b}):null,"network"===x.id?(0,a.jsx)(u,{copy:b}):null,"sample"===x.id?(0,a.jsx)(h,{copy:b}):null]})]})}}}]);