MLTutor - 机器学习可视化教学平台

一个纯前端的机器学习交互式可视化教学平台，帮助学习者通过直观的可视化和动手实践来理解机器学习算法。

在线演示

🚀 https://king157419.github.io/easyML/

为什么做它

教科书里的 SVM 边界、K-Means 收敛、梯度下降轨迹都是静态插图，看十遍不如自己拖一次滑块。MLTutor 把 23 个算法做成可实时调参的可视化，再用一张 D3 力导向知识图谱把它们的关系连起来，从"背公式"变成"看见它在动"。纯前端，打开浏览器就能用，不需要安装任何东西。

界面预览

首页 · 知识图谱与算法导航	K-Means 聚类 · 拖参数看收敛

功能特色

• 23 个算法交互式可视化 — 实时调整参数，观察算法行为变化
• 知识图谱导航 — D3.js 力导向图展示算法间的关联关系
• 算法进化史时间线 — 追踪机器学习关键里程碑
• 配套 Jupyter Notebook — 每个算法均可在 Google Colab 中运行
• AI 教学助手 — 基于 DeepSeek API + Graph RAG 的难度自适应助手
• 数学公式渲染 — KaTeX 实时渲染 LaTeX 公式

算法列表（23 个）

类别	算法	可视化等级
回归	线性回归、逻辑回归、多项式回归、Ridge 回归、Lasso 回归	Level 1-2
分类	KNN、SVM、决策树、随机森林、朴素贝叶斯	Level 1-3
神经网络	前馈神经网络、CNN、RNN、Attention 机制	Level 4
聚类	K-Means、DBSCAN、层次聚类	Level 2-3
降维	PCA、LDA、t-SNE	Level 2-3
强化学习	Q-Learning、策略梯度、Actor-Critic	Level 3-4

算法分类颜色说明

知识图谱中节点按算法种类着色：

种类	颜色
回归	🟣 紫色
分类	🔵 蓝色
神经网络	🔴 红色
聚类	🟢 绿色
降维	🟠 橙色
强化学习	🩷 粉色

本地运行

# 方法 1: Python（推荐）
python -m http.server 8000

# 方法 2: Node.js
npx serve

# 方法 3: 直接打开
# 在浏览器中直接打开 index.html（大部分功能可用）

然后访问 http://localhost:8000

项目结构

MLTutor/
├── index.html                    # 主页（知识图谱 + 进化史时间线）
├── algorithms/                   # 23 个算法页面
│   ├── linear-regression/
│   │   ├── index.html           # 交互式可视化页面
│   │   └── notebook.ipynb       # Jupyter Notebook
│   ├── logistic-regression/
│   ├── svm/
│   ├── knn/
│   ├── nn/
│   ├── cnn/
│   ├── rnn/
│   ├── attention/
│   ├── decision-tree/
│   ├── random-forest/
│   ├── naive-bayes/
│   ├── polynomial-regression/
│   ├── ridge-regression/
│   ├── lasso-regression/
│   ├── k-means/
│   ├── dbscan/
│   ├── hierarchical-clustering/
│   ├── pca/
│   ├── lda/
│   ├── tsne/
│   ├── q-learning/
│   ├── policy-gradient/
│   └── actor-critic/
├── assets/
│   ├── css/
│   │   ├── style.css            # 全局样式 + CSS 变量（主题系统）
│   │   └── algorithm.css        # 算法页面布局样式
│   ├── js/
│   │   ├── knowledge-graph.js   # D3.js 知识图谱可视化
│   │   ├── ai-assistant/        # AI 教学助手模块
│   │   └── [algorithm].js       # 各算法可视化脚本
│   └── data/                    # 知识库数据（Graph RAG）
└── .claude/harness/             # 任务管理系统（Anthropic Harness 模式）
    ├── feature_list.json        # 任务追踪
    └── claude-progress.txt      # 会话进度日志

技术栈

技术	版本	用途
HTML/CSS/JavaScript	原生	无构建步骤，直接编辑即生效
D3.js	v7	自定义 SVG 可视化、力导向图、树形图
Plotly.js	v2.26.0	3D 图表、交互式图表
KaTeX	v0.16.9	LaTeX 数学公式渲染
DeepSeek API	—	AI 教学助手后端

开发说明

• 无构建步骤：直接修改文件，刷新浏览器即可看到效果
• 新增算法：复制 algorithms/template.html，替换占位符，创建对应的 assets/js/[algorithm].js
• 知识图谱：在 assets/js/knowledge-graph.js 的 knowledgeData 对象中添加新节点
• 文件编码：统一使用 UTF-8（项目含大量中文字符）

致谢

• 开发工具：Claude Code（Anthropic）

许可证

MIT License