用WebAssembly + WebGP构建浏览器内AI推理引擎：让隐私数据“不离端“

用WebAssembly + WebGP构建浏览器内AI推理引擎：让隐私数据"不离端"

为什么需要"浏览器内AI推理"？

现有AI产品（如ChatGPT、Claude）都是"云端推理"——用户数据需要上传到服务器，推理完成后再返回结果。这带来三个问题：

浏览器内推理的优势：

• 零延迟：数据不离开用户设备
• 零成本：不需要云端GPU
• 隐私友好：符合GDPR"数据本地化"要求

技术栈：ONNX Runtime Web + WebAssembly + WebGPU

ONNX Runtime Web： 微软开源的"跨平台推理引擎"，可以把PyTorch/TensorFlow模型转换成"浏览器可运行"的格式。

WebAssembly (WASM)： 让C++/Rust代码在浏览器里运行（接近原生速度）。

WebGPU： 浏览器里的GPU加速API（类似CUDA，但是标准Web API）。

实战：把GPT-2模型转换成"浏览器可运行"格式

第一步：训练或下载预训练模型

# 用PyTorch训练一个简单的文本生成模型（或下载GPT-2小版本）
import torch
from transformers import GPT2LMHeadModel, GPT2Tokenizer

# 下载GPT-2（小版本，117M参数）
model = GPT2LMHeadModel.from_pretrained('gpt2')
tokenizer = GPT2Tokenizer.from_pretrained('gpt2')

# 保存为PyTorch格式
torch.save(model.state_dict(), 'gpt2_pytorch.pth')

第二步：转换成ONNX格式

ONNX是"开放神经网络交换格式"——可以让模型在各种推理引擎上运行。

# convert_to_onnx.py
import torch
from transformers import GPT2LMHeadModel
import onnx
from onnxruntime.quantization import quantize_dynamic, QuantType

# 加载PyTorch模型
model = GPT2LMHeadModel.from_pretrained('gpt2')
model.eval() # 推理模式

# 创建dummy输入（用于导出）
dummy_input = torch.randint(0, 50257, (1, 128)) # batch=1, seq_len=128

# 导出为ONNX
torch.onnx.export(
model,
dummy_input,
'gpt2.onnx',
input_names=['input_ids'],
output_names=['logits'],
dynamic_axes={
'input_ids': {0: 'batch', 1: 'sequence'},
'logits': {0: 'batch', 1: 'sequence'}
},
opset_version=14
)

# 量化模型（减小体积，提升速度）
quantize_dynamic(
'gpt2.onnx',
'gpt2_quantized.onnx',
weight_type=QuantType.QUInt8
)

print('模型转换完成！')
print(f'原始大小: {os.path.getsize("gpt2.onnx") / 1024 / 1024:.2f} MB')
print(f'量化后大小: {os.path.getsize("gpt2_quantized.onnx") / 1024 / 1024:.2f} MB')

结果： GPT-2模型从500MB（PyTorch）降到120MB（ONNX量化后）——仍然很大，但浏览器可以懒加载。

第三步：用ONNX Runtime Web在浏览器里加载模型

// 安装ONNX Runtime Web
npm install onnxruntime-web

// src/inference.ts
import * as ort from 'onnxruntime-web';
import { GPT2Tokenizer } from './tokenizer'; // 需要把tokenizer转换成JS版本

class BrowserLLM {
private session: ort.InferenceSession | null = null;
private tokenizer: GPT2Tokenizer;

async init(modelUrl: string) {
// 1. 创建ONNX Runtime会话（选择WebGPU或WASM后端）
const options: ort.InferenceSession.SessionOptions = {
executionProviders: ['webgpu'], // 优先WebGPU，回退到wasm
graphOptimizationLevel: 'all',
};

try {
this.session = await ort.InferenceSession.create(modelUrl, options);
} catch (error) {
console.warn('WebGPU not available, falling back to WASM');
options.executionProviders = ['wasm'];
this.session = await ort.InferenceSession.create(modelUrl, options);
}

// 2. 加载tokenizer（通常需要单独转换）
this.tokenizer = await GPT2Tokenizer.fromPretrained('./tokenizer.json');
}

async generate(prompt: string, maxLength: number = 50): Promise<string> {
if (!this.session) throw new Error('Model not loaded');

// 3. Tokenize输入
let inputIds = this.tokenizer.encode(prompt);
const attentionMask = inputIds.map(() => 1);

// 4. 自回归生成（逐个token生成）
for (let i = 0; i < maxLength; i++) {
// 准备输入张量
const inputTensor = new ort.Tensor('int64', inputIds, [1, inputIds.length]);
const maskTensor = new ort.Tensor('int64', attentionMask, [1, attentionMask.length]);

// 5. 运行推理
const outputs = await this.session.run({
input_ids: inputTensor,
attention_mask: maskTensor,
});

// 6. 获取logits（下一个token的概率分布）
const logits = outputs.logits.data as Float32Array;
const nextTokenId = this.sampleToken(logits, inputIds.length);

// 7. 如果生成了结束token，停止
if (nextTokenId === this.tokenizer.eosTokenId) break;

// 8. 添加新token到输入
inputIds = […inputIds, nextTokenId];
attentionMask.push(1);
}

// 9. 解码生成的token
return this.tokenizer.decode(inputIds);
}

private sampleToken(logits: Float32Array, seqLen: number): number {
// 简化的采样（实际应该用temperature、top-k等）
const lastTokenLogits = logits.slice((seqLen – 1) * 50257, seqLen * 50257);
const maxIndex = lastTokenLogits.indexOf(Math.max(…lastTokenLogits));
return maxIndex;
}
}

