使用Chrome window.ai API在Vue中集成AI功能·121

什么是 Chrome window.ai？

Chrome的window.ai是一个API接口，它随着机器学习和AI技术的不断进步而出现。这使得Google能够更轻松地将AI功能直接集成到浏览器中，从而实现更为复杂的客户端功能，而无需过度依赖服务器端处理或基于云的ML/AI服务。

人工智能API提供了预先训练的模型和现成的接口，使开发人员能够轻松地将精力集中在产品功能的构建上，而将模型训练和微调等复杂工作交由Google的机器学习专家来完成。这一API的卓越之处在于，它无需开发人员事先具备机器学习经验，就能轻松地将AI功能集成到Web应用程序中。

本文将深入介绍如何利用Chrome window.ai这一全新API，将设备端的AI功能无缝融入Web应用程序，并会一并探讨该API的当前局限性以及未来的发展趋势。请注意，这里提到的功能主要通过window.ai接口实现。

在继续本教程的学习之前，请确保您已经具备以下前提条件：

扎实的JavaScript基础知识
构建Vue.js应用程序的实践经验

通过这些预备知识，您将能够更顺畅地理解和应用本文介绍的内容。

Web 开发中的 AI 概述

在Web开发领域，AI技术已经从最初的简单自动化手段，逐步发展成为能够显著增强开发人员工作流程和用户体验的先进智能系统。

早在2000年代初期，AI便开始在Web领域产生重大影响。彼时，Google率先将AI技术应用于搜索引擎，通过智能算法为用户提供更加精准的搜索结果。与此同时，电子商务平台也开始利用AI驱动的推荐引擎，根据用户的购物行为和偏好，智能推荐相关产品，从而提升了用户的购物体验和商家的销售业绩。

进入2010年代，机器学习领域取得了重大突破，尤其是深度学习技术的兴起，使得AI在处理图像、文本和语音等复杂数据方面展现出了强大的能力。这一技术革新推动了网站内容的个性化发展，网站能够根据用户的偏好和行为，智能地推荐相关内容。同时，我们也见证了文本到语音转换、语言翻译等创新应用的涌现，这些应用极大地丰富了人们的在线交流方式。

在此期间，由自然语言处理（NLP）和机器学习提供支持的聊天机器人也开始流行，在网站上提供更具交互性和响应性的客户服务。

2020 年代见证了 Wix 和 Webflow 等人工智能平台的兴起，这些平台提供了直观的拖放界面，使得非专业人员也能轻松创建和管理网站，大大降低了网站开发的门槛。此外，像GitHub Copilot这样的工具也开始崭露头角。它们利用AI技术，通过自动完成代码、提出改进建议，甚至生成完整的代码片段，为开发人员提供了强有力的支持，进一步提升了开发效率和代码质量。

了解API及其与AI模型的交互：以window.ai为例

在撰写本文时，大多数AI驱动的网站都依赖于在服务器（如云或大型服务器）上运行的AI服务。然而，Google的API提出了一种新的解决方案，它允许在Chrome浏览器中甚至离线设备上运行AI模型，这标志着AI技术向前迈出了一大步。而window.ai正是这一领域的一个实践者。

window.ai通过以下方式与AI模型进行交互：

模型加载和管理：这通常是将预先训练的 AI 模型从远程服务器或作为 npm 包直接加载到浏览器中的第一阶段。API 管理模型的生命周期，包括加载、更新和卸载。

加载模型后，可以通过 API 将数据输入发送到模型，并返回处理后的输出。此过程通常是异步的，以便浏览器保持响应。

提示微调：在此阶段，对提示进行优化以获得最合适的结果。提示微调通常由开发人员处理，以实现具有特定 AI 需求的功能。

以下是与window.ai API交互时可能使用的一些示例命令。

以下代码段检查浏览器是否支持文本会话：

await window.ai.canCreateTextSession();

代码段createTextSession返回 default options 的对象：

const options = await window.ai.defaultTextSessionOptions();

下一个代码段使用 Gemini Nano 模型创建一个会话：

const session = await window.ai.createTextSession(options);

请注意，arg 是可选的。

