ブラウザでLLMを動かす：2026年WebLLM/Transformers.js/ONNX Runtime Webガイド

2026年、大規模モデルにサーバーはもう不要

GPT-4にクラウドAPIが必要？それは2024年の考え方。2026年、7Bパラメータのモデルはブラウザでスムーズに実行され、データはローカルから出ません。

プライバシー + ゼロコスト + オフライン = ブラウザAIの3つのキラーフィーチャー

ブラウザAI進化タイムライン

2023 Q4    WebLLM初版、Llama 2がブラウザで2 tok/s
2024 Q2    Transformers.jsリリース、Hugging Faceエコシステム接続
2024 Q4    WebGPUフルサポート、推論速度5x向上
2025 Q4    量子化技術の突破、7Bモデルを3GBに圧縮
2026 Q2    Gemma 3 4Bがブラウザで25 tok/s達成

3フレームワーク比較

フレームワーク	重点	コア技術	最適用途
WebLLM	高性能LLM推論	WebGPU + MLCEngine	チャット、コード補完
Transformers.js	フルスタックML推論	ONNX + WASM/WebGPU	NLP、視覚、音声
ONNX Runtime Web	エンタープライズ推論	ONNX + WebGPU/WASM	本番運用

WebLLM — ブラウザLLMのパフォーマンス王

クイックスタート

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

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	QAシステム	distilbert-qa
summarization	要約	distilbart-cnn
translation	翻訳	opus-mt-en-zh
image-classification	画像分類	vit-base-patch16

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;
}

パフォーマンスベンチマーク

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" });
}

決定マトリックス

ニーズ？
├─ チャット/対話AI → ✅ WebLLM
├─ マルチモーダルAI → ✅ Transformers.js
├─ エンタープライズ本番 → ✅ ONNX Runtime Web
├─ オフラインファースト → ✅ WebLLM + Service Worker
└─ クイックプロトタイプ → ✅ Transformers.js

2026年下半期トレンド

トレンド	説明
WebGPU普及	Safari 18+対応、互換性問題解消
MoEモデルのブラウザ化	Mixtral等の疎モデルがブラウザで実行可能
オンデバイス微調整	LoRA重みをブラウザでDL、サーバー不要の個別化
W3C Web AI API	ブラウザネイティブAI機能の標準化

まとめ

ブラウザAIは「おもちゃ」から「ツール」へ — 4Bモデル25 tok/sで実用レベル
3フレームワーク3つの強み — WebLLM速い、Transformers.js豊富、ONNX安定
プライバシーが最大のセールスポイント — データはブラウザから出ない、サーバーコストゼロ
デグラデーション戦略が鍵 — WebGPU → 小モデル → クラウドAPIで可用性保証

2026年にAI製品がすべてのリクエストをクラウドに送っているなら、サーバーコストの無駄だけでなく、プライバシー保護という最大の差別化優位性を見逃している。