Summarizer API 可帮助 Bright Sites 和 Terra 创建引人入胜的文章摘要

Mari Viana
Mari Viana

发布时间:2025 年 5 月 15 日

公众依赖新闻发布商来了解本地、国内和国际事件,以及分享他们的深思熟虑的观点。在当今快节奏环境中,文章摘要是一项关键策略,可将复杂信息浓缩为方便访问的摘要片段,从而鼓励读者进一步探索。了解 Bright Sites 和 Terra 如何使用 Summarizer API 采用此策略。

解说Web扩展程序 Chrome 状态意向
MDN 在标志后面 Chrome 138 Beta 版 在标志后面 Chrome 138 Beta 版 视图 发货意图

借助 Summarizer API,您可以生成不同类型、不同长度和不同格式的摘要,例如句子、段落、项目符号列表等。与许多内置 AI API 一样,此 API 使用大语言模型进行推理。在 Chrome 中,我们的模型是 Gemini Nano。

Bright Sites 为 The Standard 添加了个性化文章摘要

Bright Sites 的领先新闻发布平台 Flow 为 150 多家出版机构提供支持。通过将 Summarizer API 集成到其 AI 赋能的 CMS 中,Bright Sites 帮助伦敦的标志性新闻品牌 The Standard 为读者提供个性化的文章摘要。这有助于鼓励用户与文章互动,并回访 The Standard 上的其他文章。

“在 Chrome 中使用 Gemini 的尖端模型,将《标准报》 198 年来为读者提供最新资讯的传统与新的技术创新相结合,为繁忙的读者提供他们所重视的值得信赖的新闻资讯。让读者能够在自己的设备上使用摘要快速查看新闻,只是我们重新构想《标准报》并围绕读者的数字习惯打造以读者为中心的新产品的其中一种方式。”

- Jack Riley,The Standard 首席数字官

通过提供客户端 AI 总结功能,The Standard 能够生成个性化摘要,而无需承担额外的业务费用。在客户端使用摘要样式或位置等数据点执行此操作,可让用户即使在没有互联网连接的情况下也能继续阅读。对于许多携带笔记本电脑乘坐伦敦地铁的用户来说,这种情况经常发生。

首先,他们会检查模型和 API 是否受支持以及是否可用。

// Check if the device supports built-in AI
// Trigger the model download if not yet available, on capable devices
export const deviceCheck = async () => {
  const availability = await Summarizer.availability();
  if (!availability || availability === 'unavailable') {
    return {
      summarizationAvailable: false,
      message:
        "AI summarization tools are not supported on this device" +
        "or the appropriate permissions are not set.",
    }
  }
  if (availability === 'downloadable') {
    const shouldDownload = window.confirm(
      "This page contains an AI summary. To view this summary, you must" +
      "download a language model, which is approximately 3GB in size." +
      "Would you like to download the model?",
    )

    if (!shouldDownload) {
      return {
        summarizationAvailable: false,
        message: "User declined installation.",
      }
    }

    // Trigger an installation
    Summarizer.create();
    return {
      summarizationAvailable: false,
      message: "Installing in the background. This may take a few minutes...",
    }
  }

  if (availability === 'available') {
    return {
      summarizationAvailable: true,
      message: "Ready for use.",
    }
  }
}

以下函数定义了一个通用摘要生成器,将来可以使用其他设备端模型或服务器端模型。

/**
* Define the summarizer.
**/
export const aiSummarize = async (textToSummarize, options) => {
 const availableSummarizationTools = getAvailableAiSummarizationTools()

 if (availableSummarizationTools.has('clientSideAI') && options?.clientSideAI) {
   // Generate the summarizer and abort signal
   const summarizer = await createclientSideAISummarizer(options.clientSideAI.options)
   return await summarizer.summarize(textToSummarize, {
     signal: options.clientSideAI.signal,
   })
 }
 throw new Error(
   'AI summarization tools are not supported on this device or browser.',
 )
}

标准版会将读者的摘要偏好设置存储在 IndexedDB 中,以提供个性化摘要。

/**
* Log preferences in IndexDB for personalization
**/
abortController.current = new AbortController()
const preferencesDB = new PreferencesDB()
const summarization = await aiSummarize(articleContent, {
 clientSideAI: {
   options: await preferencesDB.getCreatesummarizerPreferences(),
   signal: abortController.current.signal,
 },
})

Terra 为葡萄牙语文章提供了可修改的摘要

Terra 是巴西最大的内容门户之一,提供娱乐、新闻和体育内容,每月有超过 5,000 万的唯一身份访问者。Terra 在其内容管理系统 (CMS) 中添加了 Summarizer API 和 Translator API,以帮助记者即时用葡萄牙语总结新闻报道。然后,记者可以进行一些修改,以调整文风或确保准确性,并发布共同创作的摘要,让所有读者都能轻松访问。

虽然 Terra 的 CMS 已经在使用服务器端 LLM,但该团队探索了客户端 AI 作为一种可能具有新优势的独特方法。他们发现,Chrome 中的 Summarizer API 和 Gemini Nano 提供的摘要质量与其服务器端实现相当。客户端解决方案与 Translator API 结合使用后取得了良好成效。

Terra 之所以采用 Chrome 的内置 AI 实现,是因为它具有诸多优势。 客户端 AI 可降低成本并简化数据治理。虽然该团队遇到了一些挑战,尤其是在使用 Summarizer API 管理内容时间范围限制方面,但他们通过谨慎的实现实践克服了这些挑战。

最初,Terra 在确定哪些摘要类型和共享上下文最能满足其需求时遇到了一些挑战。通过实验,他们发现,要想使用 Translator API 生成质量相当的葡萄牙语输出,清晰实用的英语摘要至关重要。内置 AI Playground 在应对这些挑战方面发挥了重要作用,因为 Terra 无需每次都重构代码,即可快速测试自己的想法。

