Transformer Visualisation — GPT 前向传播、预训练与对齐流程浏览器逐步可视化 Vibe 项目

项目简介

Transformer Visualisation 是一个把 GPT 结构的大模型在浏览器里逐步跑一遍的教学项目：屏幕上出现的每个数字，都是用一个真实但极小的 GPT-2 架构模型权重在浏览器中现场计算出来的，鼠标悬停任意单元格，就会显示产生这个数字的完整算式。它把“矩阵乘法黑箱”变成可以逐格核对的算术，适合想真正搞懂大模型内部机制的人。

核心功能

• 推理章节：完整演示生成一个词元的过程，包含分词、嵌入、两个块内的注意力与多层感知机计算、输出打分、温度调节、归一化以及贪心、top-k、top-p 三种采样方式。
• 预训练章节：演示一次训练步，从输入目标、随机初始化、每个位置的损失，到逐层反向传播、数值梯度校验与参数更新，模型在浏览器里现场训练，可以直接看到损失曲线下降。
• 后训练章节：演示一次近端策略优化迭代，按经典对齐配方训练奖励模型，采样回答、加入逐词元惩罚、估计并白化优势，最后完成多轮裁剪式策略与价值更新。
• 逐格算式回看：悬停任意数字即可看到它的运算过程与来源张量，配合方向键单步推进，便于对照推导。
• 对照实验：结尾把强化学习结果与带正则的精确最优解对比，关闭正则器时可以观察到奖励被钻空子的现象。

技术实现

为了让每一层中间结果都能完整展开，模型被刻意压缩到极小规模：两个块、宽度八、两个注意力头、三十二单元的多层感知机、十八词的词表，并在“猫坐在垫子上”这类玩具语料上训练到最优损失。前端用 Vite 构建，用类型脚本实现前向与反向传播，并配了一整套测试：用 NumPy 参考实现校验浏览器里的前向、反向与奖励模型，用有限差分校验强化学习梯度，同时断言浏览器内训练确实收敛。仓库还附带 Python 训练脚本，手写并梯度校验了反向传播，用来生成模型权重与奖励模型的比较数据；每次向主分支推送都会先跑测试再部署，测试不通过就不会上线，其他分支自动获得预览地址。奖励信号来自一位“模拟标注者”：它不喜欢车轱辘话和胡言乱语，由此训练出的奖励模型驱动整个强化学习环节，让奖励与惩罚都有可解释的来源。

快速上手

1. 确认本机安装了 Node.js 20.19 以上或 22.12 以上版本。
2. 克隆仓库后执行 npm install 安装依赖。
3. 执行 npm run dev 启动开发服务器，打开终端打印出的本地地址（通常是本机 5173 端口）。
4. 用方向键或页面底部按钮逐步推进，读完一章后按钮会自然进入下一章；想核对实现可运行 npm test，想重新训练权重可运行 npm run train（需要 Python 3 与 NumPy）。
5. 也可以直接访问线上站点 llm.manogya.dev，无需本地环境即可开始阅读。

适用人群：想搞懂大模型内部机制的学生与自学者、讲授相关课程的教师、需要向团队解释预训练与对齐流程的工程师，以及希望用可核对的算式辅助教学的内容创作者。