在大型语言模型时代，理解 GPT 核心机制的最佳方式之一是构建互动浏览器 demo。这种 demo 能让用户直观步进 tokenization、训练循环和推理过程，同时通过滑块编辑参数，实现低门槛实验。不同于静态代码或视频，本文聚焦工程化浏览器模拟器，强调可视化步进（step-through）和参数可编辑性，提供可直接落地的参数清单和监控要点。
为什么选择浏览器互动模拟器？
浏览器 demo 的优势在于零安装、即时反馈和跨平台。Karpathy 的 microGPT 以 200 行纯 Python 实现完整 GPT（包括 char-level tokenizer、autograd、transformer block、Adam 优化），天然适合移植到 JS，实现实时可视化。实际项目如 growingswe.com 的互动解释器和 microgpt-visual-explorer.vercel.app 已证明：用户通过点击观察 attention weights 或拖拽 logits 变化，能快速把握 softmax 如何将 scores 转为概率分布。
工程观点：模拟器不是简单移植 Python，而是用 Canvas/SVG 渲染计算图、注意力热图，用 React/Vue 管理状态（KV cache、grads），用 Web Workers 隔离计算避免 UI 卡顿。目标是单一技术栈（Vanilla JS + HTML Canvas），模型规模控制在 n_params < 10k，避免浏览器崩溃。
核心组件：Tokenization 可视化
观点：Tokenizer 是 GPT 入口，互动 demo 必须可视化 char-to-id 映射和 BOS 包装过程，让用户输入自定义文本观察序列构建。
证据与实现：
- 用
Map构建 vocab（26 letters + BOS=27），输入 "emma" → [26,4,12,12,0,26]。 - Canvas 渲染：左侧文本输入框，右侧 token id 条形图（颜色编码 letters），下方滑动窗口展示 context/target pairs。
- Editable params：vocab_size slider (27-100)，观察序列长度变化。
落地清单：
- 初始化：
uchars = 'abcdefghijklmnopqrstuvwxyz'.split(''); BOS=26; - Tokenize fn：
tokens = [BOS, ...text.split('').map(c=>uchars.indexOf(c)), BOS]; - Viz：每 token 宽 40px 高 20px 矩形，hover 显示 char/id。
- 阈值：max_len=16（block_size），超长截断。
风险：自定义 vocab 引入 OOV，fallback 到 unk_token=27。
训练循环步进可视化
观点：训练是黑箱，demo 通过单步 / 多步控制，实时 plot loss curve 和 param updates，揭示 Adam 如何适应 grads。
证据与实现：
- 移植 micrograd Value 类到 JS 类（data, grad, children, local_grads），支持 add/mul/exp/relu/log 等运算。
- Forward：逐 token 调用 gpt (token_id, pos, keys=[], values=[])，累积 losses = [-Math.log (probs [target]) for each pos]，avg_loss。
- Backward：topo sort + chain rule 累积 grads。
- Update：Adam buffers m/v，lr_decay = 0.01 * (1 - step/1000)，p.data -= lr * m_hat / sqrt(v_hat)。
- Viz：左侧 step slider (0-1000)，中间 computation graph（节点连线，grad 箭头），右侧 loss 图（d3.js 或 Canvas line chart），下方 param heatmap（随机初始化后观察收敛）。
落地参数：
| 参数 | 值 | 作用 |
|---|---|---|
| n_embd | 16 | 嵌入维，平衡计算 / 表达 |
| n_head | 4 | head_dim=4，避免过拟合 |
| n_layer | 1 | 单层起步，易 debug |
| lr_init | 0.01 | 线性衰减到 0 |
| beta1/2 | 0.9/0.99 | Adam 动量 |
| steps | 1000 | ~1min 浏览器训练 |
| dataset | names.txt (32k lines) | 预载或 fetch |
监控点：loss < 2.5 收敛；每 100 steps sample names 检查质量（e.g. "kamon" 式）。
优化：用 Float32Array 加速矩阵乘（linear (x,w) → matmul），Web Worker 跑 loop。
推理过程与参数编辑
观点：Inference 是 demo 高潮，用户编辑 temp/topk 观察生成多样性，KV cache 可视化揭示自回归。
证据与实现：
- Start [BOS]，loop: logits = gpt(token, pos, keys, values); probs = softmax(logits/temp); sample next (weighted random)。
- Stop at BOS or max_len。
- Editable：temp slider (0.1-2.0)，topk=5（仅前 5 probs 采样）。
- Viz：生成过程动画（token 逐一出现），attention matrix heatmap（colormap 0-1 weights，causal mask 灰色），prob dist bar chart。
落地清单：
- Temp=0.8：平衡 coherent/diverse。
- Topk=3-10：防低 prob 怪词。
- Max gen len=20。
- Batch sample 20 names，统计重复率 < 20%。
风险：高 temp 产 gibberish，低 temp 重复；限 top-p=0.9 核采样。
工程挑战与回滚策略
浏览器 JS 单线程，10k params * 1000 steps ~ 秒级，但 viz 渲染 lag。解法：
- Throttle step (requestAnimationFrame)。
- Small model 先，scale up 用 localStorage persist params。
- 精度：JS float64 vs Python，diff <1e-5 通过 unit test Value ops。
- 回滚：loss 上升 > 5% pause，重置 lr*0.5。
部署：Vercel/Netlify，<1MB bundle。测试：Chrome/Firefox，mobile 降 n_embd=8。
最终，类似 codeease.online 的 playground 已验证全浏览器训练可行。通过这些参数，用户可在 5min 内从随机 loss~3.3 到生成 "karai"。
资料来源：
- Karpathy microGPT: https://karpathy.github.io/2026/02/12/microgpt/
- growingswe 互动解释: https://growingswe.com/blog/microgpt
- Visual Explorer: https://microgpt-visual-explorer.vercel.app
（正文字数：1256）