Gemini Nanoをブログに導入してみた

2025-10-17 追記
ブログ改修により現時点でこの記事で紹介している要約機能の提供を停止しています。

Chrome 126から、ブラウザの組み込みLLMである Gemini Nano が利用可能になりました。Gemini Nanoは小さなモデルで、ユーザのデバイス上で動作します。
開発者はブラウザのAPIを通じて、Gemini Nanoを利用することができます。本記事では、Gemini Nanoを有効にする手順と、ブログにGemini Nanoを導入してみた結果を紹介します。

Gemini

Gemini 2.5 is our most intelligent AI model, capable of reasoning through its thoughts before responding, resulting in enhanced performance and improved accura…

Chrome 128以前とChrome 129以降で、Gemini Nanoを利用するための手順やAPIが異なります。本記事ではChrome 129以降のデスクトップ版（Windows, MacOS, Linux）を前提としています。¹²

Gemini Nanoを有効にする手順

まずGemini Nanoを有効にする手順を紹介します。
Gemini Nanoを有効にするための要件として、ストレージに22GB以上の空き容量が必要となっています。（なお、実際のモデルのサイズは、手元の環境では2-3GB程度でした。）

1. chrome://flagsにアクセスし、enable-gemini-nanoをEnabledに、Enables optimization guide on deviceをEnabled BypassPerfRequirementに設定
2. Chromeを再起動
3. デベロッパーツールを開き、コンソールで(await ai.assistant.capabilities()).available;を実行
   • この際readilyが返ってくれば、Gemini Nanoが有効になっています

上記の手順でreadilyが帰ってこない場合の手順は以下の通りです。

1. コンソールでawait ai.assistant.create();を実行
   • エラーが表示されますが、無視してください
2. Chromeを再起動
3. chrome://componentsにアクセスし、Optimization Guide On Device Modelを更新
   • Optimization Guide On Device Modelが表示されない場合は、何度かページをリロードしてください
   • モデルのサイズが大きいため、更新に時間がかかる場合があります。Wifi環境での更新を推奨します
4. 再度 (await ai.assistant.capabilities()).available;を実行

GoogleよりPrompt API Playgroundが提供されています。こちらから、Gemini Nanoを試すことができます。

JavaScriptからGemini Nanoを利用する

JavaScriptからGemini Nanoを利用するためのAPIは、ai.assistantを通じて利用できます。以下のように利用することができます。前述の通り、Chrome 129以降でのみ利用可能です。Chrome 128以前の場合と異なる仕様になっているため、注意してください。

const session = await ai.assistant.create();
const response = await session.prompt('Hello, world!'); // 入力を渡す
console.log(response);

上記コードでは、プロンプトからの応答が完了するのを待っていますが、ストリーミング形式（逐次応答を出力する）での応答も可能です。

const session = await ai.assistant.create();
const stream = session.promptStreaming('Hello, world!');
for await (const response of stream) {
  console.log(response);
}

応答には10-20秒程度、長い入力に対しては30秒以上かかることもあります。また、応答は最大で4096トークンまでとなっています。
Gemini Nanoはデバイスに搭載されているハードウェアを使い分けているようですが、場合によってはデバイスのリソース（CPU、GPU、メモリ、バッテリー）を多く消費することがあります。そのため、実際にWebページに組み込む際には、ユーザに適切に通知する必要があるのではないかと思います。

ブログにGemini Nanoを導入する

本ブログにGemini Nanoを導入してみたいと思います。今回は、Gemini Nanoを利用して、記事の要約を生成する機能を追加してみます。

記事の最下部にボタンを設置し、クリックするとGemini Nanoを利用して記事の要約を生成するようにします。³⁴今回はAstroでブログを作ったの記事を用いて実験し要約が生成されることを確認しました。

何回か要約を試してみたところ、毎回異なったテキストが生成されていました。しかし、品質にはムラがあるように感じます。適切な要約を行なっている例もあれば、本質的でない部分を要約したり、本文をそのまま返したりする例もありました。また、文章の最後まで生成されていない場合や、本文にない内容を返すなど不具合?も見受けられました。まあ技術的な文章であるため、Gemini Nanoのようなモデルが適していない可能性がありますが…。以下に要約の例を示します。

