Chrome 内置 AI：让浏览器成为你的 AI 引擎

最近 Chrome 推出了内置 AI 功能，这可能是 Web 开发领域最值得关注的变化之一。想象一下，你的 Web 应用可以直接调用浏览器内置的 AI 模型，无需部署服务器，无需管理模型文件，甚至可以在离线状态下运行。这听起来像是未来，但它已经来了。

为什么需要内置 AI？

传统的 AI 集成方式通常有两种：要么自己部署模型（成本高、维护难），要么调用云端 API（延迟大、隐私担忧）。Chrome 内置 AI 试图解决这些问题，它把 AI 能力直接集成到浏览器运行时中，让开发者可以像调用其他 Web API 一样使用 AI 功能。

这种设计带来了几个明显的好处：

隐私保护：所有处理都在本地完成，敏感数据不会离开用户的设备。这对于处理医疗记录、财务信息等敏感场景特别有价值。

低延迟：不需要网络往返，响应速度更快。用户点击按钮，AI 结果几乎立即返回。

离线可用：即使没有网络连接，AI 功能依然可以工作。这对于移动场景或者网络不稳定的环境很有意义。

成本控制：不需要为每个 API 调用付费，也不需要维护服务器基础设施。对于高频使用的功能，这能显著降低成本。

当然，内置 AI 也有它的局限性。它更适合特定、明确的任务，而不是需要复杂推理的场景。而且，它需要用户的设备满足一定的硬件要求。

硬件门槛：不是所有设备都能跑

在使用内置 AI 之前，你需要了解一个现实：不是所有设备都能运行这些功能。Chrome 对硬件有明确的要求，这主要是为了保证 Gemini Nano 模型能够正常运行。

操作系统限制

目前支持的操作系统包括：

• Windows 10 或 11
• macOS 13 及更高版本（Ventura 及更高版本）
• Linux
• ChromeOS（平台 16389.0.0 及更高版本），但仅限 Chromebook Plus 设备

重要提示：移动设备（Android 版 Chrome、iOS 版 Chrome）目前不支持使用 Gemini Nano 的 API。不过，Translator API 和 Language Detector API 使用的是专家模型，可以在桌面版 Chrome 中使用，对硬件要求也更低。

存储空间：22 GB 的硬性要求

模型需要下载到本地，所以需要足够的存储空间。Chrome 个人资料所在的卷上至少要有 22 GB 的可用空间。这个要求可能会让一些用户望而却步，但考虑到模型的大小和功能，这个空间占用是合理的。

如果下载后可用空间降到 10 GB 以下，Chrome 会自动删除模型。等空间够了，模型会重新下载。这个机制可以防止模型占用过多空间，但也会导致用户需要重新下载。

GPU 或 CPU：两种运行方式

模型可以在 GPU 或 CPU 上运行，但有不同的要求：

GPU 模式：

• VRAM 必须严格大于 4 GB

CPU 模式：

• 至少 16 GB RAM
• 至少 4 个 CPU 核心

如果你的设备有足够的显存，GPU 模式通常会更快。但如果没有合适的 GPU，CPU 模式也能工作，只是速度会慢一些。

网络连接：首次下载需要流量

需要无限流量或不按流量计费的网络连接。按流量计费的连接（比如移动网络）通常不支持，因为首次使用需要下载模型，可能会消耗大量流量。

这个限制主要是为了保护用户，避免在不知情的情况下消耗大量流量。如果你在开发时需要在 localhost 上测试，可以启用相应的 flag。

语言支持：目前还比较有限

从 Chrome 140 开始，Gemini Nano 支持使用英语、西班牙语和日语输入和输出文本。其他语言的支持可能会在后续版本中增加。

如果你需要支持其他语言，可以考虑使用 Translator API，它支持更多语言，而且使用的是专家模型，对硬件要求更低。

开始使用：从检查可用性开始

在使用任何内置 AI API 之前，首先要检查它是否可用。每个 API 都提供了 availability() 方法，返回一个 Promise，可能的值有：

• "unavailable"：设备不支持或会话选项不受支持（可能电量不足或磁盘空间不足）
• "downloadable"：需要下载模型才能使用
• "downloading"：正在下载中
• "available"：可以立即使用

下面是一个完整的可用性检查示例：

