# 浏览器中构建交互式 Agent 驱动的 MicroGPT 内部解释器 > 通过浏览器事件循环实现 tokenizer、训练循环、KV 缓存和推理的逐步交互可视化，结合简单 JS agent 提供引导式教学。 ## 元数据 - 路径: /posts/2026/03/02/build-interactive-agent-driven-microgpt-explainer-browser/ - 发布时间: 2026-03-02T08:16:42+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 站点: https://blog.hotdry.top ## 正文 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 骨架： ```javascript 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(t*scale, h*scale, 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） ## 同分类近期文章 ### [NVIDIA PersonaPlex 双重条件提示工程与全双工架构解析](/posts/2026/04/09/nvidia-personaplex-dual-conditioning-architecture/) - 日期: 2026-04-09T03:04:25+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 摘要: 深入解析 NVIDIA PersonaPlex 的双流架构设计、文本提示与语音提示的双重条件机制，以及如何在单模型中实现实时全双工对话与角色切换。 ### [ai-hedge-fund：多代理AI对冲基金的架构设计与信号聚合机制](/posts/2026/04/09/multi-agent-ai-hedge-fund-architecture/) - 日期: 2026-04-09T01:49:57+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 摘要: 深入解析GitHub Trending项目ai-hedge-fund的多代理架构，探讨19个专业角色分工、信号生成管线与风控自动化的工程实现。 ### [tui-use 框架：让 AI Agent 自动化控制终端交互程序](/posts/2026/04/09/tui-use-ai-agent-terminal-automation/) - 日期: 2026-04-09T01:26:00+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 摘要: 详解 tui-use 框架如何通过 PTY 与 xterm headless 实现 AI agents 对 REPL、数据库 CLI、交互式安装向导等终端程序的自动化控制与集成参数。 ### [tui-use 框架：让 AI Agent 自动化控制终端交互程序](/posts/2026/04/09/tui-use-ai-agent-terminal-automation-framework/) - 日期: 2026-04-09T01:26:00+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 摘要: 详解 tui-use 框架如何通过 PTY 与 xterm headless 实现 AI agents 对 REPL、数据库 CLI、交互式安装向导等终端程序的自动化控制与集成参数。 ### [LiteRT-LM C++ 推理运行时：边缘设备的量化、算子融合与内存管理实践](/posts/2026/04/08/litert-lm-cpp-inference-runtime-quantization-fusion-memory/) - 日期: 2026-04-08T21:52:31+08:00 - 分类: [ai-systems](/categories/ai-systems/) - 摘要: 深入解析 LiteRT-LM 在边缘设备上的 C++ 推理运行时，聚焦量化策略配置、算子融合模式与内存管理的工程化实践参数。