WASM 上的 AI 推理：ONNX Runtime Web、WASI-NN 与边缘模型部署

云端 GPU：延迟高（网络）、成本高、数据出域
原生 SDK：需按平台分别编译分发、安装
WASM    ：一套 .wasm + 少量 JS 胶水 → 处处运行

适合：小到中型模型（<100MB）、推理而非训练、
      延迟/隐私敏感、需跨平台分发
不适合：大模型训练、超大 LLM（百GB 参数，需流式/分片时另议）

ONNX Runtime Web 分层：
  JS API（onnxruntime-web）→ 调度器 → 后端执行器
后端（按可用性与性能选择）：
  1. WebAssembly（CPU 通用，最兼容）
  2. WebAssembly + SIMD（CPU 向量化，显著提速）
  3. WebGPU（GPU 加速，需浏览器支持）
  4. WASM + threads（多线程推理，需 COOP/COEP）

// 用 WASM + SIMD 后端
import * as ort from 'onnxruntime-web';

const session = await ort.InferenceSession.create('./model.onnx', {
  executionProviders: ['wasm'],
  graphOptimizationLevel: 'all',     // 图优化
  enableCpuMemArena: true,
  enableMemPattern: true,
});
// SIMD 自动启用：wasm + simd 变体按 capability 选择

执行层加速阶梯：
  WASM            ：基准（x1）
  + SIMD          ：向量化，2-4x（大部分推理算子受益）
  + threads       ：多核并行，可再 2-4x（需 SharedArrayBuffer）
  + WebGPU        ：GPU 并行，进一步提速（矩阵类算子）
内存限制也关键：ORT Web 支持 onnx 权重外部数据文件

# PyTorch → ONNX
import torch

model.eval()
dummy = torch.randn(1, 3, 224, 224)
torch.onnx.export(model, dummy, 'model.onnx',
                  input_names=['input'], output_names=['output'],
                  opset_version=17, dynamic_axes={'input': {0: 'batch'}})

量化是 WASM 推理的关键优化：
  FP32 → FP16 / INT8：体积减半至 1/4，速度提升
  WASM CPU 上 INT8 算子往往比 FP32 快且省内存

onnxruntime 量化：
  python -m onnxruntime.quantization
  QuantizationMode.IntegerOps / QDQ
动态量化：激活仍 FP32，仅权重 INT8（无精度损失显著）

1. 权重外部化：model.onnx + model.onnx.data（拆分大权重）
2. 裁剪/蒸馏：在训练阶段减小模型
3. 图优化：graphOptimizationLevel=all 移除冗余算子
4. 删除 metadata 与调试信息
目标：<10MB 的模型适合浏览器秒级加载

<script type="module">
import * as ort from 'onnxruntime-web';

// 1. 加载模型
const session = await ort.InferenceSession.create(
  './model.onnx',
  { executionProviders: ['wasm'], graphOptimizationLevel: 'all' },
);

// 2. 准备输入（Tensor）
const input = new Float32Array(1 * 3 * 224 * 224);
// ... 填充预处理后的像素数据
const feeds = {
  input: new ort.Tensor('float32', input, [1, 3, 224, 224]),
};

// 3. 推理
const results = await session.run(feeds);
const output = results.output.data;   // Float32Array 概率分布

// 4. 后处理：argmax 取类别
let maxIdx = 0;
for (let i = 1; i < output.length; i++) if (output[i] > output[maxIdx]) maxIdx = i;
console.log('预测类别索引:', maxIdx);
</script>

async function classifyFrame(video) {
  // 从 video 绘制到 canvas → getImageData → 预处理
  const data = preprocess(video);              // 归一化到 [-1,1]
  const res = await session.run({ input: new ort.Tensor('float32', data, [1,3,224,224]) });
  updateUI(softmax(res.output.data));          // 展示 top5
  requestAnimationFrame(() => classifyFrame(video));  // 循环
}

