ブラウザで動作するLLM：WebLLMの解説と入門ガイド

LLMとは：クラウドからローカルへの流れ

LLM（大規模言語モデル）は、ChatGPTやClaudeなどの対話型AIサービスとして広く知られています。これらのモデルは主にクラウド上で動作し、ユーザーはAPIを通じてアクセスします。その理由は技術的な制約にあります。LLMの実行には膨大なGPUリソースが必要となるため、一般的なデバイスでの処理が困難だからです。

しかし近年、個人情報保護やプライバシー確保の重要性が高まり、ローカル環境で動作するLLMへの需要が増加しています。この潮流を受けて、AndroidやiOSなどのモバイルOSも、システムレベルでLLM機能の提供を開始しています。ローカル環境でLLMを実行できれば、インターネット接続がない状況でも利用できるほか、機密データをクラウドに送信する心配がなくなります。

この記事では、ブラウザ上でLLMを実行できる「WebLLM」の特徴と使い方を詳しく解説します。

WebLLMとは：ブラウザで動くLLMの仕組み

WebLLMは、ウェブブラウザ上でLLMを動作させることができるJavaScriptライブラリです。利用可能なLLMモデルが複数用意されており、ユーザーが実行時に必要なモデルをダウンロードして利用する仕組みになっています。

技術的特徴

WebLLMは以下の技術的基盤に支えられています。

WebAssembly（Wasm）の活用：C/C++などで書かれたコードをブラウザ上で高速に実行するための技術を採用
WebGPU APIの利用：ブラウザからGPUに直接アクセスすることで、高速な計算処理を実現
キャッシュストレージの活用：一度ダウンロードしたモデルはブラウザのキャッシュストレージに保存され、再利用時のダウンロード時間を短縮

注意点として、LLMモデルは非常にサイズが大きいものが多く（通常数百MB〜1GB程度）、ブラウザのキャッシュストレージをかなり消費します。デバイスのストレージ容量に余裕がない場合は注意が必要です。

WebLLMの主な特徴と利点

WebLLMの最大の特徴は、インターネットブラウザさえあれば利用できる点です。

オフライン環境での利用が可能：一度モデルをダウンロードすれば、インターネット接続がなくても利用できる
プライバシーの確保：入力データがサーバーに送信されないため、機密情報の取り扱いも安心
導入の容易さ：複雑なインストール作業が不要で、ウェブページにスクリプトを埋め込むだけで利用可能

性能と制約

WebLLMの実行速度は、クラウドベースのLLMサービスと比較すると一般的に遅くなります。高性能なGPUを搭載したデバイスでは比較的スムーズに動作しますが、それでもクラウドサービスの処理速度には及びません。

LLMとしての応答品質は、選択するモデルによって大きく異なります。MLC Modelsのページで確認できるように、1.7Bから32Bパラメータまでの様々なサイズのモデルが提供されています。

一般的には、モデルのパラメータ数が多いほど（つまりサイズが大きいほど）応答の質が向上します。ただし、大きなモデルほどメモリ消費量も増加し、デバイスへの負荷も高まるため、ハードウェア性能とのバランスを考慮する必要があります。

WebLLMの具体的な使い方

ここからは、WebLLMを実際に導入して利用する方法を説明します。

インストール方法

WebLLMを導入する最もシンプルな方法は、HTMLファイル内の<script>タグでJavaScriptモジュールとして読み込む方法です。

まず、HTMLファイルに以下のようにスクリプトタグを記述します：

<script type="module" src="index.js"></script>

次に、index.jsファイルで、WebLLMモジュールをインポートします：

const webllm = await import("https://esm.run/@mlc-ai/web-llm");

モデルのダウンロードと初期化

モデルをダウンロードし、初期化するコードは以下のようになります。今回は例として「Qwen2.5-1.5B-Instruct-q4f32_1-MLC」というモデルを利用します：

const selectedModel = "Qwen2.5-1.5B-Instruct-q4f32_1-MLC";
const appConfig = {
  model_list: [
    {
      model: "https://huggingface.co/mlc-ai/Qwen2.5-1.5B-Instruct-q4f32_1-MLC",
      model_id: selectedModel,
      model_lib:
        webllm.modelLibURLPrefix +
        webllm.modelVersion +
        "/Qwen2-1.5B-Instruct-q4f32_1-MLC-ctx4k_cs1k-webgpu.wasm",
    },
  ],
};

const engine = await webllm.CreateMLCEngine(
  selectedModel,
  {
    // 進捗状況のログ出力
    initProgressCallback: (initProgress) => {
      console.log(initProgress);
    },
    logLevel: "INFO",  // ログレベルの設定
  },
  appConfig
);

初回実行時には、モデルファイルのダウンロードが始まります。ダウンロード中は、以下のような進捗情報がコンソールに表示されます：

{
  progress: 0.5238525284988876,
  timeElapsed: 149,
  text: "Fetching param cache[13/30]: 434MB fetched. 52% complete the cache. Later refreshes will become faster."
}

モデルのダウンロードが完了すると、ブラウザのキャッシュに保存され、次回以降のロードは高速化されます。

テキスト生成の実行

モデルの初期化が完了したら、テキスト生成を実行できます。WebLLMは日本語にも対応しています。

const reply = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: "Monacaについて教えて" },
  ],
});
console.log(reply.choices[0].message.content);

実行結果の例：

Monacaは、iOSとAndroid向けのアプリケーション開発ツールです。主な特徴と利点を以下にまとめます：

