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 auf Nachrichtenverlage und ‑webpublisher, um sich über lokale, nationale und internationale Ereignisse zu informieren und fundierte Perspektiven zu erhalten. 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 Intent to Ship

Mit der Summarizer API können Sie verschiedene Arten von Zusammenfassungen in unterschiedlichen Längen und Formaten generieren, z. B. Sätze, Absätze oder Listen mit Aufzählungszeichen. Für diese API werden wie für viele der integrierten KI-APIs Large Language Models für die Inferenz verwendet.

Bright Sites fügt personalisierte Artikelzusammenfassungen in The Standard ein

Die führende Nachrichtenveröffentlichungsplattform Bright Sites, Flow, wird von über 150 Publikationen genutzt. Durch die Integration der Summarizer API in sein KI-basiertes CMS kann The Standard, die bekannte Londoner Nachrichtenmarke, seinen Lesern personalisierte Zusammenfassungen von Artikeln anbieten. So werden Nutzer dazu angeregt, sich mit Artikeln zu beschäftigen und zu anderen Artikeln auf The Standard weitergeleitet zu werden.

„Die Zusammenarbeit mit den hochmodernen Gemini-Modellen in Chrome vereint die 198-jährige Tradition von The Standard, unsere Leser auf dem Laufenden zu halten, mit neuen technischen Innovationen für unsere vielbeschäftigten Leser, die unseren vertrauenswürdigen Journalismus immer zur Hand haben möchten. Leser können so schnell die Nachrichten auf ihren eigenen Geräten abrufen. Das ist nur eine der Möglichkeiten, wie wir The Standard neu gestalten und neue, auf Leser ausgerichtete Produkte entwickeln, die auf ihre digitalen Gewohnheiten zugeschnitten sind.“

– Jack Riley, Chief Digital Officer, The Standard

Durch die clientseitige KI-Zusammenfassung konnte The Standard personalisierte Zusammenfassungen erstellen, ohne dass zusätzliche Kosten für das Unternehmen entstanden. Wenn dies clientseitig mit Datenpunkten wie Zusammenfassungsstil oder Standort erfolgt, können Nutzer weiterlesen, auch wenn sie die Internetverbindung verlieren. Das passiert vielen Nutzern, die mit dem Laptop in der Londoner U-Bahn unterwegs sind.

Zuerst wird geprüft, ob das Modell und die API unterstützt werden 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.',
  )
}

Der Standard speichert die Zusammenfassungspräferenz der Leser in IndexedDB, um personalisierte Zusammenfassungen 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 bietet Journalisten eine bearbeitbare Zusammenfassung für Artikel auf Portugiesisch

Terra ist eines der größten Content-Portale in Brasilien und bietet Unterhaltung, Nachrichten und Sport mit mehr als 50 Millionen Besuchern pro Monat. Terra hat die Summarizer API und die Translator API in sein Content-Management-System (CMS) integriert, damit Journalisten Nachrichtenartikel sofort auf Portugiesisch zusammenfassen können. Journalisten können dann einige Änderungen aus stilistischen Gründen oder zur Korrektur vornehmen und die gemeinsam erstellte Zusammenfassung veröffentlichen, sodass sie für alle Leser verfügbar ist.

Im CMS von Terra wird bereits ein serverseitiges LLM verwendet. Das Team hat jedoch clientseitige KI als eigenständigen Ansatz mit potenziellen neuen Vorteilen untersucht. Sie stellten fest, dass die Summarizer API in Chrome eine vergleichbare Qualität wie ihre serverseitige Implementierung bietet. Die clientseitige Lösung hat in Verbindung mit der Translator API positive Ergebnisse erzielt.

Terra hat die in Chrome integrierte KI aufgrund wichtiger Vorteile übernommen. Die clientseitige KI bot Kosteneinsparungen und eine vereinfachte Data Governance. Das Team stieß zwar auf einige Herausforderungen, insbesondere bei der Verwaltung von Einschränkungen für das Inhaltsfenster mit der Summarizer API, konnte diese aber durch sorgfältige Implementierungspraktiken überwinden.

Anfangs hatte Terra Schwierigkeiten, herauszufinden, welche Zusammenfassungstypen und welcher gemeinsame Kontext am besten geeignet waren, ihre Anforderungen zu erfüllen. Durch Tests stellten sie fest, dass klare und nützliche englische Zusammenfassungen entscheidend für die Erstellung einer ähnlichen Qualität in Portugiesisch mit der Translator API waren. Der integrierte KI-Playground war entscheidend, um diese Herausforderungen zu meistern, da Terra ihre Ideen schnell testen konnte, ohne den Code jedes Mal umzugestalten.

Das folgende Beispiel zeigt, 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 hat Terra den Summarizer in Verbindung mit der Translator API verwendet, um den Titel, Untertitel und Haupttext des ursprünglichen portugiesischen Artikels 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 durch Terra zeigt das erhebliche Potenzial von clientseitiger KI zur Verbesserung von Workflows für die Inhaltsverwaltung. Mit den APIs „Summarizer“ und „Translator“ hat Terra seine Journalisten in die Lage versetzt, die Effizienz zu steigern und die Nutzererfahrung auf allen Plattformen zu verbessern.

Best Practices

Wenn die Eingabe für die Überprüfung das Tokenlimit überschreitet, gehen Sie so vor:

  • Verwenden Sie eine kleinere Stichprobe (z. B. die letzten vier Rezensionen) für die API. So können schneller Ergebnisse generiert werden. Weitere Informationen zum Skalieren der clientseitigen Zusammenfassung
  • Der QuotaExceededError enthält weitere Informationen zu den angeforderten Tokens in der Eingabe. Das summarizer-Objekt hat das Attribut inputQuota, das das Tokenlimit der API angibt. So können Sie Echtzeit-Feedback geben und Funktionen deaktivieren, wenn die Eingabe das Limit überschreitet.

Möglicherweise ist ein hybrider Ansatz sinnvoll, um allen Nutzern eine nahtlose Erfahrung zu bieten. Wenn eine integrierte KI API zum ersten Mal aufgerufen wird, muss der Browser das Modell herunterladen.

  • Miravia hat ein serverseitiges Modell verwendet, um eine erste Zusammenfassung zu erstellen, während das Modell heruntergeladen wurde. Sobald das integrierte Modell bereit war, wurde die Inferenz clientseitig ausgeführt.

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

  • Fortschrittsbalken für Modelldownloads implementieren, um Reaktionsverzögerungen zu verringern.
  • Sorgen Sie für Transparenz beim Herunterladen des Modells. Bright Sites hat Nutzer über den Modelldownload informiert, um Transparenz und Einwilligung in die Nutzung von Ressourcen zu ermöglichen. So können Nutzer vor dem Fortfahren die Bedingungen akzeptieren oder ablehnen.

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 das Leseerlebnis und die Personalisierung verbessern, ohne dass zusätzliche Geschäftskosten anfallen und die Datengovernance vereinfacht wird. 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? Wir haben auch beschrieben, wie die Summarizer API redBus und Miravia dabei hilft, hilfreiche Zusammenfassungen von Nutzerrezensionen zu erstellen.

Entwickeln Sie etwas Neues mit diesen APIs? Teilen Sie uns Ihre Meinung auf @ChromiumDev auf X oder Chromium for Developers 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 Brightsites-Entwicklungsteam, Swetha Gopalakrishnan, Alexandra Klepper, Thomas Steiner und Kenji Baheux für die Unterstützung beim Verfassen und Überprüfen dieses Dokuments.