refactor(noise-ops-demo): 面板参数独立并改手动采样，文档补 RMSNorm 原理

Author: treert

web-tools/noise-ops-demo/README.md

@@ -5,10 +5,10 @@
 
 两个面板：
 
-1. **按元素运算**：同一批样本对 x、y 逐元素做 x、x+y、c·x、x∘y、x² 五种运算，
-   五条精确理论密度同图对比，选中项叠加蒙特卡洛直方图。直观看：
-   加/数乘保持正态；按元素乘变成尖峰重尾的乘积正态；平方把质量压到正半轴、均值漂离 0。
-2. **求和：点积与长度**：点积（双方随机 / 一方固定 ±1）与 ‖x‖² 三个模式，
+1. **按元素运算**（标量视角）：同一批样本对 x、y 逐元素做 x、x+y、x∘y、x² 四种运算，
+   四条精确理论密度同图对比，选中项叠加蒙特卡洛直方图。直观看：
+   相加保持正态；按元素乘变成尖峰重尾的乘积正态；平方把质量压到正半轴、均值漂离 0。
+2. **求和：点积与长度**（向量视角）：点积（双方随机 / 一方固定 ±1）与 ‖x‖² 三个模式，
    直方图 + 精确理论曲线。拖 D 从 1 到 4096 可看乘积正态 → Laplace → 正态的
    中心极限过程，以及 ‖x‖² 的长度集中（RMSNorm 的前提）；
    两种点积模式的理论/样本方差对比即回答"σ²=1/D 能否让点积方差为 1"。
@@ -17,8 +17,12 @@
 
 直接用浏览器打开 `index.html` 即可（ECharts 走 CDN，需要联网）。
 
-- 维数 D：滑块走 2 的幂（1~4096），输入框可给任意 1~8192；
-- σ² 预设 1 / 1/D / 1/√D 随 D 联动，也可输入自定义值。
+- 两个面板参数各自独立、互不影响：面板一有分量方差 σ²、样本量 N；
+  面板二有维数 D（滑块走 2 的幂 1~4096，输入框可给任意 1~8192）与分量方差 σ²
+  （预设 1 / 1/D / 1/√D 随 D 联动，也可自定义）；
+- 全局仅共享随机种子（影响复现性，不影响分布结论）；
+- 理论曲线随参数即时更新；蒙特卡洛不自动采样——点各面板参数行的「采样」
+  才生成样本并叠加直方图，参数变更后旧样本失效（按钮高亮提示重新采样）。
 
 ## 文件结构
 
@@ -41,7 +45,6 @@
 |---|---|---|---|---|
 | x | N(0, σ²) | 0 | σ² | 是 |
 | x+y | N(0, 2σ²) | 0 | σx²+σy² | 是（独立正态之和仍正态，方差相加） |
-| c·x | N(0, c²σ²) | 0 | c²σ² | 是（标准差按 \|c\| 缩放） |
 | x∘y | 乘积正态 | 0 | σx²σy² | **否** |
 | x² | σ²χ²₁ | σ² | 2σ⁴ | **否** |
 
@@ -64,6 +67,14 @@ $$f(z) = \frac{1}{\sigma\sqrt{2\pi z}}\,e^{-z/(2\sigma^2)},\quad z>0$$
 
 ### 2. 点积：先按元素乘，再求和
 
+速览（推导见下文）：
+
+| 运算 | 分布 | 均值 | 方差 | 仍为正态？ |
+|---|---|---|---|---|
+| x·y（双方随机） | Bessel-K 型，ν=(D−1)/2 | 0 | D·σx²σy² | 否（D=1 乘积正态、D=2 Laplace；D 大由 CLT 趋近正态） |
+| x·v（一方固定，v_i=±1） | N(0, Dσ²) | 0 | Dσ² | **是**（精确正态） |
+| ‖x‖²（长度平方） | σ²χ²(D) | Dσ² | 2Dσ⁴ | 否（只有正半轴；D 大趋近正态） |
+
 **双方随机** z = Σ x_i y_i：特征函数 φ(t) = (1 + a²t²)^{-D/2}（a = σxσy），反演得
 
 $$f(z) = \frac{(|z|/2a)^{\nu}\,K_\nu(|z|/a)}{\sqrt{\pi}\,\Gamma(D/2)\,a},
