Übersetzung mit integrierter KI

Thomas Steiner

Alexandra Klepper

Veröffentlicht am 13. November 2024, letzte Aktualisierung: 20. Mai 2025

Mit der Translator API in Chrome können Sie Text mit KI-Modellen übersetzen, die im Browser bereitgestellt werden.

Ihre Website bietet möglicherweise bereits Websiteinhalte in mehreren Sprachen an. Mit der Translator API können Nutzer in ihrer Muttersprache schreiben. Sie können beispielsweise in ihrer Muttersprache an Supportchats teilnehmen und Ihre Website kann ihre Nachricht in die Muttersprache Ihrer Supportmitarbeiter übersetzen, bevor die Nachricht das Gerät des Nutzers verlässt. So wird für alle Nutzer ein reibungsloses, schnelles und inklusives Erlebnis geschaffen.

Für die Übersetzung von Webinhalten ist in der Regel ein Cloud-Dienst erforderlich. Zuerst werden die Quellinhalte auf einen Server hochgeladen, der die Übersetzung in eine Zielsprache ausführt. Anschließend wird der resultierende Text heruntergeladen und an den Nutzer zurückgesendet. 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 für die Erstellung hochwertiger Übersetzungen trainiert wurde. Die API ist in Chrome integriert und das Modell wird heruntergeladen, wenn eine Website diese API zum ersten Mal verwendet.

Rufen Sie die asynchrone Translator.availability() Funktion auf, um zu prüfen, ob das Modell einsatzbereit ist. Wenn die Antwort auf availability() downloadable ist, warten Sie auf den Downloadfortschritt, um den Nutzer darüber zu informieren, da dies einige Zeit dauern kann.

Unterstützung für Sprachpaare 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 des Texts.
• 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'

Warten Sie mit dem Ereignis downloadprogress auf den Fortschritt des Modell-Downloads:

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 die downloadprogress-Ereignisse beendet und das ready-Promise wird abgelehnt.

Übersetzer erstellen und ausführen

Prüfen Sie, ob der Nutzer die Funktion aktiviert hat und rufen Sie die asynchrone create() Funktion auf, um einen Übersetzer zu erstellen. Für die Translator-Funktion create() 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',
});

Sobald Sie einen Übersetzer haben, rufen Sie die asynchrone Funktion 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 beste Antwort auf Ihre Anfragen zu erhalten, sollten Sie sie zusammenfassen und eine Ladeschnittstelle, wie einen Spinner hinzufügen, um zu zeigen, dass die Übersetzung läuft.

Unterstützte Sprachen

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

Demo

Sie können die Translator API in Kombination mit der Language Detector API im Playground für die Translator API und die Language Detector API sehen.

Berechtigungsrichtlinie, iFrames und Web Worker

Standardmäßig ist die Translator API nur für Fenster der obersten Ebene und für iFrames desselben Ursprungs verfügbar. Der Zugriff auf die API kann mit dem Attribut allow="" der Berechtigungsrichtlinie an iFrames mit ursprungsübergreifendem Zugriff 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 Web Workern 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 Chrome-Implementierung haben, können Sie einen Fehlerbericht einreichen oder eine Funktion anfragen.