Gepubliceerd: 15 mei 2025
Het publiek vertrouwt op nieuwsuitgevers om hen te informeren over lokale, nationale en internationale gebeurtenissen en om hun doordachte perspectieven te delen. In de huidige snelle wereld zijn artikelsamenvattingen een belangrijke strategie om complexe informatie te condenseren tot toegankelijke fragmenten, waardoor lezers worden aangemoedigd om verder te zoeken. Ontdek hoe Bright Sites en Terra deze strategie aanpakken met behulp van de Summarizer API.
| Uitlegger | Web | Uitbreidingen | Chrome-status | Intentie |
|---|---|---|---|---|
| MDN | Weergave | Intentie tot verzending |
Met de Summarizer API kun je verschillende soorten samenvattingen genereren in verschillende lengtes en formaten, zoals zinnen, alinea's, opsommingen en meer. Deze API gebruikt, net als veel van de ingebouwde AI API's , grote taalmodellen om inferentie uit te voeren. In Chrome is ons model Gemini Nano.
Bright Sites voegt gepersonaliseerde artikelsamenvattingen toe aan The Standard
Flow , het toonaangevende nieuwsplatform van Bright Sites , ondersteunt meer dan 150 publicaties. Door de Summarizer API te integreren in zijn AI-gestuurde CMS, stelt Bright Sites The Standard , het iconische nieuwsmerk van Londen, in staat om gepersonaliseerde samenvattingen van artikelen aan zijn lezers aan te bieden. Dit moedigt gebruikers aan om te reageren op artikelen en terug te keren naar andere artikelen op The Standard.
Door te werken met de geavanceerde modellen van Gemini in Chrome, bundelen we de 198 jaar aan ervaring van The Standard, die erin bestaat onze lezers op de hoogte te houden met nieuwe technische innovaties voor ons drukke publiek dat waarde hecht aan onze vertrouwde journalistiek binnen handbereik. Lezers in staat stellen snel het nieuws te checken met behulp van samenvattingen die op hun eigen apparaten zijn gemaakt, is slechts één van de manieren waarop we The Standard opnieuw vormgeven en nieuwe, op de lezer gerichte producten ontwikkelen die aansluiten op hun digitale gewoonten.
— Jack Riley , Chief Digital Officer, The Standard
Door client-side AI-samenvattingen aan te bieden, kon The Standard gepersonaliseerde samenvattingen genereren zonder extra bedrijfskosten. Door dit client-side te doen, met behulp van datapunten zoals de stijl of locatie van de samenvatting, konden gebruikers blijven lezen, zelfs wanneer hun internetverbinding wegviel. Dit komt vaak voor bij veel gebruikers die met hun laptop in de Londense metro reizen.
Eerst controleren ze de ondersteuning en beschikbaarheid van het model en de 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.",
}
}
}
De volgende functie definieert een generieke samenvatter die in de toekomst een ander on-device model of een server-side model kan gebruiken.
/**
* 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.',
)
}
De Standaard slaat de samenvattingsvoorkeuren van lezers op in IndexedDB, zodat er een gepersonaliseerde samenvatting kan worden aangeboden.
/**
* 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 biedt journalisten een bewerkbare samenvatting voor artikelen in het Portugees
Terra is een van de grootste contentportals van Brazilië en biedt entertainment, nieuws en sport met meer dan 50 miljoen unieke bezoekers per maand. Terra heeft de Summarizer API en de Translator API toegevoegd aan hun contentmanagementsysteem (CMS) om journalisten te helpen nieuwsberichten direct in het Portugees samen te vatten. Journalisten kunnen vervolgens enkele stijl- of nauwkeurigheidsaanpassingen doorvoeren en de gezamenlijk gemaakte samenvatting publiceren, waardoor deze direct beschikbaar is voor alle lezers.
Hoewel Terra's CMS al een server-side LLM gebruikt, onderzocht het team client-side AI als een aparte aanpak met potentiële nieuwe voordelen. Ze ontdekten dat de Summarizer API en Gemini Nano in Chrome vergelijkbare kwaliteit leverden als hun server-side implementatie. De client-side oplossing leverde positieve resultaten op in combinatie met de Translator API .
Terra koos voor Chrome's implementatie van ingebouwde AI vanwege belangrijke voordelen. Client-side AI bood kostenbesparingen en vereenvoudigde datagovernance. Hoewel het team enkele uitdagingen tegenkwam, met name rond het beheer van beperkingen in contentvensters met de Summarizer API, wisten ze deze te overwinnen door zorgvuldige implementatie.
Aanvankelijk ondervond Terra uitdagingen bij het bepalen welke samenvattingstypen en gedeelde context het beste aan hun behoeften voldeden. Door te experimenteren ontdekten ze dat duidelijke en bruikbare Engelse samenvattingen cruciaal waren om met de Translator API een vergelijkbare kwaliteit in het Portugees te produceren. De ingebouwde AI-speeltuin speelde een cruciale rol bij het overwinnen van deze uitdagingen, omdat Terra hun ideeën snel kon testen zonder telkens hun code te hoeven refactoren.
Het volgende voorbeeld laat zien hoe Terra de Summarizer API aanroept en gebruikers waarschuwt wanneer deze niet beschikbaar is.
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 gebruikte de samenvattingsfunctie in combinatie met de Translator API om de titel, ondertitel en hoofdtekst van het oorspronkelijke Portugese artikel naar het Engels te vertalen. Deze vertaalde versie wordt door de Summarizer API verwerkt om de samenvatting te genereren en vervolgens terugvertaald naar het Portugees. Dit zorgt ervoor dat de gebruiker de samengevatte content in de taal van de applicatie ontvangt.
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's succesvolle integratie van ingebouwde AI API's toont het aanzienlijke potentieel van client-side AI aan om workflows voor contentmanagement te verbeteren. Met de Summarizer en Translator API's heeft Terra journalisten meer mogelijkheden geboden, de efficiëntie verbeterd en is het bedrijf goed gepositioneerd om verbeterde gebruikerservaringen op alle platforms te bieden.
Beste praktijken
Als de beoordelingsinvoer de tokenlimiet overschrijdt, volg dan de volgende maatregelen:
- Gebruik een kleinere steekproef (zoals de 4 meest recente reviews) voor de API. Dit zorgt voor snellere resultaten. Raadpleeg onze richtlijnen voor het schalen van client-side samenvattingen .
- De
QuotaExceededErrorgeeft meer informatie over de aangevraagde tokens in de invoer. Hetsummarizerobject heeft eeninputQuotaeigenschap die de tokenlimiet van de API aangeeft. Dit maakt realtime feedback mogelijk en schakelt functionaliteit uit als de invoer de limiet overschrijdt.
U kunt een hybride aanpak overwegen om een naadloze ervaring voor alle gebruikers te garanderen. De eerste keer dat een ingebouwde AI API wordt aangeroepen, moet de browser het model downloaden.
- Miravia gebruikte een server-side model om een eerste samenvatting te geven terwijl het model werd gedownload. Zodra het ingebouwde model klaar was, schakelde de site over op het uitvoeren van client-side inferentie.
U moet er altijd naar streven een vriendelijke en communicatieve interface te creëren:
- Implementeer een voortgangsbalk voor het downloaden van modellen en beperk reactievertragingen.
- Zorg voor transparantie over de modeldownload. Bright Sites heeft gebruikers op de hoogte gesteld van de modeldownload om transparantie en toestemming voor het gebruik van de bronnen mogelijk te maken. Op die manier konden gebruikers de download accepteren of weigeren voordat ze verdergingen.
Conclusies en aanbevelingen
De voorbeelden van Bright Sites en Terra tonen de waarde van de Summarizer API aan voor het verbeteren van de toegankelijkheid van content en de betrokkenheid van lezers. Door gebruik te maken van deze client-side API verbeterden deze platforms de leeservaring en personalisatie, zonder extra bedrijfskosten en met vereenvoudigd databeheer. Net als de Summarizer API maken alle ingebouwde AI API 's praktische client-side AI mogelijk.
Vraag je je af hoe de Summarizer API kan helpen bij andere use cases? We hebben ook gedeeld hoe de Summarizer API redBus en Miravia helpt bij het maken van nuttige samenvattingen van gebruikersrecensies .
Bouw je iets nieuws met deze API's? Deel het met ons via @ChromiumDev op X of Chromium for Developers op LinkedIn .
Bronnen
- Meer informatie over Summarizer API .
- Begin met het gebruiken van ingebouwde API's in Chrome .
- Lees de Prompt API-casestudy over het ondersteunen van bloggers .
- Lees de casestudy Translation and Language Detector .
- Lees hoe de Summarizer API redBus en Miravia helpt nuttige samenvattingen van gebruikersbeoordelingen te maken .
Dankbetuigingen
Hartelijk dank aan Guilherme Moser en Fernando Fischer van Terra, Aline Souza van CWI, Brian Alford , Keval Patel , Jack Riley en het engineeringteam van Brightsites, Swetha Gopalakrishnan , Alexandra Klepper , Thomas Steiner en Kenji Baheux voor hun hulp bij het schrijven en beoordelen van dit document.