以下代码段会销毁会话：

await session.destroy();

此命令执行提示符：

await session.prompt("Who is the president of USA?");

以下命令在执行后会显示一个提示符，并且返回一个ReadableStream对象。

await session.promptStreaming("What does NASA stand for?");

设置 window.ai API 的步骤

要访问 API，您需要下载 Chrome Dev 或 Canary 浏览器版本 127 或更高版本。安装浏览器后，请确保设置以下标志：

chrome://flags/#prompt-api-for-gemini-nano：选择 Enabled
chrome://flags/#optimization-guide-on-device-model：选择 EnabledBypassPrefRequirement
chrome://components：找到 Device Model 上的 Optimization Guide，然后单击其”Check for Update” 按钮下载模型

请注意，如果您在 chrome://components 页面上未看到“Optimization Guide”组件，请确保您已正确设置了上述浏览器标志。如果问题仍未解决，请在浏览器控制台中运行以下命令，然后刷新页面：await window.ai.assistant.create();

在浏览器控制台中运行以下代码，以确认您是否可以访问 Gemini Nano 模型：

await window.ai.canCreateTextSession();

如果上述代码返回，您可以在 Chrome 浏览器中访问 Gemini Nano 模型。

现在，您可以使用 Gemini Nano 模型创建会话，并在浏览器控制台中使用几行代码执行提示：

const session = await window.ai.createTextSession();

await session.prompt("What is the capital of France?");

构建演示 AI 聊天机器人

在本节中，我们将使用window.ai来构建一个 AI 聊天机器人，为提出的问题提供建议。

在终端中运行以下命令，在本地机器上搭建 Vue 单页应用程序的基架：

npm create vue@latest

按如下方式响应提示：

✔ Project name: … <your-project-name>

✔ Add TypeScript? … No

✔ Add JSX Support? … No

✔ Add Vue Router for Single Page Application development? … No

✔ Add Pinia for state management? … No

✔ Add Vitest for Unit testing? … No

✔ Add an End-to-End Testing Solution? … No

✔ Add ESLint for code quality? … Yes

✔ Add Prettier for code formatting? … No

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

我们将安装 Vercel AI SDK 和 ChromeAI 提供程序，以调用 Chrome 的内置 AI 模型（Gemini Nano）和 Tailwind CSS 进行样式设置：

npm install ai chrome-ai tailwindcss

在项目根目录中创建一个tailwind.config.js文件并添加以下内容：

/** @type {import('tailwindcss').Config} */

export default {

  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

  content: [],

  theme: {

    extend: {},

  },

  plugins: [],

}

接下来，请按照以下方式更新assets/main.css文件。

@tailwind base;

@tailwind components;

@tailwind utilities;

body {

  font-family: 'General Sans', sans-serif;

  background-color: #F9FAFB;

}

AI 支持配置

由于该 API 仅在 Chrome Dev 和 Canary 浏览器中受支持，因此我们需要编写帮助程序函数来处理不受支持的浏览器的验证。

在目录中创建utils.jssrc文件并添加以下内容：

export async function checkEnv() {

  function getChromeVersion() {

    var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

    return raw ? parseInt(raw[2], 10) : 0;

  }

  if (navigator.userAgentData?.brands) {

    const isChrome = navigator.userAgentData?.brands.some(

      (brandInfo) => brandInfo.brand === "Google Chrome",

    );

    if (!isChrome) {

      throw new Error(

        "Your browser is not supported. Please use Google Chrome Dev or Canary.",

      );

    }

  } else {

    // If brands is not available, we can't determine the browser, so we should handle this case

    throw new Error(

      "Your browser is not supported. Please use Google Chrome Dev or Canary.",

    );

  }

  const version = getChromeVersion();

  if (version < 127) {

    throw new Error(

      "Your browser is not supported. Please update to 127 version or greater.",

    );

  }

  if (!("ai" in globalThis)) {

    throw new Error(

      "Prompt API is not available, check your configuration in chrome://flags/#prompt-api-for-gemini-nano",

    );

  }

  const state = await ai?.assistant.capabilities();

  if (state.available !== "readily") {

    try {

      await window.ai.assistant.create();

    } catch (e) {

      console.error(e);

    }

    throw new Error(

      "Built-in AI is not ready, check your configuration in chrome://flags/#optimization-guide-on-device-model",

    );

  }

}

