LearnLLM

交互式 LLM 算法演进课程。从 Word2Vec 到 GPT，每节都有可在浏览器内运行的 Python 练习。

当前状态

• ✅ 基础架构（Next.js 14 + TypeScript + Tailwind）
• ✅ Pyodide Web Worker（浏览器内跑 Python，预装 NumPy / Matplotlib）
• ✅ 核心组件：CodeCell、Quiz、Tex (KaTeX)、Callout、LessonShell、ProgressSidebar
• ✅ Module 0–5 已就绪，共 31 节交互课程
• ✅ 覆盖 Word2Vec、GloVe、RNN/LSTM/ELMo、Attention、Transformer、BERT 与 GPT

课程模块

• Module 0：预备知识 Warm-up（4 节）
• Module 1：词表示的起点（3 节）
• Module 2：Word2Vec 与 GloVe（6 节）
• Module 3：上下文相关表示（4 节）
• Module 4：注意力与 Transformer（6 节）
• Module 5：预训练范式：BERT 与 GPT（8 节）

启动

pnpm install
pnpm dev          # http://localhost:3000

如果 3000 被占用：PORT=3030 pnpm dev

构建：

pnpm build
pnpm start

类型检查：

pnpm typecheck

项目结构

src/
├── app/                       Next.js App Router
│   ├── page.tsx               首页
│   ├── learn/page.tsx         课程目录
│   ├── learn/[module]/[lesson]/page.tsx
│   └── playground/page.tsx
├── components/lesson/         CodeCell / Quiz / Callout / Tex / LessonShell / ProgressSidebar
├── content/
│   ├── registry.ts            模块/课节元数据（决定目录与导航）
│   ├── lessons/index.ts       课程组件注册表
│   └── lessons/module-*/      Module 0-5 课程正文（每节 1 个 .tsx）
├── lib/pyodide/               PyRunner（与 Worker 通信）
├── lib/lessonState/           课程进度与持久化状态
├── workers/pyodide.worker.ts  在 Worker 里跑 Pyodide
└── styles/globals.css

写一节新课

1. 在 src/content/registry.ts 增加或更新 lesson 元数据
2. 在 src/content/lessons/module-X/lesson-X-Y.tsx 写正文（参考现有课程）
3. 在 src/content/lessons/index.ts 导入并注册新组件

每节正文是一个 React 组件，可以自由组合 <CodeCell>、<Quiz>、<Tex>、<Callout>。

技术栈

• Next.js 14 App Router，纯静态导出
• Pyodide 0.26 在 Web Worker 里跑 CPython（NumPy / Matplotlib 预装）
• Monaco Editor 代码编辑
• KaTeX 数学公式
• Tailwind CSS 样式

License

MIT