chrome，让AI在浏览器里面跑起来

https://developer.chrome.com/docs/ai?hl=zh-cn

上面是chrome开发者页面上顶部的第一张图。

我们正在开发 Web 平台 API 和浏览器功能，旨在将 AI 模型（包括大语言模型 (LLM)）直接集成到浏览器中。其中包括 Gemini Nano，这是 Gemini 系列 LLM 中最高效的版本，旨在在大多数现代台式机和笔记本电脑上本地运行。借助内置 AI，您的网站或 Web 应用可以执行 AI 驱动的任务，而无需部署或管理其自己的 AI 模型。

我们相信内置 AI 技术能为您和您的用户带来以下益处：

通过 AI 增强内容消费：包括摘要、翻译、回答有关某些内容的问题、分类和特征。
AI 支持的内容创作：例如写作辅助、校对、语法更正和重新表述。

重要提示 ：使用 Gemini Nano 实现内置 AI 的这一实现是一项实验性功能，将随着我们测试和解决反馈而发生变化。

与在设备端 AI 中自行构建模型相比，内置 AI 具有以下优势：

易于部署：浏览器分发模型时，会考虑设备功能并管理模型的更新。这意味着，您无需负责通过网络下载或更新大型模型。您无需解决存储空间逐出、运行时内存预算、传送费用和其他难题。
使用硬件加速功能：浏览器的 AI 运行时经过优化，可以充分利用可用的硬件，无论是 GPU、NPU 还是回退到 CPU。因此，您的应用可以在每台设备上获得最佳性能。

使用内置 AI 方法，在设备上执行 AI 任务变得轻而易举，这反过来又具有以下优势：

本地处理敏感数据：设备端 AI 可以改进您的隐私保护故事。例如，如果您处理敏感数据，则可以通过端到端加密为用户提供 AI 功能。
流畅的用户体验：在某些情况下，无需往返于服务器，意味着您可以提供近乎即时的结果。设备端 AI 可能是可行功能与次优用户体验之间的区别。
对 AI 的访问权限更高：用户的设备可以承担一些处理负载，以换取对功能的更多访问权限。例如，如果您提供高级 AI 功能，则可以使用设备端 AI 来预览这些功能，以便潜在客户可以看到您产品的优势，而无需支付额外费用。这种混合方法还可以帮助您管理推断费用，尤其是针对常用用户流的推断费用。
离线使用 AI：即使没有互联网连接，您的用户也可以使用 AI 功能。这意味着您的网站和 Web 应用可以离线使用或采用可变连接方式，按预期运行。

当然还可以混合 AI：设备端和服务器端

AI在浏览器里面跑，这么看前端又得出一片天啊。

话不多说，开席！

安装方法

下载最新的 Chrome Canary 版本

https://www.chromium.org/getting-involved/dev-channel/

安装完地址栏输入chrome://flags/，将以下两项设为Enabled

Prompt API for Gemini Nano

Enables optimization guide on device → Enable BypassPerfR

重启浏览器，在地址栏重新输入chrome://components/点击Optimization Guide On Device Model是否有更新。如果没有看到这一项，则刷新或者退出重新刷新。
点击完提示正在下载，可以根据网速考虑一下去干点别的事情。我的网测试下来有点长。

下载完成之后会变成如下信息

测试写作

验证方法，我们打开控制台。输入这段信息。

(async () => {
  try {
    if (!window.ai || (await window.ai.canCreateTextSession()) !== "readily") {
      throw new Error("Gemini Nano not ready or not supported.");
    }

    const startTime = performance.now();
    let charCount = 0;

    const session = await window.ai.createTextSession();
    const stream = session.promptStreaming("用秋野的意外为标题，写一个简短的科幻故事，故事来回转折");
    let message = "";
    for await (const chunk of stream) {
      message = chunk;
      charCount = chunk.length;
    }

    const endTime = performance.now();
    const timeElapsed = (endTime - startTime) / 1000;

    console.log(message);
    session.destroy();
  } catch (error) {
    console.error(error);
  }
})();

控制台输出结果：

秋野的意外

秋野是一名科学家，他发明了一种可以制造出各种新材料的技术。他将这种技术应用在自己的生活中，他制造出了一辆可以自动驾驶的汽车。

秋野非常自豪自己的发明，他驾驶着汽车在街上行驶着。突然，汽车失灵了，秋野不得不用手来控制它。这时，一辆出租车撞上了秋野的汽车。

秋野被送往医院，他醒来后，发现自己的身体发生了一些变化。他变成了一个可以控制物质的人，他可以操纵空气、火和水。秋野利用自己的新能力来帮助别人，他为世界各地的人们提供了帮助。

秋野的故事告诉我们，我们不应该以自己的聪明为傲，我们应该谦虚地面对别人。我们更应该利用自己的聪明来帮助别人，为社会做出贡献。

好象还行，但是一直用控制台试好象不是那么易用，顺手码个页面进行测试。

<script setup>
import { ref } from 'vue'

const promptText = ref('')
const answer = ref("")

async function askGeminiNano() {
  try {
    // 检查浏览器是否支持 AI API
    if (!window.ai) throw new Error("AI API not supported.");

    // 检查 Gemini Nano 是否已经准备就绪
    if ((await window.ai.canCreateTextSession()) !== "readily") {
      throw new Error("Gemini Nano not ready yet.");
    }

    // 如果 Gemini Nano 已经准备就绪,打印提示信息
    console.log("Gemini Nano is ready to use!");

    // 创建一个文本会话
    const session = await window.ai.createTextSession();

    // 使用 promptStreaming 方法向 Gemini Nano 发送提示并获取响应流
    const stream = session.promptStreaming(promptText.value);

    // 使用 for-await-of 循环遍历响应流中的每个数据块
    for await (const chunk of stream) {
      // 打印每个数据块的内容
      answer.value = chunk;
    }

    // 销毁文本会话
    session.destroy();

  } catch (err) {
    // 如果出现错误,打印错误信息
    console.error(err.message);
  }

}


</script>

<template>
  <h1> 测试内置AI </h1>
  <div class="card">
    <textarea v-model="promptText" ></textarea>
    <button type="button" @click="askGeminiNano">问答</button>
    <p>
  {{answer}}
    </p>
  </div>


</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.card{
  width: 800px;
  display: grid;
  grid-template-columns: 600px 1fr;
  textarea{
    height: 100px;
  }
}
</style>