ブラウザ単体でLLMを動かす - MediaPipeでGemma3推論
ブラウザ単体で大規模言語モデルを動かしてみたかった。
MediaPipe Tasks GenAIを使えば、サーバーなしでブラウザ上でLLMの推論ができる。Gemma3-1b-it-int8-webモデルをブラウザに読み込んで、テキスト生成を試した。
作ったもの
MediaPipeを使ったブラウザ上でのLLM推論デモだ。
gemma3-1b-it-int8-web.taskファイル（約700MB）をブラウザに読み込み、ユーザーの入力に対してテキストを生成する。サーバーへの通信は一切ない。すべてブラウザで完結する。
精度は未調整だ。動作確認用途として、ブラウザでLLMが動くことを確認するのが目的だった。
MediaPipe Tasks GenAIについて
MediaPipeはGoogleが開発しているオンデバイスAI推論ライブラリだ。
通常は画像認識や顔検出に使われるが、GenAI版では大規模言語モデルもサポートしている。ブラウザでWASM（WebAssembly）を使って推論を実行する。
WASMを使うことで、ネイティブに近い速度で推論できる。それでも、APIを使うより遅いが、プライバシーが保たれる利点がある。
モデルファイルの読み込み
gemma3-1b-it-int8-web.taskファイルをブラウザに読み込む。
ファイルサイズが約700MBあるので、読み込みに時間がかかる。
最初、ファイルのパスを間違えた。一度つまずいた。
相対パスの指定が難しい。絶対パスで指定したら、読み込めた。
読み込みには約30秒かかる（ネットワーク速度による）。ローディング表示を実装して、ユーザーに待ち時間を知らせるようにした。
推論の実行
MediaPipeのLLMクラスを使って、推論を実行する。
// LLMクラスのインスタンスを作成
const llm = await LlmInference.createFromOptions(wasmFileset, {
baseOptions: { modelAssetPath: modelPath }
});
// テキスト生成
const result = llm.generateResponse(inputText);
generateResponse()を呼び出すと、テキストが生成される。生成には数秒かかる。
最初、生成が遅すぎて不安があった。10秒以上かかる。
int8量子化モデルを使っているので、精度と引き換えに速度を上げている。それでも遅い。ブラウザでLLMを動かす限界を感じた。
試した質問
「JavaScriptの配列操作について教えて」と質問した。
Gemmaはmap(), filter(), reduce()の3つのメソッドを説明してくれた。簡潔だが、基本は押さえている。精度は悪くない。
「Three.jsとは？」と聞いた。
「3Dグラフィックスライブラリ」と答えてくれた。正確だ。ただし、詳細な説明は少ない。モデルサイズが小さいので、詳しい説明は難しい。
全体の流れ
モデルファイルを読み込み、MediaPipe LLMクラスを初期化し、ユーザーの入力に対してテキストを生成する。すべてブラウザ内で完結する。
使ってみて
MediaPipeでブラウザ上でLLMを動かした。
ポイントは以下の3つ：
- gemma3-1b-it-int8-webモデル（約700MB）をブラウザに読み込み
- MediaPipe Tasks GenAIでWASMベースの推論を実行
- サーバーへの通信なし、すべてブラウザで完結
ブラウザでLLMが動く面白さを実感できた。遅いが、プライバシーが保たれる利点がある。
同じようにブラウザでLLMを試したい方の参考になれば嬉しいです。
まとめ
今回は、MediaPipeを使ってブラウザ上でLLMを動かした。
ポイントは以下の4つ：
- gemma3-1b-it-int8-webモデル（約700MB）を使用
- MediaPipe Tasks GenAIでWASMベースの推論
- 読み込みに約30秒、推論に10秒以上かかる
- サーバー不要、プライバシーが保たれる
ブラウザでLLMを動かす技術的な可能性を確認できた。速度は遅いが、オフラインで動くのは大きな利点だ。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。