L'API Summarizer aide Bright Sites et Terra à créer des résumés d'articles attrayants

Mari Viana
Mari Viana
LinkedIn
Thierno Thiam

Publié le 15 mai 2025

Le public s'appuie sur les éditeurs d'actualités pour se tenir informé des événements locaux, nationaux et internationaux, et pour découvrir leurs points de vue éclairés. Dans l'environnement rapide d'aujourd'hui, les résumés d'articles sont une stratégie clé pour condenser des informations complexes en extraits accessibles, ce qui encourage les lecteurs à explorer plus en détail. Découvrez comment Bright Sites et Terra abordent cette stratégie à l'aide de l'API Summarizer.

Vidéo explicativeWebExtensions État de ChromeIntent
MDN Chrome 138 Chrome 138 Afficher Intent to Ship

L'API Summarizer vous permet de générer différents types de résumés dans différents formats et longueurs, tels que des phrases, des paragraphes, des listes à puces, etc. Comme de nombreuses API d'IA intégrées, cette API utilise de grands modèles de langage pour effectuer des inférences. Dans Chrome, notre modèle est Gemini Nano.

Bright Sites ajoute des résumés d'articles personnalisés à The Standard

Flow, la principale plate-forme de publication d'actualités de Bright Sites, alimente plus de 150 publications. En intégrant l'API Summarizer à son CMS optimisé par l'IA, Bright Sites permet à The Standard, la marque d'actualités emblématique de Londres, de proposer à ses lecteurs des résumés personnalisés d'articles. Cela encourage les utilisateurs à interagir avec les articles et à accéder à d'autres articles sur The Standard.

"En collaborant avec les modèles de pointe de Gemini dans Chrome, The Standard s'appuie sur son héritage de 198 ans pour informer ses lecteurs tout en leur proposant de nouvelles innovations techniques. Notre audience, qui est très occupée, apprécie de pouvoir accéder à notre journalisme de confiance en un clic. Permettre aux lecteurs de consulter rapidement les actualités à l'aide de résumés créés sur leurs propres appareils n'est qu'une des façons dont nous repensons The Standard et créons de nouveaux produits axés sur les lecteurs en fonction de leurs habitudes numériques."

— Jack Riley, directeur de la stratégie numérique, The Standard

En proposant un résumé basé sur l'IA côté client, The Standard a pu générer des résumés personnalisés sans encourir de coûts supplémentaires. En effectuant cette opération côté client, à l'aide de points de données tels que le style de résumé ou l'emplacement, les utilisateurs pourront continuer à lire même lorsqu'ils perdront l'accès à Internet. Cela arrive fréquemment à de nombreux utilisateurs qui se déplacent dans le métro londonien avec leur ordinateur portable.

Ils vérifient d'abord la prise en charge et la disponibilité du modèle et de l'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.",
    }
  }
}

La fonction suivante définit un récapitulatif générique qui, à l'avenir, pourra utiliser un autre modèle sur l'appareil ou un modèle côté serveur.

