De Summarizer API helpt Bright Sites en Terra bij het maken van boeiende artikelsamenvattingen. De Summarizer API helpt Bright Sites en Terra bij het maken van boeiende artikelsamenvattingen. De Summarizer API helpt Bright Sites en Terra bij het maken van boeiende artikelsamenvattingen. De Summarizer API helpt Bright Sites en Terra bij het maken van boeiende artikelsamenvattingen

Mari Viana
Mari Viana

Gepubliceerd: 15 mei 2025

Het publiek vertrouwt op nieuwswebsites voor informatie over lokale, nationale en internationale gebeurtenissen, en voor het delen van doordachte perspectieven. In de huidige, snel veranderende wereld zijn artikelsamenvattingen een belangrijke strategie om complexe informatie te condenseren tot toegankelijke fragmenten, waardoor lezers worden aangemoedigd om verder te lezen. Ontdek hoe Bright Sites en Terra deze strategie toepassen met behulp van de Summarizer API.

Uitleg Web Uitbreidingen Chrome-status Intentie
MDN Chrome 138 Chrome 138 Weergave Voornemen tot verzending

Met de Summarizer API kunt u verschillende soorten samenvattingen genereren in uiteenlopende lengtes en formaten, zoals zinnen, alinea's, opsommingen en meer. Deze API maakt, net als veel van de ingebouwde AI-API's , gebruik van grote taalmodellen voor inferentie.

Bright Sites voegt gepersonaliseerde artikelsamenvattingen toe aan The Standard.

Het toonaangevende nieuwsplatform Flow van Bright Sites wordt gebruikt door meer dan 150 publicaties. Door de Summarizer API te integreren in het AI-gestuurde CMS, stelt Bright Sites The Standard , het iconische Londense nieuwsmerk, in staat om gepersonaliseerde samenvattingen van artikelen aan haar lezers aan te bieden. Dit stimuleert gebruikers om artikelen te lezen en door te sturen naar andere artikelen op The Standard.

"De samenwerking met Gemini's geavanceerde modellen in Chrome combineert de 198-jarige traditie van The Standard om onze lezers op de hoogte te houden met nieuwe technische innovaties voor ons drukke publiek dat waarde hecht aan onze betrouwbare journalistiek binnen handbereik. Lezers in staat stellen snel het nieuws te bekijken 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 AI-samenvatting aan de clientzijde aan te bieden, kon The Standard gepersonaliseerde samenvattingen genereren zonder extra bedrijfskosten. Doordat dit aan de clientzijde gebeurde, met behulp van gegevens zoals samenvattingsstijl of locatie, konden gebruikers blijven lezen, zelfs als ze geen internetverbinding meer hadden. Dit komt vaak voor bij gebruikers die met hun laptop in de Londense metro reizen.

Eerst controleren ze of het model en de API worden ondersteund en beschikbaar zijn.

// 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 gebruik zou kunnen maken van een ander model op het apparaat zelf of een model aan de serverzijde.

