Die Summarizer API hilft Bright Sites und Terra, ansprechende Artikelzusammenfassungen zu erstellen

Mari Viana
Mari Viana
LinkedIn
Thierno Thiam

Veröffentlicht: 15. Mai 2025

Die Öffentlichkeit verlässt sich darauf, dass Nachrichtenverlage sie über lokale, nationale und internationale Ereignisse informieren und ihre fundierten Perspektiven teilen. In der heutigen schnelllebigen Welt sind Artikelzusammenfassungen eine wichtige Strategie, um komplexe Informationen in leicht zugängliche Snippets zu verdichten und Leser dazu anzuregen, mehr zu erfahren. Hier erfahren Sie, wie Bright Sites und Terra diese Strategie mit der Summarizer API umsetzen.

ErklärvideoWebErweiterungen Chrome-StatusAbsicht
MDN  Chrome 138  Chrome 138 Ansicht Versandabsicht

Mit der Summarizer API können Sie verschiedene Arten von Zusammenfassungen in unterschiedlichen Längen und Formaten generieren, z. B. Sätze, Absätze, Aufzählungslisten und mehr. Diese API verwendet wie viele der eingebauten KI-APIs Large Language Models für die Inferenz. In Chrome verwenden wir das Modell Gemini Nano.

Bright Sites fügt The Standard personalisierte Artikelzusammenfassungen hinzu

Die führende Nachrichten-Publishing-Plattform von Bright Sites, Flow, wird von über 150 Publikationen genutzt. Durch die Einbindung der Summarizer API in sein KI-gestütztes CMS ermöglicht Bright Sites The Standard, der bekannten Nachrichtenmarke in London, seinen Lesern personalisierte Zusammenfassungen von Artikeln anzubieten. So werden Nutzer dazu angeregt, sich mit Artikeln zu beschäftigen und zu anderen Artikeln auf The Standard weiterzuleiten.

„Die Zusammenarbeit mit den innovativen Gemini-Modellen in Chrome verbindet die 198-jährige Tradition von The Standard, unsere Leser auf dem Laufenden zu halten, mit neuen technischen Innovationen für unsere viel beschäftigten Leser, die vertrauenswürdige Nachrichten immer griffbereit haben möchten. Lesern die Möglichkeit zu geben, sich schnell über die Nachrichten zu informieren, indem sie Zusammenfassungen auf ihren eigenen Geräten erstellen, ist nur eine von vielen Möglichkeiten, wie wir The Standard neu gestalten und neue, auf Leser ausgerichtete Produkte entwickeln, die auf ihren digitalen Gewohnheiten basieren.“

– Jack Riley, Chief Digital Officer, The Standard

Durch die clientseitige KI-Zusammenfassung konnte The Standard personalisierte Zusammenfassungen generieren, ohne dass zusätzliche Geschäftskosten anfielen. Wenn dies clientseitig mithilfe von Datenpunkten wie dem Zusammenfassungsstil oder dem Standort geschieht, können Nutzer auch dann weiterlesen, wenn sie keinen Internetzugriff mehr haben. Das ist häufig der Fall bei Nutzern, die mit ihrem Laptop in der Londoner U-Bahn unterwegs sind.

Zuerst wird geprüft, ob das Modell und die API unterstützt und verfügbar sind.

// 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.",
    }
  }
}

Die folgende Funktion definiert einen generischen Summarizer, der in Zukunft ein anderes On-Device-Modell oder ein serverseitiges Modell verwenden könnte.

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

Beim Standard werden die Zusammenfassungseinstellungen der Leser in IndexedDB gespeichert, um eine personalisierte Zusammenfassung anzubieten.

