Spracherkennung mit integrierter KI

Thomas Steiner

Veröffentlicht am 24. September 2024, letzte Aktualisierung: 20. Mai 2025

Bevor Sie Text von einer Sprache in eine andere übersetzen, müssen Sie zuerst die Sprache des Texts ermitteln. Bisher war für die Übersetzung erforderlich, den Text in einen Clouddienst hochzuladen, die Übersetzung auf dem Server durchzuführen und dann die Ergebnisse herunterzuladen.

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 verwenden, die dies tut, aber für den Download sind zusätzliche Ressourcen erforderlich.

Wann ist die Spracherkennung sinnvoll?

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

• Sprache des Eingabetexts ermitteln, damit er übersetzt werden kann.
• Sprache des Eingabetexts ermitteln, damit das richtige Modell für sprachspezifische Aufgaben wie die Erkennung von schädlichen Inhalten geladen werden kann.
• Sprache des Eingabetexts ermitteln, damit er richtig gekennzeichnet werden kann, z. B. in sozialen Netzwerken.
• Sprache des Eingabetexts ermitteln, damit die Benutzeroberfläche einer App entsprechend angepasst werden kann. Beispielsweise auf einer belgischen Website, um nur die Benutzeroberfläche für Nutzer anzuzeigen, 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 heruntergeladen, wenn eine Website die API zum ersten Mal verwendet. In Chrome ist dieses Modell im Vergleich zu anderen Modellen sehr klein. Es ist möglicherweise bereits vorhanden, da dieses Modell von anderen Chrome-Funktionen verwendet wird.

Rufen Sie die asynchrone LanguageDetector.availability() Funktion auf, um zu prüfen, ob das Modell einsatzbereit ist. Wenn die Antwort auf availability() downloadable war, beobachten Sie den Downloadfortschritt und informieren Sie den Nutzer, da der Download einige Zeit dauern kann.

Prüfen Sie, ob der Nutzer die Funktion aktiviert hat, um den Download auszulösen und den Spracherkenner zu instanziieren. 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}%`);
    });
  },
});

Spracherkenner ausführen

Die Language Detector API verwendet ein Rankingmodell, um zu ermitteln, welche Sprache in einem bestimmten Text am wahrscheinlichsten verwendet wird. Ranking ist eine Art des maschinellen Lernens, bei der eine Liste von Elementen sortiert werden soll. In diesem Fall ordnet die Language Detector API Sprachen nach der Wahrscheinlichkeit 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. Dies wird als Liste von {detectedLanguage, confidence}-Objekten zurückgegeben. Das confidence-Niveau wird als Wert zwischen 0.0 (niedrigste Konfidenz) und 1.0 (höchste Konfidenz) 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
// ...

API-Spielplatz

Testen Sie die Language Detector API auf unserem API-Spielplatz. Geben Sie Text in verschiedenen Sprachen in das Textfeld ein.

Berechtigungsrichtlinie, iFrames und Web Worker

Standardmäßig ist die Language Detector API nur für Fenster der obersten Ebene und für ihre iFrames mit derselben Quelle verfügbar. Der Zugriff auf die API kann mithilfe des Attributs der Berechtigungsrichtlinie an iFrames mit unterschiedlichen Quellen delegiert werden: allow=""

<!--
  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 Workern nicht verfügbar. Das liegt daran, dass es komplex ist, für jeden Worker ein verantwortliches Dokument zu erstellen, um den Status der Berechtigungsrichtlinie zu prüfen.

Feedback geben

Wir möchten 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 von Chrome haben, erstellen Sie in Chromium einen Eintrag für das Problem.

Nehmen Sie am Early Preview Program teil um einen frühen Einblick in neue integrierte KI-APIs zu erhalten und auf unserer Mailingliste mit anderen zu diskutieren.