# 计算图与反向传播：课堂网页

双击 `index.html` 即可阅读和演示。网页可离线使用；只有参考资料链接需要联网。

## 文件

- `index.html`：完整讲解、交互图入口、PyTorch 示例和常见问题。
- `computation-graph.html`：独立的计算图交互演示，由已有可视化导出。
- `autograd_demo.py`：与网页一致的 PyTorch 示例。

保持这三个文件在同一文件夹中。不要只复制 index.html。

## 课堂使用

1. 打开 index.html，点击“下一步”逐步展示反向传播。
2. 讲清楚局部导数、损失对变量的梯度，以及链式法则。
3. 在已安装 PyTorch 的 Notebook 内核中完整运行示例代码。
4. 观察：反向传播只算梯度；再点击“更新参数”，用橙色查看普通 SGD 的更新。学习率为 0.05，w 从 3 变成 2.6，b 从 1 变成 0.8。
5. 图中标为“上轮”的中间量仍来自更新前的计算；新预测和损失需要重新前向计算。

浏览器可用 Ctrl+加号放大；F11 进入全屏。代码复制不可用时，按钮会选中代码，可按 Ctrl+C 手动复制。

每次从头演示时，可以连续点击“上一步”回到第一步。

## 接入课程网站

本轮只制作本地文件，未修改服务器或发布网站。

对于 VitePress，可以把这三个文件放进站点源码的 public/demos/autograd/ 目录，再在课程文档中添加链接：

```markdown
[计算图与反向传播：交互演示](/demos/autograd/index.html)
```

这是站点部署在域名根目录时的示例；如果配置了 base 子路径，链接应带上该前缀。实际接入时以课程网站当前目录和配置为准。

三个文件都使用相对路径关联，不需要后端、数据库、API Key 或 npm 构建。将它们原样作为静态文件部署即可。网站若另有严格 CSP，需允许此演示使用的内联样式、脚本及同源 iframe；不要为了嵌入演示而无条件放宽全站策略。

## 内容维护

正文和示例代码在 index.html 中。修改代码后，同步更新 autograd_demo.py 和预期输出。

computation-graph.html 为独立导出的文件，包含演示需要的样式与脚本。默认从正向计算结果开始；用“下一步”“上一步”切换，最后一步为 SGD 参数更新。

网页中的数值推导为教学示意，浏览器不会运行 PyTorch。实际自动求导在 autograd_demo.py 中演示。