⚡ XGBoost 数学原理可视化

数据挖掘 · 第二轮学习配套工具 拖一拖滑块、看一看动画，30 分钟吃透 XGBoost 核心公式

🔗 在线预览：部署完成后访问 https://<你的用户名>.github.io/amp-learning-lab/

---

📖 项目简介

这是一个单文件 HTML 网站，把 XGBoost 的数学原理做成可视化互动工具：

章节	标题	能玩什么
1	XGBoost 概览	一句话 + 核心三件套
2	Bagging vs Boosting	看两种集成策略动画对比
3	目标函数	拉滑块看 $\Omega(f)$ 怎么变
4	泰勒展开 ⭐	拖滑块看一阶/二阶展开 vs 真实损失
5	叶子权重	实时算 $w^* = -G/(H+\lambda)$
6	分裂增益	调 5 个滑块判断"切不切"
7	训练动画 ⭐	看 XGBoost 一棵棵树加进来时决策边界变化
8	AMP 场景 ⭐	输入肽序列 → 特征 → 预测概率 + SHAP 解释

---

🚀 5 步部署到 GitHub Pages（手把手）

Step 1：在 GitHub 创建空仓库

1. 打开 https://github.com/new
2. 填写：
   • Repository name: amp-learning-lab
   • Description: XGBoost 数学原理可视化 · 抗菌肽预测配套教学
   • 选择 Public（Public 才能免费用 GitHub Pages）
   • 不要勾选 Add a README file / Add .gitignore / Choose a license（我们已经有了）
3. 点 Create repository

Step 2：生成本地仓库（PowerShell 跑这段）

打开 PowerShell，进入 amp-learning-lab 目录：

cd D:\workspace\amp-learning\amp-learning-lab
git init
git config user.name "你的 GitHub 用户名"     # ← 改成你的
git config user.email "你的 GitHub 注册邮箱"  # ← 改成你的
git add .
git commit -m "feat: XGBoost 数学原理可视化（单文件 HTML）"

或者直接跑项目里的 deploy.ps1 脚本（推荐，一键完成）。

Step 3：连接 GitHub 远程仓库

# 把下面的 <你的用户名> 改成你的 GitHub 用户名
git remote add origin https://github.com/<你的用户名>/amp-learning-lab.git
git branch -M main

Step 4：推送代码

第一次推送需要身份认证，二选一：

方式 A：用 Personal Access Token（PAT，推荐）

1. 去 https://github.com/settings/tokens 生成一个 Fine-grained token
   • Token name: amp-learning-deploy
   • Expiration: 7 days（短期即可）
   • Repository access: Only select repositories → 选 amp-learning-lab
   • Permissions: Contents (Read and Write)
2. 复制生成的 token
3. 推送时把 token 当密码用：

git push -u origin main
# Username: <你的用户名>
# Password: <粘贴 token，不是你的 GitHub 密码>

方式 B：用 GitHub CLI（更丝滑）

# 装 GitHub CLI（已装可跳过）
winget install --id GitHub.cli

# 登录
gh auth login
# 选 GitHub.com → HTTPS → Yes (authenticate git) → Login with a web browser

# 推送
git push -u origin main

Step 5：开启 GitHub Pages

1. 进入 GitHub 仓库页面
2. Settings → Pages
3. Source 选 Deploy from a branch
4. Branch 选 main / (root)
5. 点 Save
6. 等待 1-2 分钟，刷新页面会看到：

   Your site is live at https://<你的用户名>.github.io/amp-learning-lab/
   

🎉 完成！ 把这个链接发给老师/同学/毕设答辩老师看。

---

🛠️ 一键部署脚本

不想手动跑？用 deploy.ps1：

cd D:\workspace\amp-learning\amp-learning-lab
.\deploy.ps1 -GitHubUser "你的用户名" -RepoName "amp-learning-lab"

脚本会自动：

1. ✅ 检查 git
2. ✅ 初始化仓库
3. ✅ 添加并提交所有文件
4. ✅ 提示你添加 GitHub 远程仓库
5. ✅ 推送代码

---

🔄 以后怎么更新内容

# 改了 index.html 后
git add .
git commit -m "update: 修改说明"
git push

GitHub Pages 通常 1-2 分钟内自动重新部署，刷新网页即可看到新内容。

---

🛡️ 防御性检测

部署前/部署后都可以跑：

cd tools
python defensive_check.py

会输出：

• ✅ 0 critical
• ✅ 0 warning
• ✅ 33 passed

包含的检查项：

• HTML 结构完整性（ID 唯一、引用一致）
• JS 语法（用 node --check）
• XSS 漏洞扫描
• 第三方依赖（CDN SRI 校验）
• SEO / 元信息
• 错误处理
• 可访问性（ARIA 标签）
• 内容完整性（8 个 section）

---

🧪 本地预览

直接双击 index.html 即可在浏览器打开。

或者用 Python 起个本地服务器（推荐，避免某些浏览器对 file:// 限制）：

# 进入项目目录
cd D:\workspace\amp-learning\amp-learning-lab

# Python 3 起服务器
python -m http.server 8000

# 浏览器打开 http://localhost:8000

---

🐛 常见问题

Q1：推送时提示 "Authentication failed"

• 检查用户名密码（实际是 PAT，不是 GitHub 密码）
• PAT 是否过期

Q2：GitHub Pages 一直显示 404

• 仓库必须是 Public
• index.html 必须在仓库根目录（或 docs/ 目录）
• 等待 1-2 分钟

Q3：MathJax 公式不显示

• 检查网络（MathJax 是 CDN 加载的）
• 打开浏览器控制台（F12）看有没有报错

Q4：训练动画卡顿

• 训练动画用了 30×30 网格（900 点/帧）
• 在 index.html 找到 const N_GRID = 30 改成 20 即可

Q5：怎么用自定义域名？

• 在 GitHub 仓库根目录加 CNAME 文件
• 文件内容写你的域名，例如 xgb.example.com
• 在你的域名 DNS 添加 CNAME 记录指向 <用户名>.github.io

---

📁 文件结构

amp-learning-lab/
├── index.html              # 主页面（XGBoost 可视化）
├── README.md               # 本文件
├── deploy.ps1              # PowerShell 部署脚本
├── .gitignore              # Git 忽略规则
├── LICENSE                 # MIT 许可证
└── tools/                  # 辅助脚本
    ├── defensive_check.py  # 防御性检测
    └── compute_sri.py      # CDN SRI 校验和计算

---

📜 License

MIT License - 自由使用、修改、分发

🙏 致谢

• 数据挖掘学习由 Mavis 陪伴
• 项目作者：weweluo（数据科学与大数据技术）
• 配套项目：抗菌肽 (AMP) 识别和预测平台