LLMPath · 炼模之路 设计方案
一个面向零基础学习者的交互式大语言模型(LLM)学习平台。核心理念:把复杂的 LLM 全流程, 变成像 LeetCode 一样可闯关、可仿真、可判题的游戏化学习体验。
Slogan:像刷题一样炼丹
风格:HuggingFace 极简卡片
形态:Web 应用
🎯 一、产品定位
市面上的 LLM 教程要么停留在「看视频/读文章」的被动理解,要么直接抛出一堆需要昂贵 GPU 和工程能力的代码, 初学者常常卡在「懂了原理却从没亲手跑通一次训练」的鸿沟里。LLMPath 用「闯关 + 仿真」填补这道鸿沟。
💡 解决的核心痛点
- 概念抽象、看不见摸不着
- 没有 GPU、跑不起真实训练
- 知识零散、缺乏完整路线
- 学完就忘、缺少正反馈
🎁 提供的价值
- 浏览器内可视化仿真训练
- 完整 8 阶段学习地图
- 即时判题与优化建议
- 游戏化激励持续坚持
🧭 设计原则
- 动手优先,做中学
- 小步快跑,一关一目标
- 可视化黑箱,降低心智负担
- 即时反馈,正向激励
👥 二、目标用户
| 用户画像 | 特征 | 核心诉求 |
|---|---|---|
| 转行/入门开发者 | 会一点 Python,没接触过深度学习 | 系统性入门,能动手跑通流程 |
| 在校学生 | 有理论基础,缺实战与算力 | 低成本实践,准备面试/项目 |
| AI 爱好者 | 好奇大模型原理,碎片化学习 | 趣味化理解,快速看到成果 |
| 产品/运营人员 | 非技术,需要理解 LLM 能力边界 | 无需代码,直观理解概念 |
🧩 三、核心功能模块
系统由六大模块构成,围绕「学 → 练 → 判 → 通」闭环协作。
LLMPath 学习闭环
▼
① 课程学习模块
② 训练仿真模块
③ 挑战判题模块
④ 可视化实验模块
⑤ 激励成长模块
⑥ 社区分享模块
| 模块 | 关键功能 | 对应页面 |
|---|---|---|
| ① 课程学习 | 阶段地图、图文/动画讲解、知识点卡片、代码示例 | 学习路径页 |
| ② 训练仿真 | 超参调节、loss/acc 曲线、训练日志、模型规模对比 | 训练场页 |
| ③ 挑战判题 | 题目描述、代码/配置编辑器、自动判题、结果反馈 | 挑战详情页 |
| ④ 可视化实验 | Attention 热力图、Token 概率、Embedding 空间、分词演示 | 挑战页内嵌 |
| ⑤ 激励成长 | XP、等级、连续打卡、徽章、排行榜、技能雷达 | 个人进度页 |
| ⑥ 社区分享 | 题解讨论、模型 Space 分享、学习笔记 | 挑战页讨论区 |
🗺️ 四、学习路径设计(8 阶段 / 48 关)
路径即课程大纲,每阶段含若干关卡,关卡有明确的可验证目标。难度分为 Easy Medium Hard。
| 阶段 | 主题 | 关卡示例 | 动手产出 | 难度 |
|---|---|---|---|---|
| 01 | 数据准备 | 清洗一批脏文本、去重、过滤低质样本 | 一份干净的训练语料 | Easy |
| 02 | 分词 Tokenizer | 实现 BPE、观察 token 切分、构建词表 | 可视化分词器 | Easy |
| 03 | 模型结构 | 搭建 Embedding、手写 Self-Attention、堆叠 Transformer Block | 可交互结构图 | Medium |
| 04 | 预训练 | 调超参让 loss 稳定下降、理解 next-token 目标 | 一个预训练小模型 | Medium |
| 05 | 微调 SFT | 用指令数据微调、体验 LoRA 高效微调 | 会遵循指令的模型 | Medium |
| 06 | 对齐 RLHF | 训练奖励模型、用 DPO 对齐人类偏好 | 安全有用的模型 | Hard |
| 07 | 评估 | 跑 Benchmark、设计评测集、解读指标 | 一份评估报告 | Hard |
| 08 | 部署 | 量化压缩、导出推理 Demo、上线 Space | 可分享的在线 Demo | Hard |
🧪 五、训练模拟器设计(核心亮点)
模拟器是整个平台的灵魂:它用轻量级的数学近似在浏览器中还原真实训练的关键现象, 让初学者在零成本下直观感受「超参数如何影响训练」。
🎛️ 可调参数
- 学习率 Learning Rate(观察震荡/发散/收敛过慢)
- 批大小 Batch Size(观察梯度噪声)
- 训练轮数 Epochs(观察过拟合风险)
- 模型规模 Model Size(tiny → large)
- 数据集 Dataset(数据质量影响上限)
📊 实时可视化
- Loss 下降曲线(含发散告警)
- Accuracy 上升曲线
- 滚动训练日志(step / loss / lr)
- 指标卡:最终 loss、准确率、耗时、步数
- 智能点评:根据配置给出优化建议
💡
仿真原理:采用指数衰减 + 噪声 + 不稳定项的近似模型模拟 loss 动态。学习率过高会引入正弦扰动模拟震荡/发散,batch 越小噪声越大。既非真实训练,又能定性还原真实现象,兼顾「教学正确性」与「浏览器性能」。
⚡ 六、挑战与判题系统
挑战页采用 LeetCode 经典左右分栏:左侧题目与讲解,右侧编辑器与运行结果。
两种作答模式
- 可视化模式:拖拽/调参完成任务(零代码友好)
- 代码模式:在内置编辑器写 Python 补全函数
判题流程
- 运行 → 后端沙箱执行 → 比对期望输出
- 通过:解锁下一关 + 发放 XP/徽章
- 失败:定位错误 + 给出提示(可分级 Hint)
🏆 七、激励成长体系
⚡
XP 经验值
通关、打卡、讨论均可获得
🔥
连续打卡
Streak 天数,断签有保护卡
🎖️
技能徽章
按阶段/难度授予成就徽章
📊
排行榜
周榜/总榜,好友 PK
📐 八、信息架构(Sitemap)
LLMPath ├── 首页 / ......................... 价值主张 + 学习地图 + 入口 ├── 学习路径 /learn ................. 阶段侧栏 + 关卡列表(筛选/搜索) │ └── 挑战详情 /challenge ......... 题目 | 编辑器 | 判题 | 讨论 ├── 训练场 /playground .............. 超参面板 + 实时曲线 + 日志 ├── 个人进度 /progress .............. 资料 + 贡献图 + 技能雷达 + 徽章 └── 设计方案 /design ................ 本文档
🔁 九、核心用户旅程
注册登录→
选择学习路径→
学习概念卡片→
进入挑战/模拟器→
动手完成→
判题反馈→
通关得 XP→
解锁下一关 ↺
🛠️ 十、技术选型建议
| 层次 | 推荐方案 | 说明 |
|---|---|---|
| 前端框架 | Next.js + React + TypeScript | SSR 利于 SEO,组件化,生态成熟 |
| 样式 | Tailwind CSS + shadcn/ui | 快速复刻 HuggingFace 卡片风格 |
| 可视化 | Recharts / D3.js | 训练曲线、Attention 热力图 |
| 代码编辑器 | Monaco Editor | VS Code 同款,语法高亮 |
| 仿真计算 | 前端 JS 近似 / Pyodide | 轻量关卡前端算,真实训练用后端 |
| 代码判题 | 后端沙箱 (Docker / Judge0) | 安全隔离执行用户 Python |
| 后端 | Node.js (NestJS) 或 FastAPI | 用户/进度/判题 API |
| 数据库 | PostgreSQL + Redis | 结构化数据 + 排行榜/会话缓存 |
🗄️ 十一、核心数据模型
model User { id, name, email, avatar xp // 经验值 level // 等级 streak // 连续打卡 progress Progress[] } model Stage { id, order, title, icon lessons Lesson[] } model Lesson { id, stageId, title difficulty // easy|medium|hard xp, type // visual|code content, tests } model Progress { userId, lessonId, status bestScore, submittedAt }
🔑 关键字段说明
Lesson.type决定用可视化模式还是代码模式判题Lesson.tests存储判题用例(输入/期望输出)Progress.status:未开始 / 进行中 / 已通过User.xp驱动等级与排行榜计算- 训练记录可单独建
TrainingRun表存超参与曲线
✅
MVP 阶段可先用本地存储模拟进度,快速验证体验闭环。
📅 十二、迭代路线图
| 阶段 | 目标 | 范围 |
|---|---|---|
| MVP(4 周) | 验证「闯关 + 仿真」体验 | 学习路径页 + 训练模拟器 + 3~5 个可视化关卡 |
| V1(8 周) | 补全判题与成长体系 | 代码判题沙箱、XP/徽章、个人进度页、阶段 01-04 全部关卡 |
| V2(12 周) | 完整链路 + 社区 | 阶段 05-08、模型 Space 导出、讨论区、排行榜 |
| V3 | 真实算力与个性化 | 接入真实 GPU 训练、AI 助教答疑、个性化学习路径推荐 |