站点图标 高效码农

Chrome浏览器竟成AI神器？Prompt API实战指南揭秘

高效码农

Chrome内置AI工具：Prompt API详解与实战指南

引言：浏览器里的AI助手，你用过吗？

当我们谈论AI应用时，总会想到需要强大服务器支持的云端模型，或是需要复杂配置的本地部署工具。但现在，Chrome浏览器正在悄悄改变这一点——通过Prompt API，你可以直接在浏览器中调用Gemini Nano模型，处理文本、图像和音频输入，生成智能响应。

这项实验性功能（目前在Chrome 138及以上版本的Origin Trial中）让Web开发者无需依赖外部AI服务，就能为网页添加智能化功能。无论是让网站根据内容回答用户问题，还是自动分类新闻文章，甚至分析用户上传的图片，都能在本地完成。

接下来，我们就详细聊聊Prompt API是什么、如何使用，以及它能为你的Web应用带来哪些可能性。

一、什么是Prompt API？

简单来说，Prompt API是Chrome浏览器内置的一项AI功能，它让开发者可以通过JavaScript API调用Gemini Nano模型，在用户的本地设备上处理自然语言、图像和音频输入，并生成文本输出。

和传统的云端AI服务相比，它的核心特点在于“本地运行”——所有的AI计算都在用户的浏览器中完成，不需要将数据上传到云端。这不仅能减少网络延迟，还能更好地保护用户隐私。

Prompt API能做什么？

根据官方文档，它的应用场景非常广泛：

  • AI驱动的搜索：让网站能根据自身内容回答用户的问题（比如电商网站自动解答“这款产品的保修期是多久”）。
  • 个性化内容：动态分类新闻、文章或商品，帮助用户快速筛选感兴趣的内容。
  • 多模态处理：结合文本、图像和音频输入，完成描述生成、转录或分类（比如让用户上传身份证照片，自动识别关键信息）。

二、使用Prompt API前，你的设备需要满足这些条件

虽然Prompt API已经内置在Chrome中，但它对设备硬件有一定要求。如果你是开发者，在测试或部署相关功能时，需要确保自己和用户的设备符合以下标准：

要求类型 具体标准
操作系统 Windows 10/11、macOS 13+（Ventura及以上）、Linux（暂不支持Android、iOS、ChromeOS）
存储空间 至少22GB空闲空间（模型大小可能随更新变化，不足10GB时会自动删除）
GPU 显存严格大于4GB
网络 无流量限制的连接（Wi-Fi或以太网）

如果你想查看当前模型的具体大小，可以在Chrome浏览器中访问chrome://on-device-internals，进入“模型状态”查看详细信息。

三、从零开始使用Prompt API：步骤详解

使用Prompt API的过程可以分为“检查可用性”“创建会话”“与模型交互”三个核心步骤。下面我们一步步展开说明。

1. 第一步：检查模型是否可用

在调用任何功能前，首先需要确认当前设备是否支持Prompt API，以及模型是否已经准备就绪。这一步可以通过LanguageModel.availability()方法完成。

// 检查模型可用性
const availability = await LanguageModel.availability();
console.log(availability); // 可能返回"unavailable"、"downloadable"、"downloading"或"available"

这个方法会返回四种状态：

  • "unavailable"：设备不支持，或浏览器版本太低。
  • "downloadable"：支持该功能，但需要先下载模型。
  • "downloading"：模型正在下载中。
  • "available"：模型已准备好，可以直接使用。

只有当状态为"available"时，才能正常创建会话并使用模型。

2. 第二步：创建会话，触发模型下载（如果需要）

如果模型可用或可下载，下一步就是通过LanguageModel.create()方法创建会话。这个方法会自动触发模型下载（如果尚未下载），并返回一个会话对象，后续的交互都通过这个对象完成。

基础用法：创建默认会话

// 创建一个默认配置的会话
const session = await LanguageModel.create();

进阶用法：监听下载进度

如果模型需要下载（状态为"downloadable"），可以通过monitor参数监听下载进度，提升用户体验：

const session = await LanguageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      // 显示下载进度（e.loaded为0-1之间的小数）
      console.log(`模型下载中：${Math.round(e.loaded * 100)}%`);
    });
  },
});

自定义会话参数

你还可以通过参数自定义模型的输出风格，主要涉及两个核心参数：

  • topK：控制模型选择候选答案的范围（默认3，最大8）。数值越小，答案越集中；数值越大，可能的结果越多样。
  • temperature：控制输出的随机性（默认1.0，范围0.0-2.0）。0.0接近确定性输出，2.0则更具创造性。
