DieSummarizer-API bietet einen asynchronen (Promise-basierten) Mechanismus für eine Webseite, um einen Textkörper in das interne AI-Modell des Browsers einzuspeisen und eine Zusammenfassung des Textes anhand spezifischer Optionen anzufordern. Dieser Artikel erklärt, wie Sie die Grundlagen der Summarizer-API verwenden.

Erstellen eines Summarizers

Alle Funktionen der Summarizer-API werden über eine einzige Schnittstelle aufgerufen —Summarizer.

Der erste Schritt, um das AI-Modell des Browsers zur Ausgabe einer Zusammenfassung zu veranlassen, besteht darin, eine Instanz einesSummarizer-Objekts zu erstellen. Dies geschieht mittels der statischen MethodeSummarizer.create(), die ein Optionsobjekt als Argument nimmt und angibt, welche Art von Zusammenfassung Sie erstellen möchten:

const summarizer = await Summarizer.create({  sharedContext:    "A general summary to help a user decide if the text is worth reading",  type: "tldr",  length: "short",  format: "markdown",  expectedInputLanguages: ["en-US"],  outputLanguage: "en-US",});

Die OptionsharedContext bietet einen String, der dem AI-Modell hilft, eine geeignetere Zusammenfassung für den Kontext zu schreiben, in dem der Text verwendet wird, während dertype angibt, welche Art von Zusammenfassung erstellt werden soll, wie Schlüsselpunkte oder eine "tldr"-Zusammenfassung.

Wir spezifizieren auch die gewünschtelength, das Ausgabe-format([/de/docs/Web/API/Summarizer/format]), dieexpectedInputLanguages und die gewünschteoutputLanguage. Wenn die Eingabe- und Ausgabesprachen nicht angegeben werden, wird die Sprache des Eingabetexts automatisch erkannt und die Ausgabesprache entspricht der Eingabesprache.

Wenn das AI-Modell des Browsers die angegebenen Eingabe- oder Ausgabesprachen nicht unterstützt, wird ein Fehler ausgelöst.

Überprüfung der Konfigurationsunterstützung

Bevor Sie einenSummarizer erstellen, können Sie mit der statischen MethodeSummarizer.availability() überprüfen, ob Ihre gewünschte Konfiguration vom aktuellen Browser unterstützt wird. Zum Beispiel:

const availability = await Summarizer.availability({  type: "tldr",  length: "short",  format: "markdown",  expectedInputLanguages: ["en-US"],  outputLanguage: "en-US",});

Diese Methode gibt einen enumerierten Wert zurück, der angibt, ob die Unterstützung für das angegebene Optionsset verfügbar ist oder sein wird:

• downloadable bedeutet, dass der Browser die angeforderten Optionen unterstützt, aber zuerst ein AI-Modell oder einige Feinabstimmungsdaten für das Modell herunterladen muss.
• downloading bedeutet, dass der Browser die angeforderten Optionen unterstützt, aber den laufenden Download abschließen muss, bevor er fortfahren kann.
• available bedeutet, dass der Browser die gegebene Konfiguration unterstützt, ohne dass neue Downloads erforderlich sind.
• unavailable bedeutet, dass der Browser die gegebene Konfiguration nicht unterstützt.

Wenn ein Download erforderlich ist, wird er automatisch vom Browser gestartet, sobald eineSummarizer-Instanz mit dercreate()-Methode erstellt wird. Sie können den Download-Fortschritt automatisch mit einemMonitor verfolgen.

Erzeugung einer Zusammenfassung

Wenn Sie festgestellt haben, dass Ihre gewünschte Konfiguration funktioniert und Sie eineSummarizer-Instanz erstellt haben, können Sie diese verwenden, um eine Zusammenfassung zu generieren, indem Sie die InstanzmethodeSummarizer.summarize() aufrufen. Sie übergeben ihr den zu zusammenfassenden Text als Argument.

const summary = await summarizer.summarize(myTextString);console.log(summary);

