CreateMonitor — Schnittstelle · JavaScript-Referenz

Signatur

interface CreateMonitor extends EventTarget

Beschreibung

CreateMonitor gehört zu den eingebauten KI-APIs des Browsers (Summarizer-, Translator-, Language-Detector-, Writer-/Rewriter- und Prompt-API). Beim Aufruf einer statischen create()-Methode, etwa Summarizer.create() oder Translator.create(), muss der Browser das benötigte Modell eventuell erst herunterladen. Mit einem CreateMonitor lässt sich dieser Download beobachten, zum Beispiel für einen Ladebalken.

Das Interface lässt sich nicht selbst instanziieren. Der Browser erzeugt die Instanz und übergibt sie an die Rückruffunktion, die man im Optionsobjekt von create() unter dem Schlüssel monitor angibt. In dieser Funktion registriert man einen Listener für das Ereignis downloadprogress.

Das Ereignis ist ein ProgressEvent. Seine Eigenschaft loaded ist ein Bruchteil zwischen 0 und 1, und total ist immer 1. Man bekommt also keine Byte-Angaben. Um einen Prozentwert anzuzeigen, multipliziert man einfach mit 100.

Ereignis: downloadprogress – feuert immer wieder, solange das Modell heruntergeladen wird.
Handler-Eigenschaft: ondownloadprogress – Alternative zu addEventListener().
Geerbt: addEventListener(), removeEventListener() und dispatchEvent() von EventTarget.

Parameter

Name	Typ	Default	Beschreibung
$monitor	(monitor: CreateMonitor) => void		Option im Optionsobjekt von `create()` (z. B. `Summarizer.create({ monitor })`). Der Browser ruft diese Funktion einmal mit der `CreateMonitor`-Instanz auf. Hier registriert man den `downloadprogress`-Listener.

Rückgabewert

Typ

CreateMonitor

Beschreibung

Wird nicht zurückgegeben, sondern als Argument an die monitor-Rückruffunktion übergeben. Ein EventTarget, das downloadprogress-Ereignisse (ProgressEvent) auslöst.

Beispiele

Download-Fortschritt beim Erzeugen eines Summarizers protokollieren

if ('Summarizer' in self) {
  const summarizer = await Summarizer.create({
    type: 'key-points',
    monitor(m) {
      // m ist eine CreateMonitor-Instanz
      m.addEventListener('downloadprogress', (e) => {
        console.log(`Modell geladen: ${Math.round(e.loaded * 100)} %`);
      });
    },
  });
  const text = document.querySelector('article').textContent;
  console.log(await summarizer.summarize(text));
}

Modell geladen: 0 % Modell geladen: 37 % Modell geladen: 100 % …Zusammenfassung…

Fortschrittsbalken für einen Translator mit ondownloadprogress

const bar = document.querySelector('progress'); // <progress max="1">

const availability = await Translator.availability({
  sourceLanguage: 'en',
  targetLanguage: 'de',
});

if (availability !== 'unavailable') {
  bar.hidden = availability === 'available'; // Modell schon da -> kein Balken
  const translator = await Translator.create({
    sourceLanguage: 'en',
    targetLanguage: 'de',
    monitor(m) {
      m.ondownloadprogress = (e) => {
        bar.value = e.loaded; // 0 bis 1
        if (e.loaded === 1) bar.hidden = true;
      };
    },
  });
  console.log(await translator.translate('Hello world'));
}

Hallo Welt

Download mit AbortSignal abbrechen und Listener entfernen

const controller = new AbortController();
document.querySelector('#abbrechen').onclick = () => controller.abort();

let monitorRef;
const onProgress = (e) => console.log(`Fortschritt: ${(e.loaded * 100).toFixed(0)} %`);

try {
  const detector = await LanguageDetector.create({
    signal: controller.signal,
    monitor(m) {
      monitorRef = m;
      m.addEventListener('downloadprogress', onProgress);
    },
  });
  const [top] = await detector.detect('Bonjour tout le monde');
  console.log(top.detectedLanguage);
} catch (err) {
  if (err.name === 'AbortError') console.log('Download abgebrochen');
} finally {
  monitorRef?.removeEventListener('downloadprogress', onProgress);
}

Fortschritt: 100 % fr

// Wichtig · Fallstricke

Experimentell: Diese API gibt es bisher nur in Chromium-Browsern (Chrome/Edge ab Version 138, nur auf dem Desktop, mit Hardware-Anforderungen). Firefox und Safari unterstützen sie nicht. Prüfen Sie deshalb immer zuerst, ob die API vorhanden ist ('Summarizer' in self), und rufen Sie availability() auf.
e.loaded ist ein Bruchteil (0–1) und keine Byte-Zahl. e.total ist immer 1. Der Browser rundet die Werte absichtlich, damit Webseiten den Nutzer nicht über seine Download-Geschwindigkeit wiedererkennen können (Fingerprinting).
Wenn das Modell schon auf dem Gerät liegt (availability() === 'available'), gibt es meist kein oder nur ein einziges downloadprogress-Ereignis. Nach loaded === 1 kann das Modell noch geladen und initialisiert werden. Die create()-Promise erfüllt sich deshalb eventuell erst etwas später.
Den ersten Download darf eine Seite in der Regel nur nach einer Nutzeraktivierung starten, also etwa nach einem Klick. Sonst wird create() abgelehnt.
In Cross-Origin-iframes muss die Nutzung über eine Permissions Policy erlaubt werden, z. B. allow="summarizer".

Siehe auch

Summarizer Translator CaretPosition VRLayerInit Accelerometer