Hotdry.
归档
ai-systems

浏览器中构建交互式 Agent 驱动的 MicroGPT 内部解释器

通过浏览器事件循环实现 tokenizer、训练循环、KV 缓存和推理的逐步交互可视化，结合简单 JS agent 提供引导式教学。

MicroGPT 是 Andrej Karpathy 发布的单文件纯 Python GPT 实现，仅 244 行代码，涵盖 tokenizer、autograd、Transformer 架构、Adam 优化和训练 / 推理循环。该实现使用字符级 tokenizer（26 个小写字母 + BOS 标记，vocab_size=27），模型规模 n_embd=16、n_head=4、n_layer=1、block_size=16，总参数约 4192 个，在 names 数据集上训练生成合理名字。[1]

构建浏览器中交互式解释器，能直观展示其内部机制：输入名字 → 分词 → 嵌入 → 逐 token 前向（构建 KV 缓存）→ 损失计算 → 反向传播 → 参数更新。核心观点：使用浏览器事件循环（dispatch loops）实现步进执行，结合简单 JS agent（状态机）驱动用户路径，避免黑箱，提供参数化监控和调试清单，提升教育价值。

设计架构：浏览器 dispatch 循环与 Agent 驱动

浏览器环境天然适合交互可视化，利用 requestAnimationFrame 或 setTimeout 实现 dispatch 循环，模拟 MicroGPT 的逐 token 处理。主循环 dispatch 事件：'tokenize'、'forward_step'、'backward'、'optimize'、'sample'。Agent 是一个有限状态机，根据当前步骤（step: 0~N）推送叙述文本和下一步提示，如 “点击‘Forward’观察 KV 缓存增长”。

证据：现有可视化如 microGPT_Visualizer 使用 Canvas 绘制 tokenizer 映射、嵌入热图、注意力矩阵，精确复现 Python 数值。[2] Karpathy 博客强调 KV 缓存在训练 / 推理中显式存在：keys/li.append (k)，attention 使用所有过去位置 dot (q, past_k)/sqrt (d_head)。[1]

落地参数：

  • 模型规模：n_embd=16, n_head=4, head_dim=4, n_layer=1（浏览器 Float32Array 内存 <1MB）。
  • 循环阈值：每 50 步 yield（setTimeout (0)），FPS=60，训练 1000 步～10s。
  • 可视化尺寸：Canvas 800x600，注意力热图 16x16 格（block_size=16）。
  • Agent 状态：{current: 'tokenize', history: [], narrative: '...'}

JS 骨架：

const state = { params: initParams(), kvCache: [], lossHistory: [], agentStep: 0 };
const dispatch = async (action) => {
  switch (action.type) {
    case 'TOKENIZE': state.tokens = tokenize(state.input); render(); break;
    case 'FORWARD_STEP':
      const {logits, newCache} = gpt(state.tokens[state.pos], state.pos, state.kvCache[state.layer]);
      state.kvCache[state.layer] = newCache; state.pos++; render(); break;
    // backward, adam 等
  }
  if (state.agentStep < agentNarratives.length) {
    showAgentMsg(agentNarratives[state.agentStep++]);
  }
  requestAnimationFrame(() => dispatch({type: 'TICK'}));
};

Tokenizer 步进可视化

Tokenizer：uchars = sorted (set (''.join (docs)))，tokens = [BOS, ...uchars.index (ch)..., BOS]。交互：输入框 “emma” → 显示 char-ID 映射（SVG 表格），高亮 BOS=26。

证据：训练中 n = min (block_size, len (tokens)-1)，逐 pos forward，loss_t = -probs [target_id].log ()。[1]

清单：

  • 参数：vocab_size=27, BOS=26。
  • 监控：tokens.length <=16，回滚长序列。
  • UI：进度条 pos/n，ID 颜色编码（vowel 蓝，consonant 红）。
  • Agent 引导：“观察 BOS 如何标记序列边界，点击 Forward 进入嵌入。”

KV 缓存与 Attention 动态展示

核心：每个 layer，keys/values = [[] for _ in range (n_layer)]，forward 时 append k/v，attention: attn_logits = [dot (q_h [j], k_h [t][j])/sqrt (4) for t]，softmax → weighted v。

浏览器实现：Float32Array [16][4] 存储（layer, head_dim），热图更新：ctx.fillRect (tscale, hscale, attn_weights[t]*scale)。

证据：microGPT 训练中 KV 缓存参与梯度（live graph），推理复用。[1][2]

参数 / 清单：

  • 缓存形状：keys[layer] = Array(n_pos).fill().map(()=>Float32Array(16))。
  • 缩放：scale=1/sqrt (head_dim)=0.5，避免 NaN。
  • 监控：cache_len > block_size → 截断（生产用 sliding window）。
  • 回滚：loss >5 → 重置缓存，重训 10 步。
  • Agent：“KV 缓存增长中，注意 causal mask（仅过去位置），热图红色表示强关注。”

训练循环：Autograd + Adam 参数化

Autograd：Value 类构建 DAG，backward 拓扑逆序 chain rule。浏览器模拟：数组 grads，manual backward（教育用）或简化 tape。

Adam：lr_t=0.01*(1-step/1000), m=β1 m + (1-β1) grad, v=β2 v + (1-β2) grad²，hat 修正，p -= lr_t m_hat /sqrt (v_hat + 1e-8)。

证据：1000 步 loss 3.3→2.37。[1]

清单：

  • 超参：lr=0.01 decay linear, β1=0.85, β2=0.99（非标准 0.9/0.999）。
  • 批量：1 doc/step，n_pos<=16。
  • 监控：EMA loss，grad_norm<1e3（clip），NaN→lr*=0.5。
  • UI：损失曲线 SVG path (lossHistory)，参数热图（wte [0:5]）。
  • Agent：“点击 Backward 观察链式法则，Adam 更新后生成名字测试。”

推理：采样与温度控制

start BOS，loop: logits=gpt(...), probs=softmax(logits/temp), sample categorical，append if !=BOS。

参数：temp=0.5（保守），max_len=16。

清单：

  • 采样：weighted random.choices(range(27), probs)。
  • 监控：EOS prob>0.9→早停。
  • UI：实时生成字符串，top-5 logits 条形图。
  • Agent：“低 temp 保守，高 temp 创意，观察 KV 复用加速。”

部署与扩展

HTML+Canvas 单页，<100KB。扩展：WebGPU 加速矩阵乘，localStorage 保存 params，多数据集下拉。

风险：浏览器 JS 慢（1000 步～秒级），限小模型；fallback Canvas2D。

资料来源： [1] Karpathy microGPT gist/blog: https://gist.github.com/karpathy/8627fe009c40f57531cb18360106ce95, http://karpathy.github.io/2026/02/12/microgpt/ [2] microGPT_Visualizer: https://github.com/Sjs2332/microGPT_Visualizer

（字数：1256）

查看归档