Übersetzung mit integrierter KI

Thomas Steiner

Alexandra Klepper

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

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

Möglicherweise sind die Inhalte Ihrer Website bereits in mehreren Sprachen verfügbar. Mit der Translator API können Nutzer in ihrer Muttersprache schreiben. Nutzer können beispielsweise in ihrer Standardsprache an Supportchats teilnehmen und ihre Nachricht kann auf Ihrer Website in die Standardsprache Ihrer Kundenservicemitarbeiter übersetzt werden, bevor sie das Gerät des Nutzers verlässt. So wird eine reibungslose, schnelle und inklusive Nutzererfahrung für alle Nutzer geschaffen.

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

Die Language Detector API und die Translator API funktionieren in der Desktopversion von Chrome. Diese APIs funktionieren nicht auf Mobilgeräten.

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 für die Generierung hochwertiger Übersetzungen trainiert wurde. Die API ist in Chrome integriert und das Modell wird beim ersten Aufruf einer Website, die diese API verwendet, 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 wird mit Sprachpaketen verwaltet, 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 Zielsprache, 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 beobachten:

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, ob die Nutzeraktivierung erfolgt ist, 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 besten Antworten auf Ihre Anfragen erhalten, sollten Sie sie in Blöcke aufteilen und eine Ladeschnittstelle wie einen Spinner hinzufügen, um anzuzeigen, dass die Übersetzung läuft.

Unterstützte Sprachen

Die folgenden Sprachen werden von der Chrome-Implementierung der Translator API unterstützt.

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 einen Feature Request.