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

前端跑模型？WebGPU + Transformer.js 实战：在浏览器里直接运行 Whisper 语音识别，无需后端服务器

news 2026/5/12 18:16:03

😲 前言：为什么 WebAI 是下一个风口？

传统的 AI 应用架构是Client-Server模式。哪怕只是识别一句“你好”，音频也要飞越千山万水传到服务器。
而WebAI (WebAssembly + WebGPU)将计算移到了Edge (边缘端)。

优势极其残暴：

零服务器成本：白嫖用户的显卡算力，老板看了直呼内行。
绝对隐私：数据根本不出浏览器，特别适合医疗、金融等敏感场景。
零延迟：没有网络 RTT，本地推理，即刻响应。

🏗️ 一、核心技术栈：浏览器里的“Hugging Face”

我们要用到的神器是Transformer.js。
它是 Hugging Face 的 JavaScript 移植版，旨在让 Python 的transformers库在 Node.js 和浏览器中无缝运行。配合 ONNX Runtime 和 WebGPU，它能跑出接近原生的速度。

架构对比图 (Mermaid):

🛠️ 二、实战开发：3 步搞定

我们将使用Vite + React(或者纯原生 JS) 来搭建。

1. 安装依赖

npminstall@xenova/transformers

注：@xenova/transformers是目前最流行的维护版本。

2. 关键点：使用 Web Worker (必看！)

在主线程跑 AI 模型会阻塞 UI 渲染，导致页面“卡死”。必须把推理逻辑放在Web Worker中。

**文件：worker.js**

import{pipeline}from'@xenova/transformers';// 单例模式，防止重复加载模型classMyPipeline{statictask='automatic-speech-recognition';staticmodel='Xenova/whisper-tiny';// 使用 tiny 模型，体积小(约40MB)staticinstance=null;staticasyncgetInstance(progress_callback=null){if(self.instance===null){// 加载 pipelineself.instance=awaitpipeline(self.task,self.model,{progress_callback,// 如果浏览器支持 WebGPU，这里可以开启加速// device: 'webgpu',// dtype: 'fp32', // 或 'q8' 量化版});}returnself.instance;}}// 监听主线程消息self.addEventListener('message',async(event)=>{const{audio}=event.data;// 1. 获取模型实例lettranscriber=awaitMyPipeline.getInstance((data)=>{// 回传加载进度self.postMessage({status:'loading',data});});// 2. 开始识别self.postMessage({status:'start'});// Whisper 接受浮点数数组作为音频输入letoutput=awaittranscriber(audio,{top_k:0,do_sample:false,language:'chinese',// 强制中文，也可 autochunk_length_s:30,stride_length_s:5,});// 3. 回传结果self.postMessage({status:'complete',output});});

3. 主界面逻辑 (React 示例)

在主线程，我们需要处理录音，并将音频数据转换为模型能接受的格式（Float32Array）。

**文件：App.jsx**

import { useEffect, useRef, useState } from 'react'; function App() { const [result, setResult] = useState(''); const [status, setStatus] = useState('准备就绪'); const worker = useRef(null); useEffect(() => { // 初始化 Worker worker.current = new Worker(new URL('./worker.js', import.meta.url), { type: 'module', }); worker.current.onmessage = (event) => { const { status, data, output } = event.data; if (status === 'loading') { setStatus(`模型加载中... ${data.file} ${Math.round(data.progress)}%`); } else if (status === 'complete') { setStatus('识别完成'); setResult(output.text); } }; }, []); const startRecord = async () => { setStatus('正在录音...'); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); const audioChunks = []; mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data); mediaRecorder.onstop = async () => { const audioBlob = new Blob(audioChunks); const arrayBuffer = await audioBlob.arrayBuffer(); const audioContext = new AudioContext(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); // 获取左声道数据 (Whisper 只需单声道) const audioData = audioBuffer.getChannelData(0); setStatus('正在推理...'); // 发送给 Worker worker.current.postMessage({ audio: audioData }); }; mediaRecorder.start(); setTimeout(() => mediaRecorder.stop(), 3000); // 录制 3 秒测试 }; return ( <div> <h1>WebAI 语音识别</h1> <p>状态: {status}</p> <button onClick={startRecord}>🎤 点击录音 3 秒</button> <div style={{ marginTop: 20, padding: 10, border: '1px solid #ccc' }}> {result || '等待识别结果...'} </div> </div> ); } export default App;

🚀 三、性能实测与坑点

当你点击“录音”后，神奇的事情发生了：

第一次运行时，浏览器会从 Hugging Face 下载whisper-tiny量化模型（约 40MB），保存在 Cache Storage 中。
后续运行时，无需下载。
在 M1 MacBook Air 上，识别 3 秒语音仅需200ms左右。
在带有独显的 Windows PC 上开启 WebGPU 后，速度更是起飞。

⚠️ 避坑指南：

SharedArrayBuffer 问题：ONNX Runtime 多线程需要开启 HTTP 响应头Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp。如果报错，请在 Vite 配置里加上这两个 Header。
模型大小：推荐使用quantized(量化) 版本的模型，精度损失很小，但体积和内存占用减少一半。
兼容性：WebGPU 目前在 Chrome/Edge 113+ 上支持最好，Safari 还在追赶中（可回退到 WebAssembly 模式）。