想象一下，有一個強大的 AI 模型可以直接在您的瀏覽器中提供幫助，而無需任何大量下載。在此演示中，我們將逐步介紹如何使用 window.ai 在 Chrome 中使用 Gemini Nano。
<bdo id='iyc38'></bdo><ul id='iyc38'></ul>
背景：
Chrome 推出了 Gemini Nano，這是一種專為設備使用而設計的 AI 模型，以及用于提示它的 API。雖然基于瀏覽器的模型已經存在了一段時間，但它們也存在局限性，尤其是用戶需要下載大型模型。這會顯著影響帶寬和用戶體驗。
輸入 window.ai 和 Gemini Nano。window.ai 是用于與本地模型通信的 API，而 Gemini Nano 是旨在在用戶設備上高效運行的高級模型。
開始：
（注意：更新于 2024 年 9 月 3 日。 本文已更新，以反映 Chrome API 中的最新變化。此 API 是實驗性的，將來可能會發生重大變化。）
在我們深入研究之前，讓我們確保您可以訪問此功能。在撰寫本文時，它在 Chrome 主版本中不可用。要檢查 AI 是否可用，請在 Chrome Dev Console 中運行以下命令：
(await window.ai?.assistant.capabilities()).available如果返回 'readily'，則可以跳到“使用 window.ai”部分。
啟用 window.ai：
自 2024 年 7 月 18 日起，Chrome 在穩定版本中不支持此 API。您需要下載 Chrome Dev 版本并啟用特定標記。安裝后，打開瀏覽器并按照以下步驟操作：
第 1 步：
chrome://flags/#prompt-api-for-gemini-nano選擇 'Enabled'
第 2 步：
chrome://flags/#optimization-guide-on-device-model選擇“啟用 BypassPrefRequirement”
第 3 步：
chrome://components點擊 “Optimization Guide On Device Model” 中的 'Check for Update' 下載模型。
使用 window.ai：
API 非常簡單：
await window.ai?.assistant.capabilities();
const session = await ai.assistant.create();
await session.prompt("What is Apple?");
await session.promptStreaming("What is Apple?");
await session.destroy();如何使用：
與 API 一樣，使用非常簡單。您只需創建一個會話，并將文本提示傳遞給 session.prompt。您可以在 Chrome Dev Console 中演示此功能，只需將以下內容放入：
const session = await window.ai.assistant.create();
await session.prompt("What is Apple?");詳細例子：
<html>
<head>
<meta charset="utf-8">
<title>window.ai</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="ui">
<h1>Chat with Gemini Nano</h1>
<ul id="messages"></ul>
<input type="text" id="input" placeholder="Type something here">
<button id="chat">Chat</button>
<button id="destory">Destory Sesion</button>
</div>
<script>
let session = null;
document.getElementById('chat').addEventListener('click', async function () {
const input = document.getElementById('input');
const message = input.value;
input.value = '';
appendMessage('User', message);
const response = await session.prompt(message);
appendMessage('AI', response);
});
document.getElementById('destory').addEventListener('click', async function () {
if (session) {
await session.destroy();
alert('Session destroyed');
}
});
document.addEventListener('DOMContentLoaded', async function () {
if (!session && (await window.ai?.assistant.capabilities())?.available !== 'readily') {
alert('window.ai is not available in your browser')
} else {
session = await window.ai.assistant.create();
}
});
function createMessage(role, message) {
const li = document.createElement('li');
li.textContent = `${role}: ${message}`;
return li;
}
function appendMessage(role, message) {
const messages = document.getElementById('messages');
messages.appendChild(createMessage(role, message));
}
</script>
</body>
</html>總結：
API 很簡單，因此無需復雜化。此功能是高度實驗性的，可能會更改或永遠不會進入主 Chrome 版本。它也特定于 Chrome，盡管其他瀏覽器可能會使用自己的模型實現類似的 API。
