扩散模型的核心在于从纯噪声逐步生成图像的过程，这一过程可以通过浏览器端交互演示直观呈现，帮助开发者理解 forward 加噪与 reverse 去噪的动态。传统扩散模型训练复杂，但交互演示简化了可视化，用户可手动控制噪声步数、调度策略，观察图像从清晰到噪声再恢复的路径。这种浏览器实现不依赖后端服务器，利用 WebGL 或 Canvas 实时渲染，适用于教育、调试和原型验证。
实现交互演示的关键是精确模拟扩散过程的数学公式。正向过程（forward diffusion）逐步添加高斯噪声：给定初始图像 (x_0)，在时间步 ( t ) 时，( x_t = \sqrt {\bar {\alpha}t} x_0 + \sqrt{1 - \bar{\alpha}t} \epsilon )，其中 (\epsilon \sim \mathcal {N}(0, I) )，( \bar {\alpha}t = \prod{s=1}^t (1 - \beta_s) )。在 8gwifi.org 的演示中，“Forward: xt = √ᾱt・x0 + √(1−ᾱt)・ε”，用户可上传图像或使用合成图案（如笑脸、棋盘），逐步观察噪声积累。反向过程（reverse diffusion）则近似去噪，使用模型预测噪声 ( \epsilon\theta (x_t, t) )，计算 ( x{t-1} = \frac{1}{\sqrt{\alpha_t}} \left( x_t - \frac{\beta_t}{\sqrt{1 - \bar{\alpha}t}} \epsilon\theta \right) + \sigma_t z )。为简化浏览器演示，可采用 “oracle” 模式：正向时记录 ( \epsilon )，反向直接使用相同 ( \epsilon ) 完美重建，避免训练真实模型。
噪声调度（noise schedule）是控制过程速度的核心参数。线性调度最简单：(\beta_t = \beta_{\text {start}} + (\beta_{\text {end}} - \beta_{\text {start}}) \frac {t}{T-1} )，推荐 ( \beta_{\text {start}} = 10^{-4} )，( \beta_{\text {end}} = 0.02 )，总步数 ( T = 1000 )。余弦调度更平滑，前期噪声添加缓慢，后期加速，有助于生成质量。浏览器实现中，预计算所有 ( \beta_t )、( \alpha_t = 1 - \beta_t )、( \bar {\alpha}_t )，存为 Float32Array，避免实时计算开销。用户通过滑块调整 ( t )（0 到 T），实时调用 q_sample 生成 ( x_t )，Canvas 更新渲染。图像数据需归一化到 [-1, 1]，渲染时映射到 [0, 255]：img[j + c] = ((v * 0.5 + 0.5) * 255) | 0。
UI 设计聚焦交互性与直观性。核心组件包括：
- 滑块：总步数 T (50-2000，默认 100)，当前步 t (0-T)，去噪强度 (0.1-1.0，默认 0.5)，调度类型 (linear/cosine)。
- 按钮：Play Forward（动画加噪）、Play Reverse（从纯噪去噪）、Stop、重置种子、新基图像（合成图案如条纹、棋盘）。
- 可视化面板：主 Canvas 显示当前 (x_t)（分辨率 128x128 或 64x64 以保性能），旁侧曲线图 ( \beta_t ) vs t 和 ( \bar {\alpha}_t ) 轨迹，2D 潜在空间轨迹（模拟低维扩散）。
- 额外视图：切换图像帧序列、潜在轨迹（2D 点从数据分布扩散到噪声球再逆转）。
JavaScript 核心代码清单如下：
// 线性调度
function makeLinearBetaSchedule(T, betaStart = 1e-4, betaEnd = 0.02) {
const betas = new Float32Array(T);
for (let t = 0; t < T; t++) {
betas[t] = betaStart + (betaEnd - betaStart) * t / (T - 1);
}
return betas;
}
const { alphas, alphasCumprod } = computeAlphas(betas); // 累积计算
// 正向采样
function qSample(x0, t, alphasCumprod) {
const sqrtABar = Math.sqrt(alphasCumprod[t]);
const sqrtOneMinusABar = Math.sqrt(1 - alphasCumprod[t]);
const xt = x0.map((v, i) => sqrtABar * v + sqrtOneMinusABar * randn());
return xt;
}
// 反向采样 (oracle eps)
function pSample(xt, t, epsPred) { /* 使用公式实现 */ }
渲染使用 2D Canvas：ctx.putImageData(xtToImageData(xt, width, height), 0, 0)。动画用 requestAnimationFrame，步长 16ms。
性能优化至关重要。浏览器 JS 单线程，低分辨率起步（64x64），T≤200 实时滑块响应。WebGL 加速 tensor ops（自定义 shader 模拟 conv），或 TensorFlow.js 但增 bundle 大小。内存：预存所有 xt 帧（THW*3 Float32 ~ 100MB，高 T 时分批）。移动端降 T=50，禁用轨迹图。回滚策略：若 FPS<30，自动降分辨率或 T。
实际案例验证有效性。Diffusion-Explorer 项目支持 flow matching 和 denoising score matching，用户观察训练中样本轨迹变化，手绘自定义分布。该演示强调几何直觉：轨迹从数据云向噪声球弯曲，反向拉直。结合 Ollin 的 bare-bones 模型，浏览器生成 512x512 植物图像，迭代 100 步 blend 去噪预测，证明玩具实现即可教育价值。
工程落地参数总结：
| 参数 | 推荐值 | 作用 |
|---|---|---|
| T | 100-1000 | 总步数，平衡质量 / 速度 |
| β_start | 1e-4 | 初期慢噪 |
| β_end | 0.02 | 末期快噪 |
| Denoise strength | 0.5 | 反向混合比例 |
| Resolution | 128x128 | 浏览器友好 |
| FPS target | 60 | 滑块实时 |
监控点：渲染 FPS、内存使用、轨迹偏差（oracle 下为 0）。风险：高 T 卡顿（限 T<500），真实模型需 WebGPU。
通过此类演示，开发者可快速迭代噪声调度，调试生成 artifact，提升对 Stable Diffusion 等模型的理解。
资料来源：