皆さんこんにちは！
今回は、Chromeブラウザに組み込まれた最新のAI技術、Gemini Nanoについてご紹介します。
このブログでは、Gemini Nanoの概要、インストールと設定、Gemini Nanoの使用方法、コーディングの実戦などについて詳しく説明していきます。
Gemini Nanoは、Geminiモデルシリーズの中で最小モデルであり、ローカルでの実行に最適化されています。Chromeブラウザに組み込まれており、ほとんどの最新のデスクトップやノートパソコンでローカルに実行できます。要約、翻訳、ライティングなどのタスクを実行するのに利用できます。完全にローカルで実行でき、オフラインでの使用も可能で、追加料金はかかりません。
この図は、ウェブサイトやアプリでタスク API と探索的ウェブ プラットフォーム API を使用して、Chrome に組み込まれたモデルにアクセスする方法を示しています。
Gemini Nanoはデータ処理をローカルで行うため、特にセンシティブな情報を扱うアプリケーションにおいて非常に有効です。また、オフライン環境でのAI機能もサポートしており、ネットワークが不安定な状況でも利用できます。さらに、計算処理をユーザーのデバイスで実行することで、頻繁な使用シーンにおける推論コストを削減することが可能です。
Gemini Nanoを使用するには、Chrome CanaryまたはChrome Devのバージョン128.0.6545.0以上が必要です。
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にドラッグすると、すぐに使用できます。
<!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>
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;
}
UIは以下の画像のようになっています。
提供されたHTMLおよびCSSのサンプルコードを使用すれば、すぐにローカル環境でGemini Nanoを動作させることができます。もちろん、コードを基にしてより複雑な機能やUIを実装することもできます。これにより、AIを組み込んだWebアプリケーションを迅速に開発・テストすることが可能です。
Gemini Nanoは、Chromeブラウザに組み込まれた革新的なAI技術です。その主な特徴と利点を再度確認してみましょう。
こうした特徴を持つGemini Nanoは、特にセキュリティやオフライン動作が重要視される環境で、その真価を発揮します。データの安全性を確保しつつ、迅速で効率的なAI機能を提供することができるため、多様なシーンでの活用が期待されます。