前端本地大模型 window.ai 最新教程

最近尝鲜了 google 本地调大模型,这个 api 今年早些时候已经实验性发布,当时是用 window.ai.createTextSession(),你会发现这个 API 根本不存在,已经过时,网上大多数教程也已经过时,最新的 api 可以参考本文 或 google官方文档

一、环境配置

硬件要求

启动内置AI功能需要很多内存和资源。

  • 操作系统

    • Windows(10,11)
    • MacOS(≥13)
  • 存储空间

    • 至少需要 22 GB 的存储空间
  • GPU

    • 集成 GPU 或独立 GPU(如显卡)
  • VRAM

    • 6 GB(最低)
  • 不支持 移动端(安卓、IOS)

开启配置

  1. chrome://flags/#optimization-guide-on-device-model,然后选择Enabled BypassPerfRequirement选项
  2. 输入chrome://flags/#prompt-api-for-gemini-nano,并选择Enabled
  1. 下载 Gemini Nano,输入chrome://components进入,检查是否有更新后自动下载,模型文件有1G+,下载速度较慢,下载完后重启

二、AI 初体验

验证模型是否可用

javascript 复制代码
// 控制台输入
await window.ai.languageModel.capabilities()

有三种情况:

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

创建智能会话

window.ai.languageModel.create

js 复制代码
const agent = await window.ai.languageModel.create(
    {
        systemPrompt: "you are a front-end developer"
    }
);

尝试手写一个快排

agent.prompt

js 复制代码
agent.prompt("write a quick sort, just code").then(res=>{
    console.log(res);
})

流式传输

agent.promptStreaming

js 复制代码
const stream = agent.promptStreaming("write a quick sort, just code");
for await (const chunk of stream) {
  console.log(chunk);
}

本地 AI 情感分析

html 复制代码
<!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>时间</th>
      <th>评论内容</th>
      <th>用户邮箱</th>
      <th>状态</th>
      <th>情绪</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" },
  ];

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

  async function analyzeSentiment(reviewText) {
    console.log("分析的文本:", 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: "您是评论的专家审阅者,负责分析并确定评论中喜欢或不喜欢的属性。"
        });

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

</script>

</body>
</html>

参考

docs.google.com

相关推荐
枣把儿3 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux4 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
春哥的研究所5 分钟前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
爱编程的喵6 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
ahead~8 分钟前
【大模型入门】访问GPT_API实战案例
人工智能·python·gpt·大语言模型llm
喜欢吃豆9 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端12 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_12 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪14 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany16 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc