Chrome AI：颠覆网页开发的全新黑科技
Chrome AI 长啥样
废话不多说，让我们直接来看一个示例：
async function askAi(question) {
if (!question) return "你倒是输入问题啊"
// 检查模型是否已下载（模型只需下载一次，就可以供所有网站使用）
const canCreate = await window.ai.canCreateTextSession()
if (canCreate !== "no") {
// 创建一个会话进程
const session = await window.ai.createTextSession()
// 向 AI 提问
const result = await session.prompt(question)
// 销毁会话
session.destroy()
return result
}
return "模型都还没下载好，你问个蛋蛋"
}
askAi("玩梗来说，世界上最好的编程语言是啥").then(console.log)
//打印： **Python 语言：程序员的快乐源泉！**
可以看到这些浏览器原生 AI 接口是挂在 window.ai 对象下面的，浏览器自带 AI 模型（要下载），无需消耗开发者的资金去调用 OpenAI API 或者是 文心一言 API等。
由于没有成本限制，想象空间极大扩展。你可以将智能融入网页的每一个环节。例如，实时翻译，传统的 i18n 只能映射静态字符串来支持多语言，对于后端传过来的字符串毫无办法，现在可以交给 AI 实时翻译并展示。
未来，这个浏览器 AI 标准接口将不仅限于 Chrome 和 PC 端，其他浏览器厂商也会跟进，手机也将拥有本地运行小模型的浏览器。
Chrome AI 接口文档
我们刚刚看到了 Chrome AI 的调用示例，现在让我们看一下完整的 Chrome 文档。我将用 TypeScript 和注释方式展示，这些类型和注释是我手动编写的，全网独一无二，赶紧收藏：
declare global {
interface Window {
readonly ai: AI;
}
interface AI {
/**
* 判断模型是否准备好了
* @example
* ```js
* const availability = await window.ai.canCreateTextSession()
* if (availability === 'readily') {
* console.log('模型已经准备好了')
* } else if (availability === 'after-download') {
* console.log('模型正在下载中')
* } else {
* console.log('模型还没下载')
* }
* ```
*/
canCreateTextSession(): Promise<AIModelAvailability>;
/**
* 创建一个文本生成会话进程
* @param options 会话配置
* @example
* ```js
* const session = await window.ai.createTextSession({
* topK: 50, // 生成文本的多样性，越大越多样
* temperature: 0.8 // 生成文本的创造性，越大越随机
* })
*
* const text = await session.prompt('今天天气怎么样？')
* console.log(text)
* ```
*/
createTextSession(options?: AITextSessionOptions): Promise<AITextSession>;
/**
* 获取默认的文本生成会话配置
* @example
* ```js
* const options = await window.ai.defaultTextSessionOptions()
* console.log(options) // { topK: 50, temperature: 0.8 }
* ```
*/
defaultTextSessionOptions(): Promise<AITextSessionOptions>;
}
/**
* AI模型的可用性
* - `readily`：模型已经准备好了
* - `after-download`：模型正在下载中
* - `no`：模型还没下载
*/
type AIModelAvailability = 'readily' | 'after-download' | 'no';
interface AITextSession {
/**
* 询问 AI 问题, 返回 AI 的回答
* @param input 输入文本, 询问 AI 的问题
* @example
* ```js
* const session = await window.ai.createTextSession()
* const text = await session.prompt('今天天气怎么样？')
* console.log(text)
* ```
*/
prompt(input: string): Promise<string>;
/**
* 询问 AI 问题, 以流的形式返回 AI 的回答
* @param input 输入文本, 询问 AI 的问题
* @example
* ```js
* const session = await window.ai.createTextSession()
* const stream = session.promptStreaming('今天天气怎么样？')
* let result = ''
* let previousLength = 0
*
* for await (const chunk of stream) {
* const newContent = chunk.slice(previousLength)
* console.log(newContent) // AI 的每次输出
* previousLength = chunk.length
* result += newContent
* }
*
* console.log(result) // 最终的 AI 回答（完整版）
*/
promptStreaming(input: string): ReadableStream;
/**
* 销毁会话
* @example
* ```js
* const session = await window.ai.createTextSession()
* session.destroy()
* ```
*/
destroy(): void;
/**
* 克隆会话
* @example
* ```js
* const session = await window.ai.createTextSession()
* const cloneSession = session.clone()
* const text = await cloneSession.prompt('今天天气怎么样？')
* console.log(text)
* ```
*/
clone(): AITextSession;
}
interface AITextSessionOptions {
/**
* 生成文本的多样性，越大越多样，正整数，没有范围
*/
topK: number;
/**
* 生成文本的创造性，越大越随机，0-1 之间的小数
*/
temperature: number;
}
}
如何启用 Chrome AI
准备工作
- 下载最新 Chrome Dev 版或 Chrome Canary 版。(版本号不低于
128.0.6545.0) - 确保你的电脑有
22G的可用存储空间。 - 很科学的网络
启用 Gemini Nano 和 Prompt API
- 打开
Chrome， 在地址栏输入:chrome://flags/#optimization-guide-on-device-model，选择enable BypassPerfRequirement，这步是绕过性能检查，确保Gemini Nano能顺利下载。 - 再输入
chrome://flags/#prompt-api-for-gemini-nano，选择enable。 - 重启
Chrome浏览器。
确认 Gemini Nano 是否可用
- 按
F12打开开发者工具， 在控制台输入await window.ai.canCreateTextSession()，如果返回readily，就说明 OK 了。 - 如果上面的步骤不成功，重启
Chrome后继续下面的操作:
- 新开一个标签页，输入
chrome://components - 找到
Optimization Guide On Device Model，点击Check for update，等待一个世纪直到Status - Component updated出现就是模型下载完成。（模型版本号不低于2024.5.21.1031）
- 新开一个标签页，输入
- 模型下载完成后, 再次在开发者工具的控制台中输入
await window.ai.canCreateTextSession()，如果这次返回readily，那就 OK 了。 - 如果还是不行，可以等一会儿再试。多次尝试后仍然失败，请关闭此文章🐶。
思考
AI 最近两年可谓是爆发式增长，从 GPT-3 开始，笔者就一直在使用 AI 产品，如 Github copilot。ChatGPT 推出后，我迅速开发了一个 GPT-Runner vscode 扩展，用于勾选代码文件进行对话。
我一直在思考，AI 能给网页产品带来哪些变革？例如，有没有可能出现一个 AI 组件库，将 AI 智能赋予组件，如 input 框猜测用户下一步输入，或 table 组件实现自然语言搜索和数据拼装。
与 AI 相关的技术通常需要额外的计算成本，企业主和用户支付意愿低。如果能利用本地算力，就无需额外花费。这个场景现在似乎在慢慢实现。
作为开发者，我们正在迎来 AI 全面赋能网页操作的时代。让我们积极拥抱变化，向老板展示更多的迭代需求，找到前端就业的新增长点。
如果本文章感兴趣者众多，将考虑使用这个 AI 接口实现兼容 OpenAI API 规范，这样你可以不用花钱，不用装 Docker，直接使用浏览器算力和油猴插件免费使用各类开源 chat web ui，如在线版的 Chat-Next-Web。
彩蛋
仔细观察 window.ai.createTextSession ，你会发现它为什么不叫 window.ai.createSession ？我猜测未来可能会有 text-to-speech 模型、 speech-to-text 模型、text-to-image 模型、image-to-text 模型，或者更多惊喜。
这不是随便猜测，我是在填写 Chrome AI preview 邀请表时看到的选项。敬请期待吧，各位前端开发er。
作者：小明大白菜
来源：juejin.cn/post/7384997062415843339
收起阅读 »
来源：juejin.cn/post/7384997062415843339
为了不让同事看到我的屏幕，我写了一个 Chrome 插件
那天下午，我正在浏览一些到岛国前端技术文档，突然听到身后传来脚步声。我下意识地想要切换窗口，但已经来不及了——我的同事小张已经站在了我身后。"咦，你在看什么？"他好奇地问道。我尴尬地笑了笑，手忙脚乱地想要关闭页面。那一刻，我多么希望有一个快捷键，能瞬间让整个屏幕变得模糊，这样就不会有人看到我正在浏览的内容了。
于是乎我想：为什么不开发一个 Chrome 插件，让用户能够一键模糊整个网页呢？这样不仅能保护隐私，还能避免类似的尴尬情况。
开发过程
说干就干，我开始了 Web Blur 插件的开发。这个插件的核心功能很简单：
- 一键切换：使用快捷键（默认 Ctrl+B）快速开启/关闭模糊效果
- 可调节的模糊程度：根据个人喜好调整模糊强度
- 记住设置：自动保存用户的偏好设置
技术实现
1.首先，我们需要在 manifest.json 中声明必要的权限：
"manifest_version": 3,
"name": "Web Blur",
"version": "1.0",
"permissions": [
"activeTab",
"storage",
"commands"
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "images/icon.png"
}
},
"commands": {
"toggle-blur": {
"suggested_key": {
"default": "Ctrl+Shift+B"
},
"description": "Toggle blur effect"
}
}
}
2. 实现模糊效果
function applyBlur(amount) {
const style = document.createElement('style');
style.id = 'web-blur-style';
style.textContent = `
body {
filter: blur(${amount}px) !important;
transition: filter 0.3s ease;
}
`;
document.head.appendChild(style);
}
// 移除模糊效果
function removeBlur() {
const style = document.getElementById('web-blur-style');
if (style) {
style.remove();
}
}
3. 快捷键控制
if (command === 'toggle-blur') {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, {action: 'toggleBlur'});
});
}
});
4. 用户界面
<button id="toggleBlur" class="toggle-button">
Toggle Blur
</button>
<div class="slider-container">
<label>Blur Amount:</label>
<input type="range" id="blurAmount" min="0" max="20" value="5">
<span id="blurValue">5px</span>
</div>
<div class="shortcut-info">
Current: Ctrl+Shift+B
<button id="changeShortcut">Change shortcut</button>
</div>
</div>
5. 设置持久化
function saveSettings(settings) {
chrome.storage.sync.set({settings}, () => {
console.log('Settings saved');
});
}
// 加载设置
function loadSettings() {
chrome.storage.sync.get(['settings'], (result) => {
if (result.settings) {
applySettings(result.settings);
}
});
}
以后可以愉快的学技术辣
作者：想想肿子会怎么做
来源：juejin.cn/post/7509042833152851978
收起阅读 »
来源：juejin.cn/post/7509042833152851978
