Spracherkennung in Chrome mit integrierter KI

Thomas Steiner

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 für die Übersetzung in einen Cloud-Dienst hochgeladen, auf dem Server übersetzt und dann heruntergeladen werden.

Die Language Detector API verwendet On-Device-Inferenzen, um den Datenschutz zu 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.

Verfügbarkeit

Beispielanwendungsfälle

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

  • Die Sprache des Eingabetexts wird ermittelt, damit er übersetzt werden kann.
  • Bestimmen Sie die Sprache des Eingabetexts, damit das richtige Modell für sprachspezifische Aufgaben, wie die Erkennung von unangemessenen Äußerungen, 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. Dies ist beispielsweise der Fall, wenn 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 Funktion translation.createDetector() auf, um den Download auszulösen und den Sprachdetektor zu instanziieren. Wenn die Antwort auf canDetect() 'after-download' war, solltest du den Downloadfortschritt beobachten, damit du den Nutzer informieren kannst, falls der Download länger dauert.

Im folgenden Beispiel wird gezeigt, 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 des maschinellen Lernens, bei dem eine Liste von Elementen sortiert wird. In diesem Fall sortiert die Language Detector API die Sprachen nach der höchsten 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 in das Textfeld Text in verschiedenen Sprachen ein.

Standardisierungsaufwand

Die Language Detector API wurde in die W3C Web Incubator Community Group verschoben, nachdem der entsprechende Vorschlag ausreichend Unterstützung erhalten hatte. Die API ist Teil eines größeren Translation API-Vorschlags.

Das Chrome-Team hat Feedback von der W3C Technical Architecture Group angefordert und Mozilla und WebKit um ihre Positionierung zu den Standards gebeten.

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.