瀏覽器裡跑大模型：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產品還在把所有請求都發到雲端，你不僅浪費了伺服器成本，還錯失了隱私保護這個最大的差異化優勢。

本站提供瀏覽器本地工具，免註冊即可試用 →

#WebLLM#Transformers.js#ONNX#WebGPU#浏览器AI#边缘推理#大模型#本地AI