Übersetzung mit integrierter KI

Thomas Steiner

Alexandra Klepper

Veröffentlicht am 13. November 2024, zuletzt aktualisiert am 20. Mai 2025

Erklärung	Web	Erweiterungen	Chrome-Status	Absicht
MDN	Chrome 138	Chrome 138	Ansicht	Intent to Ship

Verwenden Sie die Translator API in Chrome, um Text mit KI-Modellen zu übersetzen, die im Browser bereitgestellt werden.

Möglicherweise bieten Sie bereits Websiteinhalte in mehreren Sprachen an, um sie einem globalen Publikum zugänglich zu machen. Mit der Translator API können Nutzer in ihrer Muttersprache beitragen. So können Nutzer beispielsweise in ihrer primären Sprache an Supportchats teilnehmen und Ihre Website kann die Sprache in die Sprache übersetzen, die Ihre Kundenservicemitarbeiter verwenden, bevor die Daten das Gerät des Nutzers verlassen. So wird eine reibungslose, schnelle und inklusive Nutzererfahrung für alle Nutzer geschaffen.

Für die Übersetzung von Inhalten im Web war bisher in der Regel ein Cloud-Dienst erforderlich. Zuerst werden die Quellinhalte auf einen Server hochgeladen, auf dem die Übersetzung in eine Zielsprache erfolgt. Anschließend wird der resultierende Text heruntergeladen und an den Nutzer zurückgegeben. Wenn Sie die Übersetzung auf dem Client ausführen, sparen Sie die Zeit, die für Serveranfragen erforderlich ist, und die Kosten für das Hosting des Übersetzungsdienstes.

Jetzt starten

Die Translator API ist ab Chrome 138 (stabil) verfügbar. Führen Sie zuerst die Funktionserkennung aus, um zu prüfen, ob der Browser die Translator API unterstützt.

if ('Translator' in self) {
  // The Translator API is supported.
}

Sie kennen zwar immer die Zielsprache für Übersetzungen, aber nicht immer die Ausgangssprache. In solchen Fällen können Sie die Language Detector API verwenden.

Unterstützung von Sprachpaaren prüfen

Die Übersetzung erfolgt über Sprachpakete, die bei Bedarf heruntergeladen werden. Ein Sprachpaket ist wie ein Wörterbuch für eine bestimmte Sprache.

• sourceLanguage: Die aktuelle Sprache für den Text.
• targetLanguage: Die Sprache, in die der Text übersetzt werden soll.

Verwenden Sie BCP 47-Sprachkurzcodes als Strings. Beispiel: 'es' für Spanisch oder 'fr' für Französisch.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

Die Funktion availability() gibt ein Promise mit den folgenden Werten zurück:

• "unavailable": Die Implementierung unterstützt keine Übersetzung oder Spracherkennung der angegebenen Sprachen.
• "downloadable": Die Implementierung unterstützt die Übersetzung oder Spracherkennung der angegebenen Sprachen, aber ein Download ist erforderlich, um fortzufahren. Möglicherweise ist der Download das Browsermodell.
• "downloading": Die Implementierung unterstützt die Übersetzung oder Spracherkennung der angegebenen Sprachen. Der Browser schließt einen laufenden Download ab, um das zugehörige Objekt zu erstellen.
• "available": Die Implementierung unterstützt die Übersetzung oder Spracherkennung der angegebenen Sprachen und alle erforderlichen Downloads sind bereits abgeschlossen.

Mit dem downloadprogress-Ereignis können Sie den Fortschritt des Modell-Downloads verfolgen:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Wenn der Download fehlschlägt, werden downloadprogress-Ereignisse beendet und das ready-Promise wird abgelehnt.

Übersetzer erstellen und ausführen

Rufen Sie die asynchrone Funktion create() auf, um einen Übersetzer zu erstellen. Dazu ist ein Optionsparameter mit zwei Feldern erforderlich, eines für sourceLanguage und eines für targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Rufen Sie dann die asynchrone Methode translate() auf.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Wenn Sie längere Texte verarbeiten müssen, können Sie auch die Streamingversion der API verwenden und translateStreaming() aufrufen.

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Sequenzielle Übersetzungen

Übersetzungen werden sequenziell verarbeitet. Wenn Sie große Mengen an Text zur Übersetzung senden, werden nachfolgende Übersetzungen blockiert, bis die vorherigen abgeschlossen sind.

Um die besten Antworten auf Ihre Anfragen zu erhalten, sollten Sie sie in Gruppen zusammenfassen und eine Ladeschnittstelle wie einen Spinner hinzufügen, um anzuzeigen, dass die Übersetzung läuft.

Demo

Die Translator API, die in Kombination mit der Language Detector API verwendet wird, finden Sie im Translator and Language Detector API Playground.

Standardisierungsaufwand

Wir arbeiten daran, die Translator API zu standardisieren, um die browserübergreifende Kompatibilität zu gewährleisten.

Unser API-Vorschlag wurde von der Community unterstützt und wird nun in der W3C Web Incubator Community Group weiter diskutiert. Das Chrome-Team hat Feedback von der W3C Technical Architecture Group angefordert und Mozilla und WebKit um ihre Standardpositionen gebeten.

Sie können sich an der Entwicklung der Standards beteiligen, indem Sie der Web Incubator Community Group beitreten.

Feedback geben

Wir möchten gern sehen, was Sie mit der Language Detector API entwickeln. Teilen Sie uns Ihre Websites und Webanwendungen auf X, YouTube und LinkedIn mit.

Wenn Sie Feedback zur Implementierung von Chrome geben möchten, melden Sie einen Fehler oder stellen Sie eine Anfrage zu einem Feature.