Chromeに組み込まれたAI: Gemini Nanoをコーディングしましょう！

はじめに

皆さんこんにちは！

今回は、Chromeブラウザに組み込まれた最新のAI技術、Gemini Nanoについてご紹介します。

このブログでは、Gemini Nanoの概要、インストールと設定、Gemini Nanoの使用方法、コーディングの実戦などについて詳しく説明していきます。

Gemini Nanoの概要

Gemini Nanoは、Geminiモデルシリーズの中で最小モデルであり、ローカルでの実行に最適化されています。Chromeブラウザに組み込まれており、ほとんどの最新のデスクトップやノートパソコンでローカルに実行できます。要約、翻訳、ライティングなどのタスクを実行するのに利用できます。完全にローカルで実行でき、オフラインでの使用も可能で、追加料金はかかりません。

この図は、ウェブサイトやアプリでタスク API と探索的ウェブプラットフォーム API を使用して、Chrome に組み込まれたモデルにアクセスする方法を示しています。

デバイス上での実行の利点

Gemini Nanoはデータ処理をローカルで行うため、特にセンシティブな情報を扱うアプリケーションにおいて非常に有効です。また、オフライン環境でのAI機能もサポートしており、ネットワークが不安定な状況でも利用できます。さらに、計算処理をユーザーのデバイスで実行することで、頻繁な使用シーンにおける推論コストを削減することが可能です。

機密データのローカル処理: データをクラウドに送信する必要がないため、機密性が保たれます。
オフラインの使用: インターネット接続がなくてもAIを活用できます。
速度の向上: データのサーバー間往復が不要のため、応答が迅速になり、ユーザー体験が向上します。

インストールと設定

システム要件

Gemini Nanoを使用するには、Chrome CanaryまたはChrome Devのバージョン128.0.6545.0以上が必要です。

Gemini Nanoをローカルで使用するための手順

Chrome DevまたはChrome Canaryをダウンロードしてインストールする
アドレスバーに「chrome://flags」と入力
以下のオプションを検索して有効にする：
1. 「Enables optimization guide on device」を「Enabled BypassPerfRequirement」に設定
2. 「Prompt API for Gemini Nano」を「Enabled」に設定
アドレスバーに「chrome://components」と入力、以下の状態を確認。
1. 「Optimization Guide On Device Model」のバージョン番号が2024.6.5.2205以上であることを確認。
2. 必要に応じて「Check for updates」をクリックして更新する。
これで、Gemini Nanoがローカルで使用できるようになります。

Gemini Nanoの使用方法

Ctrl+Shift+IのショートカットキーもしくはChromeの右上の設定ボタン→その他のツール→デベロッパーツールを開く

コンソールに以下のコードを入力してください。

await window.ai.canCreateTextSession();

"readily"という返答があれば、モデルが利用可能です。

使用ガイド

以下のコードをコピーし、コンソールに貼り付けてください。

// まず、モデルの利用可能性とデバイスの特性に基づいてセッションを作成できるか確認します。 const canCreate = await window.ai.canCreateTextSession(); // canCreateの値は次のいずれかです： // * "readily"：モデルがデバイス上で利用可能で、セッションの作成がすぐに完了する // * "after-download"：モデルがデバイス上で利用不可だが、デバイスが対応しているため、セッションの作成がダウンロードプロセスを開始（時間がかかる可能性がある） // * "no"：このデバイスはモデルをサポートしていない if (canCreate !== "no") { const session = await window.ai.createTextSession(); // モデルにプロンプトを提供し、完全な結果が返るのを待ちます。 const result = await session.prompt("windows10を紹介してください"); console.log(result); }

このコードは、Gemini Nano APIを使用してテキストセッションを作成し、コンテンツを生成する方法を示しています。まず、セッションを作成できるか確認し、その結果に応じて次のステップに進みます。セッションを作成できる場合、プロンプト（この例では「windows10を紹介してください」）を送信し、モデルが生成する完全な応答を待ちます。最後に、結果をコンソールに表示します。

