Start · Sprachen · JavaScript · Referenz · LanguageModel.append()

LanguageModel.append()

Methode

Fügt Nachrichten oder multimodalen Inhalt zum Kontextfenster einer <code>LanguageModel</code>-Sitzung hinzu, ohne dass das Modell eine Antwort erzeugt.

seit JavaScript Experimentell: Chrome 138+ (Erweiterungen), sonst Kategorie: webapi

Signatur

LanguageModel.prototype.append(input, options)

Beschreibung

Die Methode append() gehört zur Prompt API (eingebaute KI im Browser, z. B. Gemini Nano in Chrome). Sie legt Inhalte in den Gesprächsverlauf einer bestehenden Sitzung, ohne eine Antwort zu erzeugen. Das Modell verarbeitet den Inhalt dabei schon vorab. Dadurch kommt die Antwort auf einen späteren Aufruf von prompt() oder promptStreaming() schneller.

Typische Einsatzfälle:

  • Große Mengen an Kontext vorab laden (Dokumente, Produktdaten, Bilder), während der Nutzer seine Frage noch tippt.
  • Mehrere Eingaben nacheinander sammeln, z. B. mehrere Bilder oder Textabschnitte, und erst am Ende eine Frage stellen.
  • Nachträglich Zusatzwissen einfügen, ohne dafür einen eigenen Gesprächsschritt zu erzeugen.

Als input geht entweder ein einfacher String (entspricht einer Nachricht mit der Rolle "user") oder ein Array von Nachrichtenobjekten der Form { role, content }. content kann ein String sein oder ein Array aus Teilen wie { type: "text" | "image" | "audio", value }. Bild- und Audioeingaben sind nur erlaubt, wenn die Sitzung mit passenden expectedInputs erstellt wurde.

Das zurückgegebene Promise wird erst erfüllt, wenn das Modell die Eingabe verarbeitet hat. Der angehängte Inhalt belegt Platz im Kontextfenster. Den aktuellen Verbrauch zeigen inputUsage und inputQuota.

Parameter

Name Typ Default Beschreibung
$input Pflicht string | Array<LanguageModelMessage> Der anzuhängende Inhalt: ein String (eine Nachricht mit der Rolle "user") oder ein Array von Nachrichten { role: "user" | "assistant", content }. content ist ein String oder ein Array von Teilen { type, value } mit type = "text", "image" oder "audio".
$options object {} Optionales Objekt mit Einstellungen.
$options.signal AbortSignal Signal, mit dem sich der Vorgang abbrechen lässt. Beim Abbruch wird das Promise mit einem AbortError abgelehnt.

Rückgabewert

Typ
Promise<undefined>
Beschreibung
Ein Promise, das mit undefined erfüllt wird, sobald das Modell den Inhalt verarbeitet und dem Kontext hinzugefügt hat.

Beispiele

Kontext vorab laden, später fragen

const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system', content: 'Du beantwortest Fragen zu Produktdaten knapp auf Deutsch.' }
  ]
});

// Produktdaten schon laden, während der Nutzer noch tippt
const produktdaten = await (await fetch('/api/produkte.json')).text();
await session.append([
  { role: 'user', content: `Hier sind die Produktdaten:\n${produktdaten}` }
]);

// Später: Die Antwort kommt schneller, weil der Kontext schon verarbeitet ist
const antwort = await session.prompt('Welches Produkt ist am günstigsten?');
console.log(antwort);
Das günstigste Produkt ist ... (abhängig von den Daten)

Mehrere Bilder anhängen und dann vergleichen

const session = await LanguageModel.create({
  expectedInputs: [{ type: 'image' }]
});

const input = document.querySelector('#bilder'); // <input type="file" multiple>
for (const datei of input.files) {
  await session.append([
    {
      role: 'user',
      content: [
        { type: 'text', value: `Bild: ${datei.name}` },
        { type: 'image', value: datei }
      ]
    }
  ]);
}

const fazit = await session.prompt('Welches der Bilder ist am schärfsten?');
console.log(fazit);

Abbrechen mit AbortSignal und Kontingent prüfen

const session = await LanguageModel.create();
const controller = new AbortController();

document.querySelector('#abbrechen')
  .addEventListener('click', () => controller.abort());

const langerText = document.querySelector('textarea').value;

try {
  const bedarf = await session.measureInputUsage(langerText);
  if (session.inputUsage + bedarf > session.inputQuota) {
    console.warn('Text passt nicht vollständig ins Kontextfenster.');
  }
  await session.append(langerText, { signal: controller.signal });
  console.log(`Belegt: ${session.inputUsage} / ${session.inputQuota}`);
} catch (err) {
  if (err.name === 'AbortError') {
    console.log('Anhängen abgebrochen.');
  } else {
    throw err;
  }
}
Belegt: 1834 / 6144

// Wichtig · Fallstricke

  • Experimentell: Die Prompt API gibt es derzeit nur in Chromium-Browsern (in Erweiterungen ab Chrome 138, für Webseiten per Origin Trial oder Flag). Firefox und Safari unterstützen sie nicht. Prüfe vorher mit 'LanguageModel' in self und await LanguageModel.availability(), ob die API da ist. Das Modell muss eventuell erst heruntergeladen werden.
  • Kontextfenster: Angehängter Inhalt verbraucht Kontingent. Passt die Eingabe allein nicht ins Fenster, wird das Promise mit einem QuotaExceededError abgelehnt. Andernfalls entfernt der Browser bei Überlauf ältere Nachrichten, außer dem System-Prompt, und löst ein Überlauf-Ereignis aus (contextoverflow, in älteren Versionen quotaoverflow).
  • System-Rolle: System-Anweisungen gehören in initialPrompts von LanguageModel.create(). Eine Nachricht mit role: \"system\" nachträglich per append() einzufügen, führt je nach Implementierung zu einem Fehler.
  • Multimodal: Bilder (Blob, ImageBitmap, HTMLImageElement, HTMLCanvasElement usw.) und Audio (Blob, AudioBuffer) funktionieren nur, wenn die Sitzung mit passenden expectedInputs erstellt wurde. Sonst kommt ein NotSupportedError.
  • Nach session.destroy() wird jeder Aufruf mit einem Fehler abgelehnt (in der Regel InvalidStateError).
  • Anhängen ist rechenintensiv, besonders bei langen Texten oder Bildern. Starte es also frühzeitig, zum Beispiel während der Nutzer noch tippt, und warte auf das Promise (await), bevor du prompt() aufrufst.