在开发过程中，我们可能会遇到一些实验性功能，这些功能需要通过 Chrome 浏览器的特定标志来启用。为了确保用户能够正确了解并使用这些功能，我们需要创建一个 modal（模态框）组件。

创建 modal 组件

modal 组件将派上用场，用于显示不受支持的浏览器的错误消息和在支持的浏览器中禁用的实验性功能。

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 的任何时刻，这是 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 来优化应用程序的性能
在多个版本的 Node 之间切换
了解如何在 TypeScript 中使用 React children 属性
探索使用 CSS 创建自定义鼠标光标
顾问委员会不仅适用于高管。加入 LogRocket 的内容顾问委员会。您将帮助告知我们创建的内容类型，并获得独家聚会、社交认证和礼品。

在项目的目录中创建一个新文件夹，命名为 components,然后在该目录中创建一个新的文件，命名为 Modal.vue , 并添加模态框组件的 Vue 代码。

<script>

export default {

    props: {

        open: {

            type: Boolean,

            required: true

        }

    },

}

</script>

<template>

    <transition name="fade">

        <div class="vue-modal" v-if="open">

            <transition name="drop-in" v-show="open">

                <div class="vue-modal-inner">

                    <div class="vue-modal-content">

                        <slot/>

                    </div>

                </div>

            </transition>

        </div>

    </transition>

</template>

<style scoped>

*,

::before,

::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.vue-modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    overflow-x: hidden;

    overflow-y: auto;

    background-color: rgba(0, 0, 0, 0.44);

    z-index: 1;

}

.vue-modal-inner {

    max-width: 600px;

    margin: 3rem auto;

    border-radius: 0.4rem;

}

.vue-modal-content {

    position: relative;

    background-color: #fff;

    background-clip: padding-box;

    border-radius: 0.4rem;

    padding: 1rem;

}

.fade-enter-active,

.fade-leave-active {

    transition: opacity 0.5s;

}

.fade-enter-from,

.fade-leave-to {

    opacity: 0;

}

.drop-in-enter-active,

.drop-in-leave-active {

    transition: all 0.3s ease-out;

}

.drop-in-enter-from,

.drop-in-leave-to {

    opacity: 0;

    transform: translateY(-50px);

}

</style>

创建导航栏组件

在此步骤中，我们将创建一个导航栏组件，该组件将用于显示品牌徽标和登录的用户配置文件。

在目录Navbar.vuecomponents中创建并添加以下内容：

<template>

    <div class="h-[96px] px-[28px] sm:px-[48px] bg-[#FFFFFF] flex justify-between items-center">

        <h1 class="text-[#111827] font-bold text-lg sm:text-2xl">AI ChatBot</h1>

        <div class="flex sm:space-x-2 space-x-1">

            <img class="w-10 sm:w-12" src="/Avatar.svg">

            <div>

                <p class="font-bold mb-1 text-sm sm:text-base  text-[#111827] leading-6">Tynisha Obey</p>

                <p class="text-xs text[#718096] leading-5">Makostore</p>

            </div>

        </div>

    </div>

</template>

这是一个具有独特样式的简单组件，用于区分机器人响应和用户的提示。

在目录Message.vuecomponents中创建并添加以下内容：

<template>

    <div v-if="role==='user'" className="flex items-start gap-3 mt-1 justify-end">

      <div className="bg-blue-100 rounded-lg p-3 max-w-[100%] md:max-w-[50%] text-primary-foreground">

        <div className="text-sm">{{message.content}}</div>

      </div>

      <div className="w-8 h-8 border rounded-full shrink-0">

        <img class="w-10 sm:w-12" src="/Avatar.svg">

      </div>

    </div>

    <div v-if="role==='assistant'" className="flex items-start mt-1 gap-3">

      <div className="w-8 h-8 border rounded-full shrink-0">

        <img class="w-10 sm:w-12" src="/bot.svg">

      </div>

      <div className="bg-gray-100 rounded-lg p-3 max-w-[100%] md:max-w-[50%]">

        <div className="text-sm">

            {{message.content}}

        </div>

      </div>

    </div>

