Hotdry.

Article

Chrome Prompt API 实战:浏览器端侧 AI 能力的工程化落地指南

深入解析 Chrome 内置 Prompt API 的调用流程、会话管理策略与多模态输入方案,提供硬件要求检查、离线运行与生产环境部署的完整参数清单。

2026-04-27web

随着生成式 AI 技术向终端设备迁移,浏览器作为用户日常使用最频繁的应用载体,正在成为端侧 AI 能力的重要承载平台。Chrome 于 2025 年正式引入的 Prompt API,为 Web 开发者提供了一种直接在浏览器中调用本地 Gemini Nano 模型的能力,无需将用户数据上传至云端即可实现智能化交互。本文将从工程化角度出发,系统梳理该 API 的核心调用流程、硬件依赖、会话管理策略以及多模态输入的实现方案,帮助开发者快速掌握在生产环境中落地浏览器端侧 AI 能力的具体方法。

Prompt API 核心能力与定位

Prompt API 是 Chrome 内置 AI 能力体系中的核心接口,它允许网页应用直接调用运行于本地的 Gemini Nano 模型完成各类自然语言处理任务。与传统的云端大模型调用方式相比,这一 API 的最大优势在于数据流转完全局限于用户设备内部,响应延迟更低,且在网络不可用时仍能提供基础的智能服务。对于隐私敏感型应用而言,这一特性意味着可以在不向第三方服务器发送任何用户输入的前提下,为用户提供智能摘要、文本生成、内容分类等能力。

从技术架构来看,Prompt API 并不是将模型直接嵌入 Chrome 安装包中,而是在用户首次调用时按需下载 Gemini Nano 模型。这一设计既控制了 Chrome 本身的安装体积,又为模型的后续迭代提供了灵活性。值得注意的是,Chrome 138 版本对 Web 场景开放了该 API,而 Chrome 148 版本则进一步支持在浏览器扩展中使用更多采样参数。需要特别说明的是,Prompt API 当前仅在桌面端 Chrome 中可用,Chrome for Android、iOS 以及非 Chromebook Plus 设备的 ChromeOS 尚未获得支持。

硬件环境要求与可用性检测

在着手开发之前,开发者必须清晰了解目标用户的硬件环境是否满足模型运行的基本要求。根据官方文档,Prompt API 对操作系统、存储空间以及计算能力均设有明确门槛。操作系统方面,目前仅支持 Windows 10 或 Windows 11、macOS 13 及以上版本(Ventura 及后续版本)、Linux 系统,以及 ChromeOS 16389.0.0 及以上版本的 Chromebook Plus 设备。存储空间要求至少 22 GB 的可用磁盘空间,因为模型文件本身会占用相当可观的存储配额。

计算能力的判断则需要区分 GPU 和 CPU 两种运行模式。若设备配备独立显卡且显存超过 4 GB,模型可以充分利用 GPU 加速获得更快的推理速度;若使用 CPU 推理,则要求系统拥有至少 16 GB 内存以及 4 个以上的 CPU 核心。此外,如果应用需要处理音频输入,则必须使用 GPU 模式方可正常运行。网络方面,官方建议使用无限流量或按量计费的网络连接,因为模型下载和更新过程中会产生较大的数据流量。

在代码层面,开发者应当首先调用 LanguageModel.availability() 方法检测当前环境是否满足运行条件。该方法接受与 prompt()promptStreaming() 相同的配置参数,返回值可能为 available(可直接使用)、downloading(正在下载模型)或 unavailable(不可用)。针对返回值为 downloading 的情况,开发者应当向用户展示下载进度,并在 UI 中提供相应的状态提示。以下是可用性检测的典型实现方式:

const availability = await LanguageModel.availability({
  expectedInputs: [{ type: 'text', languages: ['zh-CN'] }],
  expectedOutputs: [{ type: 'text', languages: ['zh-CN'] }]
});