1. オープンソース: Monacaはオープンソースで、ユーザーに完全なソースコードを提供します。
2. 使いやすい: コードが簡単なため、初学者でも簡単にアプリケーションを構築できます。
3. 静的開発: Monacaは開発環境を提供し、アプリケーションのパッケージングやデプロイも自動化します。
4. リアルタイム開発: Monacaは開発環境を提供し、リアルタイムでアプリケーションをデプロイできます。
5. 社会的・経済的な支援: Monacaは無料で利用できます。
6. コンテンツ: Monacaは無料で利用できます。
7. 社会的・経済的な支援: Monacaは無料で利用できます。
8. 社会的・経済的な支援: Monacaは無料で利用できます。

Monacaは、iOSとAndroid向けのアプリケーション開発に最適なツールです。

注意：上記の回答には「ハルシネーション（幻覚）」と呼ばれる、事実に基づかない情報が含まれています。特に7〜8の項目が重複している点や、Monacaを完全無料のサービスと説明している点は誤りです。実際のMonacaは一部機能が無料で利用できるものの、有料のサービスです。小さなモデルを使用する場合、このようなハルシネーションのリスクが高まることに注意が必要です。

ストリーミング生成の実装

テキスト生成には時間がかかるため、チャットボットのようなアプリケーションでは、ストリーミング方式で徐々に回答を表示する方が、ユーザー体験（UX）が向上します。以下はストリーミング生成の実装例です：

const chunks = await engine.chat.completions.create({
  messages: [
    { role: "system", content: "You are a helpful AI assistant." },
    { role: "user", content: Monacaについて教えて },
  ],
  temperature: 1,  // 生成の多様性を調整するパラメータ
  stream: true,    // ストリーミングモードを有効化
  stream_options: { include_usage: true },  // 使用状況の情報を含める
});

// 生成された回答の断片を格納する配列
const replies = [];

// ストリーミングで返される各チャンクを処理
for await (const chunk of chunks) {
  const content = chunk.choices[0] ? chunk.choices[0].delta.content : "";
  replies.push(content);
  console.log(content);  // リアルタイムでコンソールに出力
}

// 全てのチャンクを結合して完全な回答を表示
console.log(replies.join(""));

ストリーミング生成では、回答が少しずつ出力されていきます：

Mon
aca
は
、

全てのチャンクが生成されたあと、replies.join("")で結合すると完全な回答が得られます：

Monacaは、iOSとAndroid向けのアプリケーション開発ツールです。主な特徴と利点を以下にまとめます：

1. オープンソース: Monacaはオープンソースで、ユーザーに完全なソースコードを提供します。
2. 使いやすい: コードが簡単なため、初学者でも簡単にアプリケーションを構築できます。
3. 静的開発: Monacaは開発環境を提供し、アプリケーションのパッケージングやデプロイも自動化します。
:

WebLLMの実用的な活用事例

小さなモデルを使用する場合、事実に基づかない回答（ハルシネーション）のリスクはありますが、以下のような比較的シンプルなタスクでは効果的に活用できる可能性があります。

翻訳タスク

入力プロンプト：

Translate the following text to Japanese.

Comparing Native LLM embedding vs web-based LLM embedding might be a good way to understand the differences between the two. Of course it might not be ideal for all projects, but running LLMs in the browser is a great advantage for most projects.

出力結果：

カスタム言語モデルのEmbeddingとウェブベースのEmbeddingを比較することは、二つを理解するのに良い方法です。もちろん、すべてのプロジェクトには適用されないかもしれませんが、ブラウザでLLMを実行することは、大多数のプロジェクトには大きな利点があります。

完璧な翻訳とは言えませんが、内容を大まかに理解するレベルでは十分実用的です。同様に、ウェブページの要約や簡単な文章作成など、正確性よりも創造性が求められるタスクにも応用できるでしょう。

WebLLMのデモを試す

WebLLMの実際の動作を体験したい場合は、WebLLM Chatにアクセスしてください。このデモサイトでは、様々なモデルを選択して試すことができます。自分のデバイスでの動作速度や応答品質を確認するのに役立ちます。

WebLLMサンプルコードの活用

記事内で紹介した内容を実際に試したい方には、GitHubにサンプルコードを公開しています。このコードは記事で説明した基本機能を実装しており、すぐに動作確認できるようになっています。

サンプルリポジトリ

WebLLMを試すための最小限のコードは、以下のリポジトリで公開しています：

https://github.com/monaca-samples/webllm-sample

このリポジトリには、以下の特徴があります：

HTMLとJavaScriptのみの最小構成
Qwen2.5-1.5B-Instructモデルを使用
通常の生成とストリーミング生成の両方に対応

使い方

リポジトリをクローンし、ローカルサーバーで実行するだけで、すぐにWebLLMの動作を確認できます。Chrome/Edge 113以降のブラウザを使用することをおすすめします。

git clone https://github.com/monaca-samples/webllm-sample.git
cd webllm-sample
python -m http.server

その後、ブラウザで http://localhost:8000 にアクセスして「モデルをロード」ボタンをクリックすれば、準備完了です。

ぜひこのサンプルコードをベースに、独自のWebLLMアプリケーションの開発に挑戦してみてください。

まとめ：WebLLMの可能性と展望

WebLLMは、ブラウザ上でLLMを実行できる革新的なライブラリです。既存のLLMモデルを活用できる点が大きな魅力であり、独自モデルの開発や管理が不要なため、導入のハードルが低いというメリットがあります。

現時点では小さなモデルを使用するケースが多く、応答品質に制限はありますが、今後モデルの高品質化が進めば、より実用的なアプリケーション開発が可能になるでしょう。

ローカル環境で動作するLLMは、プライバシーやセキュリティの観点から大きな利点があります。機密情報を含む会話や、インターネット接続が不安定な環境での利用など、様々なユースケースに対応できます。

WebLLMを試してみたい方は、npm公式ページから詳細情報を確認できます。ブラウザで動くAI技術の未来を、ぜひ自分の手で体験してみてください。