</template>

<script>

export default {

    name: "message-component",

    props: {message: Object, role: String},

}

</script>

创建聊天组件

聊天组件由消息显示、提交消息的按钮和用于输入将发送到 Gemini 模型的提示的输入字段组成。

在目录ChatComponent.vue中创建components并添加以下内容：

<script>

import Message from './Message.vue';

import { streamText } from "ai";

import { chromeai } from "chrome-ai";

export default {

    name: "chat-component",

    components: { Message },

    props: {

        error: Object

    },

    data() {

        return {

            messages: [],

            userInput: '',

        };

    },

    methods: {

       async  sendMessage(e) {

            e.preventDefault();

        }

    },

}

</script>

<template>

    <div className="flex flex-col h-screen">

        <div className="flex-1 p-4 overflow-auto" ref={containerRef}>

            <div className="flex min-h-full flex-col gap-4 py-4 overflow-visible">

                <div v-if="messages.length > 0">

                    <div v-for="(m, i) in  messages " :key="i">

                        <Message :message=" m " :role="m.role"/>

                    </div>

                </div>

                <div v-else

                    className="mx-auto my-auto text-center w-full max-w-md flex items-center justify-center h-full">

                </div>

            </div>

        </div>

        <form @submit="sendMessage" className="bg-background border-t border-muted px-4 py-3 sticky bottom-0 w-full">

            <div>

                <div className="flex space-x-2">

                    <div className="w-full">

                        <input :v-model="userInput" :disabled="error" placeholder="Type your message..." className="w-full rounded-sm pr-16" />

                    </div>

                    <button type="submit" :disabled="error" className="">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"

                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

                            <path d="m22 2-7 20-4-9-9-4Z" />

                            <path d="M22 2 11 13" />

                        </svg>

                        <p>Send</p>

                    </button>

                </div>

            </div>

        </form>

    </div>

</template>

<style scoped>

input {

    flex: 1;

    padding: 10px 15px;

    border: 1px solid #ddd;

    border-radius: 8px;

    margin-right: 10px;

    font-size: 14px;

    color: #333;

    outline: none;

    transition: border-color 0.3s ease;

}

input:focus {

    border-color: #007bff;

}

button {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 15px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    outline: none;

    transition: background-color 0.3s ease;

}

button:hover {

    background-color: #0056b3;

}

button svg {

    width: 20px;

    height: 20px;

}

</style>

方法

现在，我们需要异步处理用户输入提交，并实时流式传输 AI 的响应，并在收到响应时更新聊天界面。

使用以下命令更新：

async  sendMessage(e) {

    e.preventDefault();

    const newMessages = [

        ...this.messages,

        { content: this.userInput, role: "user" },

    ];

    this.input = '';

    this.messages = newMessages

    try {

        const { textStream } = await streamText({

            model: chromeai(),

            system: "You are an assistant. Respond to every question completely.",

            prompt: ("User: '" + newMessages.slice(-1)[0].content)

        });

        let t = "";

        for await (const textPart of textStream) {

            t = t.concat(textPart);

            this.messages = ([...newMessages, { role: "assistant", content: t }]);

        }

    } catch (e) {

        console.error(e);

    }

}

当用户提交消息时，会触发一个异步方法。这个方法首先将用户的消息附加到一个数组中，并清除输入字段。然后，它使用 sendMessage 方法将用户的消息发送到 AI 模型并接收流式响应。

这个流式响应会被分成几个部分，并逐一附加到数组中。随着 AI 助手生成其回复，这个数组会实时更新，从而允许 UI 实时显示最新的回复内容。这里的 messages 数组就是用来存储用户和 AI 之间交互消息的。

创建应用程序组件

接下来，我们将创建一个应用程序组件，来整合上述功能并管理用户界面。这个组件将导入必要的子组件，并使用 modal 组件来处理环境验证和错误报告。

