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

相关推荐
MYZR11 小时前
瑞萨电子:嵌入式计算与芯片技术的创新引领者
人工智能·核心板·ssd2351
胡耀超1 小时前
大模型架构演进全景:从Transformer到下一代智能系统的技术路径(MoE、Mamba/SSM、混合架构)
人工智能·深度学习·ai·架构·大模型·transformer·技术趋势分析
小杨勇敢飞2 小时前
UNBIASED WATERMARK:大语言模型的无偏差水印
人工智能·语言模型·自然语言处理
m0_603888712 小时前
Delta Activations A Representation for Finetuned Large Language Models
人工智能·ai·语言模型·自然语言处理·论文速览
金融小师妹2 小时前
基于哈塞特独立性表态的AI量化研究:美联储政策独立性的多维验证
大数据·人工智能·算法
qinyia3 小时前
Wisdom SSH 是一款创新性工具,通过集成 AI 助手,为服务器性能优化带来极大便利。
服务器·人工智能·ssh
昨日之日20065 小时前
Wan2.2-S2V - 音频驱动图像生成电影级质量的数字人视频 ComfyUI工作流 支持50系显卡 一键整合包下载
人工智能·音视频
li35747 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj8 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
SEO_juper8 小时前
大型语言模型SEO(LLM SEO)完全手册:驾驭搜索新范式
人工智能·语言模型·自然语言处理·chatgpt·llm·seo·数字营销