要約の例

このサイトは、AstroとTailwind CSS、Cloudflare Pagesを使って構築されました。Astroは、記事を作成しやすくする軽量のビルドツールであり、Tailwind CSSは、スタイル設定を簡単に設定するためのシンプルなCSSフレームワークです。このサイトでは、コードブロックやフォントのカスタマイズに使用されています。また、記事へのリンクや検索機能などの様々な拡張機能が備わっています

このサイトは、AstroとTailwind CSS、Cloudflare Pagesを使って構築されました。Astroは記事を作成し、Tailwind CSSはデザインを作成します。また、様々なプラグインが利用できます。例えば、記事の検索はPagefindを使用しています。このサイトは、まだ開発段階にあるので、定期的にアップデートを行っています。

このプロジェクトは、Astro、Tailwind CSS、Cloudflare Pagesを使用して作成されました。Astroは、このプロジェクトでブログを書くのに必要な機能を備えた軽量のビルドツールです。Tailwind CSSは、このプロジェクトでデザインを作成および維持するのに役立ちます。Cloudflare Pagesは、このプロジェクトの静的なサイトをホストおよびパブリッシュするための優れたソリューションです。このプロジェクトは、Node.jsとJavaScriptを使用して開発されており、このプロジェクトをより効率的に開発および維持するための多くの便利なツールが用意されています。

失敗例

• 出力が最後まで生成されていない

このサイトを構築した手順やノード

• 本質的でない部分を要約している・出力が最後まで生成されていない

Tailwind CSSはブログのデザインをより美しく、よりプロフェッショナルにするのに役立ちます。 rehypejs/rehype-external-linksは、記事への外部リンクにリ

余談

記事の初回執筆時、Gemini Nanoを有効化し早速試してみるぞ！…と思ったら急にGemini Nanoが使えなくなってしまいました。コンソールを見るとThe model took too long too many times for this version.と表示されるのです。ブラウザを再起動しても状況は変わらず、困り果てていました。

Chromiumの実装を確認してみると、同じモデルでタイムアウトが2回以上発生した場合にこのエラーを返すようになっていました。以下、Chromiumのソースコードにおける関連箇所です。

• エラーに対する説明がなされている箇所
• タイムアウトした回数について判定を行っている箇所
• タイムアウト回数の上限について設定している箇所

タイムアウトした回数は、モデルのバージョンが更新された場合にリセットされるようです。（該当箇所）なぜこのような実装になっているのかは分かりませんが、運悪く2回以上タイムアウトした場合には、モデルのバージョンが更新されるまで待つしかないようです。ちょっと困りますね。

今回はChrome DevChannelで実験を行っていたため、手動で/Users/{username}/Library/Application Support/Google/Chrome Dev/以下のファイルを削除し、強制的に初期化を行う形でエラーに対処しました。これにより、Gemini Nanoを再度利用することができるようになりました。（自己責任でお願いします。間違って普段使用しているChrome Stableのデータを削除しないように注意してください）

まとめ

本記事では、Chrome 129以降で利用可能なGemini Nanoを有効にする手順と、本ブログにGemini Nanoを用いた記事要約機能を追加した結果を紹介しました。
Gemini Nanoはブラウザ（ユーザのデバイス上）で動作するLLMとして活用できるため、コストをかけることなくさまざまな機能を提供することができるのではないかと思います。現状では生成の品質にムラがあるほか、LLMを効率よく利用するための機器が搭載されていないデバイスが多いため、今すぐに活用するのは難しいかもしれません。しかし、今後の発展に期待したいと思います。

参考文献

• Built-in AI Early Preview Program - Welcome and heads-up about the Prompt API - Update #1 - Google ドキュメント
  • 公式のドキュメントです。生成の際のオプションやエラーが発生した場合の対処法などが記載されています。
• Chrome の 組み込み AI Gemini Nano を試してみる