發布日期:2025 年 5 月 15 日
大眾仰賴新聞發布者提供地方、全國和國際事件的資訊,以及分享深入的觀點。在步調快速的現代環境中,文章摘要是將複雜資訊濃縮為易於理解的片段,並鼓勵讀者進一步探索的關鍵策略。瞭解 Bright Sites 和 Terra 如何使用 Summarizer API 採用這項策略。
| 說明影片 | 網頁 | 擴充功能 | Chrome 狀態 | Intent |
|---|---|---|---|---|
| MDN | 查看 | 出貨意願 |
摘要產生器 API 可生成不同類型、長度和格式的摘要,例如句子、段落、項目符號清單等。與許多內建 AI API 類似,這項 API 也會使用大型語言模型執行推論。
Bright Sites 會在 The Standard 中加入個人化文章摘要
Bright Sites 是領先業界的新聞發布平台,旗下 Flow 平台支援超過 150 種出版品。Bright Sites 將 Summarizer API 整合至 AI 輔助 CMS,讓倫敦知名新聞品牌「The Standard」為讀者提供個人化文章摘要。藉此鼓勵使用者閱讀文章,並引導他們循環瀏覽 The Standard 上的其他文章。
「在 Chrome 中使用 Gemini 的尖端模型,結合了 The Standard 198 年的傳統,也就是運用新技術創新,讓讀者隨時掌握最新資訊,同時也讓忙碌的讀者能輕鬆取得我們值得信賴的新聞報導。我們重新構思《The Standard》的樣貌,並根據讀者的數位習慣打造以讀者為中心的新產品,讓讀者在自己的裝置上快速查看新聞摘要,只是其中一項做法。」
— The Standard 數位長 Jack Riley
啟用用戶端 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.',
)
}
標準會將讀者的摘要偏好設定儲存在 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 千萬。Terra 在內容管理系統 (CMS) 中新增了 Summarizer API 和 Translator API,協助記者即時總結葡萄牙文新聞報導。記者可以基於風格或準確度進行幾項編輯,然後發布共同創作的摘要,供所有讀者參考。
雖然 Terra 的 CMS 已使用伺服器端 LLM,但團隊仍探索用戶端 AI,因為這是一種不同的方法,可能帶來新的優勢。他們發現 Chrome 提供的 Summarizer API 品質與伺服器端實作項目不相上下。搭配使用Translator API 時,用戶端解決方案可產生正面結果。
Terra 採用 Chrome 的內建 AI 實作方式,是因為這項技術具有多項優勢。 用戶端 AI 可節省成本,並簡化資料治理作業。雖然團隊遇到一些挑戰,特別是管理內容視窗限制,但他們透過謹慎的實作做法克服了這些問題。
一開始,Terra 在判斷哪些摘要類型和共用情境最能滿足需求時,面臨了許多挑戰。透過實驗,他們發現清楚實用的英文摘要是關鍵,有助於使用 Translator API 產生品質相近的葡萄牙文輸出內容。內建的 AI 測試區有助於解決這些挑戰,因為 Terra 每次都能快速測試想法,不必重構程式碼。
下列範例說明 Terra 如何叫用 Summarizer 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 在強化內容管理工作流程方面的巨大潛力。Terra 運用 Summarizer 和 Translator API,不僅提升了記者工作效率,也為在各平台提供更優質的使用者體驗奠定基礎。
最佳做法
如果評論輸入內容超過權杖限制,請採取下列因應措施:
- 將較小的樣本 (例如最近 4 則評論) 傳送至 API。這有助於加快生成結果的速度。請參閱擴大用戶端摘要功能規模的指南。
QuotaExceededError提供輸入內容中要求權杖的相關資訊。summarizer物件具有inputQuota屬性,可指出 API 的權杖限制。這樣一來,系統就能即時提供意見回饋,並在輸入內容超出限制時停用功能。
建議採用混合式做法,確保所有使用者都能享有流暢體驗。首次呼叫內建 AI API 時,瀏覽器必須下載模型。
- Miravia 使用伺服器端模型提供初步摘要,同時下載模型。內建模型準備就緒後,網站就會改為在用戶端執行推論。
您應盡量建立友善且具溝通性的介面:
- 導入進度列,顯示模型下載進度,減少回應延遲。
- 請考慮模型下載的透明度。Bright Sites 會通知使用者模型下載事宜,確保資源使用情況公開透明,並徵得同意。這樣使用者就能在繼續操作前接受或拒絕要求。
結論與最佳化建議
Bright Sites 和 Terra 的例子顯示,Summarizer API 有助於提升內容無障礙程度和讀者參與度。這些平台使用這項用戶端 API 後,不僅改善了閱讀體驗和個人化服務,還簡化了資料治理程序,且沒有額外業務成本。與 Summarizer API 相同,所有內建 AI API 都能在用戶端啟用實用的 AI 功能。
想知道 Summarizer API 如何協助處理其他用途嗎?我們也分享了摘要 API 如何協助 redBus 和 Miravia 建立實用的使用者評論摘要。
您是否要使用這些 API 建構新項目?歡迎在 X 上的@ChromiumDev 或 LinkedIn 上的 Chromium for Developers 分享您的想法。
資源
- 進一步瞭解 Summarizer API。
- 開始使用 Chrome 內建 API。
- 閱讀提示 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 協助撰寫及審查本文。