// 获取模型默认参数
const params = await LanguageModel.params();
// 创建一个随机性稍高的会话
const customSession = await LanguageModel.create({
  temperature: Math.min(params.defaultTemperature * 1.5, 2.0), // 不超过最大值2.0
  topK: params.defaultTopK
});

中止会话创建

如果需要在会话创建过程中取消（比如用户关闭了页面），可以使用AbortController：

const controller = new AbortController();
// 绑定一个按钮，点击时中止会话创建
stopButton.onclick = () => controller.abort();

// 创建会话时传入signal
const session = await LanguageModel.create({
  signal: controller.signal
});

3. 第三步：与模型交互——发送提示并获取结果

创建会话后，就可以通过prompt()或promptStreaming()方法与模型交互了。两者的区别在于：prompt()会等待完整结果返回，适合短文本；promptStreaming()会流式返回结果，适合长文本（如文章生成）。

发送简单文本提示

// 非流式输出：适合短回答
const result = await session.prompt("用三句话介绍一下Prompt API");
console.log(result);

// 流式输出：适合长内容，逐步显示结果
const stream = session.promptStreaming("写一篇关于本地AI的短文章");
for await (const chunk of stream) {
  // 逐段显示内容（比如添加到网页的<div>中）
  document.getElementById("output").textContent += chunk;
}

给模型提供上下文：初始提示

如果需要让模型“记住”之前的对话或系统指令，可以在创建会话时通过initialPrompts参数提供上下文：

const session = await LanguageModel.create({
  initialPrompts: [
    { role: "system", content: "你是一个专注于美食推荐的助手，只说中文" },
    { role: "user", content: "我喜欢辣的食物" },
    { role: "assistant", content: "那你可能会喜欢川菜或湘菜" }
  ]
});

// 后续提问会基于上述上下文
const result = await session.prompt("有什么具体的菜推荐吗？");
console.log(result); // 模型会推荐辣的川菜/湘菜菜品

控制模型输出格式：传递JSON schema

如果需要模型返回结构化数据（比如JSON），可以通过responseConstraint参数指定JSON schema，确保输出格式符合要求：

// 定义一个评分 schema（0-5的数字）
const schema = {
  "type": "object",
  "properties": {
    "rating": { "type": "number", "minimum": 0, "maximum": 5 }
  },
  "required": ["rating"]
};

// 让模型根据评论生成评分
const review = "这家店的披萨很美味，服务也很好，但等待时间有点长";
const result = await session.prompt(
  `根据这条评论，给出0-5的评分：${review}`,
  { responseConstraint: schema }
);

// 解析结果
const { rating } = JSON.parse(result);
console.log(`评分：${rating}`);

4. 会话管理：高效使用模型资源

每个会话都会占用一定的设备资源，且能处理的令牌数量有限。合理管理会话可以提升性能，避免资源浪费。

查看会话使用情况

// 查看输入令牌的使用量和上限
console.log(`已使用输入令牌：${session.inputUsage}/${session.inputQuota}`);

克隆会话

如果需要基于现有会话的初始提示创建新会话（重置对话上下文但保留系统指令），可以使用clone()方法：

// 克隆现有会话，保留initialPrompts但清空对话历史
const clonedSession = await session.clone();

终止会话

不再使用会话时，调用destroy()释放资源：

// 销毁会话，释放内存
await session.destroy();

四、多模态功能：不止处理文本，还能看懂图片、听懂声音

从Chrome 138 Canary版本开始，Prompt API支持图像和音频输入，让应用能处理更丰富的内容。

1. 处理图像输入

你可以让模型分析图片内容，生成描述、分类结果或对比分析。示例如下：

// 创建支持图像输入的会话
const session = await LanguageModel.create({
  expectedInputs: [{ type: "image" }]
});

// 获取图片（可以是本地文件或网络图片）
const referenceImage = await (await fetch("/sample.jpg")).blob();
const userImage = document.querySelector("input[type='file']").files[0];

// 让模型对比两张图片
const result = await session.prompt([
  {
    role: "user",
    content: [
      { type: "text", value: "对比这两张图片，说明它们的异同" },
      { type: "image", value: referenceImage },
      { type: "image", value: userImage }
    ]
  }
]);

console.log(result);

2. 处理音频输入