Es akzeptiert auch optional ein Optionsobjekt als zweites Argument, das einen spezifischencontext-String für diese Zusammenfassung sowie ein Abbruch-signal (AbortSignal) zur Verfügung stellt, über das die Anforderung zur Zusammenfassung abgebrochen werden kann (siehe nächster Abschnitt).

Es gibt eine Streaming-Version dersummarize()-Methode —Summarizer.summarizeStreaming() —, die es ermöglicht, die Zusammenfassung alsReadableStream zurückzugeben:

const stream = summarizer.summarizeStreaming(myTextString);let summary = "";for await (const chunk of stream) {  summary += chunk;}console.log("Stream complete");summaryOutput.textContent = summary;

Abbrechen von Vorgängen und Zerstören von Instanzen

Sie können einen anstehendencreate(),summarize() odersummarizeStreaming()-Vorgang mit einemAbortController abbrechen, wobei das zugehörigeAbortSignal alssignal-Eigenschaftswert in das Methodenoptionsobjekt aufgenommen wird. Zum Beispiel würde das Abbrechen einesSummarizer.create()-Vorgangs so aussehen:

const controller = new AbortController();const summary = await summarizer.summarize(myTextString, {  signal: controller.signal,});// ...controller.abort();

Nachdem eineSummarizer-Instanz erstellt wurde, können Sie ihre zugewiesenen Ressourcen freigeben und alle weiteren Aktivitäten stoppen, indem Sie ihreSummarizer.destroy() Methode aufrufen. Sie werden ermutigt, dies zu tun, nachdem Sie dieSummarizer-Objekte abgeschlossen haben, da sie viele Ressourcen verbrauchen können.

summarizer.destroy();

Wenn eincreate()-Aufruf einemAbortController zugeordnet ist und Sie dessenAbortController.abort() Methode aufrufen, nachdem dercreate()-Aufruf erfolgreich war, hat dies den gleichen Effekt wie das Aufrufen vondestroy() auf dem resultierendenSummarizer-Objekt.

Überwachung des Download-Fortschritts

Wenn das AI-Modell für einen bestimmten Summarizer heruntergeladen wird (availability() gibtdownloadable unddownloading zurück), ist es hilfreich, dem Benutzer ein Feedback zu geben, um ihm mitzuteilen, wie lange er warten muss, bis der Vorgang abgeschlossen ist.

DieSummarizer.create()-Methode kann einemonitor-Eigenschaft akzeptieren, deren Wert eine Callback-Funktion ist, die eineCreateMonitor Instanz als Argument erhält.CreateMonitor hat eindownloadprogress-Event, das ausgelöst wird, wenn Fortschritte beim Herunterladen des AI-Modells gemacht werden. Sie können dieses Event verwenden, um Daten zum Ladefortschritt bereitzustellen:

const summarizer = await Summarizer.create({  sharedContext:    "A general summary to help a user decide if the text is worth reading",  type: "tldr",  length: "short",  monitor(monitor) {    monitor.addEventListener("downloadprogress", (e) => {      console.log(`Downloaded ${Math.floor(e.loaded * 100)}%`);    });  },});

Nutzungskontingente

Einige Implementierungen haben ein Eingangskontingent, das regelt, wie viele Vorgänge eine Website in einem bestimmten Zeitraum anfordern kann. Das Gesamtkontingent kann über dieSummarizer.inputQuota-Eigenschaft abgerufen werden, während die Kontingentnutzung für einen bestimmten Zusammenfassungsvorgang mit der MethodeSummarizer.measureInputUsage() zurückgegeben werden kann:

Zum Beispiel wird im unten stehenden Code-Snippet eine neueSummarizer-Instanz mitcreate() erstellt, dann das gesamte Eingangskontingent überinputQuota und die Nutzung des Eingangskontingents für eine bestimmte Textzusammenfassung übermeasureInputUsage() zurückgegeben.

Anschließend testen wir, ob die individuelle Eingangsnutzung für diesen String größer ist als das insgesamt verfügbare Kontingent. Falls ja, werfen wir einen entsprechenden Fehler; falls nicht, beginnen wir mit der Zusammenfassung des Strings mittelssummarize().