使用以下命令更新App.js文件：

<script>

import NavBar from "./components/NavBar.vue";

import ChatComponent from "./components/ChatComponent.vue";

import { checkEnv } from "./utils";

import Modal from "./components/Modal.vue";

export default {

  name: "app-component",

  components: { NavBar, ChatComponent, Modal },

  data() {

    return {

      error: null,

      showModal: false,

    };

  },

  computed: {

  },

  mounted() {

    const checkBrowser = async () => {

      try {

        await checkEnv();

      } catch (e) {

        if (e instanceof Error) {

          console.log(e?.message);

          this.error = e?.message;

          this.showModal = true;

        }

      }

    };

    checkBrowser();

  },

  methods: {

    openModal () {

      this.showModal = true;

    },

    closeModal () {

      this.showModal = false;

    }  

  },

};

</script>

<template>

  <NavBar />

  <div v-if="error">

    <Modal :open="showModal" @close="showModal = !showModal">

            <p class="text">{{error}} </p>

            <div class="flex justify-end">

                <button @click="showModal = !showModal" class="bg-[#007bff] rounded-md px-6 py-1.5 text-white ">

                    <span>Close</span>

                </button>

            </div>

    </Modal>

  </div>

  <ChatComponent :error="error"/>

</template>

在组件挂载之后，它会首先检查当前的浏览器环境是否满足要求。如果检测到环境不合适，组件会设置一条错误消息，并弹出一个模态对话框来通知用户。尽管用户可以关闭这个模态对话框，但错误消息会一直保留在界面上，直到相关的问题得到解决。这里所描述的组件是App组件。

如果您没看错，以下是聊天机器人的最终构建样子的图像：

如果您在支持的浏览器上运行项目，但没有在“设置”（Setting up the）窗口中设置相应的标志，那么您将会看到人工智能API部分显示以下内容：

聊天机器人也可以离线工作。您可以关闭互联网以体验离线支持功能。

设备端 AI（ window.ai API）模型的价值探讨

在网站上运行大量模型确实可能对用户产生负面影响，尤其是在性能受限的设备上。让每个网站都下载并运行其自己的大型语言模型（LLM）也是不切实际的，开发者需要花费大量时间来优化提示，这是一个既耗时又需要专业技能的过程。

尽管存在这些缺点，window.ai API 在业务方面仍然有其独特的价值。它提供了隐私敏感的功能，能够在用户的设备上处理数据，从而避免了与服务器的往返通信，为用户提供了近乎即时的结果。这种即时反馈对于提升用户体验和参与度至关重要。

此外，如果用户的设备具备足够的处理能力，那么通过让设备承担一部分处理负载，window.ai API 可以帮助管理服务器成本。这对于那些希望提供强大 AI 功能但又不想承担高昂服务器费用的企业来说是一个有吸引力的选择。

结论

在本教程中，我们深入探索了Chrome的新API，并通过Vue.js构建了一个AI驱动的聊天机器人来展示其应用潜力。这个演示不仅是一个实践案例，更是一个生动的示例，

考虑到并非所有设备都具备强大的AI处理能力，为那些无法支持高级功能的设备设计具有回退机制的功能显得尤为重要。此外，进行基准测试以确保目标设备上的流畅运行也是不可或缺的一步。由于托管AI模型可能会占用大量资源，因此，制定有效的服务和缓存策略对于优化性能和资源利用率至关重要。

展望未来，生成式AI领域正以前所未有的速度发展，我们有理由相信，更小、更优化的Web模型将不断涌现。随着WebGPU、WebAssembly等技术的不断进步以及库的持续更新，设备上的AI推理将变得更加迅速和高效。例如，Transformers.js v3已经引入了WebGPU嵌入基准测试支持，这对于实时设备端AI来说无疑是一个重大突破。

最后需要强调的是，尽管这个API充满了潜力，但它目前仍处于高度实验性阶段，未来可能会发生变化，甚至可能不会被纳入Chrome的主版本。因此，在使用时请务必谨慎，并时刻关注其最新动态。

原文链接：https://blog.logrocket.com/chrome-new-window-ai-api-vue-app/