当前位置：首页 > news >正文

WebAssembly AI 数据隐私：用户数据不出浏览器，推理在本地完成的架构

news 2026/7/23 19:38:54

WebAssembly AI 数据隐私：用户数据不出浏览器，推理在本地完成的架构

一、为什么 AI 推理要搬到浏览器端？

现在大多数 AI 应用都是"用户发数据→云端推理→返回结果"。这个流程的隐私问题很明显：

对于医疗问诊、财务分析、代码审查等场景，用户输入本身就高度敏感。你愿意把自己的病历、财务报表、核心代码发给第三方 AI API 吗？

用 Rust 编译到 WebAssembly，配合 WebGPU 加速，可以在浏览器里跑一个完整的 ONNX 推理引擎。数据从输入到输出，全程不离开用户设备。

二、Rust → WASM 的技术栈：怎么把模型塞进浏览器？

核心技术栈：

层级	技术选型	作用
模型格式	ONNX（开放神经网络交换格式）	跨框架的模型交换标准
推理引擎	ort（ONNX Runtime for Rust）	高性能推理，支持 CPU/CUDA/WebGPU
编译目标	wasm32-unknown-unknown	Rust 编译到 WebAssembly
前端绑定	wasm-bindgen	JS ↔ WASM 互操作
量化	ONNX Runtime 量化工具	将 float32 量化到 int8，模型缩小 4 倍

2.1 Rust 推理引擎核心代码

use ort::{GraphOptimizationLevel, Session, session::SessionOutputs}; use wasm_bindgen::prelude::*; /// 浏览器端 AI 推理引擎 /// 编译为 WASM 后在浏览器主线程或 Web Worker 中运行 #[wasm_bindgen] pub struct InferenceEngine { session: Session, // ONNX 推理会话，持有已加载的模型 } #[wasm_bindgen] impl InferenceEngine { /// 从字节数组加载 ONNX 模型 /// model_bytes: 从网络下载的模型文件二进制数据 #[wasm_bindgen(constructor)] pub fn new(model_bytes: &[u8]) -> Result<InferenceEngine, JsValue> { // 创建 ONNX 推理会话，开启图优化以提升性能 let session = Session::builder() .map_err(|e| JsValue::from_str(&e.to_string()))? // 错误转 JS 异常 .with_optimization_level(GraphOptimizationLevel::Level3) // 最高级别图优化 .map_err(|e| JsValue::from_str(&e.to_string()))? .commit_from_memory(model_bytes) // 从内存加载模型（不从文件系统） .map_err(|e| JsValue::from_str(&e.to_string()))?; Ok(InferenceEngine { session }) } /// 执行推理：输入文本，输出分类结果 pub fn infer(&self, input_text: &str) -> Result<String, JsValue> { // 1. Tokenize：将文本转为模型能理解的数字张量 // 注意：所有处理都在浏览器内存中进行，不发送到外部 let input_ids = self.tokenize(input_text); // 2. 创建 ONNX 输入张量 let input_tensor = ort::value::Tensor::<i64>::from_array(( [1, input_ids.len() as i64], // 形状：[batch_size=1, sequence_length] input_ids, // 实际的 token IDs )) .map_err(|e| JsValue::from_str(&e.to_string()))?; // 3. 执行推理（同步/异步取决于 backend） let outputs: SessionOutputs = self.session .run(ort::inputs!["input_ids" => input_tensor]?) // 喂入输入 .map_err(|e| JsValue::from_str(&e.to_string()))?; // 4. 解析输出张量，获取分类结果 let output: &ort::value::DynTensor<f32> = outputs["logits"] .try_extract() // 安全提取输出张量 .map_err(|e| JsValue::from_str(&e.to_string()))?; // 5. Softmax + argmax 得到最终分类 let result = self.decode_output(output); Ok(result) } }

关键安全点：

commit_from_memory：模型从内存加载，没有文件系统访问
所有张量数据都在 WASM 线性内存中，JS 端只能拿到最终的字符串结果
没有任何 HTTP 请求发出去，输入数据 100% 留在浏览器

2.2 前端集成：Web Worker 里跑推理

/// 在 Web Worker 中运行的推理 worker /// 避免阻塞 UI 主线程 #[wasm_bindgen] pub async fn run_in_worker(model_bytes: Vec<u8>, input: String) -> String { // 使用 web-sys 在 Worker 线程中创建推理引擎 let engine = InferenceEngine::new(&model_bytes) .expect("模型加载失败，请检查模型格式"); engine.infer(&input) .unwrap_or_else(|e| format!("推理错误: {:?}", e)) }

JavaScript 侧的使用：

// 前端 JS 代码 import init, { InferenceEngine } from './pkg/ai_inference.js'; async function main() { await init(); // 初始化 WASM 模块 // 下载模型（可缓存到 IndexedDB） const modelResponse = await fetch('/models/text-classifier.onnx'); const modelBytes = new Uint8Array(await modelResponse.arrayBuffer()); // 创建推理 worker const worker = new Worker('./inference_worker.js'); worker.postMessage({ modelBytes, input: userInput }); // 接收结果——模型字节和用户输入都只存在于浏览器内存 worker.onmessage = (e) => { document.getElementById('result').textContent = e.data; }; }