1. 懒加载：进入页面后再 fetch wasm/onnx（避免阻塞首屏）
2. 缓存：wasm 二进制用 Cache API 缓存（二次访问秒开）
3. 预加载小模型：内嵌 base64 或 import.meta.url 预取
4. 加载进度 UI：fetch 流式 + 进度条
5. 后端降级：无 WebGPU 自动回退 WASM

WASI-NN：把「神经网络推理」标准化为 WASI 接口
  - 模型加载 / 推理 / 卸载 的统一 API
  - 后端可插拔：OpenVINO、ONNX、PyTorch、TensorFlow
  - 让同一 WASM 模块在不同运行时跑不同推理后端

// Rust 侧通过 wasi-nn crate 调用
use wasi_nn::{GraphBuilder, GraphEncoding, ExecutionTarget, Backend};

let graph = GraphBuilder::new(GraphEncoding::Onnx, ExecutionTarget::Cpu)
    .build_from_bytes(&model_bytes)?;          // 加载模型
let tensor = Tensor { dimensions: &[1, 3, 224, 224], r#type: TensorType::F32, data };
let context = graph.init_execution_context()?; // 建立执行上下文
context.set_input(0, tensor)?;                 // 设置输入
context.compute()?;                            // 执行推理
let out = context.get_output(0)?;              // 取输出

WASI-NN 现状（2026）：
  已被 Bytecode Alliance 采纳为候选标准
  主要实现在 WasmEdge / Wasmtime(研究) 等运行时
  适合：serverless 推理、边缘推理、跨运行时统一

对比 ORT Web：
  WASI-NN：偏服务器端、后端可插拔（OpenVINO 等）
  ORT Web：偏浏览器、执行器自动选择

// Cloudflare Worker 跑 WASM 推理（WASI-NN / 自建 ORT）
import { AutoRouter } from 'itty-router';
const router = AutoRouter();

router.post('/classify', async (req) => {
  const image = await req.arrayBuffer();
  const scores = await runModel(image);      // WASM 推理
  return Response.json({ topClass: argmax(scores) });
});

export default router;

边缘节点就近推理：
  - 延迟：用户→边缘节点（几十 ms，比回源中心近）
  - 数据本地化：图片/文本不出区域
  - 弹性：无冷启动（WASM 微秒级启动）
  - 多租户隔离：每 Worker 独立沙箱

1. 模型打包进 Worker bundle（或绑定 Durable Object 缓存）
2. 限制模型体积（边缘节点内存/请求体配额）
3. 结果缓存（相同输入 → 命中边缘 KV）
4. 拆分「前端推理」与「中心微调」：小模型边缘、大模型中心

// 目标检测：前处理 NMS + 框绘制
const res = await session.run({ input: tensor });
const boxes = postprocessNMS(res.outputs);   // 解码 + NMS
drawBoxes(canvas, boxes);                     // 叠画到视频帧

1. session 单例复用（创建开销大，勿每次新建）
2. rAF 节流推理（不阻塞主线程，用 web worker）
3. 移动端降级：低端机自动减小输入尺寸
4. 能耗：WebGPU/多线程在移动端权衡功耗

1. 量化：INT8 权重 → 体积 1/4、推理更快
2. 图优化：graphOptimizationLevel=all
3. 线程：开启 threads + SIMD（先测 COEP 头）
4. 输入尺寸：动态 batch → 固定 batch（减调度开销）
5. 内存复用：Tensor 复用，避免反复分配
6. 算子裁剪：移除未用算子减小二进制
7. 预热：首帧前跑一次小输入预热 JIT

性能预算（实时场景）：
  单帧推理 < 16ms（60fps）或 < 100ms（交互可接受）
用 Performance API 测量：session.run 耗时 / 传输 / 预处理
瓶颈分析：预处理（JS 侧）常被忽略 → 也搬进 WASM 或 worker

混合架构：
  前端小模型（分类/检测）→ ORT Web 本地跑
  复杂请求                 → 边缘 WASM 推理
  超大模型                 → 中心 GPU 集群
按「延迟/隐私/模型大小」分层选端