/**
* 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 de lezer op in IndexedDB om gepersonaliseerde samenvattingen te kunnen aanbieden.

/**
* 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 aan, met meer dan 50 miljoen unieke bezoekers per maand. Terra heeft de Summarizer API en de Translator API aan hun contentmanagementsysteem (CMS) toegevoegd om journalisten te helpen nieuwsberichten direct in het Portugees samen te vatten. Journalisten kunnen vervolgens enkele bewerkingen uitvoeren voor stijl- of nauwkeurigheidsdoeleinden en de gezamenlijk gemaakte samenvatting publiceren, waardoor deze direct beschikbaar is voor alle lezers.

Hoewel Terra's CMS al gebruikmaakt van een server-side LLM, onderzocht het team client-side AI als een aparte aanpak met potentiële nieuwe voordelen. Ze ontdekten dat de Summarizer API in Chrome een vergelijkbare kwaliteit leverde als hun server-side implementatie. De client-side oplossing leverde positieve resultaten op in combinatie met de Translator API .

Terra koos voor de ingebouwde AI-implementatie van Chrome vanwege belangrijke voordelen. Client-side AI bood kostenbesparingen en vereenvoudigde gegevensbeheer. Hoewel het team enkele uitdagingen tegenkwam, met name rond het beheren van de beperkingen van de contentvensters met de Summarizer API, wisten ze deze te overwinnen door zorgvuldige implementatie.

Aanvankelijk had Terra moeite om te bepalen welke samenvattingstypen en gedeelde context het beste aansloten bij hun behoeften. 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 bereiken. De ingebouwde AI-omgeving was essentieel om deze uitdagingen het hoofd te bieden, omdat Terra hun ideeën snel kon testen zonder telkens hun code te hoeven aanpassen.

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
  }
}

Daarnaast gebruikte Terra de samenvatter in combinatie met de Translator API om de titel, ondertitel en hoofdtekst van het originele Portugese artikel naar het Engels te vertalen. Deze vertaalde versie wordt vervolgens door de Summarizer API verwerkt om de samenvatting te genereren, die daarna weer naar het Portugees wordt vertaald. Dit zorgt ervoor dat de gebruiker de samengevatte inhoud 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')

De succesvolle integratie van ingebouwde AI-API's door Terra toont het aanzienlijke potentieel van client-side AI voor het verbeteren van contentmanagementprocessen. Met de Summarizer- en Translator-API's heeft Terra haar journalisten meer mogelijkheden geboden, de efficiëntie verbeterd en is het bedrijf goed gepositioneerd om een ​​betere gebruikerservaring te bieden op verschillende platforms.

Beste praktijken

Als de hoeveelheid invoer voor de beoordeling de tokenlimiet overschrijdt, volg dan deze maatregelen:

  • Gebruik een kleinere steekproef (zoals de 4 meest recente beoordelingen) voor de API. Dit helpt om sneller resultaten te genereren. Raadpleeg onze richtlijnen voor het schalen van client-side samenvattingen .
  • De QuotaExceededError geeft meer informatie over het aantal aangevraagde tokens in de invoer. Het summarizer object heeft een inputQuota eigenschap die de tokenlimiet van de API aangeeft. Dit maakt realtime feedback mogelijk en zorgt ervoor dat functionaliteit wordt uitgeschakeld als de invoer de limiet overschrijdt.

U kunt overwegen een hybride aanpak te gebruiken 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 gereed was, schakelde de site over op client-side inferentie.

Je moet er altijd naar streven een vriendelijke en communicatieve interface te creëren:

  • Implementeer een voortgangsbalk voor het downloaden van modellen en verminder de reactievertragingen.
  • Overweeg transparantie rondom het downloaden van het model. Bright Sites informeerde gebruikers over het downloaden van het model om transparantie en toestemming voor het gebruik ervan te garanderen. Op die manier konden gebruikers het gebruik accepteren of weigeren voordat ze verder gingen.

Conclusies en aanbevelingen

De voorbeelden van Bright Sites en Terra tonen de waarde aan van de Summarizer API voor het verbeteren van de toegankelijkheid van content en de betrokkenheid van lezers. Door deze client-side API te gebruiken, hebben deze platforms de leeservaring en personalisatie verbeterd, zonder extra bedrijfskosten en met vereenvoudigd databeheer. Net als de Summarizer API maken alle ingebouwde AI-API's praktische client-side AI mogelijk.

Benieuwd hoe de Summarizer API ook voor andere toepassingen gebruikt kan worden? We hebben ook al laten zien hoe de Summarizer API redBus en Miravia helpt bij het maken van nuttige samenvattingen van gebruikersrecensies .

Ben je iets nieuws aan het bouwen met deze API's? Deel het met ons via @ChromiumDev op X of Chromium for Developers op LinkedIn .

Bronnen

Dankbetuigingen

Met 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.