Clientseitige Übersetzung mit KI

Maud Nalpas
Maud Nalpas
Kenji Baheux
Kenji Baheux

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

Erklärvideo Web Erweiterungen Chrome-Status Absicht
MDN Chrome 138 Beta Chrome 138 Beta Ansicht Testabsicht

Die Expansion in internationale Märkte kann teuer sein. Mehr Märkte bedeuten wahrscheinlich mehr zu unterstützende Sprachen. Mehr Sprachen können zu Herausforderungen bei interaktiven Funktionen und Abläufen führen, z. B. beim Supportchat nach dem Kauf. Wenn Ihr Unternehmen nur englischsprachige Kundenservicemitarbeiter hat, fällt es Personen, die die Sprache nicht als Muttersprache sprechen, möglicherweise schwer, genau zu erklären, welches Problem sie haben.

Wie können wir mithilfe von KI die Nutzung für Personen mit verschiedenen Sprachkenntnissen verbessern, gleichzeitig das Risiko minimieren und feststellen, ob es sich lohnt, in Kundenservicemitarbeiter zu investieren, die zusätzliche Sprachen sprechen?

Einige Nutzer versuchen, die Sprachbarriere mit der integrierten Seitenübersetzungsfunktion ihres Browsers oder mit Drittanbietertools zu überwinden. Die Nutzerfreundlichkeit ist jedoch bei interaktiven Funktionen wie unserem Supportchat nach dem Kauf unterdurchschnittlich.

Bei Chattools mit integrierter Übersetzung ist es wichtig, Verzögerungen zu minimieren. Wenn Sie die Sprache auf dem Gerät verarbeiten, können Sie in Echtzeit übersetzen, noch bevor der Nutzer die Nachricht gesendet hat.

Transparenz ist jedoch entscheidend, wenn Sie mit automatisierten Tools eine Sprachbarriere überwinden. Denken Sie daran, dass Sie vor Beginn des Gesprächs klarstellen müssen, dass Sie KI-Tools implementiert haben, die diese Übersetzung ermöglichen. So können Sie die Erwartungen steuern und peinliche Situationen vermeiden, wenn die Übersetzung nicht perfekt ist. Fügen Sie einen Link zu Ihrer Richtlinie mit weiteren Informationen hinzu.

Wir arbeiten an einer clientseitigen Translator API mit einem in Chrome integrierten Modell.

Hardwareanforderungen prüfen

Die Language Detection API und die Translator API funktionieren nur auf dem Computer in Chrome.

Die Prompt API, die Summarizer API, die Writer API und die Rewriter API funktionieren in Chrome, wenn die folgenden Bedingungen erfüllt sind:

  • Betriebssystem: Windows 10 oder 11, macOS 13 oder höher (Ventura und höher) oder Linux Chrome für Android, iOS und ChromeOS werden von unseren APIs, die von Gemini Nano unterstützt werden, noch nicht unterstützt.
  • Speicher: Mindestens 22 GB auf dem Volume, das Ihr Chrome-Profil enthält.
  • GPU: Mindestens 4 GB VRAM.
  • Netzwerk: Unbegrenzte Daten oder eine Verbindung ohne Datenlimit.

Diese Anforderungen gelten für Sie in Ihrem Entwicklungsprozess und für Ihre Nutzer, die mit den von Ihnen entwickelten Funktionen arbeiten.

Demo-Chat

Wir haben einen Kundensupport-Chat entwickelt, in dem Nutzer in ihrer Muttersprache tippen und eine Echtzeitübersetzung für den Kundenservicemitarbeiter erhalten können.

Translator API verwenden

Um festzustellen, ob die Translator API unterstützt wird, führen Sie das folgende Snippet zur Funktionserkennung aus.

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

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.

Bestimme die Modellverfügbarkeit und höre auf die downloadprogress:

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 angehalten und das ready-Versprechen wird abgelehnt.

Übersetzer erstellen und ausführen

Rufen Sie die asynchrone Funktion create() auf, um einen Übersetzer zu erstellen. Es 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 translate()-Funktion auf, um den Text zu übersetzen.

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

Nächste Schritte

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

Sie können sich für das Early Preview-Programm registrieren, um diese und andere APIs mit lokalen Prototypen zu testen.