第四步：在React组件里使用

// components/BrowserLLM.tsx
import { useState, useEffect } from 'react';
import { BrowserLLM } from '@/lib/browserLLM';

export function BrowserLLM() {
const [llm, setLLM] = useState<BrowserLLM | null>(null);
const [prompt, setPrompt] = useState('');
const [output, setOutput] = useState('');
const [loading, setLoading] = useState(false);

useEffect(() => {
const initLLM = async () => {
const model = new BrowserLLM();
// 从服务器下载模型（可以缓存到IndexedDB）
await model.init('/models/gpt2_quantized.onnx');
setLLM(model);
};

initLLM();
}, []);

async function handleGenerate() {
if (!llm || !prompt.trim()) return;

setLoading(true);
try {
const result = await llm.generate(prompt);
setOutput(result);
} catch (error) {
console.error('Inference failed:', error);
setOutput('生成失败，请重试');
} finally {
setLoading(false);
}
}

return (
<div className="max-w-2xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-4">浏览器内AI推理</h2>
<p className="text-gray-600 mb-4">数据不会上传到服务器</p>

<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="输入提示词…"
className="w-full p-3 border rounded mb-4"
rows={4}
/>

<button
onClick={handleGenerate}
disabled={loading || !llm}
className="bg-blue-600 text-white px-6 py-2 rounded disabled:bg-gray-300"
>
{loading ? '生成中…' : '生成'}
</button>

{output && (
<div className="mt-6 p-4 bg-gray-50 rounded">
<h3 className="font-semibold mb-2">生成结果：</h3>
<p>{output}</p>
</div>
)}
</div>
);
}

性能优化：让浏览器内推理"可用"

优化一：模型量化（INT8/INT4）

# 用ONNX Runtime的量化工具（更激进的量化）
from onnxruntime.quantization import quantize_dynamic, QuantType

# INT8量化（模型大小减小75%）
quantize_dynamic(
'gpt2.onnx',
'gpt2_int8.onnx',
weight_type=QuantType.QUInt8
)

# INT4量化（需要onnxruntime 1.16+，模型大小减小87.5%）
# 注意：INT4会有精度损失

优化二：模型分片（懒加载）

// 把大模型分成多个小块（如每个层一个文件）
// 只在需要时加载对应层

class ShardedModelLoader {
private loadedShards = new Set<number>();

async loadShard(shardId: number) {
if (this.loadedShards.has(shardId)) return;

const shard = await fetch(`/models/gpt2_shard_${shardId}.onnx`);
// … 加载逻辑
this.loadedShards.add(shardId);
}

async generate(prompt: string) {
// 逐层加载并推理
for (let layer = 0; layer < 12; layer++) {
await this.loadShard(layer);
// … 推理该层
}
}
}

优化三：用WebGPU加速

// 检查WebGPU可用性
async function checkWebGPU() {
if (!navigator.gpu) {
console.warn('WebGPU not supported');
return false;
}

try {
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) return false;

const device = await adapter.requestDevice();
console.log('WebGPU available:', device);
return true;
} catch (error) {
console.warn('WebGPU initialization failed:', error);
return false;
}
}

// 在ONNX Runtime里启用WebGPU
const session = await ort.InferenceSession.create(modelUrl, {
executionProviders: ['webgpu'],
webgpuDevice: await navigator.gpu.requestAdapter().then(a => a!.requestDevice())
});

实际测试：浏览器内推理 vs 云端推理

测试场景： 生成100个token

结论： 浏览器内推理目前还"不够快"（尤其是WASM模式），但WebGPU可以大幅改善。适合"隐私敏感"或"离线使用"场景。

部署：模型文件托管与缓存

方案一：从CDN下载模型

// 用Service Worker缓存模型文件（离线可用）
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/models/')) {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request).then((response) => {
return caches.open('models-v1').then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
}
});

方案二：用IndexedDB存储模型

// 下载模型后存到IndexedDB（避免重复下载）
async function cacheModelInIndexedDB(modelUrl: string) {
const cache = await indexedDB.open('llm-models', 1);

// 检查是否已缓存
const cached = await cache.get('gpt2');
if (cached) return cached;

// 下载并缓存
const response = await fetch(modelUrl);
const buffer = await response.arrayBuffer();

await cache.put('gpt2', buffer);
return buffer;
}

结论：浏览器内AI推理是"隐私优先AI"的未来

虽然目前性能不如云端GPU，但随着WebGPU的普及和模型量化技术的进步，"浏览器内AI推理"会越来越实用。

适合场景：✅ 隐私敏感应用（医疗、金融）✅ 离线应用（PWA）✅ 高并发场景（不需要云端GPU）

不适合场景：❌ 需要最新知识（模型是离线训练的）❌ 需要超大模型（如GPT-4级别，浏览器跑不动）

下一步： 从"一个小模型"（如DistilBERT做文本分类）开始尝试浏览器内推理——你会发现"隐私+零成本"的巨大价值。

这是为账号19tanjinxi生成的第2607/0726/9篇技术博客，主题：浏览器内AI推理引擎。