前端本地大模型 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

相关推荐
牛客企业服务13 分钟前
2025年AI面试推荐榜单,数字化招聘转型优选
人工智能·python·算法·面试·职场和发展·金融·求职招聘
YongGit15 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
视觉语言导航44 分钟前
RAL-2025 | 清华大学数字孪生驱动的机器人视觉导航!VR-Robo:面向视觉机器人导航与运动的现实-模拟-现实框架
人工智能·深度学习·机器人·具身智能
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
**梯度已爆炸**1 小时前
自然语言处理入门
人工智能·自然语言处理
ctrlworks1 小时前
楼宇自控核心功能:实时监控设备运行,快速诊断故障,赋能设备寿命延长
人工智能·ba系统厂商·楼宇自控系统厂家·ibms系统厂家·建筑管理系统厂家·能耗监测系统厂家
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js