Spracherkennung mit integrierter KI

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

Browser Support

  • Chrome: 138.
  • Edge: 148.
  • Firefox: not supported.
  • Safari: not supported.

Source

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 Cloud-Dienst hochgeladen, auf dem Server übersetzt und 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 das würde zusätzliche Ressourcen zum Herunterladen erfordern.

Wann sollte die Spracherkennung verwendet werden?

Die Language Detector API ist vor allem in den folgenden Szenarien nützlich:

  • Die Sprache des Eingabetexts bestimmen, damit er übersetzt werden kann.
  • Bestimmen Sie die Sprache des Eingabetexts, damit das richtige Modell für sprachspezifische Aufgaben wie die Erkennung von schädlichen Inhalten geladen werden kann.
  • Bestimmen Sie die Sprache des Eingabetexts, damit er korrekt gekennzeichnet werden kann, z. B. in sozialen Netzwerken.
  • Die Sprache des Eingabetexts bestimmen, damit die Benutzeroberfläche einer Anwendung entsprechend angepasst werden kann. Beispielsweise, um auf einer belgischen Website nur die Benutzeroberfläche anzuzeigen, die für Nutzer relevant ist, die Französisch sprechen.

Jetzt starten

Die Language Detector API und die Translator API funktionieren in Chrome auf dem Computer. Diese APIs funktionieren nicht auf Mobilgeräten.

Führen Sie eine Featureerkennung durch, 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 jedoch bei Bedarf 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 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, warte 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 vorliegt. 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 bestimmen, welche Sprache in einem bestimmten Text am wahrscheinlichsten verwendet wird. Ranking ist eine Art des maschinellen Lernens, bei der das Ziel darin besteht, eine Liste von Elementen zu sortieren. In diesem Fall ordnet die Language Detector API die Sprachen von der höchsten zur niedrigsten Wahrscheinlichkeit.

Die Funktion detect() kann entweder das erste Ergebnis, die wahrscheinlichste Antwort oder die nach Rangfolge sortierten Kandidaten mit dem Konfidenzniveau zurückgeben. Diese werden 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-Playground

In unserem API-Playground können Sie mit der Language Detector API experimentieren. Geben Sie Text in verschiedenen Sprachen in den Textbereich ein.

Berechtigungsrichtlinie, iFrames und Web-Worker

Standardmäßig ist die Language Detector API nur für Fenster auf oberster Ebene und für iFrames mit demselben Ursprung 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 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. Teilt eure Websites und Webanwendungen mit uns auf X, YouTube und LinkedIn.

Wenn du Feedback zur Implementierung von Chrome hast, melde einen Chromium-Fehler.

Nimm am Early Preview Program teil, um einen ersten Blick auf neue integrierte KI-APIs zu werfen und Zugang zu Diskussionen auf unserer Mailingliste zu erhalten.