Gemini Nano AIは基本的な情報提供には役立ちますが、ChatGPTやGeminiと比べると情報の詳細さや言語生成の自然さにおいてやや劣る点があります。

コーディングの実戦

事前にHTMLとCSSの2つの参考コードをコーディングし、これらのコードを同じファイルに入れて、ウェブページをChrome Devにドラッグすると、すぐに使用できます。

HTMLサンプルコード
- ファイル名：Gemini_test.html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chrome Nano -- ローカルでGeminiを実行</title> <link rel="stylesheet" href="GeminiCss.css"> </head> <body> <h1>Chrome Gemini Nano AI</h1> <div class="chat-container"> <div id="response"></div> <div class="input-container"> <input type="text" id="promptInput" placeholder="ここに質問を入力してください"> <button id="submitButton">送信</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const promptInput = document.getElementById('promptInput'); const submitButton = document.getElementById('submitButton'); const responseDiv = document.getElementById('response'); submitButton.addEventListener('click', async () => { const prompt = promptInput.value; if (prompt) { try { // ユーザーのメッセージをチャットに追加 const userMessageDiv = document.createElement('div'); userMessageDiv.classList.add('message', 'user-message'); userMessageDiv.textContent = prompt; responseDiv.appendChild(userMessageDiv); responseDiv.scrollTop = responseDiv.scrollHeight; promptInput.value = ''; // 処理中のメッセージを表示 const processingMessageDiv = document.createElement('div'); processingMessageDiv.classList.add('message', 'bot-response'); processingMessageDiv.textContent = '処理中...'; responseDiv.appendChild(processingMessageDiv); responseDiv.scrollTop = responseDiv.scrollHeight; const session = await window.ai.createTextSession(); const response = await session.prompt(prompt); // 処理中のメッセージを削除 responseDiv.removeChild(processingMessageDiv); // ボットの応答をチャットに追加 const botResponseDiv = document.createElement('div'); botResponseDiv.classList.add('message', 'bot-response'); botResponseDiv.textContent = response; responseDiv.appendChild(botResponseDiv); responseDiv.scrollTop = responseDiv.scrollHeight; } catch (error) { // 処理中のメッセージを削除 responseDiv.removeChild(processingMessageDiv); // エラーメッセージをチャットに追加 const errorMessageDiv = document.createElement('div'); errorMessageDiv.classList.add('message', 'bot-response'); errorMessageDiv.textContent = `エラー: ${error.message}`; responseDiv.appendChild(errorMessageDiv); responseDiv.scrollTop = responseDiv.scrollHeight; } } else { // 質問が入力されていない場合の警告メッセージを追加 const warningMessageDiv = document.createElement('div'); warningMessageDiv.classList.add('message', 'bot-response'); warningMessageDiv.textContent = '質問を入力してください'; responseDiv.appendChild(warningMessageDiv); responseDiv.scrollTop = responseDiv.scrollHeight; } }); }); </script> </body> </html>

CSSサンプルコード
- ファイル名：GeminiCss.css

body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f4f8; color: #333; } h1 { text-align: center; color: #4CAF50; } .chat-container { display: flex; flex-direction: column; } #promptInput { flex: 1; padding: 12px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; box-sizing: border-box; } #submitButton { padding: 12px; background-color: #4CAF50; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } #submitButton:hover { background-color: #45a049; } .input-container { display: flex; margin-bottom: 10px; } #response { margin-top: 20px; padding: 15px; border: 1px solid #ddd; background-color: #fff; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow-y: auto; max-height: 300px; margin-bottom: 20px; } .message { margin-bottom: 10px; padding: 10px; border-radius: 4px; } .user-message { background-color: #e1f5fe; align-self: flex-end; } .bot-response { background-color: #e8f5e9; align-self: flex-start; }