if (availability === 'unavailable') {
  console.warn('当前环境不支持 Prompt API');
} else if (availability === 'downloading') {
  console.log('模型正在下载,请稍候');
}

会话创建与上下文管理

当检测到 API 可用后,下一步便是创建与语言模型的会话。LanguageModel.create() 是创建会话的入口函数,它返回一个 LanguageModelSession 对象,后续所有的推理请求都通过该对象的 prompt()promptStreaming() 方法完成。会话创建过程本身包含模型的加载和初始化,首次创建会话时可能需要等待数秒时间,开发者应当通过用户激活(user activation)触发这一过程,以符合浏览器对自动播放策略的要求。

会话创建支持丰富的配置选项,其中 initialPrompts 参数允许开发者在会话初始化时注入系统提示和历史对话上下文。这对于实现多轮对话、角色扮演或任务续承等场景尤为关键。系统提示(role 为 system 的消息)的内容会始终保留在上下文窗口中,不会被后续的上下文溢出处理所丢弃。开发者可以利用这一特性为模型设定长期角色定义,而在用户对话过程中产生的历史记录则会在上下文接近满载时被逐步遗忘。以下示例展示了如何创建一个预置上下文的会话:

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: '你是一个专业的技术文档助手,擅长用通俗易懂的语言解释复杂概念。' },
    { role: 'user', content: '什么是端侧 AI?' },
    { role: 'assistant', content: '端侧 AI 是指在用户设备本地运行的人工智能模型,无需网络连接即可完成推理计算。' }
  ],
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`模型下载进度:${e.loaded * 100}%`);
    });
  }
});

对于输出格式有严格要求的场景,Prompt API 还支持通过 responseConstraint 参数传入 JSON Schema,以实现结构化输出。模型会严格按照给定的 Schema 生成响应,这在与后端系统集成或需要机器可读结果的场景中非常有用。此外,如果希望在已有会话中追加上下文而无需立即触发推理,可以使用 append() 方法将提示预先填充到会话中,待后续调用 prompt() 时模型已经完成了预处理。

流式输出与交互控制

对于可能产生较长文本回复的场景,开发者应当优先使用 promptStreaming() 方法而非 prompt() 方法。前者返回的是一个 ReadableStream,开发者可以逐块获取模型生成的内容并实时展示给用户,显著改善长文本场景下的用户体验。在实现流式输出时,可以借助 for await...of 语法遍历流中的数据块:

const stream = session.promptStreaming('请详细解释 Chrome Prompt API 的技术原理');
for await (const chunk of stream) {
  outputElement.textContent += chunk;
}

无论是 prompt() 还是 promptStreaming(),都支持通过第二个参数传入配置对象,其中 signal 字段可以接收一个 AbortSignal。这使得开发者能够随时取消正在进行的推理操作,对于实现停止生成按钮或超时自动中断等功能非常实用。配合 session.destroy() 方法,可以在会话不再需要时立即释放模型资源,避免持续占用用户设备的计算能力和内存。

会话本身维护了一个上下文窗口,用于存储历史对话的 token 数量。开发者可以通过 session.contextUsagesession.contextWindow 属性实时监控上下文的使用情况。当上下文窗口接近满载时,系统会自动尝试移除最早的对话记录以腾出空间,这一过程会触发 contextoverflow 事件。如果剩余空间仍不足以处理新的请求,prompt()promptStreaming() 会抛出 QuotaExceededError 异常,此时开发者应当考虑创建新会话或精简输入内容。

多模态输入能力实践

Prompt API 的另一大亮点在于其多模态输入能力。除了纯文本之外,开发者还可以向模型传递图像和音频数据,这为构建图像理解、语音转写等高级应用奠定了基础。支持的图像输入类型包括 HTMLImageElementHTMLCanvasElementImageBitmapBlob 等 DOM 对象,音频输入则支持 AudioBufferArrayBuffer 以及 Blob 等格式。以下是一个典型的多模态会话创建和调用示例:

