数学补充 Supplement C 交互 3D · Plotly

3D 梯度下降（可旋转）

补充 B 里的"下山"是 2D 切面。这里用 Plotly 画真正的 3D loss 曲面 + 梯度下降路径——用鼠标拖动可旋转，看小球怎么一步步滚到谷底。

🖱️ 试试：在下图上按住拖动旋转视角，滚轮缩放。红点=起点，绿点=最低点，黄线=梯度下降每一步的落点。若图没出现，说明当前离线（Plotly 走 CDN，需要联网）。

这张图在讲什么

曲面 = loss 地形：高处误差大、谷底误差小。两个水平轴是两个参数，竖轴是 loss。
梯度 = 曲面在当前点的坡度方向。每一步：参数 ← 参数 − 学习率 × 梯度，即朝下坡挪一小步。
黄线 = 参数被一步步更新的轨迹，最终滚进谷底（loss 最低）。

接回真实模型：真实模型有上亿个参数（这里只画 2 个好可视化）；loss 地形是"上亿维"的，没法画，但"沿坡度下山"的道理一模一样。

它是"声明式"的（像 Mermaid，但 3D）

整张图就是喂给 Plotly 一个 data（曲面 z 值 + 路径点）+ layout 的对象，它负责渲染+交互。核心就这么点：

Plotly.newPlot('plot', [
  { type:'surface', x, y, z },              // loss 曲面
  { type:'scatter3d', x:px, y:py, z:pz,     // 下降路径
    mode:'lines+markers' }
], layout);