以下示例演示了 Terra 如何调用 Summarizer API,以及在该 API 不可用时提醒用户。

async function summarizerByBuiltInAI(text) {
  if (!(Summarizer)) {
    //Alert users in Portuguese that "Summarizer API is not available"
    cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
    return null
  }

  try {
    const availability = await Summarizer.availability();
    if (availability !== 'available') {
      cms_alert(ALERT_TYPE_ERROR, "Summarizer API não está disponível.")
      return null 
    }

    const summaryContext = "Avoid jargon, use correct grammar, focus on clarity," +
    "and ensure the user can grasp the articles purpose," +
    "without needing to open the original content.";

    const options = {
      sharedContext: summaryContext,
      type: 'teaser',
      format: 'plain-text',
      length: 'long',
    }

    if (availability === 'available') {
      const summarizer = await Summarizer.create(options);
      return await summarizer.summarize(text, {
        context: summaryContext
      })
    }
    // return the download of the Summarizer Model
    if(availability === 'downloadable'){
      return await Summarizer.create();
    }
  } catch (error) {
    //EN: "Error using the Summarizer API"
    cms_alert(ALERT_TYPE_ERROR, "Erro ao usar o Summarizer API.");
    console.error("Erro ao usar o Summarizer API:", error);
    return null
  }
}

此外,Terra 还将摘要生成器与 Translator API 结合使用,将原始葡萄牙语文章的标题、副标题和正文翻译成英语。此翻译版本会由 Summarizer API 处理以生成摘要,然后再翻译回葡萄牙语。这样可以确保用户以应用所用语言接收摘要内容。

async function translateTextByBuiltInAI(text, sourceLanguage, targetLanguage) {
  if (!('translation' in self && 'createTranslator' in self.translation)) {
    return null
  }

  try {
    const translator = await Translator.create({
      sourceLanguage,
      targetLanguage,
    })
    return await translator.translate(text)
  } catch (error) {
    throw error
  }
}
const text = `Title: ${contentTitle};\n\n Sub-title: ${contentSubtitle};\n\n Article content: ${plainText}.`;

const canTranslate = await Translator.availability({
  sourceLanguage: 'pt',
  targetLanguage: 'en',
})

if (canTranslate !== 'available') {
  if (canTranslate === 'downloadable') {
    try {
      await Translator.create({
        sourceLanguage: 'pt',
        targetLanguage: 'en',
      })
      //EN: "Language download completed successfully."
      cms_alert(ALERT_TYPE_OK, "Download do idioma concluído com sucesso.");
    } catch (downloadError) {
      //EN: "Error downloading the language required for translation."
      cms_alert(ALERT_TYPE_ERROR, "Erro ao realizar download do idioma necessário para tradução.");
      return
    }
  } else {
    //EN: "Translation is not available or not ready."
    cms_alert(ALERT_TYPE_ERROR, "A tradução não está disponível ou não está pronta.");
    return
  }
}

const translatedText = await translateTextByBuiltInAI(text, 'pt', 'en') 
const summarizedText = await summarizerByBuiltInAI(translatedText) 
const translatedBackText = await translateTextByBuiltInAI(summarizedText, 'en', 'pt')

Terra 成功集成了内置 AI API,这证明了客户端 AI 在改进内容管理工作流方面具有巨大潜力。借助摘要生成器 API 和 Translator API,Terra 为其记者赋能,提高了效率,并为跨平台提供更出色的用户体验做好了准备。

最佳做法

如果评价输入超出令牌数上限,请采取以下缓解措施:

  • 向 API 使用较小的样本(例如最近 4 条评价)。这有助于更快生成结果。请参阅我们关于扩展客户端总结的指南。
  • QuotaExceededError 会提供有关输入中请求的令牌的更多信息。summarizer 对象有一个 inputQuota 属性,用于指示 API 的令牌限制。这样一来,如果输入超出限制,系统便会提供实时反馈并停用相应功能。

您不妨考虑采用混合方法,以确保为所有用户提供顺畅的体验。首次调用内置 AI API 时,浏览器必须下载模型。

  • 在模型下载期间,Miravia 使用服务器端模型提供初始摘要。内置模型准备就绪后,该网站便改为在客户端执行推理。

您应始终努力打造友好且富有交互性的界面:

  • 实现进度条,以便下载模型并减少响应延迟。
  • 考虑在模型下载方面做到透明。Bright Sites 会通知用户模型下载情况,以便用户了解资源使用情况并征得用户同意。这样,用户可以在继续之前接受或拒绝。

结论和建议

Bright Sites 和 Terra 的示例展示了 Summarizer API 在提升内容易用性和读者互动度方面的价值。通过使用此客户端 API,这些平台改善了阅读体验和个性化设置,同时还简化了数据治理,并且无需额外承担业务费用。与 Summarizer API 一样,所有内置 AI API 均可实现实用的客户端 AI。

想知道 Summarizer API 如何帮助实现其他用例?我们还分享了 Summarizer API 如何帮助 redBus 和 Miravia 创建实用的用户评价摘要

您是否正在使用这些 API 构建新内容?您可以通过 X 上的@ChromiumDevLinkedIn 上的“Chrome 开发者版”与我们分享您的反馈。

资源

致谢

感谢 Terra 的 Guilherme MoserFernando Fischer、CWI 的 Aline SouzaBrian AlfordKeval PatelJack Riley 和 Brightsites 的工程团队、Swetha GopalakrishnanAlexandra KlepperThomas SteinerKenji Baheux 帮助撰写和审核本文档。