想象一下，有一个强大的 AI 模型可以直接在您的浏览器中提供帮助，而无需任何大量下载。在此演示中，我们将逐步介绍如何使用 window.ai 在 Chrome 中使用 Gemini Nano。
背景：
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。