async function checkSummarizerAvailability() {
  const availability = await Summarizer.availability();
  
  switch (availability) {
    case 'available':
      console.log('Summarizer API 可用');
      return true;
    case 'downloadable':
      console.log('模型需要下载，请与页面交互后再试');
      return false;
    case 'downloading':
      console.log('模型正在下载中，请稍候...');
      // 可以设置一个轮询机制，等待下载完成
      return false;
    case 'unavailable':
      console.log('API 不可用，可能设备不支持');
      return false;
    default:
      console.log('未知状态');
      return false;
  }
}

用户激活：安全机制的必要性

如果设备支持内置 AI，但模型还没下载，用户必须先与页面进行有意义的交互，才能触发模型下载。这是浏览器的安全机制，防止恶意网站自动下载大文件。

可以使用 navigator.userActivation.isActive 来检查用户是否已经与页面交互过：

if (navigator.userActivation.isActive) {
  // 用户已经与页面交互，可以创建会话
  const summarizer = await Summarizer.create();
} else {
  // 需要用户先交互，比如点击按钮
  console.log('请先与页面交互（如点击按钮）');
}

常见的做法是让用户点击一个按钮，比如"总结"按钮，然后在点击事件中创建会话。这样既满足了用户激活的要求，又提供了良好的用户体验。

实际使用：从简单到复杂

Translator API：最简单的开始

Translator API 使用的是专家模型，不需要 Gemini Nano，所以要求会低一些。它非常适合作为入门示例：

async function translateText(text, targetLanguage) {
  // 检查可用性
  const availability = await Translator.availability();
  
  if (availability !== 'available') {
    throw new Error('Translator API 不可用');
  }
  
  // 创建翻译器
  const translator = await Translator.create();
  
  // 翻译文本
  const translated = await translator.translate(text, {
    targetLanguage: targetLanguage
  });
  
  return translated;
}

// 使用示例：将英文翻译成中文
translateText('Hello, world!', 'zh-CN')
  .then(result => console.log(result))
  .catch(error => console.error('翻译失败:', error));

Summarizer API：处理长文本

Summarizer API 可以帮助用户快速理解长文本的关键内容。下面是一个完整的例子：

async function summarizeText(text) {
  // 1. 检查可用性
  const availability = await Summarizer.availability();
  
  if (availability !== 'available') {
    if (availability === 'downloadable') {
      throw new Error('模型需要下载，请先与页面交互');
    } else if (availability === 'downloading') {
      throw new Error('模型正在下载中，请稍候');
    } else {
      throw new Error('Summarizer API 不可用');
    }
  }
  
  // 2. 检查用户激活
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  // 3. 创建会话
  const summarizer = await Summarizer.create();
  
  // 4. 生成摘要
  const summary = await summarizer.summarize(text);
  
  return summary;
}

// 使用示例
document.getElementById('summarizeBtn').addEventListener('click', async () => {
  const longText = document.getElementById('inputText').value;
  try {
    const summary = await summarizeText(longText);
    document.getElementById('outputText').value = summary;
  } catch (error) {
    console.error('摘要生成失败:', error);
    // 显示友好的错误提示
    alert('无法生成摘要：' + error.message);
  }
});

Writer API：辅助写作

Writer API 可以帮助用户生成文本内容。它使用 Gemini Nano 模型，可以根据提示生成各种类型的文本：

