Übersetzung mit integrierter KI

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Thomas Steiner

Alexandra Klepper

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

Erklärvideo	Web	Erweiterungen	Chrome-Status	Absicht
GitHub	Origin-Testversion	Origin-Testversion	Ansicht	Testabsicht

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

Möglicherweise bieten Sie auf Ihrer Website bereits Websiteinhalte in mehreren Sprachen an, um sie für ein globales Publikum zugänglich zu machen. Mit der Translator API können Nutzer in ihrer Muttersprache Beiträge leisten. So können Nutzer beispielsweise in ihrer Muttersprache an Supportchats teilnehmen und Ihre Website kann die Unterhaltung in die Sprache Ihrer Kundenservicemitarbeiter übersetzen, bevor sie das Gerät des Nutzers verlässt. So wird für alle Nutzer eine reibungslose, schnelle und inklusive Nutzung ermöglicht.

Für die Übersetzung von Inhalten im Web war in der Regel ein Cloud-Dienst erforderlich. Zuerst werden die Quellinhalte auf einen Server hochgeladen, auf dem die Übersetzung in eine Zielsprache ausgeführt wird. 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 Serverzugriffe erforderlich ist, und die Kosten für das Hosting des Übersetzungsdiensts.

Jetzt starten

Die Translator API ist ab Chrome 138 Stable 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 Quellsprache. In solchen Fällen können Sie die Language Detector API verwenden.

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 Sprache, in die der Text übersetzt werden soll.

Verwenden Sie Sprachkürzel gemäß BCP 47 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 Versprechen 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. Für die weitere Verarbeitung ist jedoch ein Download erforderlich. Der Download kann das Browsermodell sein.
• "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 Ereignis downloadprogress auf den Fortschritt des Modelldownloads warten:

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-Versprechen abgelehnt.

Übersetzer erstellen und ausführen

Rufen Sie die asynchrone Funktion create() auf, um einen Übersetzer zu erstellen. Er erfordert einen Optionsparameter mit zwei Feldern, 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 nach dem Abrufen eines Übersetzers die asynchrone 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 ?"

Sequenzielle Übersetzungen

Übersetzungen werden nacheinander verarbeitet. Wenn Sie große Textmengen zur Übersetzung senden, werden nachfolgende Übersetzungen blockiert, bis die vorherigen abgeschlossen sind.

Damit Ihre Anfragen möglichst schnell bearbeitet werden können, sollten Sie sie gruppieren und eine Ladeoberfläche hinzufügen, z. B. einen Ladebalken, um zu zeigen, dass die Übersetzung gerade läuft.

Demo

Die Translator API, die in Kombination mit der Language Detector API verwendet wird, finden Sie im Sandbox-Bereich für die Translator API und die Language Detector API.

Standardisierungsaufwand

Wir arbeiten daran, die Translator API zu standardisieren, um für plattformübergreifende Kompatibilität zu sorgen.

Unser API-Vorschlag hat Unterstützung von der Community erhalten 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 Positionierung zu den Standards gebeten.

Sie können an der Standardisierung teilnehmen, indem Sie der Web Incubator Community Group beitreten.

Feedback geben

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

Wenn Sie Feedback zur Implementierung in Chrome geben möchten, können Sie einen Fehlerbericht oder eine Funktionsanfrage senden.