WebLLM: ハードウェアアクセラレーションを備えたブラウザ内 LLM インフェレンスエンジン

WebLLM は、WebGPU を用いて言語モデルの推論を直接 Web ブラウザに持ち込む高性能なエンジンです。サーバーなしで動作し、OpenAI API と完全互換性を確保しながらローカル環境のオープンソースモデルを利用できます。

概要と主な機能

• ブラウザ内推論: サーバーサイド処理なしで、強力な LLM 演算を直接 Web ブラウザ内で実行可能。
• OpenAI API 完全互換性: ストリーミング、JSON モード、logit レベルの制御など、あらゆる OpenAI アプリケーションにシームレスに統合可能。
• 構造化 JSON 生成: 最先端の WebAssembly パートによる JSON モードサポートで、カスタム JSON スキーマでの出力が可能。
• 豊富なモデルサポート: Llama, Phi, Gemma, Mistral, Qwen など多様な AI タスクに適したモデルをネイティブ対応。
• カスタムモデル統合: MLC フォーマットのカスタムモデルを簡単に展開可能で、柔軟なモデル利用を実現。
• プラグ＆プレイ統合: NPM/Yarn パッケージマネージャーまたは CDN を介して容易に導入可能。
• ストリーミング対応: チャットボットなどでのリアルタイム出力生成をサポート。
• Web Worker & Service Worker 最適化: 計算を別スレッドへオフロードし、UI パフォーマンスを最大化。
• Chrome Extension 対応: ブラウザ機能拡張の構築をサポート。

組み込みモデル

利用可能なモデルの詳細は MLC Models を参照してください。現在主なサポートモデルは以下の通りです：

• Llama: Llama 3, Llama 2, Hermes-2-Pro-Llama-3
• Phi: Phi 3, Phi 2, Phi 1.5
• Gemma: Gemma-2B
• Mistral: Mistral-7B-v0.3, Hermes-2-Pro-Mistral-7B など
• Qwen (通義千問): Qwen2 0.5B, 1.5B, 7B

より多くのモデルが必要な場合は、Custom Models を確認するか、新規モデルの依頼を行います。

スタートガイド：インストールと設定

WebLLM はモジュラー設計であり、あらゆる UI コンポーネントに接続可能です。

インストール方法

パッケージマネージャー

npm install @mlc-ai/web-llm
# または
yarn add @mlc-ai/web-llm
pnpm install @mlc-ai/web-llm

JavaScript でのインポート:

import * as webllm from "@mlc-ai/web-llm";
// または必要なものだけ
import { CreateMLCEngine } from "@mlc-ai/web-llm";

CDN デリバリー (jsdelivr など)

import * as webllm from "https://esm.run/@mlc-ai/web-llm";
// または動的に
const webllm = await import("https://esm.run/@mlc-ai/web-llm");

MLCEngine の作成と使い方

エンジンインスタンスの作成

CreateMLCEngine()

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

const initProgressCallback = (initProgress) => {
  console.log(initProgress);
};

const selectedModel = "Llama-3.1-8B-Instruct-q4f32_1-MLC";

const engine = await CreateMLCEngine(
  selectedModel,
  { initProgressCallback: initProgressCallback }
);

別々の初期化と読み込みも可能：

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

const engine = new MLCEngine({
  initProgressCallback: initProgressCallback,
});
await engine.reload(selectedModel);

キャッシュバックエンドポリシー設定

AppConfig.cacheBackend

1. "cache"

   : ブラウザキャッシュ API (デフォルト)

2. "indexeddb"

   : ブラウザ IndexedDB

3. "opfs"

   : ブラウザオリジンプライベートファイルシステム (OPFS)

4. "cross-origin"

   : Chrome Cross-Origin Storage API 拡張バックエンド

例：

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

const appConfig = { ...prebuiltAppConfig, cacheBackend: "opfs" };
const engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f32_1-MLC", {
  appConfig,
});

注意事項:

• OPFS:

  appConfig.opfsAccessMode

  を

  "async"

  (デフォルト)、

  "auto"

  、または

  "sync"

  に設定します。
• Cross-Origin: 互換のある拡張機能のインストールが必要です。

チャット完了とストリーミング

非同期チャット生成

const messages = [
  { role: "system", content: "You are a helpful AI assistant." },
  { role: "user", content: "Hello!" },
];