async function generateText(prompt) {
  const availability = await Writer.availability();
  
  if (availability !== 'available') {
    throw new Error('Writer API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  const writer = await Writer.create();
  const result = await writer.write(prompt);
  
  return result;
}

// 使用示例：生成产品介绍
generateText('请为我们的新产品撰写一篇简短的产品介绍')
  .then(result => console.log(result))
  .catch(error => console.error('生成失败:', error));

Rewriter API：改写文本

Rewriter API 可以帮助用户改写现有文本，改变语气、风格或长度：

async function rewriteText(text, options) {
  const availability = await Rewriter.availability();
  
  if (availability !== 'available') {
    throw new Error('Rewriter API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  const rewriter = await Rewriter.create();
  const result = await rewriter.rewrite(text, options);
  
  return result;
}

// 使用示例：将文本改写为正式语气
rewriteText('我们的产品质量非常好', { tone: 'formal' })
  .then(result => console.log(result))
  .catch(error => console.error('改写失败:', error));

Proofreader API：校对文本

Proofreader API 可以检查文本中的语法和拼写错误，并提供修正建议：

async function proofreadText(text) {
  const availability = await Proofreader.availability();
  
  if (availability !== 'available') {
    throw new Error('Proofreader API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  const proofreader = await Proofreader.create();
  const result = await proofreader.proofread(text);
  
  return result;
}

// 使用示例：检查文本错误
proofreadText('This is a test text with some error.')
  .then(result => {
    console.log('修正后的文本:', result.correctedText);
    console.log('建议:', result.suggestions);
  })
  .catch(error => console.error('校对失败:', error));

Prompt API：最强大的功能

Prompt API 是最强大的 API，支持多模态输入。它使用 Gemini Nano 模型，可以处理文本、图像等多种输入。下面是一个简单的例子：

async function generateWithPrompt(promptText) {
  // 检查可用性
  const availability = await Prompt.availability();
  
  if (availability !== 'available') {
    throw new Error('Prompt API 不可用');
  }
  
  // 检查用户激活
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  // 创建会话
  const prompt = await Prompt.create();
  
  // 生成响应
  const response = await prompt.prompt(promptText);
  
  return response;
}

// 使用示例
generateWithPrompt('请用一句话解释什么是人工智能')
  .then(result => console.log(result))
  .catch(error => console.error('生成失败:', error));

会话管理：保持上下文

对于需要多轮对话的场景，Prompt API 支持会话管理。你可以创建一个会话，然后在会话中发送多条消息，模型会记住上下文：

async function createConversation() {
  const availability = await Prompt.availability();
  if (availability !== 'available') {
    throw new Error('Prompt API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  // 创建会话
  const prompt = await Prompt.create();
  
  // 第一条消息
  const response1 = await prompt.prompt('你好，我是小明');
  console.log('AI:', response1);
  
  // 第二条消息，模型会记住之前的上下文
  const response2 = await prompt.prompt('我刚才说我叫什么名字？');
  console.log('AI:', response2);
  
  return prompt;
}

流式传输：提升用户体验

对于长文本生成，流式传输可以显著提升用户体验。用户不需要等待整个响应完成，可以实时看到生成的内容：

async function streamResponse(promptText) {
  const availability = await Prompt.availability();
  if (availability !== 'available') {
    throw new Error('Prompt API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  const prompt = await Prompt.create();
  
  // 使用流式传输
  const stream = await prompt.promptStreaming(promptText);
  
  let fullResponse = '';
  for await (const chunk of stream) {
    fullResponse += chunk;
    // 实时更新 UI
    document.getElementById('output').textContent = fullResponse;
  }
  
  return fullResponse;
}

结构化输出：让 AI 返回 JSON

Prompt API 支持结构化输出，可以让模型返回符合特定 JSON Schema 的响应。这对于需要结构化数据的场景特别有用：

async function getStructuredData(promptText, schema) {
  const availability = await Prompt.availability();
  if (availability !== 'available') {
    throw new Error('Prompt API 不可用');
  }
  
  if (!navigator.userActivation.isActive) {
    throw new Error('请先与页面交互');
  }
  
  const prompt = await Prompt.create({
    outputFormat: {
      type: 'json',
      schema: schema
    }
  });
  
  const response = await prompt.prompt(promptText);
  return JSON.parse(response);
}

// 使用示例：获取结构化的产品信息
const productSchema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    price: { type: 'number' },
    description: { type: 'string' }
  },
  required: ['name', 'price', 'description']
};

getStructuredData('请描述一款智能手机产品', productSchema)
  .then(product => {
    console.log('产品名称:', product.name);
    console.log('价格:', product.price);
    console.log('描述:', product.description);
  })
  .catch(error => console.error('获取失败:', error));

在 localhost 上开发

所有 API 都可以在 localhost 上使用，这对开发来说很方便。不过需要先启用一个 flag：

1. 打开 chrome://flags/#prompt-api-for-gemini-nano-multimodal-input
2. 选择已启用
3. 重启 Chrome

然后可以在开发者工具的控制台中测试：

// 检查模型是否可用
await LanguageModel.availability();
// 应该返回 'available'

如果遇到问题，可以：

1. 重启 Chrome
2. 打开 chrome://on-device-internals
3. 查看"模型状态"标签页，确保没有错误
4. 在控制台再次检查 LanguageModel.availability()

模型下载和管理

首次使用某个 API 时，模型会自动下载到浏览器。下载过程对用户是透明的，但作为开发者，你需要：

1. 通知用户模型下载情况：如果 availability() 返回 "downloading"，应该提示用户正在下载，可能需要一些时间。

2. 处理下载失败：如果下载失败，availability() 会返回 "unavailable"，应该给用户友好的提示。

3. 了解模型大小：模型大小可能会因更新而变化，可以在 chrome://on-device-internals 查看当前模型的大小。

下面是一个处理模型下载的完整示例：

async function waitForModelDownload() {
  let availability = await Summarizer.availability();
  
  if (availability === 'downloading') {
    // 显示下载提示
    showDownloadProgress();
    
    // 轮询检查下载状态
    const checkInterval = setInterval(async () => {
      availability = await Summarizer.availability();
      
      if (availability === 'available') {
        clearInterval(checkInterval);
        hideDownloadProgress();
        console.log('模型下载完成');
      } else if (availability === 'unavailable') {
        clearInterval(checkInterval);
        hideDownloadProgress();
        showError('模型下载失败，请检查网络连接和存储空间');
      }
    }, 1000);
  }
  
  return availability === 'available';
}

使用限制和注意事项

虽然内置 AI 很强大，但也有一些限制需要注意：

功能限制

语言支持有限：目前 Gemini Nano 只支持英语、西班牙语和日语。其他语言可能需要等待后续版本。

模态限制：Summarizer、Writer、Rewriter 和 Proofreader API 只支持文本到文本。只有 Prompt API 支持多模态。

移动设备不支持：使用 Gemini Nano 的 API 在移动设备上不可用。如果你需要支持移动设备，可以考虑使用 Translator API 和 Language Detector API，或者提供服务器端的回退方案。

隐私和安全

遵守使用政策：在使用 Gemini Nano API 之前，应该查看 Google 的《生成式 AI 使用限制政策》。

数据本地处理：所有处理都在本地进行，数据不会上传到服务器，这很好，但也要确保你的应用本身遵守隐私法规。

性能考虑

首次使用延迟：首次使用时需要下载模型，可能会有明显的延迟。你应该在 UI 中提示用户，或者提供加载状态。

资源消耗：模型运行会消耗 CPU 或 GPU 资源，可能影响设备性能，特别是低端设备。你应该在文档中说明这一点，或者提供性能监控。

存储管理：如果存储空间不足，模型会被自动删除，用户需要重新下载。你应该在应用中检测这种情况，并给用户友好的提示。

最佳实践

根据我的研究，这里有几个建议：

1. 优雅降级：始终检查 availability()，如果不可用，提供替代方案或友好的提示。不要假设所有用户都能使用这些功能。

2. 用户激活：在需要下载模型时，确保用户已经与页面交互，避免自动触发下载。这不仅符合浏览器的要求，也能提供更好的用户体验。

3. 错误处理：妥善处理各种错误情况，给用户清晰的反馈。不要只是抛出错误，而是提供有用的信息和建议。

4. 性能优化：对于需要频繁调用的场景，考虑缓存结果或批量处理。避免不必要的 API 调用。

5. 用户体验：在模型下载时显示进度提示，不要让用户等待而不知道发生了什么。使用流式传输可以提升长文本生成的体验。

6. 混合架构：考虑使用混合架构，默认使用客户端 AI，但在不支持的情况下回退到服务器端。这样可以确保所有用户都能使用你的应用。

标准化进程

Chrome 正在努力将这些 API 标准化，以便它们能在所有浏览器中正常运行。这意味着，这些 API 已经被提议到 W3C Web Incubator Community Group，并正在与 Mozilla 和 WebKit 讨论。

目前，Language Detector API 和 Translator API 已被 W3C WebML 工作组采用。Summarizer API、Writer API 和 Rewriter API 也已被 W3C WebML 工作组采用。

这意味着，未来这些 API 可能会在所有主流浏览器中可用，而不仅仅是 Chrome。这对于 Web 开发者来说是个好消息。

总结

Chrome 内置 AI 接口是一个很有前景的技术，它让开发者可以轻松地在 Web 应用中集成 AI 功能，而不用自己部署模型。虽然目前还有一些限制（比如语言支持、平台支持），但随着技术的发展和标准化进程，这些问题应该会逐步解决。

如果你正在开发 Web 应用，并且想加入 AI 功能，不妨试试这些内置 API。它们使用简单，性能不错，还能保护用户隐私。当然，在使用之前，一定要确保目标用户的设备满足要求，并做好优雅降级的处理。

最重要的是，要始终把用户体验放在第一位。即使 AI 功能很强大，如果用户体验不好，用户也不会使用。所以，要确保你的应用在各种情况下都能正常工作，即使 AI 功能不可用。

希望这篇文章对你有帮助。如果你也在用这些 API，欢迎分享你的经验和遇到的问题。

---

参考资源：

• Chrome 内置 AI 官方文档
• 开始使用内置 AI
• 内置 AI API 概览
• 在开发者工具中检查：chrome://on-device-internals
• 检查模型可用性：await LanguageModel.availability()