發布日期:2025 年 5 月 15 日
大眾會依賴新聞發布者提供當地、國內和國際事件的資訊,並分享他們的深刻見解。在現今快速變化的環境中,文章摘要是將複雜資訊濃縮成易於閱讀的片段的重要策略,可鼓勵讀者進一步探索。瞭解 Bright Sites 和 Terra 如何運用 Summarizer API 實行這項策略。
說明 | 網頁 | 額外資訊 | Chrome 狀態 | Intent |
---|---|---|---|---|
MDN | 查看 | Intent to Ship |
Summarizer API 可讓您產生不同類型的摘要,長度和格式各異,例如句子、段落、項目符號清單等。這個 API 與許多內建 AI API 一樣,會使用大型語言模型執行推論。在 Chrome 中,我們的模型是 Gemini Nano。
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.',
)
}
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 是巴西最大的內容入口網站之一,提供娛樂、新聞和體育內容,每月不重複訪客人數超過 5 千萬。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 遊樂場對於克服這些挑戰非常有幫助,因為 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 可大幅提升內容管理工作流程的潛力。有了摘要和翻譯 API,Terra 不僅能讓記者發揮所長、提高效率,還能提供跨平台的優質使用者體驗。
最佳做法
如果評論輸入內容超過符記限制,請採取以下因應措施:
- 使用較小的樣本 (例如最近 4 則評論) 測試 API。這有助於更快產生結果。請參閱擴大用戶端摘要功能的相關指南。
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 建構新項目?歡迎前往 @ChromiumDev on X 或 Chromium for Developers on LinkedIn 與我們分享。
資源
- 進一步瞭解 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 協助撰寫及審查本文。