Spracherkennung in Chrome mit integrierter KI

Veröffentlicht: 24. September 2024

Bevor Sie Text von einer Sprache in eine andere übersetzen, müssen Sie zuerst die Sprache des Texts ermitteln. Bisher musste der Text in einen Cloud-Dienst hochgeladen werden. Mit Inferenz auf dem Gerät können Sie Ihre Story zum Datenschutz verbessern. Es ist zwar möglich, eine bestimmte Bibliothek zu verwenden, die dies tut, aber das würde zusätzliche Ressourcen für den Download erfordern.

Der Vorschlag Language Detector and Translator API soll dieses Problem lösen, indem ein Modell mit einer in den Browser integrierten API abgestimmt wird.

Beispielanwendungsfälle

Die Language Detector API ist in folgenden Szenarien besonders nützlich:

  • Die Sprache des Eingabetexts wird ermittelt, damit er übersetzt werden kann.
  • Die Sprache des Eingabetexts wird ermittelt, damit das richtige Modell für sprachspezifische Aufgaben wie die Erkennung schädlicher Sprache geladen werden kann.
  • Die Sprache des Eingabetexts wird ermittelt, damit er beispielsweise in Online-Sozialen Netzwerken richtig gekennzeichnet werden kann.
  • Die Sprache des eingegebenen Texts wird ermittelt, damit die Benutzeroberfläche einer App entsprechend angepasst werden kann. So können Sie beispielsweise auf einer belgischen Website nur die Benutzeroberfläche anzeigen, die für französischsprachige Nutzer relevant ist.

Language Detector API verwenden

Die Language Detector API ist Teil der größeren Translator API-Familie. Führen Sie zuerst die Funktionserkennung aus, um zu prüfen, ob der Browser die Language Detector API unterstützt.

if ('translation' in self && 'canDetect' in self.translation) {
  // The Language Detector API is available.
}  

Modelldownload

Die Spracherkennung basiert auf einem Modell, das für die spezifische Aufgabe der Spracherkennung optimiert ist. Die API ist im Browser eingebunden, das Modell wird jedoch on-demand heruntergeladen, wenn eine Website zum ersten Mal versucht, die API zu verwenden. In Chrome ist dieses Modell im Vergleich zu anderen Modellen sehr klein. Möglicherweise ist es bereits vorhanden, da dieses Modell auch für Chrome-Browserfunktionen verwendet wird.

Wenn Sie wissen möchten, ob das Modell einsatzbereit ist, rufen Sie die asynchrone translation.canDetect()-Funktion auf. Es gibt drei mögliche Antworten:

  • 'no': Der aktuelle Browser unterstützt die Language Detector API, kann sie aber derzeit nicht verwenden. Das kann beispielsweise daran liegen, dass nicht genügend freier Speicherplatz zum Herunterladen des Modells verfügbar ist.
  • 'readily': Der aktuelle Browser unterstützt die Language Detector API und kann sofort verwendet werden.
  • 'after-download': Der aktuelle Browser unterstützt die Language Detector API, muss aber zuerst das Modell herunterladen.

Rufen Sie die asynchrone translation.createDetector()-Funktion auf, um den Download auszulösen und den Sprachdetektor zu instanziieren. Wenn die Antwort auf canDetect() 'after-download' lautete, empfiehlt es sich, den Downloadfortschritt zu beobachten, damit Sie den Nutzer informieren können, falls der Download einige Zeit in Anspruch nimmt.

Das folgende Beispiel zeigt, wie der Sprachdetektor initialisiert wird.

const canDetect = await translation.canDetect();
let detector;
if (canDetect === 'no') {
  // The language detector isn't usable.
  return;
}
if (canDetect === 'readily') {
  // The language detector can immediately be used.
  detector = await translation.createDetector();
} else {
  // The language detector can be used after model download.
  detector = await translation.createDetector();
  detector.addEventListener('downloadprogress', (e) => {
 console.log(e.loaded, e.total);
  });
  await detector.ready;
}

Spracherkennung ausführen

Die Language Detection API verwendet ein Ranking-Modell, um zu ermitteln, welche Sprache in einem bestimmten Text am wahrscheinlichsten verwendet wird. Das Ranking ist eine Art von maschinellem Lernen, bei dem eine Liste von Elementen sortiert werden soll. In diesem Fall sortiert die Language Detector API Sprachen von der höchsten zur niedrigsten Wahrscheinlichkeit.

Die Funktion detect() kann entweder das erste Ergebnis, die wahrscheinlichste Antwort, zurückgeben oder die sortierten Kandidaten mit dem Konfidenzniveau durchgehen. Diese werden als Liste von {detectedLanguage, confidence}-Objekten zurückgegeben. Das confidence-Level wird als Wert zwischen 0.0 (niedrigste Zuverlässigkeit) und 1.0 (höchste Zuverlässigkeit) ausgedrückt.

const someUserText \= 'Hallo und herzlich willkommen\!';
const results \= await detector.detect(someUserText);
for (const result of results) {
  // Show the full list of potential languages with their likelihood, ranked
  // from most likely to least likely. In practice, one would pick the top
  // language(s) that cross a high enough threshold.
  console.log(result.detectedLanguage, result.confidence);
}
// (Output truncated):
// de 0.9993835687637329
// en 0.00038279531872831285
// nl 0.00010798392031574622
// ...

Demo

Eine Vorschau der Language Detector API finden Sie in unserer Demo. Geben Sie Text in verschiedenen Sprachen in den Textbereich ein.

Für den Ursprungstest registrieren

Registrieren Sie sich für den Language Detector API-Testzeitraum , um die API mit Ihren Nutzern zu testen. Dieser Ursprungstest läuft von Chrome 130 bis 135.

Weitere Informationen zur Funktionsweise von Herkunftstests

Standardisierungsaufwand

Die Language Detector API wurde in die W3C Web Incubator Community Group verschoben, nachdem der entsprechende Vorschlag ausreichend unterstützt wurde. Die API ist Teil eines größeren Translation API-Angebots. Das Chrome-Team bat die W3C Technical Architecture Group um Feedback und erkundigte sich bei Mozilla und WebKit nach den Standardpositionen des jeweiligen Browseranbieters.

Feedback geben

Wenn Sie Feedback zur Implementierung in Chrome haben, erstellen Sie einen Eintrag für das Problem in Chromium. Teilen Sie uns Ihr Feedback zur API-Form der Language Detector API mit, indem Sie einen vorhandenen Kommentar kommentieren oder ein neues Problem im GitHub-Repository der Translation API eröffnen.

Ressourcen