window.ai 开启你的内置AI之旅

成功是得你所想,幸福是享你所得

大家好,我是柒八九 。一个专注于前端开发技术/RustAI应用知识分享Coder

此篇文章所涉及到的技术有

  1. AI(Gemini Nano)
  2. Chrome
  3. Ollama

因为,行文字数所限,有些概念可能会一带而过亦或者提供对应的学习资料。请大家酌情观看。


前言

在几天在AI赋能前端:你的Chrome 控制台需要AI(爱)中我们介绍了如何在ChromeDevTool开启AI功能,来帮助我们更好的识别在DevTool-Console中显示的警告Warning)和错误Error)。

其中,当我们介绍如何配置AI功能时,我们提到了一个Plan B方案,就是在升级Chrome还无法开启AI功能时,我们可以选择下载一个Chrome Dev,这是一款开发者专用的 Google Chrome

并且在行文中提到,我们下载了Chrome Dev浏览器,我们还可以使用window.ai的最新功能。

这也意味着

我们不仅可以在Devtool-Console中使用AI,而且还可以在代码中使用AI

所以,今天我们就来聊聊这个话题。


好了,天不早了,干点正事哇。

我们能所学到的知识点

  1. 环境配置
  2. AI的初体验
  3. UI界面
  4. 问题解答

1. 环境配置

需要登录Google账号,未登录状态 或者游客模式 是无法使用内置AI的,关于如何申请一个Google账号,可以看我们上一篇文章AI赋能前端:你的Chrome 控制台需要AI(爱)

硬件要求

由于启动内置AI功能需要很多内存和资源,所以只有在桌面版的Chrome才能开启该项功能。也就是移动端的Chrome还无法体验该功能。

虽然,我们可以在桌面端的Chrome来体验内置AI。但是,要想上手它,还是需要一定的硬实力的。

  • 操作系统
    • Windows(10,11)
    • MacOS(≥13)
    • Linux
  • 存储空间
    • 至少需要 22 GB 的存储空间
  • GPU
    • 集成 GPU 或独立 GPU(如显卡)
  • VRAM
    • 4 GB(最低)

下载Chrome浏览器

在官方文档中,有两种浏览器可以开启AI功能。

  1. Chrome Canary:开发者专用的每日构建版
  2. Chrome Dev:开发者专用的版本

上面两个浏览器任意下载一个即可,如果你之前就下载过对应的浏览器,别忘记将浏览器升级到最新版本。因为,只有Chrome版本大于等于 128.0.6545.0.才有AI功能。

然后,有些不信邪的小伙伴就用自己的Chrome进行测试,发现压根不存在window.ai的信息,如果你在控制台输出window.ai那么迎接你的就是undefined嘲讽。

因为,我们平时开发所用的chrome最新的版本才是126+

开启配置

通过以上步骤,我们已经下载了最新的Chrome。但是,想要开启AI功能,我们还需要对Chrome进行配置。

我们可以在输入框中输入chrome://flags/#optimization-guide-on-device-model,然后选择Enabled BypassPerfRequirement选项,此配置可以绕过性能检查(可能会阻止我们设备上下载 Gemini Nano

随后输入chrome://flags/#prompt-api-for-gemini-nano,并选择Enabled

配置后,对应的信息如上所示。

最后,最后,我们重启Chrome

手动下载 Gemini Nano

有时候,重启大法 是能解决一下问题的。但是,它也不是啥万能大法。所以,当我们按照上面的指示重启Chrome 后,发现我们还无法使用AI,那我们就需要手动下载 Gemini Nano

在重启Chrome无果后,我们可以新开一个标签页,并且输入chrome://components

chrome://components/Chrome 浏览器中的一个内部页面,用于管理和查看 Chrome 组件的状态和版本。通过访问这个页面,我们可以看到浏览器中各种组件的列表,包括每个组件的当前版本号。如果某些组件需要更新,我们可以在这里手动检查并触发更新。

此时,我们就会看到各种组件信息。此时,我们比较关心的就是Optimization Guide On Device Model

可以看到,它此时的版本是0,也就意味着我们本机上没有安装此组件。

那么,我们就可以通过检查是否有更新来更新它。这个下载过程也比较慢,还需要耐心等待。

当出现如下的信息时,就说明我们下载完成了,此时我们下载的版本为2024.6.5.2205。根据官网的指导,只要版本大于2024.5.21.1031即可开启AI功能。

验证模型是否可行

既然,我们按照官方的指导按照了模型,我们可以通过在控制台输入 await window.ai.canCreateTextSession();来验证模型是否生效。

根据模型下载情况,对应的结果会有三种:

  1. readily:模型在设备上可用,因此创建会话会很快发生
  2. after-download:模型在设备上不可用,但设备有能力创建会话,创建会话将启动下载过程(这可能需要一些时间)
  3. no:模型不适用于此设备。

如果在控制台输入为readily,那么恭喜你,你可以在Chrome中使用内置AI了。


2. AI的初体验

通过上一节的操作,我们已经具备了在Chrome本地运行AI的能力。

此时,我们可以在window对象上看到对应的信息。

让我们来通过几个例子来了解一下它的能力。

非联网时可运行

之前我们就说过,Chrome内置AI是一个完全本地化的模型。像Ollama一样,通过在本机下载对应的模型来实现模型的本地化运行。

其实,针对Chrome内置AI,也是相同的道理,只不过我们不是用Ollama而是我们用Chrome作为模型容器,然后下载对应的AI模型(Gemini Nano)。从而实现Gemini本地化运行。

AI能力展示

我们在DevTool-Sources-Snippet中验证代码,这样可以有更好的书写体验。

一次性返回结果

javascript 复制代码
const canCreate = await window.ai.canCreateTextSession();

if (canCreate !== "no") {
  const session = await window.ai.createTextSession();
  const result = await session.prompt("Write me a poem");
  console.log(result);
}

我们将上述代码输入对应位置。然后点击右侧的运行,就会看到如下结果。

流式输出

OpenAI等模型,都支持流式输出,而内置AI也同样支持。

我们可以使用session.promptStreamingAPI来获取对应的数据信息。

支持中文

我们也可以通过向prompt中提供非英文的提示信息,来获取对应的数据。

翻译文本


3. UI界面

像上一节中,我们只是通过window.aiAPI来使用能力。有的朋友就会想,我们是否有对应的UI界面来直接允许内置AI

嘿,你还真别说,还真有。

这里提供两个比较好的,当然我们也可以基于window.ai自行搭建一个AI界面。

ChromeAI

chromeai 然后,我们就可以像使用OpenAI一样询问一下有趣的问题。

chrome-ai

chrome-ai


4. 问题解答

虽然,有些场景Chrome内置AI的能力有些鸡肋,但是如果Chrome如果将此功能真正的嵌入到真实环境,在某些例如文本翻译/文本总结等需求中,AI会有更好的体验感。


后记

分享是一种态度

全文完,既然看到这里了,如果觉得不错,随手点个赞和"在看"吧。

相关推荐
学不会•14 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架