MDN项目：Summarizer API使用指南

概述

Summarizer API是现代浏览器提供的一项创新功能，它允许开发者利用浏览器内置的AI模型对文本内容进行智能摘要。本文将详细介绍如何使用这一API，从基础配置到高级功能，帮助开发者快速掌握文本摘要的实现方法。

核心概念

Summarizer API基于Promise实现异步操作，主要功能通过Summarizer接口提供。该API的核心优势在于：

• 无需依赖外部服务
• 利用浏览器原生AI能力
• 支持多种摘要格式和风格
• 提供多语言支持

基础使用流程

1. 创建Summarizer实例

首先需要创建Summarizer对象实例，这是所有操作的起点：

const summarizer = await Summarizer.create({
  sharedContext: "帮助用户快速判断文章价值的摘要",
  type: "tldr",
  length: "short",
  format: "markdown",
  expectedInputLanguages: ["zh-CN"],
  outputLanguage: "zh-CN"
});

关键配置参数说明：

• sharedContext: 提供摘要生成的上下文指导
• type: 摘要类型（tldr/key-points/headline等）
• length: 摘要长度（short/medium/long）
• format: 输出格式（markdown/plaintext）
• 语言相关参数确保多语言支持

2. 生成文本摘要

创建实例后，可以调用summarize()方法生成摘要：

const summary = await summarizer.summarize(articleText);
console.log(summary);

对于大文本处理，推荐使用流式接口：

const stream = summarizer.summarizeStreaming(longText);
let result = "";

for await (const chunk of stream) {
  result += chunk;
  // 实时更新UI
}

高级功能

1. 能力检测

在实际使用前，建议先检查浏览器是否支持所需配置：

const availability = await Summarizer.availability({
  type: "key-points",
  length: "medium",
  format: "markdown"
});

if (availability === "available") {
  // 支持当前配置
}

可用性状态包括：

• available: 完全支持
• downloadable: 需要下载模型
• unavailable: 不支持

2. 下载进度监控

当需要下载AI模型时，可以监控下载进度：

const summarizer = await Summarizer.create({
  // ...配置...
  monitor(monitor) {
    monitor.addEventListener("downloadprogress", (e) => {
      updateProgressBar(e.loaded);  // 更新UI进度条
    });
  }
});

3. 操作取消

支持通过AbortController取消进行中的操作：

const controller = new AbortController();

setTimeout(() => controller.abort(), 5000); // 5秒超时

try {
  const summary = await summarizer.summarize(text, {
    signal: controller.signal
  });
} catch (e) {
  if (e.name === "AbortError") {
    console.log("操作被取消");
  }
}

配额管理

部分实现可能有使用配额限制：

// 检查配额是否足够
if (await summarizer.measureInputUsage(text) > summarizer.inputQuota) {
  alert("配额不足");
} else {
  // 执行摘要操作
}

最佳实践

1. 错误处理：妥善处理可能出现的错误，如配额不足、语言不支持等情况
2. 资源释放：不再使用的Summarizer实例应及时销毁
3. 用户体验：对于大文本或需要下载的情况，提供进度反馈
4. 配置验证：始终先检查配置可用性

实际应用示例

以下是一个完整的文本摘要工具实现：

<!-- 界面结构 -->
<textarea id="input-text"></textarea>
<select id="summary-type">
  <option value="tldr">简洁摘要</option>
  <option value="key-points">关键点</option>
</select>
<button id="summarize-btn">生成摘要</button>
<div id="summary-output"></div>

// 功能实现
document.getElementById("summarize-btn").addEventListener("click", async () => {
  const text = document.getElementById("input-text").value;
  const type = document.getElementById("summary-type").value;
  
  try {
    const summarizer = await Summarizer.create({
      type,
      length: "medium",
      outputLanguage: "zh-CN"
    });
    
    const summary = await summarizer.summarize(text);
    document.getElementById("summary-output").textContent = summary;
    
    summarizer.destroy(); // 释放资源
  } catch (error) {
    console.error("摘要生成失败:", error);
  }
});

注意事项

1. 不同浏览器对API的支持程度可能不同
2. 大文本处理可能需要较长时间，建议提供取消功能
3. 某些配置可能需要下载额外资源，影响首次使用体验
4. 注意隐私政策，确保用户了解文本处理方式

Summarizer API为Web应用带来了原生AI能力，合理使用可以显著提升用户体验。开发者应根据实际需求选择合适的配置，并充分考虑各种边界情况和用户体验。