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 compte sur les éditeurs d'actualités pour l'informer des événements locaux, nationaux et internationaux, et pour partager leurs points de vue réfléchis. Dans l'environnement actuel, qui évolue rapidement, les résumés d'articles sont une stratégie clé pour condenser des informations complexes en extraits accessibles, encourageant ainsi les lecteurs à en savoir plus. Découvrez comment Bright Sites et Terra abordent cette stratégie à l'aide de l'API Summarizer.

PrésentateurWebExtensions État de ChromeIntention
MDN Chrome 138 Chrome 138 Afficher Intention d'expédition

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

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

Flow, la plate-forme d'édition d'actualités de Bright Sites, est utilisée par 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 des résumés d'articles personnalisés à ses lecteurs. Cela encourage les utilisateurs à interagir avec les articles et à consulter d'autres articles sur The Standard.

"L'utilisation des modèles de pointe de Gemini dans Chrome permet de combiner les 198 ans d'expérience de The Standard en matière d'information de nos lecteurs avec les nouvelles innovations techniques pour notre public occupé, qui apprécie d'avoir notre journalisme de confiance à portée de main. Permettre aux lecteurs de consulter rapidement les actualités à l'aide de résumés générés sur leurs propres appareils n'est qu'une des façons dont nous réinventons The Standard et créons de nouveaux produits axés sur le lecteur en fonction de ses habitudes numériques."

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

Grâce à la fonctionnalité de résumé d'IA côté client, The Standard a pu générer des résumés personnalisés sans entraîner de coûts supplémentaires pour l'entreprise. En effectuant cette opération côté client, à l'aide de points de données tels que le style ou l'emplacement du résumé, les utilisateurs peuvent continuer à lire même lorsqu'ils perdent l'accès à Internet. Cela arrive fréquemment à de nombreux utilisateurs qui voyagent dans le métro londonien avec leur ordinateur portable.

Tout d'abord, ils vérifient la compatibilité 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 outil de résumé générique qui, à l'avenir, pourrait 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.',
  )
}

The 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 des articles en portugais

Terra est l'un des plus grands portails de contenu du Brésil. Il propose des divertissements, des actualités et des sports à 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 à des fins stylistiques ou de précision, puis publier le résumé co-créé, le rendant ainsi 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. Elle a constaté que l' API Summarizer dans Chrome offrait une qualité comparable à son implémentation côté serveur. La solution côté client a donné des résultats positifs lorsqu'elle a été utilisée conjointement 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é quelques difficultés, notamment en ce qui concerne 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 les types de résumés et le contexte partagé les plus adaptés à ses besoins. Après avoir effectué des tests, l'entreprise a découvert que des résumés clairs et utiles en anglais étaient essentiels pour produire une sortie de qualité similaire en portugais avec l'API Translator. L' outil de test d'IA intégrée a joué un rôle déterminant pour surmonter ces difficultés, car Terra a pu tester rapidement ses idées sans avoir à refactoriser son code à chaque fois.

L'exemple suivant montre comment Terra appelle l'API Summarizer et alerte 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é l'outil de résumé conjointement avec l'API Translator pour traduire en anglais le titre, le sous-titre et le corps de l'article original en portugais. Cette version traduite est traitée par l'API Summarizer pour générer le résumé, puis retraduite en portugais. L'utilisateur reçoit ainsi 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 considérable 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 expérience utilisateur améliorée sur toutes les plates-formes.

Bonnes pratiques

Si l'entrée d'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) pour l'API. Cela permet de générer des résultats plus rapidement. Consultez nos conseils sur la mise à l'échelle de la fonctionnalité de résumé 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 de fournir 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 à 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 est passé à l'exécution d'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 pour permettre la transparence et le consentement de l'utilisation des ressources. Ainsi, les utilisateurs pouvaient accepter ou refuser avant de continuer.

Conclusions et recommandations

Les exemples de Bright Sites et de Terra illustrent la valeur de l'API Summarizer pour améliorer l'accessibilité du contenu 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 entraîner de coûts supplémentaires pour l'entreprise et en simplifiant la gouvernance des données. Comme l'API Summarizer, toutes les API d'IA intégrées permettent une IA pratique côté client.

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 utiles des avis des utilisateurs.

Vous créez quelque chose de nouveau avec ces API ? Partagez-le avec nous sur @ChromiumDev sur X ou Chromium for Developers 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énierie de Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner et Kenji Baheux pour leur aide à la rédaction et à la relecture de ce document.