Chrome内置AI调用教程

浏览器中的 AI 模型。没错，这就是 Chrome 内置 AI 的全部意义所在。该团队一直致力于通过 Chrome 内置的 AI API 和模型（包括 Gemini Nano）将 AI API 和模型注入 Chrome 中。

这意味着你可以在浏览器中本地调用 Gemini 模型。想为你的 Chrome 扩展程序赋予一些 AI 超能力，并在本地运行它吗？你应该尝试一下 Chrome 内置 AI。

在本文中，我们将介绍：

撰写本文时的 Chrome 内置 AI 功能（可能在早期有重大变化）。
开始使用 Chrome 内置 AI 的关键配置步骤。
示例代码演示了你可以在 Web 应用程序中构建的情感分析功能，它使用通过 Prompt API 集成在 Chrome AI 中的 Gemini Nano 模型。所有处理都在本地完成。
加入 Google Chrome 内置 AI 挑战并赢取奖品

1、Chrome 内置 AI 功能

注意：这是一个早期预览程序，这意味着你将面临跨版本的重大更改、可能更改的 API 等等。为此做好准备。

在撰写本文时，预览程序中提供了以下内置 API 及其规范的链接。每个链接都描述了该功能、如何在浏览器中配置/启用它、用于查看该功能运行的示例代码以及一个游乐场。

你可以参考 API 页面以了解每个 API 的当前状态、Chrome 扩展程序等。

建议：从提示 API 开始，它允许你在浏览器中向本地 Gemini Nano 模型发送自然语言查询。

2、开始使用 Chrome 内置 AI

Chrome 内置 AI 目前是一个早期预览程序，理想情况下，你应该阅读关于此入门文章，其中重点介绍了这些功能的背景、需求等。这将让ni 对这些功能的全部含义、它们的重要性以及使用它们的可能性有扎实的基础。

如果我可以总结关于 Chrome 内置 AI 的要点，我将在此处重现文章的一部分：

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

从高层次来看，架构如下所示：

Chrome AI Infra

2.1 加入早期预览计划

第一步是加入早期预览计划，这样你就会收到欢迎电子邮件，并在更新发生时收到提醒。这不是开始使用这些功能的必要条件，我们稍后会看到。

2.2 设置 Prompt API 的步骤

我正在使用 Prompt API 文档中提供的步骤开始。请记住，对于上一节中突出显示/提及的其他 API 以及提供链接的 API，将需要特定步骤。但就目前而言，这就足够了。

运行此功能有特定的硬件要求（目前仅适用于桌面平台）。我根据文档制作了它：

参考

安装 Chrome Canary。在撰写本文时，你需要 128.0.6545.0 或更高版本。

启用 Gemini Nano 和 Prompt API：为此需要设置几个标志（在 Chrome Canary 中执行此操作）：

转到 chrome://flags/#optimization-guide-on-device-model，选择启用 BypassPerfRequirement
转到 chrome://flags/#prompt-api-for-gemini-nano，选择启用。
你可能还会在设置中看到其他功能，例如 Reader、Writer API、Summarization API 等。如果愿意，也可以启用它们。
（重要）在每个步骤中重新启动 Chrome。

以下是我的 Chrome 设置中上述设置参数的示例屏幕截图：

确认 Gemini Nano 的可用性：此步骤涉及打开 Chrome DevTools，我将根据以下指南提供说明。

还有一个故障排除指南，我强烈推荐。我首先在 Chrome Dev 上遇到了一些困难，然后转向 Canary 并获得了更好的结果。请记住，它需要下载 Gemini Nano 模型，如上面屏幕截图的第 2 步所示，这大约需要 3-4 分钟。

如果一切看起来不错，你就可以尝试 Prompt API 了，你可以访问 Prompt API 游乐场。在 Chrome Canary 浏览器中运行它，你到目前为止已经完成了所有这些设置，并确保它正常工作。

3、使用 Prompt API 的示例应用程序

我想要演示的应用程序是通过浏览器中的 Gemini Nano 本地模型进行情绪分析。

因此，我从一个示例页面开始，该页面发布了针对特定博客文章的大量评论，如下所示：

我们在顶部有一个分析情绪按钮。我想要它做的事情如下：

对于每个评论，获取评论文本。
调用 Chrome 内置 AI Prompt API 进行情绪分析
在 Sentiment 列中写入 LLM 所做的情绪分析

