ninetyhe-90/training-explore

选用指南

AI 根据 README 整理 · 2026/11/5 19:47:24

使用方式

通过浏览器访问，使用播放、单步、跳转等操作浏览课程和模型内部状态。

查看 README 依据

打开终端中 Vite 输出的本地地址，通常是： ```text http://localhost:5173 ``` 生产构建与本地预览： ```bash npm run build npm run preview ``` 项目不需要数据库、API Key 或任何云端服务。 ## 操作方式 | 操作 | 用途 | | --- | --- | | Play | 从当前事件连续播放 | | Step | 前进一个计算事件 | | Reset | 回到初始状态 | | 事件表或时序条 | 直接跳转到指定事件 | | 课程章节 | 跳到该章的第一个事件 | | 速度按钮 | 在 1x、2x、4x 之间切换 | | 深入面板 | 阅读当前章节的推导、数值例、代码和实验 | | 语言与主题按钮 | 切换中英文、浅色或深色模式 | ## 实现原理 项目使用 TypeScript、Vite 和原生 SVG，不依赖前端框架。 ```text src/ ├── data/ │ ├── lessons.ts 课程元数据、学习目标与原始资料 │ ├── courseContent.ts 章节正文、公式、实验与装配校验 │ ├── advancedContent.ts 数学推导、数值例和 Python 实现

部署要求

需要 Node.js 18 或更新版本，项目不需要数据库、API Key 或云端服务。

查看 README 依据

| 系统 | 分布式训练 | DDP、FSDP、TP、PP 与 NCCL 通信 | | 系统 | 混合精度与显存 | 参数、梯度、优化器、激活、重算与 Offload | | 系统 | 推理系统与 KV 缓存 | Prefill、Decode、连续批和推测解码 | | 系统 | AI Infra 量化分析 | 容量、FLOPs、流量、Roofline、MFU 和 MBU | | 对齐 | 微调与对齐 | SFT、DPO、RLHF、GRPO 与独立评测 | | 诊断 | 训练调试与诊断 | 小批量过拟合、Loss Spike、NaN 和分层梯度 | | Agent | 最小 Agent Loop | 状态、工具调用、观察回灌和有界终止 | | Agent | Agent Harness 工程 | 工具注册、权限、上下文、Trace 和恢复 | | 评估 | 评测、可观测性与安全 | 独立评分、失败归因、对抗测试和发布回归 | 每门课程都以原始论文、官方文档或源码资料作为参考入口，而不是只给出没有出处的二手结论。 ## 快速开始 需要 Node.js 18 或更新版本。 ```bash git clone <repository-url> cd training-explore npm install npm run dev ```

打开终端中 Vite 输出的本地地址，通常是： ```text http://localhost:5173 ``` 生产构建与本地预览： ```bash npm run build npm run preview ``` 项目不需要数据库、API Key 或任何云端服务。 ## 操作方式 | 操作 | 用途 | | --- | --- | | Play | 从当前事件连续播放 | | Step | 前进一个计算事件 | | Reset | 回到初始状态 | | 事件表或时序条 | 直接跳转到指定事件 | | 课程章节 | 跳到该章的第一个事件 | | 速度按钮 | 在 1x、2x、4x 之间切换 | | 深入面板 | 阅读当前章节的推导、数值例、代码和实验 | | 语言与主题按钮 | 切换中英文、浅色或深色模式 | ## 实现原理 项目使用 TypeScript、Vite 和原生 SVG，不依赖前端框架。 ```text src/ ├── data/ │ ├── lessons.ts 课程元数据、学习目标与原始资料 │ ├── courseContent.ts 章节正文、公式、实验与装配校验 │ ├── advancedContent.ts 数学推导、数值例和 Python 实现

已知限制

教学规模数值用于理解数学与形状，不代表实际生产模型的参数量、性能或输出质量；事件表中的时间用于展示教学顺序，不是实际模型延迟。

查看 README 依据

| Final Norm 与输出 | 词表 Logits、下一 Token 概率、CE | Logits 与概率是否区分，CE 是否等于 `-log p_target` | 这些数字都是真实的前向计算结果，但为了可读性采用了教学规模。它们用于理解数学与形状，不代表实际生产模型的参数量、性能或输出质量。 <div align="center"> <img src="docs/dark-mode.png" alt="Training Explorer 深色模式：下一 Token 概率与交叉熵" width="100%" /> </div> ## 课程内容 目前包含 14 门可交互课程，覆盖从模型前向到训练系统、推理服务和 Agent 工程的学习路径。 | 阶段 | 课程 | 核心问题 | | --- | --- | --- | | 总览 | 训练主循环 | 数据、前向、损失、反向和参数更新怎样组成一次迭代 | | 基础 | 分词与嵌入 | 文本怎样变成 Token ID 和连续向量 | | 基础 | Transformer 完整前向过程 | 从 Token 到 Logits 的逐算子数值计算 | | 训练 | 反向传播与梯度 | 链式法则、计算图、数值梯度和异常定位 | | 训练 | 优化器与学习率 | SGD、AdamW、Warmup、衰减和超参实验 |

因此，连续播放、后退、跳转、语言切换和重新渲染不会依赖上一帧残留的 DOM 状态。 ## 教学内容边界 为了避免“看起来专业但经不起核对”，项目明确区分三类信息： 1. **真实计算**：由当前示例输入经过矩阵运算得到的数值。 2. **教学假设**：缩小后的维度、固定权重、简化词表和示意流程。 3. **性能测量**：必须由真实硬件和 Profiler 获得，不能从示意动画推导。 事件表中的时间用于展示教学顺序，不是实际模型延迟。项目中的规模公式和 Roofline 分析用于建立估算方法，最终结果仍需在目标设备上测量。 ## 开发验证 ```bash npm run build ``` 该命令依次执行 TypeScript 类型检查和 Vite 生产构建。 当前浏览器验收覆盖： - 14 门课程的全部播放事件 - Transformer 12 帧的数值显示与 SVG 边界 - 播放、后退、跳转和重置的一致性 - 注意力概率行和与因果 Mask - 中文、英文、浅色、深色和移动端布局 Python/PyTorch 示例用于配套学习，后续会继续补充逐示例自动执行和结果快照，避免只验证页面而遗漏教学代码。 ## 后续计划 - 将更多课程从静态场景升级为可核对的数值状态动画。 - 增加反向传播中每条梯度路径的逐算子演示。