@@ -87,8 +98,7 @@ $$z \sim \mathcal N(0,\ \sigma^2\|v\|^2)$$
 固定向量的分量只是把独立噪音重新线性组合。
 
 **长度平方** ‖x‖² = Σ x_i² ~ σ²χ²(D)：均值 Dσ²，方差 2Dσ⁴，
-相对涨落 √(2/D)。高维时 ‖x‖ 集中到 σ√D 附近——RMSNorm
-（除以 RMS = ‖x‖/√D）正是利用这个集中性。
+相对涨落 √(2/D)。高维时 ‖x‖ 集中到 σ√D 附近——这是 RMSNorm 能工作的前提（§4 详解）。
 
 ### 3. 关键问题：σ² = 1/D 时点积方差是不是 1？
 
@@ -108,3 +118,37 @@ $$\mathrm{Var}(x\cdot y) = D\,\sigma_x^2\sigma_y^2$$
 
 两种缩放因子 1/D 与 1/√D 的分野，本质就是点积中"一方固定还是双方皆随机"；
 面板二的两种点积模式可直接对比这两种情形（理论方差与蒙特卡洛实测同屏显示）。
+
+### 4. 附：RMSNorm 为什么能工作
+
+RMSNorm 把 D 维向量除以其均方根（再乘可学增益 g）：
+
+$$\mathrm{RMSNorm}(x) = \frac{x}{\mathrm{RMS}(x)}\,g, \qquad
+\mathrm{RMS}(x) = \sqrt{\frac{\|x\|^2}{D}}$$
+
+它能成立依赖 §2 长度平方给出的两个数字：
+
+**① 校准性（期望层面，精确）**：RMS 是分量方差的良好估计，
+因为 E[‖x‖²/D] = σ²（长度平方的均值 = 分量方差 × D）。
+更进一步，归一化后分量的方差**精确**为 1，不需要任何近似——
+由分量的交换对称性（E[x_i²/‖x‖²] 对 i 相同，且对 i 求和为 1）：
+
+$$E\!\left[\frac{x_i^2}{\|x\|^2}\right] = \frac{1}{D}
+\;\Longrightarrow\;
+E\!\left[\left(\frac{x_i}{\mathrm{RMS}(x)}\right)^{\!2}\right] = 1$$
+
+注意 RMS(x) 本身是随机变量，但对称性使该恒等式与分布细节无关
+（各分量 iid 即可，甚至不需要高斯假设）。
+
+**② 稳定性（单样本层面，渐近）**：RMS 逐样本几乎恒定。
+由 Var(‖x‖²) = 2Dσ⁴，‖x‖²/D 的相对标准差为 √(2/D)；
+开方传到 RMS 上（delta 方法）再减半，相对标准差 ≈ 1/√(2D)：
+
+| D | 64 | 1024 | 4096 |
+|---|---|---|---|
+| RMS 相对涨落 | 8.8% | 2.2% | 1.1% |
+
+D 越大，每个样本被除以的因子越接近同一个常数 σ——这就是
+"高维向量长度集中"（‖x‖ ≈ σ√D）在归一化中的表现：
+RMSNorm 在高维几乎等价于除以一个常数，却又对分量尺度的真实变化
+（σ 漂移）保持自校准——这正是它比"固定除数"更鲁棒的原因。

web-tools/noise-ops-demo/css/style.css

@@ -200,6 +200,58 @@ main {
   font-size: 12px;
 }
 
