如何通过 WebGPU 在浏览器中运行 Gemma 4

想象一下：不用安装任何软件，不用注册账号，不用花钱调 API，打开浏览器就能跟一个强大的 AI 模型对话——而且所有数据都不会离开你的电脑。

这就是 Gemma 4 + WebGPU 能做到的事情。本文将带你从零了解如何在浏览器中运行 Gemma 4，包括原理、操作步骤和实际性能表现。

WebGPU 是什么？

WebGPU 是新一代的 Web 图形与计算 API，可以理解为 WebGL 的继任者，但它从设计之初就考虑了现代 GPU 的通用计算能力——包括 AI 推理。

相比 WebGL，WebGPU 的核心优势在于：

直接访问 GPU 计算能力 —— 不仅能渲染画面，还能执行通用计算任务
更低的调用开销 —— 性能接近原生的 Vulkan/Metal/D3D12
支持 Shader Storage Buffer —— 这是加载和处理大规模 AI 模型权重的关键

简单来说，WebGPU 让你的浏览器变成了一台 AI 推理引擎。

浏览器要求

目前并非所有浏览器都完整支持 WebGPU：

浏览器	WebGPU 支持状态	推荐？
Chrome 113+	完整支持	推荐（性能最佳）
Edge 113+	完整支持	推荐
Firefox	需手动开启 flag	暂不稳定
Safari 18+	部分支持	实验性

建议使用 Google Chrome（113 版本或更高）。Chrome 的 WebGPU 实现最成熟，与 transformers.js 的兼容性也最好。

检查你的浏览器是否支持 WebGPU

打开浏览器开发者工具（F12 或 Cmd+Shift+J），运行以下代码：

if (navigator.gpu) {
  const adapter = await navigator.gpu.requestAdapter();
  console.log("WebGPU 已支持！", adapter);
} else {
  console.log("当前浏览器不支持 WebGPU");
}

如果看到 adapter 对象输出，说明你的浏览器已经就绪。

立即体验：Hugging Face 在线 Demo

想最快体验浏览器里的 Gemma 4？直接打开这个链接：

Gemma 4 WebGPU 在线演示

点击链接，等待模型加载完成，就可以开始对话了。无需注册，无需 API 密钥，无需任何后端。

打开 Demo 后发生了什么？

浏览器开始下载模型权重（首次加载需要较长时间）
模型被缓存到浏览器的本地存储中
所有推理计算都在你的 GPU 上完成——数据不会离开你的设备
之后再次访问时，模型从缓存加载，速度快很多

技术原理：Transformers.js

这个 Demo 底层使用的是 transformers.js，这是 Hugging Face 推出的 JavaScript 版 Transformers 库，把整个 AI 推理流程搬到了浏览器里。

整体架构如下：

用户输入 → 分词器 (WASM) → 模型推理 (WebGPU) → 解码器 → 输出回复

Transformers.js 负责的工作包括：

模型加载 —— 下载 ONNX 格式的优化模型并缓存到 IndexedDB
分词处理 —— 使用 WASM 编译的分词器将文本转换为 token
GPU 推理 —— 通过 WebGPU 计算着色器在 GPU 上执行前向传播
流式输出 —— 逐 token 生成，实现实时对话效果

如果你想自己构建一个基于 WebGPU 的 Gemma 4 应用，下面是一个最简示例：

import { pipeline } from "@huggingface/transformers";

// 加载模型（首次运行会下载，之后从缓存读取）
const generator = await pipeline(
  "text-generation",
  "onnx-community/gemma-4-e2b-it-ONNX",
  { device: "webgpu" }
);

// 生成回复
const output = await generator("用简单的语言解释量子计算：", {
  max_new_tokens: 256,
  temperature: 0.7,
});

console.log(output[0].generated_text);