const summarizer = await Summarizer.create({  sharedContext:    "A general summary to help a user decide if the text is worth reading",  type: "tldr",  length: "short",});const totalInputQuota = summarizer.inputQuota;const inputUsage = await summarizer.measureInputUsage(myTextString);if (inputUsage > totalInputQuota) {  throw new Error("Boo, insufficient quota to generate a summary.");} else {  console.log("Yay, quota available to generate a summary.");  const summary = await summarizer.summarize(myTextString);  // ...}

Wenn Sie versuchen, einen Zusammenfassungsvorgang auszuführen, der das verfügbare Kontingent überschreitet, wird einQuotaExceededError-Fehler (DOMException) ausgelöst.

Vollständiges Beispiel

Schauen wir uns ein vollständiges Beispiel an, das die Summarizer-API in Aktion zeigt.

HTML

In unserem Markup definieren wir zunächst ein Eingabe-<form>, das dem Benutzer die Eingabe des zu zusammenfassenden Textes und der Konfigurationsoptionen ermöglicht. Dazu gehört ein<textarea> zum Eingeben des zu zusammenfassenden Textes, ein<output>-Element zur Anzeige der vom Benutzer festgelegten Zeichenanzahl des Textes sowie zwei<select>-Elemente zur Auswahl eines Summarizer-type (type) und einerlength (length).

<h2>Input</h2><form>  <div>    <label for="summary-text">Enter text to summarize:</label>    <textarea name="summaryText" rows="6"></textarea>    <output>Input character count: </output>  </div>  <div>    <label for="summary-type">Summary type:</label>    <select name="summaryType">      <option value="headline">Headline</option>      <option value="key-points">Key points</option>      <option value="teaser">Teaser</option>      <option value="tldr" selected>tldr</option>    </select>  </div>  <div>    <label for="summary-length">Summary length:</label>    <select name="summaryLength">      <option value="short" selected>Short</option>      <option value="medium">Medium</option>      <option value="long">Long</option>    </select>  </div>  <button type="submit">Submit</button></form>

Die zweite Hälfte unseres Markups enthält ein<p>-Element zur Anzeige der generierten Zusammenfassung und ein zweites<output>-Element zur Anzeige der Zeichenanzahl der Zusammenfassung.

<h2>Summary output</h2><p></p><output>Output summary character count: 0</output>

* {  box-sizing: border-box;}html {  font-family: "Helvetica", "Arial", sans-serif;}body {  max-width: 600px;  margin: 0 auto;}form div {  display: flex;  flex-direction: column;  gap: 10px;  margin-bottom: 20px;}select,textarea,.summary-output {  padding: 5px;}.summary-output {  min-height: 150px;  border: 1px solid black;  width: 100%;  display: block;}.error {  color: red;}

Beachten Sie, dass wir das CSS für dieses Beispiel nicht zeigen werden, da nichts davon für das Verständnis der Summarizer-API relevant ist.

JavaScript

In unserem Skript beginnen wir damit, Referenzen auf das<form>,<textarea>, das<button> zum Senden, das<p>-Element zur Ausgabe der Zusammenfassung und zwei<output>-Elemente zu erhalten.

const form = document.querySelector("form");const textarea = document.querySelector("textarea");const submitBtn = document.querySelector("button");const summaryOutput = document.querySelector(".summary-output");const inputCount = document.querySelector(".input-count");const outputCount = document.querySelector(".output-count");

Als nächstes verwenden wir die MethodeEventTarget.addEventListener(), um zwei Set von Ereignissen zu überwachen:

• submit-Ereignisse auf dem<form>-Element; wenn die Senden-Schaltfläche angeklickt wird, wird diehandleSubmission()-Funktion aufgerufen.
• input-Ereignisse auf dem<textarea>-Element; wenn der aktuelle Wert des<textarea>-Elements geändert wird, wird dieupdateInputCount()-Funktion aufgerufen.

form.addEventListener("submit", handleSubmission);textarea.addEventListener("input", updateInputCount);

DieupdateInputCount()-Funktion, die als nächstes definiert wird, setzt dentextContent des ersten<output>-Elements auf einen String, der die Länge des<textarea>-Wertes enthält. Wir definieren auch eine Gegenstück-FunktiondisplayOutputCount(), die dasselbe für das zweite<output>-Element macht. Diese Funktion wird erst gegen Ende derhandleSubmission()-Funktion aufgerufen, nachdem die Zusammenfassung zurückgegeben wurde.

function updateInputCount() {  inputCount.textContent = `Input character count: ${textarea.value.length}`;}function displayOutputCount() {  outputCount.textContent = `Output summary character count: ${summaryOutput.textContent.length}`;}

Nun definieren wir diehandleSubmission()-Funktion selbst. Nach der Verhinderung der Standardformularübermittlung erstellen wir eine neueFormData-Objektinstanz, die alle unsere<form>-Daten-Name/Wert-Paare enthält. Wir führen dann einige Datenüberprüfungstests durch, in denen wir prüfen, ob der<textarea>-Inhalt (summaryText) leer oder zu kurz ist, um Zyklen zu verschwenden, und drucken eine Fehlermeldung in das<p>-Element der Zusammenfassungsausgabe, falls dies der Fall ist.

Vorausgesetzt, der Text hat die Tests bestanden, erstellen wir einSummarizer-Objekt mit dercreate()-Methode, indem wir ihm einensharedContext-String und dietype (summaryType) undlength (summaryLength)-Werte übergeben, die im Formular ausgewählt wurden. Wir setzen dann das Ausgabe-<p> der Zusammenfassung und<output> auf "ausstehende" Nachrichten und deaktivieren den<submit>-Button, während wir densummarize()-Vorgang ausführen.

Nachdem dersummary-Wert erfolgreich zurückgegeben wurde, setzen wir ihn alstextContent des Ausgabe-<p>-Elements der Zusammenfassung, rufendisplayOutputCount() auf, um die Ausgabezeichenanzahl im zweiten<output>-Element zu zeigen, und aktivieren den Senden-<button> wieder.

async function handleSubmission(e) {  e.preventDefault();  const formData = new FormData(form);  if (formData.get("summaryText") === "") {    summaryOutput.innerHTML = `<span>No text entered to summarize!</span>`;    return;  } else if (formData.get("summaryText").length < 100) {    summaryOutput.innerHTML = `<span>I'm not trying to summarize something that short!</span>`;    return;  }  summaryOutput.innerHTML = "";  try {    const summarizer = await Summarizer.create({      sharedContext:        "A general summary to help a user decide if the text is worth reading",      type: formData.get("summaryType"),      length: formData.get("summaryLength"),    });    summaryOutput.textContent = "...generating summary...";    outputCount.textContent = "Output summary character count: -";    submitBtn.disabled = true;    const summary = await summarizer.summarize(formData.get("summaryText"));    summaryOutput.textContent = summary;    displayOutputCount();    submitBtn.disabled = false;  } catch (e) {    summaryOutput.innerHTML = `<span>${e}</span>`;  }}

Der letzte Schritt ist der Aufruf derupdateInputCount()-Funktion auf der obersten Ebene des Skripts, um sicherzustellen, dass das erste<output>-Element mit der Eingabezähleranzeige immer den richtigen Wert beim Laden der Seite anzeigt.

updateInputCount();

Ergebnis

Das gerenderte Beispiel sieht so aus:

Versuchen Sie, einen Textkörper in das "Input"-<textarea> einzugeben und dann die Senden- Schaltfläche zu drücken, um eine AI-generierte Zusammenfassung zu erstellen. Der Text Ihrer bevorzugten Wikipedia-Seite wäre ideal. Probieren Sie aus, mehrere Zusammenfassungen mit verschiedenen Optionskombinationen zu erstellen, um zu sehen, wie sie sich auf die Ausgabe auswirken.

Siehe auch

• Web-KI-Demos auf chrome.dev