/**
* 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.',
  )
}

La version standard stocke les préférences de résumé des lecteurs dans IndexedDB pour proposer un résumé personnalisé.

/**
* 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 fournit aux journalistes un résumé modifiable pour les articles en portugais

Terra est l'un des plus grands portails de contenus du Brésil. Il propose des contenus d'actualité, de divertissement et de sport, et compte plus de 50 millions de visiteurs uniques par mois. Terra a ajouté l'API Summarizer et l'API Translator à son système de gestion de contenu (CMS) pour aider les journalistes à résumer instantanément les articles d'actualité en portugais. Les journalistes peuvent ensuite apporter quelques modifications pour des raisons stylistiques ou de précision et publier le résumé cocréé, en le rendant facilement accessible à tous les lecteurs.

Bien que le CMS de Terra utilise déjà un LLM côté serveur, l'équipe a exploré l'IA côté client comme une approche distincte offrant de nouveaux avantages potentiels. Ils ont constaté que l'API Summarizer et Gemini Nano dans Chrome offraient une qualité comparable à leur implémentation côté serveur. La solution côté client a donné des résultats positifs lorsqu'elle a été utilisée avec l'API Translator.

Terra a adopté l'implémentation de l'IA intégrée de Chrome en raison de ses principaux avantages. L'IA côté client a permis de réaliser des économies et de simplifier la gouvernance des données. Bien que l'équipe ait rencontré certains défis, notamment concernant la gestion des limites de la fenêtre de contenu avec l'API Summarizer, elle a pu les surmonter grâce à des pratiques d'implémentation minutieuses.

Au départ, Terra a eu du mal à déterminer quels types de résumés et contextes partagés étaient les mieux adaptés à ses besoins. Au fil des tests, ils ont découvert que des résumés en anglais clairs et utiles étaient essentiels pour obtenir un résultat de qualité similaire en portugais avec l'API Traducteur. Le laboratoire d'IA intégré a été essentiel pour relever ces défis, car Terra pouvait tester rapidement ses idées sans avoir à refactoriser son code à chaque fois.

L'exemple suivant montre comment Terra appelle l'API Summarizer et avertit les utilisateurs lorsqu'elle n'est pas disponible.

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

De plus, Terra a utilisé le récapitulatif en conjonction avec l'API Translator pour traduire le titre, le sous-titre et le corps de l'article portugais d'origine en anglais. Cette version traduite est traitée par l'API Summarizer pour générer le résumé, puis traduite à nouveau en portugais. Cela garantit que l'utilisateur reçoit le contenu résumé dans la langue de l'application.

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')

L'intégration réussie des API d'IA intégrées par Terra démontre le potentiel important de l'IA côté client pour améliorer les workflows de gestion de contenu. Grâce aux API Summarizer et Translator, Terra a donné plus de pouvoir à ses journalistes, amélioré son efficacité et est bien placé pour offrir une meilleure expérience utilisateur sur toutes les plates-formes.

Bonnes pratiques

Si l'entrée de l'avis dépasse la limite de jetons, suivez ces mesures d'atténuation:

  • Utilisez un échantillon plus petit (par exemple, les quatre avis les plus récents) dans l'API. Cela permet de générer des résultats plus rapidement. Consultez nos conseils sur la mise à l'échelle de la récapitulation côté client.
  • QuotaExceededError fournit plus d'informations sur les jetons demandés dans l'entrée. L'objet summarizer possède une propriété inputQuota qui indique la limite de jetons de l'API. Cela permet d'obtenir des commentaires en temps réel et de désactiver la fonctionnalité si l'entrée dépasse la limite.

Vous pouvez envisager une approche hybride pour garantir une expérience fluide pour tous les utilisateurs. La première fois qu'une API d'IA intégrée est appelée, le navigateur doit télécharger le modèle.

  • Miravia a utilisé un modèle côté serveur pour fournir un résumé initial pendant le téléchargement du modèle. Une fois le modèle intégré prêt, le site a commencé à effectuer des inférences côté client.

Vous devez toujours vous efforcer de créer une interface conviviale et communicative:

  • Implémentez une barre de progression pour les téléchargements de modèles et réduisez les délais de réponse.
  • Envisagez d'être transparent sur le téléchargement du modèle. Bright Sites a informé les utilisateurs du téléchargement du modèle afin de garantir la transparence et le consentement à l'utilisation des ressources. Les utilisateurs peuvent ainsi accepter ou refuser avant de continuer.

Conclusions et recommandations

Les exemples de Bright Sites et de Terra montrent l'intérêt de l'API Summarizer pour améliorer l'accessibilité des contenus et l'engagement des lecteurs. En utilisant cette API côté client, ces plates-formes ont amélioré l'expérience de lecture et la personnalisation, sans coût commercial supplémentaire et avec une gouvernance des données simplifiée. Tout comme l'API Summarizer, toutes les API d'IA intégrées permettent d'utiliser l'IA côté client de manière pratique.

Vous vous demandez comment l'API Summarizer peut vous aider dans d'autres cas d'utilisation ? Nous avons également expliqué comment l'API Summarizer aide redBus et Miravia à créer des résumés d'avis utiles.

Créez-vous quelque chose de nouveau avec ces API ? Partagez-la avec nous sur @ChromiumDev sur X ou Chromium pour les développeurs sur LinkedIn.

Ressources

Remerciements

Merci à Guilherme Moser et Fernando Fischer de Terra, à Aline Souza de CWI, à Brian Alford, à Keval Patel, à Jack Riley et à l'équipe d'ingénieurs de Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner et Kenji Baheux pour leur aide à la rédaction et à la révision de ce document.