从高层次来看，Prompt API 的代码如下：

 my_session = await ai.languageModel.create({
            systemPrompt: "You are an expert reviewer of comments 
                           who analyses and identifies what attributes 
                           were liked or disliked in the review."
        });

 const response = await 
               my_session.prompt("Analyze the review for 
                                  sentiment and identify in a list 
                                  what was liked and disliked." + reviewText);

运行此程序时，我们会看到下面的示例运行：

页面的完整代码如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Blog Post Reviews</title>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.positive {
  background-color: green;
  border-radius: 50%;
  display: inline-block;
  width: 10px;
  height: 10px;
}

.negative {
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  width: 10px;
  height: 10px;
}
</style>
</head>
<body>

<h2>Review <button id="analyzeButton">Analyze Sentiment</button></h2>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Datetime</th>
      <th>Review Text</th>
      <th>User Email</th>
      <th>Status</th>
      <th>Sentiment</th>
    </tr>
  </thead>
  <tbody id="reviewTableBody">
    <!-- Sample data will be inserted here by JavaScript -->
  </tbody>
</table>

<script>
  const today = new Date().toISOString().slice(0, 10);

  const reviews = [
    { id: 1, datetime: today, review_text: "This article provided a fresh perspective on the topic. I especially enjoyed the in-depth analysis and the use of real-world examples. However, I felt the conclusion was a bit rushed and could have benefited from further elaboration.", user_email: "user1@example.com", status: "New" },
    { id: 2, datetime: today, review_text: "Very informative and well-researched. The author clearly knows their stuff. My only criticism would be that the article was a bit too technical at times, which might alienate some readers.", user_email: "user2@example.com", status: "New" },
    { id: 3, datetime: today, review_text: "I found this article to be poorly written and difficult to follow. The arguments were weak and not well-supported. I was hoping for a more insightful analysis.", user_email: "user3@example.com", status: "New" },
    { id: 4, datetime: today, review_text: "Well-written and engaging, this article kept me hooked from beginning to end. The author presented a compelling case and backed it up with solid evidence. Highly recommended!", user_email: "user4@example.com", status: "New" },
    { id: 5, datetime: today, review_text: "I was disappointed with this article. It lacked depth and originality. The author seemed to be rehashing old ideas without adding anything new to the conversation.", user_email: "user6@example.com", status: "New" },
    { id: 6, datetime: today, review_text: "This article was an eye-opener! I had never considered the topic from this angle before. The author's insights were both thought-provoking and informative.", user_email: "user7@example.com", status: "New" },
    { id: 7, datetime: today, review_text: "I found this article to be biased and one-sided. The author presented a very narrow view of the issue without acknowledging alternative perspectives.", user_email: "user8@example.com", status: "New" },
    { id: 8, datetime: today, review_text: "Overall, I enjoyed this article. It was well-written and informative. However, I felt that the author could have provided more context and background information for readers who are unfamiliar with the topic.", user_email: "user9@example.com", status: "New" },
    { id: 9, datetime: today, review_text: "This article was a breath of fresh air. The author's writing style is engaging and accessible. I would love to read more from this author in the future.", user_email: "user10@example.com", status: "New" }
  ];

  const tableBody = document.getElementById("reviewTableBody");
  const analyzeButton = document.getElementById("analyzeButton");
  
  let s; // Declare 's' in a wider scope

  async function analyzeSentiment(reviewText) {
      console.log("Analyzing sentiment for:", reviewText);
      const response = await s.prompt("Analyze the review for sentiment and identify in a list what was liked and disliked." + reviewText);
      return response.trim(); // Trim any extra whitespace
    }

   function displayReviews() {
    tableBody.innerHTML = ""; // Clear existing rows

    reviews.forEach(review => {
      const row = tableBody.insertRow();
      row.insertCell().textContent = review.id;
      row.insertCell().textContent = review.datetime;
      row.insertCell().textContent = review.review_text;
      row.insertCell().textContent = review.user_email;
      row.insertCell().textContent = review.status;

      const sentimentCell = row.insertCell();
      if (review.sentiment) { // Add sentiment if it's been analyzed
          sentimentCell.textContent = review.sentiment;
      }
    });
  }

    analyzeButton.addEventListener("click", async () => {
      for (const review of reviews) {
        review.sentiment = await analyzeSentiment(review.review_text);
      }
      displayReviews();
    });

    // Immediately Invoked Function Expression (IIFE) to initialize 's'
    (async () => {
        s = await ai.languageModel.create({
            systemPrompt: "You are an expert reviewer of comments who analysis and identifies what attributes were liked or disliked in the review."
        });

        // Initial display of reviews (can be moved outside the IIFE if needed)
        displayReviews();
        })(); 
    </script>

</script>

</body>
</html>

存储库的完整源代码可在此处获得。

原文链接：Get Started with Chrome Built-in AI : Access Gemini Nano Model locally

汇智网翻译整理，转载请标明出处