2026.03.24 コラム
【テックコラム】ブラウザ内で完結するLLMを試してみた
DataCurrentの大塚です。
現在、クラウドに頼らず手元で推論を行う「ローカルLLM」への注目が高まっています。
従来、生成AIを利用するためには高性能なGPUが必須であり、クラウドを通じてでないと試すことができませんでした。しかし、近年ではコンシューマー向けGPUやオンボードのGPUでも動作可能な軽量モデルであっても比較的高い性能が発揮されるようになりました。
また、現実世界に対してアクションを行うフィジカルAIが注目を浴びており、それらに対応するためのデバイスも多く発表されています。
今回はローカルLLMの実行をブラウザ上で試す方法について紹介いたします。
なぜ「ブラウザ」でローカルLLMなのか。
ブラウザによるローカルLLMの実行は環境構築が不要で、クロスプラットフォームに対応できるというメリットがあります。
生成AIの実行に多く使われているPythonでは様々なライブラリをインストールし、環境を整えないと実行できません。しかし、ブラウザによる実行であればURLにアクセスするだけですので、気軽に試すことができます。特にモバイルデバイスの場合はアプリ公開の必要がありません。
実装の概要
ブラウザでローカルLLMを実行するためのライブラリはいくつかあります。今回はMediaPipeというGoogleが提供している人工知能や機械学習のためのライブラリを使用しました。MediaPipeにはLLM Interface APIというLLMをデバイス上で実行するためのAPIがあり、WebGPUを通してLLMの推論を実行できます。
なお、執筆時点でMediaPipe LLM Interfaceは引き続き使用できるものの非推奨となりました。今後はTransformer.jsなどWebGPUを使った推論が可能な別のソリューションへの移行をおすすめします。
今回はユーザーが入力した問いかけに対して、生成AIが応答するアプリケーションをReactで作成しました。生成AIの実行に関する部分は以下の通りです。公式ドキュメントで説明されているコードから大きく変更することなく、Gemma 3nに対するマルチモーダルな問いかけまでできるようになりました。ちなみに、会話履歴を含めて対話できるようにすることも検討しましたが、トークン数がすぐに超えてしまうため一問一答形式にしています。
const genaiFileset = await FilesetResolver.forGenAiTasks(
'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/wasm'
);
const llm = await LlmInference.createFromOptions(genaiFileset, {
baseOptions: {
modelAssetPath: MODEL_PATH,
},
maxTokens: 1000,
maxNumImages: 5,
supportAudio: true,
});
llmRef.current = llm;
... 略 ...
// Gemmaのプロンプト形式で構築
const promptArray: any[] = ['<start_of_turn>user\n'];
// マルチモーダル対応
if (images) {
for (const imageSrc of images) {
promptArray.push({ imageSource: imageSrc });
promptArray.push(' ');
}
}
if (audio) {
promptArray.push({ audioSource: audio });
promptArray.push(' ');
}
promptArray.push(prompt);
promptArray.push('<end_of_turn>\n<start_of_turn>model\n');
Gemma 3n系のモデル以外でもLiteRT Communityで公開されているモデルであれば複雑な変換をせずにモデルをダウンロードして使用できます。
なお、WebGPUはlocalhostの通信かHTTPS通信の場合しか使用できません。したがって、localhost以外で試す際は、HTTPS化などを行う必要がありますので注意してください。
実行の検証
作成したアプリケーションにGoogle Chromeでアクセスし、動作を確認します。
今回検証に使用したデバイスはSurface Laptop 13.8” 7th Edition for BusinessのCore Ultra 7 / 32GB、ブラウザはChrome 145、LLMのモデルはGemma 3n E4Bです。
タスクマネージャーで確認すると意図した通り、GPUが使用されていることが確認できました。
画像の指示では入出力の文字数が多めになるよう指定したため推論に多少の時間を要していますが、簡単な指示と出力内容では5秒程度でも応答できており、入力文章を分類するような簡単なタスクであれば十分に実用可能な応答性能です。
スマートフォンでの検証
スマートフォンでも推論が可能かを試してみます。
今回はミドルレンジのAndroid端末である「AQUOS sense9」で検証しました。ブラウザはChrome 145を使用しました。
Gemma 3 1B(10億パラメータ) 程度のモデルであれば動作することが確認でき、ブラウザでアクセスするだけでスマートフォン内で安全に生成AIを利用できることが確認できました。
まとめ
MediaPipeを使ったブラウザで動作するローカルLLMアプリケーションの開発について検証してみました。ミドルレンジレベルのスマートフォンでも1B程度のモデルであれば動作することが確認でき、ローカルLLMを使ったシステムの将来性が期待できます。
例えば、簡単な入力補完や要約は手元で行い、高度な判断が必要な場合のみクラウドに送ることで、UXを維持しつつコストを抑えることが可能です。
また、クライアント端末で推論を行うローカルLLMであれば、インターネットにデータが流出しないため機密情報であっても安心して処理ができます。
最近ではAIを動かすことを想定したモバイル端末や電子部品などが開発されています。生成AIを気軽に試したり、重要な情報を扱う際にブラウザでローカルLLMを活用するという選択肢を取り入れてみてはいかがでしょうか。
最後に
自社に専門人材がいない、リソースが足りない等の課題をお持ちの方に、エンジニア領域の支援サービス（Data Engineer Hub）をご提供しています。 お困りごとございましたら是非お気軽にご相談ください。
本件に関するお問い合わせは下記にて承ります。
株式会社DataCurrent
info@datacurrent.co.jp