网站按钮样式,网站设计的基本步骤,wordpress 页面 按钮,个人博客登录入口AI 时代的高速发展#xff0c;我们都习惯了使用 ChatGPT、Claude、Gemini 和其他 AI 工具来询问各种问题#xff0c;目前大部分的 AI 应用都是通过服务端 API 来实现的。
如果想要在 Web 上使用 AI 功能往往需要靠服务器来处理一些非常大的模型。这在制作一些生成内容的 AI …AI 时代的高速发展我们都习惯了使用 ChatGPT、Claude、Gemini 和其他 AI 工具来询问各种问题目前大部分的 AI 应用都是通过服务端 API 来实现的。
如果想要在 Web 上使用 AI 功能往往需要靠服务器来处理一些非常大的模型。这在制作一些生成内容的 AI 方面尤其常见因为这些模型的大小是一个普通网页容量的好几千倍对于其他种类的 AI 功能也是一样其中模型的大小可能会在几十到几百兆字节之间。
每个使用这些模型的网站都需要在用户打开网页时下载这些大模型这对开发者和用户来讲并不是一件轻松的事情。
为此Google 正在开发一系列的 Web 平台 API 和浏览器功能目的是让 AI 模型包括大型语言模型可以直接在浏览器中运行。
Gemini Nano 因为 Gemini 是 Google 自家的亲儿子所以 Gemini Nano 自然成了第一个实验对象它是专为高效运行而设计的 Gemini 系列大型语言模型之一可以在大部分现代的台式机和笔记本电脑上本地运行。这意味着我们的网站或网络应用现在可以直接运行 AI 功能而不需要自己去部署或管理 AI 模型。 与自行部署的设备端 AI 相比浏览器内置 AI 具有以下优势 易于部署在浏览器分发模型时浏览器会考虑设备的功能并管理模型的更新。这意味着您无需负责通过网络下载或更新大型模型也无需解决存储空间逐出、运行时内存预算、传送费用等难题。 使用硬件加速浏览器的 AI 运行时经过优化可充分利用可用硬件无论是 GPU、NPU 还是回退到 CPU。因此我们的应用可以在每台设备上获得最佳的性能。 离线使用完全不需要链接互联网也可以使用 AI 大模型。
另外我们也无需承担自行部署模型的成本也无需担心使用其他 AI 服务引发的安全隐私问题。
在 Chrome Canary 中启用 Gemini Nano
谷歌目前正在 Chrome Canary 上试验 Gemini Nano它可以在你的机器上本地运行语言模型。 Chrome Canary 是 Google Chrome 的一个实验版本专为想要在最新功能和 API 广泛发布之前测试它们的开发人员和技术爱好者而设计。 想要试用的话首先需要下载并安装 Chrome Canary https://www.google.com/chrome/canary/然后为 Gemini Nano 启用 Prompt API。
然后使用以下 flag 在浏览器中激活 Gemini Nano。 chrome://flags/#prompt-api-for-gemini-nano chrome://flags/#optimization-guide-on-device-model 激活这些选项后重新启动 Chrome然后我们需要等待它将 Gemini Nano 下载到我们的本地机器尽管模型本身不超过 3GB但可能需要 22GB 的可用空间
Gemini Nano 需要一些时间才能下载在这个过程中我们可以使用 canCreateTextSession API 来检查模型是否 Ready它会返回以下三个值 no表明设备或浏览器根本不支持 prompt 语言模型。 after-download表示设备或浏览器支持 prompt 语言模型但需要下载后才能使用。 readily表示设备或浏览器支持提示语言模型无需任何下载步骤即可使用。 如果模型处于下载中的状态则会提示 after-download。
要确认下载状态可以打开 chrome://components检查 Optimization Guide On Device Model 的版本是否为 2024.6.5.2205。 这时我们调用 canCreateTextSession 则会显示 readily 。 使用 Prompt API
打印一下 window.ai 我们发现目前只有以下几个方法 我们可以查看 https://github.com/explainers-by-googlers/prompt-api 来了解这些 API 的用法。 Prompt API 提案是 Chrome 内置 AI 的早期设计提案此提案的目标是 为 Web 开发者提供一个统一的 JavaScript API用于访问浏览器提供的语言模型。 尽可能抽象语言模型的具体细节例如分词、系统消息或控制令牌。 引导网页开发者优雅地处理失败情况例如没有可用的浏览器提供的模型。 允许多种实现策略包括设备上的或基于云的模型同时将这些细节对开发者进行抽象。
目前的 Chrome Canary 试验 Gemini Nano 的 API 基本也是按照这个提案来的。
我们直接可以用到的 API 就是 createTextSession它可以用来创造一个回话上下文然后它提供了完整输出模式、流式输出模式两种方式
完整输出 const session await ai.createTextSession();const result await session.prompt(中国的首都是哪里);console.log(result); 流式输出 const stream await session.promptStreaming(介绍一下北京的互联网公司);for await (const chunk of stream) {console.log(chunk);} 一个案例
基于浏览器提供的内置 AI 能力我们可以为我们的网站添加很多有意思的功能比如下面的场景 对任意文本进行分类、标记和关键词提取 帮助用户撰写文本如博客文章、评论或传记 总结文章、用户评论或聊天记录 从文章内容生成标题或摘要 基于网页的非结构化内容回答问题 语言之间的翻译 文章校对。
下面是一个小 Demo 可以用来实现一个简单的划词翻译功能
首先监听用户鼠标释放事件 document.addEventListener(mouseup, async function() {// 获取选中的文本并去除首尾空格let selectedText window.getSelection().toString().trim();// 检查选中的文本是否包含英文字母if (selectedText /[a-zA-Z]/.test(selectedText)) {try {console.log(正在翻译: ${selectedText});// 调用翻译函数并获取翻译结果const translatedText await translateText(selectedText);console.log(翻译结果: ${translatedText});} catch (error) {console.error(翻译错误:, error);}}});
翻译函数使用 window.ai 进行翻译 async function translateText(text) {// 创建一个文本会话const session await ai.createTextSession();// 构建翻译提示const prompt Translate the following English text to Chinese: ${text};// 提示模型并等待翻译结果const result await session.prompt(prompt);return result;}
效果如下 借助这个 API 你还可以用类似的思路基于非常简单的代码构建非常强大的 AI 功能希望它可以快点在标准的浏览器版本中推出
