🌐 在线体验：https://pixelalgo.kittyhouse.top —— 浏览器直接打开，63 个模型全部可交互，无需安装、无需联网（前端纯静态，资源全部本地化）。

从线性回归到扩散模型，把抽象算法变成会动的画面。覆盖 10 大类、63 个主流模型，每个都配三件套：完整原理文档 + 可交互动画 + Python 从零实现与框架对照。

先看懂原理，再用好工具。

---

---

✨ 特点

• 🎬 可视化优先 —— 损失曲面上的优化轨迹、卷积核的滑动、注意力热力图、扩散去噪过程……抽象公式变成可调参数的实时动画。ECharts、手写 Canvas/SVG、Three.js、KaTeX 全栈上阵。
• 🔬 双实现 —— 每个模型给两层代码：纯 NumPy 白盒实现（看得见每一步梯度）+ scikit-learn / PyTorch 工业实现对照。不囿于黑盒，也不重复造轮子。
• 🎨 统一设计系统 —— 一套设计 tokens 贯穿全站，暗 / 亮主题、配色、控件、排版完全一致；每个模型页结构相同，学一个就会用全部。
• 🧪 科学严谨 —— 每个公式都过数值梯度复核，每个引用的数字都来自实跑代码，文档与实现逐位对齐。（审查总览）
• 🗺 路线图驱动 —— 覆盖全部主流模型（63 / 63 已完成，10 大类），按学习路径排序、先修关系清晰。

---

📸 演示

每个模型都有可拖参数、实时重绘的交互页。下面是四个代表：

梯度下降族 损失曲面上的 GD / SGD / Momentum / Adam 轨迹	Transformer 多头自注意力热力图 + 结构
卷积与池化 卷积核在输入图上滑动的过程	门户首页 学习路径 + 模型卡片 + 筛选

---

🚀 快速开始

git clone https://github.com/StanleyChanH/PixelAlgo.git
cd PixelAlgo
pip install -r requirements.txt     # from_scratch 仅需 numpy；framework 需 sklearn/torch

python scripts/serve.py             # 本地预览
# 浏览器打开 http://127.0.0.1:8000

直接打开 index.html（门户首页）也可以——数据通过 manifest.js 本地注入，无需后端、无需联网。

第一个模型？ 从 线性回归 开始。

---

📚 模型目录（63 个 · 10 大类）

类别	模型
🧱 基础	梯度下降族
🎯 监督·经典	线性回归 · 逻辑回归 · 感知机 · KNN · 决策树 · 朴素贝叶斯 · 随机森林 · GBDT · SVM
🔍 无监督	K-Means · DBSCAN · 层次聚类 · GMM + EM · PCA · t-SNE · 关联规则
🧠 神经网络	MLP + 反向传播 · 激活函数族 · 损失函数族 · 优化器族 · 正则化 · 初始化
🖼 卷积网络	卷积与池化 · LeNet-5 · AlexNet · ResNet
🔁 循环/序列	RNN · LSTM · Attention
🌌 Transformer	Transformer
🎨 生成模型	自编码器 · VAE · GAN · DCGAN · Diffusion · StyleGAN
🕸 图与推荐	GCN
🎮 强化学习	Q-Learning · DQN

完整路线图（63 个模型，10 大类全覆盖）见 docs/ROADMAP.md。

---

🗺 学习路径

推荐按顺序学习，主干如下（详见 docs/learning-path.md）：

梯度下降 → 线性回归 → 逻辑回归 → MLP+反向传播
                                  ├→ 卷积 → ResNet
                                  ├→ RNN → LSTM → Attention → Transformer
                                  └→ 自编码器 → VAE → GAN → Diffusion

每个模型的 meta.json 声明 prerequisites，门户与路线图据此绘制先修关系。

---

📐 项目结构

PixelAlgo/
├── index.html                 # 门户（学习路径 + 模型卡片 + 筛选）
├── assets/                    # 全局设计系统（所有页面共享）
│   ├── css/   tokens · base · components · portal
│   ├── js/    theme · viz-core · echarts-theme · playground · katex-config · nav · portal
│   ├── manifest.js            # 构建生成，门户数据源
│   └── vendor/                # 本地化的 echarts / three（离线可用）
├── docs/                      # 规范 · 路线图 · 设计系统 · 学习路径
├── scripts/                   # new_model · build_manifest · verify · serve
└── models/                    # 每个模型一个单元
    └── 01-linear-regression/
        ├── meta.json  README.md  index.html
        ├── assets/viz.js        # 动画逻辑
        └── code/{from_scratch,framework}.py

每个模型单元的四个文件：

文件	作用
README.md	11 章节文档：直觉 → 数学（KaTeX）→ 算法 → 从零实现 → 框架对照 → 超参 → 陷阱 → 应用
index.html + assets/viz.js	可交互动画页：参数滑块 + Canvas / ECharts / SVG / Three 实时可视化
code/from_scratch.py	纯 NumPy 白盒实现，可独立运行，打印真值对照
code/framework.py	scikit-learn / PyTorch 工业实现对照

---

🛠 工具链

命令	作用
python scripts/new_model.py <slug> <category> --title 中文	生成新模型单元骨架
python scripts/verify_unit.py <slug>	校验单元完整性 + Python 语法
python scripts/verify_all.py	全量校验 + 重建 manifest
python scripts/build_manifest.py	扫描 models/*/meta.json → 生成门户数据
python scripts/serve.py	本地预览服务器

---

🤝 贡献

欢迎贡献新模型、改进可视化、修订文档！先读 CONTRIBUTING.md 与 docs/conventions.md，黄金范例是 models/01-linear-regression/。

一个模型 = 一个 PR；PR 须通过 python scripts/verify_unit.py <slug> 零错误。

---

🙏 致谢

本项目站在巨人的肩膀上，核心依赖与灵感来源：

• 数值 / 科学计算：NumPy · scikit-learn · PyTorch
• 可视化：ECharts · Three.js · KaTeX · Tailwind CSS
• 教学灵感：Dive into Deep Learning · karpathy/micrograd · rasbt/LLMs-from-scratch · labml.ai

---

📖 引用

如果这个项目对你有帮助，欢迎引用：

@misc{PixelAlgo2026,
  author       = {StanleyChanH},
  title        = {{PixelAlgo}: 机器学习/深度学习可视化教学集},
  year         = {2026},
  url          = {https://github.com/StanleyChanH/PixelAlgo},
  note         = {MIT License}
}

---

⭐ Star 这个项目

如果 PixelAlgo 帮到了你，欢迎点个 ⭐ 让更多人看到——这是对作者最大的鼓励，也会激励我们补全路线图上剩余的模型。

---

📄 License

MIT License © 2026 StanleyChanH

本项目仅供教学用途。如有错误或建议，欢迎 提 Issue。