Spracherkennung mit integrierter KI

Thomas Steiner

Veröffentlicht: 24. September 2024, zuletzt aktualisiert: 20. Mai 2025

Bevor Sie Text von einer Sprache in eine andere übersetzen, müssen Sie zuerst feststellen, welche Sprache im angegebenen Text verwendet wird. Bisher musste der Text für die Übersetzung in einen Clouddienst hochgeladen, die Übersetzung auf dem Server durchgeführt und die Ergebnisse dann heruntergeladen werden.

Die Language Detector API funktioniert clientseitig, sodass Sie die Privatsphäre der Nutzer schützen können. Es ist zwar möglich, eine bestimmte Bibliothek zu versenden, die dies tut, aber dafür wären zusätzliche Ressourcen zum Herunterladen erforderlich.

Wann sollte die Spracherkennung verwendet werden?

Die Language Detector API ist hauptsächlich in den folgenden Szenarien nützlich:

• Die Sprache des eingegebenen Texts erkennen, damit er übersetzt werden kann.
• Die Sprache des eingegebenen Texts wird ermittelt, damit das richtige Modell für sprachspezifische Aufgaben wie die Erkennung von schädlichen Inhalten geladen werden kann.
• Die Sprache des Eingabetexts ermitteln, damit er richtig gekennzeichnet werden kann, z. B. in sozialen Netzwerken.
• Die Sprache des eingegebenen Texts wird ermittelt, damit die Benutzeroberfläche einer App entsprechend angepasst werden kann. So kann beispielsweise auf einer belgischen Website nur die Benutzeroberfläche für Nutzer angezeigt werden, die Französisch sprechen.

Jetzt starten

Führen Sie die Funktionserkennung aus, um zu prüfen, ob der Browser die Language Detector API unterstützt.

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

Download des Modells

Die Spracherkennung basiert auf einem Modell, das für die spezifische Aufgabe der Spracherkennung optimiert ist. Die API ist zwar im Browser integriert, das Modell wird aber erst dann heruntergeladen, wenn eine Website die API zum ersten Mal verwendet. Im Vergleich zu anderen Modellen ist dieses Modell in Chrome sehr klein. Möglicherweise ist es bereits vorhanden, da dieses Modell von anderen Chrome-Funktionen verwendet wird.

Rufen Sie die asynchrone Funktion LanguageDetector.availability() auf, um festzustellen, ob das Modell einsatzbereit ist. Wenn die Antwort auf availability() downloadable war, höre auf den Downloadfortschritt und informiere den Nutzer, da der Download einige Zeit dauern kann.

Um den Download auszulösen und den Spracherkennungsdienst zu instanziieren, prüfen Sie, ob eine Nutzeraktivierung erfolgt ist. Rufen Sie dann die asynchrone Funktion LanguageDetector.create() auf.

const detector = await LanguageDetector.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Spracherkennung ausführen

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

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

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
// ...

API-Playground

API-Playground Geben Sie Text in verschiedenen Sprachen in das Textfeld ein.

Berechtigungsrichtlinie, iFrames und Web Workers

Standardmäßig ist die Language Detector API nur für Fenster der obersten Ebene und für ihre Same-Origin-Iframes verfügbar. Der Zugriff auf die API kann mithilfe des Attributs allow="" der Berechtigungsrichtlinie an ursprungsübergreifende iFrames delegiert werden:

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Language Detector API by
  setting the `allow="language-detector"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="language-detector"></iframe>

Die Language Detector API ist in Web Workers nicht verfügbar. Das liegt daran, dass es sehr aufwendig ist, für jeden Mitarbeiter ein verantwortliches Dokument zu erstellen, um den Status der Berechtigungsrichtlinie zu prüfen.

Feedback geben

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

Wenn Sie Feedback zur Implementierung in Chrome haben, erstellen Sie in Chromium einen Eintrag für das Problem.