Übersetzung mit integrierter KI

Thomas Steiner

Alexandra Klepper

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

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

Möglicherweise bietet Ihre Website bereits Inhalte in mehreren Sprachen an. Mit der Translator API können Nutzer in ihrer Muttersprache schreiben. Nutzer können beispielsweise in ihrer Standardsprache an Supportchats teilnehmen und Ihre Website kann ihre Nachricht in die Standardsprache Ihrer Kundenservicemitarbeiter übersetzen, bevor die Nachricht das Gerät des Nutzers verlässt. So wird eine reibungslose, schnelle und inklusive Nutzung für alle Nutzer ermöglicht.

Für die Übersetzung von Webinhalten ist 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 die Inhalte kurzlebig sind und nicht in einer Datenbank gespeichert werden müssen, spart die clientseitige Übersetzung Zeit und Kosten im Vergleich zu einem gehosteten Übersetzungsdienst.

Jetzt starten

Führen Sie 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.

Download des Modells

Die Translator API verwendet ein Expertenmodell, das darauf trainiert wurde, hochwertige Übersetzungen zu generieren. Die API ist in Chrome integriert und das Modell wird beim ersten Aufruf der API durch eine Website heruntergeladen.

Rufen Sie die asynchrone Funktion Translator.availability() auf, um festzustellen, ob das Modell einsatzbereit ist. Wenn die Antwort auf availability() downloadable lautet, höre auf den Downloadfortschritt, um den Nutzer darüber zu informieren, da es einige Zeit dauern kann.

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'

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

Wenn Sie einen Übersetzer erstellen möchten, prüfen Sie die Nutzeraktivierung und rufen Sie die asynchrone Funktion create() auf. Für die Translator-Funktion create() ist ein Optionsparameter mit zwei Feldern erforderlich, eines für die sourceLanguage und eines für die 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.

Damit Sie die bestmögliche Antwort auf Ihre Anfragen 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.

Berechtigungsrichtlinie, iFrames und Web Workers

Standardmäßig ist die Translator API nur für Fenster der obersten Ebene und für Same-Origin-Iframes verfügbar. Der Zugriff auf die API kann mithilfe des Berechtigungsrichtlinien-Attributs allow="" an ursprungsübergreifende iFrames delegiert werden:

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

Die Translator API ist in Webworkern nicht verfügbar, da es zu komplex ist, für jeden Worker ein verantwortliches Dokument zu erstellen, um den Status der Berechtigungsrichtlinie zu prüfen.

Feedback geben

Wir möchten sehen, was Sie 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.