+/* 面板内参数行：浅色底与全局控制区区分，强调"仅本面板" */
+.panel-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 10px;
+  margin: 4px 0 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.panel-controls label {
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.panel-controls input[type="number"] {
+  width: 72px;
+  padding: 3px 6px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.panel-controls input[type="range"] {
+  width: 180px;
+}
+
+.controls-hint {
+  font-size: 12px;
+  color: #8c959f;
+}
+
+/* 采样按钮：样本失效/未采样时高亮提示 */
+button.need-sample {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #fff;
+}
+
+button.need-sample:hover:not(:disabled) {
+  background: #1d4ed8;
+}
+
+/* 统计行中"未采样"提示 */
+.stat-dim {
+  color: #8c959f;
+}
+
 .chart {
   width: 100%;
   height: 420px;

web-tools/noise-ops-demo/index.html

@@ -13,81 +13,85 @@
       <h1>噪音向量的基本运算：分布视角</h1>
     </div>
     <p class="subtitle">
-      x、y 为 D 维向量，各分量独立同分布 N(0, σ²)。LLM 的线性部分不外三种运算：<strong>加</strong>、<strong>数乘</strong>、<strong>点积</strong>
-      （矩阵投影 = 每行一个点积，组成新向量）。本页从概率密度、均值、方差三个视角演示：
-      <strong class="legend-note note-blue">加 / 数乘保持正态</strong>，
+      LLM 的线性部分不外三种运算：<strong>加</strong>、<strong>数乘</strong>、<strong>点积</strong>
+      （矩阵投影 = 每行一个点积，组成新向量）。本页从概率密度、均值、方差三个视角演示高斯噪音经历这些运算后的分布变化：
+      <strong class="legend-note note-blue">相加保持正态</strong>，
       <strong class="legend-note note-orange">按元素乘变成"乘积正态"（尖峰重尾）</strong>，
       <strong class="legend-note note-red">平方变成卡方（均值漂离 0）</strong>。
     </p>
   </header>
 
   <section class="controls">
-    <div class="control control-slider">
-      <label for="sliderD">维数 D</label>
-      <input id="sliderD" type="range" min="0" max="12" step="1" value="4" />
-      <input id="inputD" type="number" min="1" max="8192" step="1" value="16" />
-    </div>
-    <div class="control">
-      <label>分量方差 σ²</label>
-      <div class="preset-group">
-        <button type="button" data-preset="1">1</button>
-        <button type="button" data-preset="1/D" class="active">1/D</button>
-        <button type="button" data-preset="1/sqrtD">1/√D</button>
-      </div>
-      <input id="inputSigma2" type="number" step="any" title="自定义 σ²" />
-    </div>
-    <div class="control">
-      <label for="inputC">数乘 c</label>
-      <input id="inputC" type="number" step="any" value="2" />
-    </div>
-    <div class="control">
-      <label for="inputN">样本量 N</label>
-      <input id="inputN" type="number" min="1000" max="2000000" step="1000" value="200000" />
-    </div>
     <div class="control control-mc">
-      <button id="btnResample" type="button">重新采样</button>
       <label for="chkSeed">
         <input id="chkSeed" type="checkbox" checked />
         固定种子
       </label>
       <input id="inputSeed" type="number" value="42" step="1" />
     </div>
+    <span class="controls-hint">
+      理论曲线随参数即时更新；蒙特卡洛不自动采样——点各面板参数行的「采样」叠加直方图（参数变更后按钮高亮提示重新采样）
+    </span>
   </section>
 
   <main>
     <div class="chart-wrap">
       <div class="panel-head">
-        <h2>按元素运算（逐分量分布）</h2>
+        <h2>按元素运算：标量分布</h2>
         <div class="op-radios">
           <label><input type="radio" name="elementOp" value="x" /> x</label>
           <label><input type="radio" name="elementOp" value="add" /> x+y</label>
-          <label><input type="radio" name="elementOp" value="scale" /> c·x</label>
           <label><input type="radio" name="elementOp" value="product" checked /> x∘y</label>
           <label><input type="radio" name="elementOp" value="square" /> x²</label>
           <span class="radio-hint">（选中项叠加蒙特卡洛直方图）</span>
         </div>
       </div>
+      <div class="panel-controls">
+        <label for="inputSigmaElem">分量方差 σ²</label>
+        <input id="inputSigmaElem" type="number" step="any" value="1" />
+        <label for="inputN">样本量 N</label>
+        <input id="inputN" type="number" min="1000" max="2000000" step="1000" value="200000" />
+        <button id="btnSampleElem" type="button">采样</button>
+        <span class="radio-hint">仅作用于本面板（逐分量标量分布，与维数 D 无关）</span>
+      </div>
       <div id="chartElement" class="chart"></div>
       <p class="chart-note" id="elementStats"></p>
       <p class="chart-note">
-        加与数乘保持正态（方差相加 / 乘 c²）；按元素乘是乘积正态 f(z) = K₀(|z|/σ²)/(πσ²)，
+        本面板演示<strong>标量</strong>：x、y 为独立噪音标量，x, y ~ N(0, σ²)
+        （也可理解为向量的任意一个分量——按元素运算后各分量仍 iid，单分量分布即整体）。
+        相加仍是正态（方差相加）；按元素乘是乘积正态 f(z) = K₀(|z|/σ²)/(πσ²)，
         0 处对数尖峰、重尾（峰度 9），方差 = σ⁴（方差的乘积）；平方是缩放卡方 σ²χ²₁，
         只有正半轴且均值从 0 漂到 σ²——"能量"不再关于 0 对称。曲线为精确理论密度。
       </p>
     </div>
 
     <div class="chart-wrap">
       <div class="panel-head">
-        <h2>求和：点积与长度</h2>
+        <h2>向量求和：点积与长度分布</h2>
         <div class="op-radios">
           <label><input type="radio" name="sumMode" value="dotRandom" checked /> 点积 x·y（双方随机）</label>
           <label><input type="radio" name="sumMode" value="dotFixed" /> 点积 x·v（一方固定 ±1）</label>
           <label><input type="radio" name="sumMode" value="norm2" /> 长度平方 ‖x‖²</label>
         </div>
       </div>
+      <div class="panel-controls">
+        <label for="sliderD">维数 D</label>
+        <input id="sliderD" type="range" min="0" max="12" step="1" value="4" />
+        <input id="inputD" type="number" min="1" max="8192" step="1" value="16" />
+        <label>分量方差 σ²</label>
+        <div class="preset-group">
+          <button type="button" data-preset="1">1</button>
+          <button type="button" data-preset="1/D" class="active">1/D</button>
+          <button type="button" data-preset="1/sqrtD">1/√D</button>
+        </div>
+        <input id="inputSigmaSum" type="number" step="any" title="自定义 σ²" />
+        <button id="btnSampleSum" type="button">采样</button>
+        <span class="radio-hint">仅作用于本面板</span>
+      </div>
       <div id="chartSum" class="chart"></div>
       <p class="chart-note" id="sumStats"></p>
       <p class="chart-note">
+        本面板演示<strong>向量</strong>：x、y 为 D 维向量，各分量独立同分布 N(0, σ²)，考察把 D 个分量求和压成标量的运算。
         点积 = 先按元素乘再求和：D=1 即乘积正态（尖峰），D=2 恰为 Laplace 分布，D 增大由中心极限定理趋于正态（拖 D 滑杆看全过程）。
         双方随机时 Var = D·σ⁴；一方固定（v 分量 ±1，‖v‖² = D）时是精确正态 N(0, Dσ²)，Var = D·σ²——
         故 σ²=1/D 时前者方差为 1/D、后者恰为 1：<strong>"1/D 让点积方差为 1"只在一方固定时成立</strong>。