AI 機能、どこで動かす？
Web アプリに AI を組み込むとき、選択肢は3つあります。
| パターン | たとえ | 特徴 |
|---|---|---|
| サーバーサイド | ホテルの厨房 | 高火力、でもコストがかかる |
| クライアントサイド | 家庭のキッチン | お手軽、データが外に出ない |
| ハイブリッド | 出前 + 自炊 | 重いのは外注、繊細なのは自宅 |
今回はクライアントサイドの話をします。
クライアントサイド AI の良いところ
- データがデバイスから出ない
- ネットなしで動く
- API 課金なし
機密情報を扱うのに適していますね。
Chrome Built-in AI
実はブラウザの Chrome でクライアントサイド AI を使えます。
まだ experimental な機能ですが、将来的には広く使えるようになるんじゃないかと思っています。
Chrome Built-in AI という機能名で、モデルは Gemini Nano になります。
動作要件
ただしスペック要件があります。
| 要件 | 条件 |
|---|---|
| OS | Windows 10+ / macOS 13+ / Linux / ChromeOS |
| ストレージ | 22GB 以上空き |
| GPU | 4GB+ VRAM |
| または CPU | 16GB+ RAM、4コア以上 |
| Chrome | 138+（日本語は 140+） |
モバイルは非対応です。22GB はなかなかですね...
セットアップ
試験運用の段階なので、フラグを有効にします。
1. フラグ有効化
それぞれアドレスバーに入力して Enabled にしてください。
chrome://flags/#optimization-guide-on-device-model
chrome://flags/#prompt-api-for-gemini-nano
2. Chrome 再起動
3. 状態確認
DevTools のコンソールで確認しましょう。
await LanguageModel.availability()
| 結果 | 意味 |
|---|---|
"available" |
使える |
"downloadable" |
要ダウンロード |
"downloading" |
ダウンロード中 |
"unavailable" |
スペック不足 |
available になっていれば OK です。
動かしてみる
const session = await LanguageModel.create();
const response = await session.prompt('日本の首都は？');
console.log(response);
/*
日本の首都は**東京**です。
東京は、政治、経済、文化の中心地であり、日本経済の要です。
*/
これだけで動きます。簡単ですね。
有効にすると Chrome に Gemini Nano が内蔵されて、Web API で呼び出せるようになっているんです。
使える API
Prompt API 以外にも、用途に特化した API があります。
| API | 用途 |
|---|---|
| Prompt API | 汎用（マルチモーダル対応） |
| Writer API | 文章生成 |
| Rewriter API | リライト |
| Summarizer API | 要約 |
| Translator API | 翻訳 |
| Language Detector API | 言語検出 |
| Proofreader API | 校正 |
詳しくは公式ドキュメントをどうぞ。
制限
- ユーザーの端末スペック次第
- 軽量モデルなので複雑な推論は苦手
- 試験運用版なので API 変わる可能性あり
過度な期待は禁物ですが、フォーム入力の補助とかオフライン翻訳には十分使えそうです。
まとめ
ブラウザで LLM を動かせる時代がきました。
- 無料
- オフラインで動く
- データが外に出ない
サーバーサイド AI と使い分けていきましょう。