大家好，我是章北海
先给大家看个浏览器内置大模型的玩法（From：mortenjust@X）
我也写了一个极简静态页面（代码见文末），测试完全可用：
这事儿要从1个月前说起
5月份，谷歌I/O大会上说：Chrome浏览器要内置AI功能（它家的
Gemini Nano
大模型）
Gemini Nano
是我们能直接在用户的移动设备上执行任务的最高效模型。无论蜂窝网络覆盖范围如何，
Gemini Nano
都可以实现低延迟响应并增强数据隐私。
此图展示了您的网站或应用如何使用任务 API 和探索性网络平台 API 来访问 Chrome 中内置的模型。
内置 AI 技术有哪些好处：
-
-
硬件加速
：利用设备的 GPU、NPU 或 CPU，优化性能。
-
-
-
-
高访问权限
：用户设备承担处理负载，降低推断费用。
能干啥呢？
1.
通过 AI 增强内容消费
：包括摘要、
翻译
、回答有关某些内容的问题、分类和特征。
2.
AI 支持的内容创作
：例如写作辅助、校对、语法更正和重新表述。
这么好的东西怎么迟迟不开放呢？
原来谷歌还在开发者版上测试
顺着刚刚演示的视频，我找到了开发者专用的每日构建版：
Chrome Canary
开启内置AI ，过程看起来很难，其实一点都不容易：
1）
下载 Chrome Canary 版：
https://www.google.com/chrome/canary/
2）
将浏览器语言设置为英文
-
-
-
-
在“首选语言”下方，点击您要使用的语言旁边的“更多”图标 。- 如果系统没列出您要使用的语言，请点击
添加语言
来添加该语言。
-
点击
以这种语言显示 Google Chrome
。- 此选项仅适用于 Windows 计算机，mac需要将系统语言设置为英文。
-
3）
打开
chrome://flags
找到
prompt-api-for-gemini-nano
设置为“Enabled”
4）
然后找到
optimization-guide-on-device-model
设置为“Enabled BypassPerfRequirement”，重启浏览器。
5）
进到
chrome://components/
找到
Optimization Guide On Device Model
然后点击“Check for update”。
注意：如果没有这个选项的话把flags那两个开启的选项禁用之后再重启，然后在开启一次再试试。
6）
然后可以在控制台用这个两个命令测试是否启用，
const model = await http://window.ai.createTextSession();
await model.prompt("1+1=？");
PS：我的极简静态页面代码如下：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chattitle>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
#chat-container {
width: 100%;
max-width: 600px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
#messages {
height: 400px;
overflow-y: auto;
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
flex-direction: column;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
word-wrap: break-word;
}
.user {
background-color: #e1f5fe;
align-self: flex-end;
}
.bot {
background-color: #f0f4c3;
align-self: flex-start;
}
#input-container {
display: flex;
}
#input-container input {
flex: 1;
padding: 10px;
border: none;
border-top: 1px solid #ddd;
}
#input-container button {
padding: 10px;
border: none;
background-color: #2196f3;
color: white;
cursor: pointer;
}
style>
head>
<body>
<div id="chat-container">
<div id="messages">div>
<div id="input-container">
<input type="text" id="user-input" placeholder="Type your message here..." onkeydown="handleKeyDown(event)">
<button onclick="sendMessage()">Sendbutton>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js">script>
<script>
let session;
async function initializeSession() {
session = await window.ai.createTextSession();
}
async function sendMessage() {
const
