如何用 WebGPU 在瀏覽器中執行 Gemma 4

如果你能在不安裝任何東西、不付 API 費用、不將資料送到伺服器的情況下執行強大的 AI 模型呢？有了 Gemma 4 和 WebGPU，你可以做到這一切——就在你的瀏覽器中。

本指南帶你了解在瀏覽器分頁中本機執行 Gemma 4 所需要知道的一切，從 WebGPU 是什麼到你能實際預期什麼樣的效能。

什麼是 WebGPU？

WebGPU 是網頁的新一代繪圖和計算 API。把它想成 WebGL 的繼任者，但從頭開始為現代 GPU 工作負載設計——包括 AI 推論。

與主要為 3D 繪圖建構的 WebGL 不同，WebGPU 提供：

直接 GPU 計算存取 — 在你的顯示卡上執行通用計算
更好的效能 — 較低的開銷，更接近原生 Vulkan/Metal/D3D12 效能
Shader storage buffers — 對於載入和處理大型 AI 模型權重至關重要

簡而言之，WebGPU 將你的瀏覽器變成有能力的 AI 推論引擎。

瀏覽器需求

並非所有瀏覽器都支援 WebGPU。以下是目前情況：

瀏覽器	WebGPU 支援	推薦？
Chrome 113+	完整支援	是（最佳效能）
Edge 113+	完整支援	是
Firefox	在 flag 後面	尚未穩定
Safari 18+	部分支援	實驗性

我們的建議：使用 Google Chrome（113 或更新版本）取得最可靠的體驗。Chrome 有最成熟的 WebGPU 實作和與 transformers.js（驅動瀏覽器中 Gemma 4 的函式庫）最好的相容性。

如何檢查 WebGPU 是否啟用

開啟你瀏覽器的開發者 console（F12 或 Cmd+Shift+J）並執行：

if (navigator.gpu) {
  const adapter = await navigator.gpu.requestAdapter();
  console.log("WebGPU supported!", adapter);
} else {
  console.log("WebGPU not supported in this browser.");
}

如果你看到 adapter 物件，就可以開始了。

立刻試試：Hugging Face 示範

體驗瀏覽器中 Gemma 4 最快的方式是透過官方社群示範：

Gemma 4 WebGPU Demo on Hugging Face

只需點擊連結、等模型載入，然後開始聊天。不用註冊、不用 API 金鑰、不用後端伺服器。

開啟示範時會發生什麼

你的瀏覽器下載模型權重（首次造訪需要一會兒）
模型在你瀏覽器的儲存中快取到本機
所有推論完全在你的 GPU 上執行——沒有東西離開你的裝置
後續造訪從快取載入快得多

運作原理：背後的 Transformers.js

示範由 transformers.js 驅動，這是 Hugging Face 的 JavaScript 函式庫，將 Transformers 生態系統帶到瀏覽器。

以下是簡化的架構：

使用者輸入 → Tokenizer (WASM) → 模型推論 (WebGPU) → Detokenizer → 回應

Transformers.js 處理：

模型載入 — 下載 ONNX 最佳化的模型權重並快取到 IndexedDB
Tokenization — 使用 WASM 編譯的 tokenizer 將文字轉為 tokens
GPU 推論 — 透過 WebGPU compute shaders 在你的 GPU 上執行前向傳遞
串流輸出 — 一次生成一個 token 以提供即時聊天體驗

如果你想建構自己的 WebGPU 驅動 Gemma 4 App，這是一個最小範例：

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

// 載入模型（首次執行時下載，之後快取）
const generator = await pipeline(
  "text-generation",
  "onnx-community/gemma-4-e2b-it-ONNX",
  { device: "webgpu" }
);

// 生成回應
const output = await generator("Explain quantum computing in simple terms:", {
  max_new_tokens: 256,
  temperature: 0.7,
});

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