📐 产品设计文档 v1.0

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可分享的在线 DemoHard

🧪 五、训练模拟器设计(核心亮点)

模拟器是整个平台的灵魂:它用轻量级的数学近似在浏览器中还原真实训练的关键现象, 让初学者在零成本下直观感受「超参数如何影响训练」。

🎛️ 可调参数

  • 学习率 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 + TypeScriptSSR 利于 SEO,组件化,生态成熟
样式Tailwind CSS + shadcn/ui快速复刻 HuggingFace 卡片风格
可视化Recharts / D3.js训练曲线、Attention 热力图
代码编辑器Monaco EditorVS Code 同款,语法高亮
仿真计算前端 JS 近似 / Pyodide轻量关卡前端算,真实训练用后端
代码判题后端沙箱 (Docker / Judge0)安全隔离执行用户 Python
后端Node.js (NestJS) 或 FastAPI用户/进度/判题 API
数据库PostgreSQL + Redis结构化数据 + 排行榜/会话缓存

🗄️ 十一、核心数据模型

schema.prisma
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 助教答疑、个性化学习路径推荐

以上为 v1.0 设计方案。点击下方按钮查看可交互的页面原型。