发布时间:2025 年 5 月 15 日
公众依赖新闻发布商来了解本地、国内和国际事件,以及分享他们的深思熟虑的观点。在当今快节奏的环境中,文章摘要是将复杂信息浓缩为易于理解的片段的关键策略,可鼓励读者进一步探索。了解 Bright Sites 和 Terra 如何使用 Summarizer API 来实现此策略。
| 说明类视频 | Web | 扩展程序 | Chrome 状态 | 目的 |
|---|---|---|---|---|
| MDN | 查看 | 准备发布 |
借助 Summarizer API,您可以生成不同类型 、各种长度和各种格式的摘要,例如句子、段落 、项目符号列表等。与许多 内置 AI API一样,此 API 使用大语言模型来执行 推理。
Bright Sites 向 The Standard 添加了个性化文章摘要
Bright Sites' 的领先新闻发布 平台 Flow 为 150 多家 出版物提供支持。通过将 Summarizer API 集成到其 AI 驱动的 CMS 中, Bright Sites 使 The Standard(伦敦 标志性新闻品牌)能够向读者提供个性化的文章摘要。 这鼓励用户与文章互动,并重新浏览 The Standard 上的其他文章。
“在 Chrome 中使用 Gemini 的尖端模型,将 The Standard 198 年来让读者了解最新资讯的传统与新技术创新相结合,为忙碌的受众群体提供值得信赖的新闻报道。让读者能够使用在自己的设备上构建的摘要快速查看新闻,这只是我们重新构想 The Standard 并围绕读者的数字习惯构建以读者为中心的新产品的方式之一。”
— 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, using an AI model provided by your
browser. Downloading the model, which could be multiple gigabytes in size,
is required to view the summary. 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('builtInAi') && options?.builtInAI) {
// Generate the built-in AI summarizer and abort signal
const summarizer = await createBuiltInAISummarizer(options.builtInAi.options)
return await summarizer.summarize(textToSummarize, {
signal: options.builtInAi.signal,
})
}
throw new Error(
'AI summarization tools are not supported on this device or browser.',
)
}
The Standard 会将读者的摘要偏好设置存储在 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 是巴西最大的内容门户之一,每月提供娱乐、新闻和体育内容,拥有超过 5000 万独立访客。Terra 将 Summarizer API 和 Translator API 添加到其内容管理系统 (CMS) 中,以帮助记者即时总结葡萄牙语新闻报道。然后,记者可以进行一些编辑,以实现样式或准确性方面的目的,并发布共同创建的摘要,使其可供所有读者使用。
虽然 Terra 的 CMS 已经使用服务器端 LLM,但该团队探索了客户端 AI 作为一种独特的方法,具有潜在的新优势。他们发现 Chrome 中的 Summarizer API 提供的质量与服务器端实现 相当。当与 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 在增强内容管理工作流方面具有巨大的潜力。借助 Summarizer 和 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 上通过@ChromiumDev 或在 LinkedIn 上通过Chromium for Developers 与我们分享。
资源
- 详细了解 Summarizer API。
- 开始在 Chrome 上使用内置 API。
- 阅读关于 Prompt API 为博主赋能的案例研究。
- 阅读翻译和语言检测器案例研究。
- 了解 Summarizer API 如何帮助 redBus 和 Miravia 创建实用的用户评价摘要。
致谢
感谢 Terra 的 Guilherme Moser 和 Fernando Fischer、CWI 的 Aline Souza、 Brian Alford、 Keval Patel、 Jack Riley 和 Brightsites 的 工程团队、 Swetha Gopalakrishnan、 Alexandra Klepper、 Thomas Steiner 和 Kenji Baheux} 帮助撰写和 审核本文档。