模型可以转录音频内容，或将音频中的信息转化为文本。比如处理用户的语音输入：

// 创建支持音频输入的会话
const session = await LanguageModel.create({
  expectedInputs: [{ type: "audio" }]
});

// 假设通过麦克风录制了10秒音频，得到audioBlob
const audioBlob = await recordMicrophone(10);

// 让模型转录音频内容
const result = await session.prompt([
  {
    role: "user",
    content: [
      { type: "text", value: "将这段音频转写成文字" },
      { type: "audio", value: audioBlob }
    ]
  }
]);

console.log("转录结果：", result);

五、Prompt API的应用场景：这些功能可以直接落地

结合文本、图像和音频处理能力，Prompt API能实现很多实用功能。以下是几个典型场景：

1. 文本处理场景

  • 内容总结：自动总结用户上传的文档、酒店评论或新闻文章。
  • 结构化提取：从产品描述中提取价格、规格等信息，生成表格。
  • 智能分类：根据内容给文章打标签（如“科技”“娱乐”），方便用户筛选。

2. 图像处理场景

  • 图片描述生成：为盲人群体生成图片的文字描述，提升网站可访问性。
  • 物品识别：让用户上传身份证照片，自动识别姓名、身份证号等信息。
  • 风格对比：对比用户上传的设计图与参考图，找出差异点。

3. 音频处理场景

  • 语音转文字：在聊天应用中，自动转录用户发送的语音消息。
  • 内容过滤：分析音频文件，识别是否为现场录音或音乐。
  • 指令识别：让用户通过语音下达指令（如“搜索最近的咖啡店”），模型转写后触发相应功能。

六、使用注意事项：避免这些“坑”

虽然Prompt API功能强大，但在使用时需要注意以下几点，避免出现问题：

  1. 权限限制：默认情况下，只有顶层窗口和同源iframe能使用该API。如果需要在跨域iframe中使用，需添加权限设置：allow="language-model"。

  2. Web Workers不支持：目前Prompt API只能在主文档或iframe中运行，不能在Web Workers中使用，因此密集型操作可能会影响页面流畅度。

  3. 隐私与合规：必须遵守Google的AI使用政策，确保用户数据（尤其是图像、音频等敏感内容）的安全，避免滥用。

  4. 性能优化：频繁创建会话会消耗大量资源，建议复用会话；如果不需要保留上下文，可使用clone()方法重置会话，而非重新创建。

  5. 存储空间管理：当设备空闲空间不足10GB时，模型会自动删除。需要提示用户保持足够的存储空间，避免反复下载。

七、FAQ：你可能关心的问题

1. Prompt API需要联网吗？

模型下载时需要联网（无流量限制的网络），但下载完成后，所有计算都在本地进行，无需联网即可使用。

2. 哪些浏览器支持Prompt API？

目前只有Chrome浏览器（138及以上版本，处于Origin Trial阶段）支持，其他浏览器暂不支持。

3. 模型下载需要多久？

取决于网络速度，模型大小约22GB，建议在Wi-Fi环境下下载。可以通过downloadprogress事件实时显示进度。

4. 移动设备能使用吗？

暂时不能。目前仅支持Windows、macOS和Linux桌面系统，Android、iOS和ChromeOS暂不支持。

5. 如何查看模型是否已下载？

在Chrome中访问chrome://on-device-internals，进入“模型状态”即可查看模型是否已下载及当前大小。

6. 会话的上下文能保存多久？

每个会话会保留对话上下文，直到上下文窗口满（受令牌数量限制）或会话被销毁。如果需要长期保存对话，需手动将历史记录存储在本地（如localStorage），并在新会话中通过initialPrompts恢复。

结语：本地AI，为Web应用打开新可能

Prompt API的出现，让Web应用无需依赖云端AI服务，就能在用户本地设备上实现智能化功能。这不仅降低了开发成本（无需搭建服务器），还提升了响应速度和隐私安全性。

虽然目前它还处于实验阶段，对设备硬件有一定要求，但随着浏览器和AI模型的不断优化，未来我们可能会看到更多基于本地AI的创新应用——从智能客服到内容分析，从多模态交互到个性化推荐，本地AI将成为Web开发的重要工具。

如果你是Web开发者，不妨在符合条件的设备上测试一下Prompt API，探索它能为你的应用带来哪些新功能。如果在使用中遇到问题，可以通过Chrome的bug报告系统或GitHub代码库反馈，帮助完善这项技术。

退出移动版