const reply = await engine.chat.completions.create({
  messages,
});
console.log(reply.choices[0].message);

ストリーミング対応

stream: true

const chunks = await engine.chat.completions.create({
  messages,
  stream: true, 
  stream_options: { include_usage: true },
});

let reply = "";
for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content || "";
  console.log(reply);
}

高度な使い方：ワーカーの活用

パフォーマンス最適化のため、重い計算を別のスレッド（Web Worker / Service Worker）へオフロードできます。

Dedicated Web Worker

// worker.ts
import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm";
const handler = new WebWorkerMLCEngineHandler();
self.onmessage = (msg) => {
  handler.onmessage(msg);
};

Service Worker の活用

モデルのキャッシュ保持とオフライン動作を最適化します。

// sw.ts
import { ServiceWorkerMLCEngineHandler } from "@mlc-ai/web-llm";
new ServiceWorkerMLCEngineHandler();
console.log("Service Worker is ready");

Chrome Extension

examples/chrome-extension

OpenAI 完全互換性とセキュリティ

• 関数呼び出し (開発中):

  tools

  と

  tool_choice

  を使用した高度な機能への対応。
• 完全性検証 (Integrity Verification): SRI ハッシュを使用して、ダウンロードされたモデルファイルの改ざんを検出可能。

完全性検証の設定例：

const appConfig = {
  model_list: [{
    model: "https://huggingface.co/mlc-ai/Llama-3.2...",
    integrity: {
      config: "sha256-<hash>",
      model_lib: "sha256-<hash>",
      tokenizer: { "tokenizer.json": "sha256-<hash>" },
      onFailure: "error", // "error" または "warn"
    },
  }],
};

SHA-256 ハッシュの生成コマンド：

openssl dgst -sha256 -binary <file> | openssl base64 -A | sed 's/^/sha256-/'

カスタムモデルの統合

MLC フォーマットのカスタムモデルを WebLLM で利用したい場合、以下の要素を用意してください。

• model

  : モデルアーティファクト（ウェイトとメタデータ）への URL。

• model_lib

  : 計算を加速するための WebAssembly ライブラリ (WASM) への URL。

const appConfig = {
  model_list: [{
    "model": "/url/to/my/llama",
    "model_id": "MyLlama-3b-v1-q4f32_0",
    "model_lib": "/url/to/myllama3b.wasm",
  }]
};

const engine = await CreateMLCEngine("MyLlama-3b...", { appConfig });

ソースコードからの構築 (開発者向け)

TVMjs のソース構築が必要な場合

npm パッケージが利用できない環境や、最新機能の検証時に必要です。

1. Emscripten のインストール:

   emsdk

   を最新バージョン (

   3.1.56

   など) にインストールし、環境変数を設定してください。
2. 依存関係の設定:

   tvm-unity

   リポジトリを

   --recursive

   フラグ付きでクローンします。

   git clone https://github.com/mlc-ai/relax 3rdparty/tvm-unity --recursive
   

3. ビルド実行:

   npm install
   npm run build
   

TVMjs のソース構築手順 (詳細)

Emscripten インストール

1. emsdk

   をインストールし、

   source path/to/emsdk_env.sh

   で環境を設定。

2. emcc

   コマンドが動作するか確認。
   • 問題がある場合は

     emsdk install 3.1.56

     のような安定版を使用することを推奨します。

パッケージ構成の変更

package.json

• "@mlc-ai/web-runtime"

  をローカルパス (

  file:./tvm_home/web

  ) に変更。

• $TVM_SOURCE_DIR

  を定義していない場合は、

  relax

  リポジトリをクローンしてください。

再構築の確認

cd examples/get-started
rm -rf node_modules dist package-lock.json .parcel-cache
npm install
npm start

リンクと貢献

• デモアプリ: WebLLM Chat
• Stable Diffusion: Web Stable Diffusion
• MLC-LLM: ネイティブランタイムの実行についてはこちらを参照。

引用

@misc{ruan2026webllmhighperformanceinbrowserllm,
      title={WebLLM: A High-Performance In-Browser LLM Inference Engine},
      author={Charlie F. Ruan and Yucheng Qin and others},
      year={2026},
      eprint={2412.15803},
      archivePrefix={arXiv},
      primaryClass={cs.LG},
      url={https://arxiv.org/abs/2412.15803},
}