const session = await LanguageModel.create({
  expectedInputs: [
    { type: 'text', languages: ['zh-CN'] },
    { type: 'image' },
    { type: 'audio' }
  ],
  expectedOutputs: [{ type: 'text', languages: ['zh-CN'] }]
});

const imageBlob = await (await fetch('/example-image.jpg')).blob();
const response = await session.prompt([
  {
    role: 'user',
    content: [
      { type: 'text', value: '请描述这张图片的内容:' },
      { type: 'image', value: imageBlob }
    ]
  }
]);
console.log(response);

在实际应用中,开发者可以利用这一能力实现诸如图片自动标注、截图内容分析、语音消息转写等功能。Chrome 官方也提供了多个在线演示项目,包括 Mediarecorder Audio Prompt(音频输入演示)和 Canvas Image Prompt(图像输入演示),开发者可以参考这些示例快速上手多模态功能的实现。

生产环境部署的关键参数

将 Prompt API 投入生产环境使用时,以下几个关键参数和最佳实践值得特别关注。首先是模型下载管理:首次调用 API 时会触发模型下载,这个过程可能耗时较长且消耗约 1.5 GB 的磁盘空间,开发者应当在界面上清晰地向用户展示下载进度,并在下载完成后提供明确的成功或失败反馈。考虑到模型可能会随 Chrome 更新而变化,开发者可以通过访问 chrome://on-device-internals 查看当前安装的模型确切大小。

其次是错误处理和降级策略。由于硬件要求严格,部分用户设备可能无法满足运行条件,开发者应当提前设计好降级方案,例如回退到基于云端 API 的实现,或者向用户显示友好的兼容性提示。同时,网络连接状态的变化也可能影响模型下载和更新,开发者应当监听网络事件并在必要时触发重试逻辑。

第三是性能优化与会话复用。会话创建本身是一个相对昂贵的操作,频繁销毁和重建会话会产生明显的延迟。建议在实际应用中保持会话的生命周期与用户任务相匹配,在用户完成一轮完整的交互任务后再考虑销毁会话。对于需要并行处理多个请求的场景,可以使用 session.clone() 方法复制现有会话,这样可以在保留上下文的同时利用多会话并发处理不同的请求。

安全策略与权限控制

Prompt API 默认只在同源页面和顶层窗口中可用,跨域 iframe 需要通过 Permission Policy 显式授权。嵌入第三方内容的网站应当谨慎评估是否允许这些 iframe 访问语言模型能力,避免潜在的安全风险。目前该 API 暂不支持在 Web Worker 中使用,这是因为每个 Worker 需要独立的文档上下文来检查权限策略状态。

在使用该 API 之前,开发者还需要确认已阅读并同意 Google 的生成式 AI 禁止使用政策(Generative AI Prohibited Uses Policy),确保应用场景符合政策要求。特别是涉及内容过滤、自动化决策等敏感场景时,应当在用户协议中明确告知用户 AI 能力的存在和作用方式。

开发者资源与进阶路径

Chrome 官方为 Prompt API 提供了完善的开发者文档和示例项目。除了前文提到的在线演示外,开发者还可以访问 Prompt API Playground 进行交互式体验,或者查阅 GitHub 上的扩展示例仓库了解更完整的实现细节。对于希望在浏览器扩展中集成该 API 的开发者,需要特别注意 Chrome 148 版本提供的采样参数(topK 和 temperature)定制能力,这为精细控制模型输出提供了更大的灵活性。

随着端侧 AI 技术的持续发展,Chrome 计划在未来版本中进一步扩展 API 的能力边界,包括支持更多语言、优化模型性能以及提升多模态处理的效率。开发者可以通过加入 Chrome 的早期预览计划(Early Preview Program)或在 GitHub 仓库中提交反馈,参与塑造这一新兴 Web 平台能力的发展方向。对于希望构建隐私优先、离线可用、智能化的 Web 应用的团队而言,Prompt API 无疑是一个值得关注和深入探索的技术选型。


参考资料:

web