瀏覽器裡跑大模型：2026年WebLLM/Transformers.js/ONNX Web全棧實戰指南

2026年，大模型不再需要伺服器

GPT-4需要雲端API？那是2024年的思維。2026年，7B引數的模型已經可以在瀏覽器裡流暢執行，你的資料永遠不離開本地。

隱私 + 零成本 + 離線可用 = 瀏覽器端AI的三大殺手級優勢

瀏覽器端AI進化時間線

2023 Q4    WebLLM首發，Llama 2在瀏覽器跑出2 tok/s
2024 Q2    Transformers.js發布，Hugging Face生態打通
2024 Q4    WebGPU全面支援，推理速度提升5x
2025 Q2    ONNX Runtime Web支援WebGPU，企業級方案成熟
2025 Q4    量化技術突破，7B模型壓縮到3GB
2026 Q2    Gemma 3 4B瀏覽器端達到25 tok/s，可用性質變

三大框架定位

框架	定位	核心技術	適用場景
WebLLM	高效能LLM推理	WebGPU + MLCEngine	聊天、程式碼補全
Transformers.js	全棧ML推理	ONNX + WASM/WebGPU	NLP、視覺、音訊
ONNX Runtime Web	企業級推理引擎	ONNX + WebGPU/WASM	生產級部署

---

WebLLM — 瀏覽器端LLM的效能之王

核心架構

┌──────────────────────────────────────────────────┐
│                  應用層                            │
│   聊天介面 │ 程式碼補全 │ 文件摘要 │ 翻譯           │
├──────────────────────────────────────────────────┤
│              WebLLM Engine                        │
│   ChatModule │ Pipeline │ Tokenizer │ Scheduler   │
├──────────────────────────────────────────────────┤
│              MLCEngine（編譯最佳化層）              │
│   模型編譯 │ Kernel最佳化 │ 量化 │ 記憶體管理       │
├──────────────────────────────────────────────────┤
│              WebGPU Runtime                       │
│   Compute Shader │ GPU Buffer │ Pipeline State    │
└──────────────────────────────────────────────────┘

快速上手

import { CreateMLCEngine } from "@mlc-ai/web-llm";

const engine = await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC", {
  initProgressCallback: (progress) => {
    console.log(`模型載入: ${(progress.progress * 100).toFixed(1)}%`);
  },
});

const reply = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "你是一個有幫助的AI助手。" },
    { role: "user", content: "用TypeScript寫一個快速排序" },
  ],
  temperature: 0.7,
  max_tokens: 1024,
  stream: true,
});

for await (const chunk of reply) {
  process.stdout.write(chunk.choices[0]?.delta?.content || "");
}

支援模型與效能（2026年6月）

模型	引數量	量化後大小	推理速度（tok/s）	首次載入
Gemma 3 4B IT	4B	2.3GB	25	8s
Phi-4 Mini	3.8B	2.1GB	28	7s
Qwen2.5 3B	3B	1.8GB	32	6s
SmolLM2 1.7B	1.7B	1.0GB	45	4s
Qwen2.5 0.5B	0.5B	0.4GB	85	2s

---

Transformers.js — Hugging Face生態的瀏覽器延伸

核心優勢：模型生態最豐富

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

const classifier = await pipeline("text-classification", "Xenova/distilbert-base-uncased-finetuned-sst-2-english");
const result = await classifier("This browser AI is amazing!");
// [{ label: "POSITIVE", score: 0.9998 }]

支援的Pipeline型別

Pipeline	用途	範例模型
text-classification	情感分析	distilbert-sst2
question-answering	問答系統	distilbert-qa
summarization	摘要產生	distilbart-cnn
translation	翻譯	opus-mt-en-zh
image-classification	影像分類	vit-base-patch16
automatic-speech-recognition	語音辨識	whisper-tiny

---

ONNX Runtime Web — 企業級推理引擎

基礎使用

import ort from "onnxruntime-web";

async function runInference(modelPath: string, input: Float32Array) {
  const session = await ort.InferenceSession.create(modelPath, {
    executionProviders: ["webgpu", "wasm"],
    graphOptimizationLevel: "all",
  });

  const inputTensor = new ort.Tensor("float32", input, [1, input.length]);
  const results = await session.run({ input: inputTensor });
  return results.output.data;
}

Provider選擇策略

function getBestProvider(): string {
  if (navigator.gpu) return "webgpu";
  if (document.createElement("canvas").getContext("webgl2")) return "webgl";
  return "wasm";
}

---

效能基準：三大框架全面對比

LLM推理效能（Gemma 3 4B，4bit量化）

指標	WebLLM	Transformers.js	ONNX Runtime Web
推理速度（tok/s）	25	18	22
首次載入時間	8s	12s	10s
記憶體佔用	3.2GB	3.8GB	3.5GB
流式輸出	✅	✅	❌
OpenAI API相容	✅	❌	❌

---

生產級部署策略

降級策略

async function createEngineWithFallback() {
  if (navigator.gpu) {
    try { return await CreateMLCEngine("gemma-3-4b-it-q4f16_1-MLC"); }
    catch (e) { console.warn("WebGPU失敗，降級到小模型"); }
  }
  try { return await CreateMLCEngine("SmolLM2-1.7B-q4f16_1-MLC"); }
  catch (e) { console.warn("小模型也失敗，降級到API"); }
  return new APIFallbackEngine({ endpoint: "/api/chat" });
}

Service Worker離線支援

const MODEL_CACHE = "ai-models-v1";
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(MODEL_CACHE).then((cache) =>
      cache.addAll(["/models/smolm2-1.7b-q4.onnx", "/models/tokenizer.json"])
    )
  );
});

---

適用場景決策矩陣

你的需求？
├─ 聊天/對話式AI → ✅ WebLLM
├─ 多模態AI → ✅ Transformers.js
├─ 企業級生產部署 → ✅ ONNX Runtime Web
├─ 離線優先應用 → ✅ WebLLM + Service Worker
└─ 快速原型驗證 → ✅ Transformers.js

---

2026下半年趨勢

趨勢	說明
WebGPU全面普及	Safari 18+支援，瀏覽器AI不再有相容性問題
MoE模型瀏覽器化	Mixtral等稀疏模型可在瀏覽器執行
端側微調	LoRA權重在瀏覽器下載，個性化模型無需伺服器
AI SDK標準化	W3C Web AI API提案，瀏覽器原生AI能力

---

總結

1. 瀏覽器端AI已從「玩具」變成「工具」 — 4B模型25 tok/s，足夠日常使用
2. 三大框架各有側重 — WebLLM快、Transformers.js全、ONNX穩
3. 隱私是最大賣點 — 資料不離開瀏覽器，零服務端成本
4. 降級策略是關鍵 — WebGPU → 小模型 → 雲端API，保證可用性

2026年，如果你的AI產品還在把所有請求都發到雲端，你不僅浪費了伺服器成本，還錯失了隱私保護這個最大的差異化優勢。