/**
* 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 stellt Journalisten eine bearbeitbare Zusammenfassung von Artikeln auf Portugiesisch zur Verfügung

Terra ist eines der größten Content-Portale in Brasilien. Es bietet Unterhaltung, Nachrichten und Sport und verzeichnet mehr als 50 Millionen eindeutige Besucher pro Monat. Terra hat seinem Content-Management-System (CMS) die Summarizer API und die Translator API hinzugefügt, damit Journalisten Nachrichtenartikel auf Portugiesisch sofort zusammenfassen können. Journalisten können dann einige stilistische oder akkurate Änderungen vornehmen und die gemeinsam erstellte Zusammenfassung veröffentlichen, damit sie allen Lesern zur Verfügung steht.

Das CMS von Terra verwendet bereits eine serverseitige LLM. Das Team hat jedoch die clientseitige KI als eigenständigen Ansatz mit potenziellen neuen Vorteilen untersucht. Sie stellte fest, dass die Summarizer API und Gemini Nano in Chrome eine vergleichbare Qualität wie ihre serverseitige Implementierung bieten. Die clientseitige Lösung erzielte in Kombination mit der Translator API positive Ergebnisse.

Terra hat die in Chrome integrierte KI aufgrund wichtiger Vorteile übernommen. Clientseitige KI ermöglichte Kosteneinsparungen und eine vereinfachte Datenverwaltung. Das Team stieß zwar auf einige Herausforderungen, insbesondere bei der Verwaltung von Einschränkungen des Inhaltszeitraums mit der Summarizer API, konnte diese aber durch sorgfältige Implementierungspraktiken überwinden.

Anfangs hatte Terra Schwierigkeiten, zu ermitteln, welche Zusammenfassungstypen und welcher gemeinsam genutzte Kontext am besten zu ihren Anforderungen passen. Durch Tests haben sie festgestellt, dass klare und nützliche englische Zusammenfassungen entscheidend für die Erstellung einer ähnlichen Qualität der Ausgabe auf Portugiesisch mit der Translator API sind. Der eingebaute KI-Sandbox war dabei von entscheidender Bedeutung, da Terra ihre Ideen schnell testen konnte, ohne jedes Mal ihren Code umzustrukturieren.

Im folgenden Beispiel wird gezeigt, wie Terra die Summarizer API aufruft und Nutzer benachrichtigt, wenn sie nicht verfügbar ist.

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

Außerdem verwendete Terra den Summarizer in Kombination mit der Translator API, um den Titel, den Untertitel und den Textkörper des portugiesischen Originalartikels ins Englische zu übersetzen. Diese übersetzte Version wird von der Summarizer API verarbeitet, um die Zusammenfassung zu generieren, und dann wieder ins Portugiesische übersetzt. So erhält der Nutzer die zusammengefassten Inhalte in der Sprache der Anwendung.

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

Die erfolgreiche Integration von integrierten KI-APIs in Terra zeigt das enorme Potenzial von clientseitiger KI zur Optimierung von Workflows für die Inhaltsverwaltung. Mit den APIs „Summarizer“ und „Translator“ hat Terra seine Journalisten gestärkt, die Effizienz verbessert und ist gut positioniert, um die Nutzerfreundlichkeit auf allen Plattformen zu verbessern.

Best Practices

Wenn die Eingabe für die Rezension das Tokenlimit überschreitet, gehen Sie so vor:

  • Verwenden Sie für die API eine kleinere Stichprobe, z. B. die letzten vier Rezensionen. So lassen sich schneller Ergebnisse erzielen. Weitere Informationen finden Sie in unserer Anleitung zum Skalieren der clientseitigen Zusammenfassung.
  • Die QuotaExceededError enthält weitere Informationen zu den angeforderten Tokens in der Eingabe. Das summarizer-Objekt hat die Eigenschaft inputQuota, die das Tokenlimit der API angibt. So erhalten Sie Echtzeitfeedback und können die Funktion deaktivieren, wenn die Eingabe das Limit überschreitet.

Sie können einen hybriden Ansatz in Betracht ziehen, um allen Nutzern eine nahtlose Nutzung zu ermöglichen. Wenn eine integrierte KI-API zum ersten Mal aufgerufen wird, muss der Browser das Modell herunterladen.

  • Miravia verwendete ein serverseitiges Modell, um eine erste Zusammenfassung bereitzustellen, während das Modell heruntergeladen wurde. Sobald das integrierte Modell bereit war, wurde auf der Website die clientseitige Inferenz verwendet.

Sie sollten immer eine freundliche und kommunikative Benutzeroberfläche schaffen:

  • Implementieren Sie eine Fortschrittsanzeige für den Modelldownload, um Antwortverzögerungen zu vermeiden.
  • Sorgen Sie für Transparenz beim Modelldownload. Bright Sites hat Nutzer über den Modelldownload informiert, um für Transparenz und Einwilligung bei der Ressourcennutzung zu sorgen. So können Nutzer die Einwilligung akzeptieren oder ablehnen, bevor sie fortfahren.

Schlussfolgerungen und Empfehlungen

Die Beispiele von Bright Sites und Terra zeigen, wie die Summarizer API die Barrierefreiheit von Inhalten und die Leserbindung verbessern kann. Durch die Verwendung dieser clientseitigen API konnten diese Plattformen die Leseerfahrung und Personalisierung verbessern, ohne zusätzliche Geschäftskosten und mit vereinfachter Datenverwaltung. Genau wie die Summarizer API ermöglichen alle integrierten KI-APIs praktische clientseitige KI.

Sie möchten wissen, wie die Summarizer API bei anderen Anwendungsfällen helfen kann? Außerdem haben wir gezeigt, wie die Summarizer API redBus und Miravia dabei hilft, hilfreiche Zusammenfassungen von Nutzerrezensionen zu erstellen.

Entwickeln Sie mit diesen APIs etwas Neues? Teilen Sie sie uns unter @ChromiumDev auf X oder Chromium für Entwickler auf LinkedIn mit.

Ressourcen

Danksagungen

Vielen Dank an Guilherme Moser und Fernando Fischer von Terra, Aline Souza von CWI, Brian Alford, Keval Patel, Jack Riley und das Engineering-Team von Brightsites, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner und Kenji Baheux, die bei der Erstellung und Überprüfung dieses Dokuments mitgewirkt haben.