Leitfaden zur Spracherkennung für das Web

Mit der MediaPipe Language Detector-Aufgabe können Sie die Sprache eines Textabschnitts erkennen. In dieser Anleitung erfahren Sie, wie Sie den Language Detector für Web- und JavaScript-Apps verwenden. Das in dieser Anleitung beschriebene Codebeispiel ist auf GitHub verfügbar.

In der Demo können Sie sich die Umsetzung dieser Aufgabe ansehen. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Language Detector bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung einer eigenen Funktion zur Spracherkennung beginnen. Sie können das Beispiel nur mit Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Ihrer Codeprojekte für die Verwendung von Language Detector beschrieben. Allgemeine Informationen zum Einrichten Ihrer Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich der Anforderungen an die Plattformversion, finden Sie im Einrichtungsleitfaden für das Web.

JavaScript-Pakete

Der Code für die Spracherkennung ist über das Paket @mediapipe/tasks-text verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden der Plattform aufrufen und herunterladen.

Sie können die erforderlichen Pakete mit dem folgenden Code für das lokale Staging mit dem folgenden Befehl installieren:

npm install @mediapipe/tasks-text

Wenn Sie die Bereitstellung auf einem Server vornehmen möchten, können Sie einen CDN-Dienst (Content Delivery Network) wie jsDelivr verwenden, um Code direkt auf Ihrer HTML-Seite hinzuzufügen. Gehen Sie dazu so vor:

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

Modell

Für die MediaPipe Language Detector-Aufgabe ist ein trainiertes Modell erforderlich, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu den verfügbaren trainierten Modellen für Language Detector finden Sie in der Aufgabenübersicht im Abschnitt „Modelle“.

Wählen Sie ein Modell aus, laden Sie es herunter und speichern Sie es in Ihrem Projektverzeichnis:

<dev-project-root>/app/shared/models

Geben Sie den Pfad des Modells mit dem baseOptions-Objektparameter modelAssetPath an, wie unten dargestellt:

baseOptions: {
        modelAssetPath: `/app/shared/models/language_detector.tflite`
      }

Aufgabe erstellen

Verwenden Sie eine der Language Detector-Funktionen LanguageDetector.createFrom...(), um die Aufgabe für die Ausführung von Inferenzvorgängen vorzubereiten. Sie können die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei verwenden. Das folgende Codebeispiel zeigt die Verwendung der Funktion createFromOptions(). Weitere Informationen zum Konfigurieren von Aufgaben finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie diese Aufgabe erstellt und konfiguriert wird.

async function createDetector() {
  const textFiles = await FilesetResolver.forTextTasks(
      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  languageDetector = await languageDetector.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/language_detector/language_detector/float32/1/language_detector.tflite`
      },
    }
  );
}
createDetector();

Konfigurationsoptionen

Für diese Aufgabe sind die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen verfügbar:

Option Beschreibung Wertebereich Standardwert
maxResults Legt die optionale maximale Anzahl der zurückzugebenden Sprachvorhersagen mit der höchsten Punktzahl fest. Wenn dieser Wert kleiner als null ist, werden alle verfügbaren Ergebnisse zurückgegeben. Beliebige positive Zahlen -1
scoreThreshold Legt den Vorhersagewert-Schwellenwert fest, der den in den Modellmetadaten angegebenen Wert überschreibt (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt. Beliebiger Gleitkommawert Nicht festgelegt
categoryAllowlist Legt die optionale Liste der zulässigen Sprachcodes fest. Wenn nicht leer, werden Sprachvorhersagen herausgefiltert, deren Sprachcode nicht in dieser Menge enthalten ist. Diese Option schließt categoryDenylist aus. Wenn Sie beide verwenden, wird ein Fehler ausgegeben. Beliebige Strings Nicht festgelegt
categoryDenylist Legt die optionale Liste der nicht zulässigen Sprachcodes fest. Wenn nicht leer, werden Sprachvorhersagen mit einem Sprachcode in dieser Menge herausgefiltert. Diese Option schließt sich gegenseitig mit categoryAllowlist aus. Wenn Sie beide verwenden, tritt ein Fehler auf. Beliebige Strings Nicht festgelegt

Daten vorbereiten

Language Detector funktioniert mit Textdaten (string). Die Aufgabe übernimmt die Vorverarbeitung der Dateneingabe, einschließlich Tokenisierung und Tensorvorverarbeitung. Die gesamte Vorverarbeitung erfolgt in der Funktion detect. Der Eingabetext muss nicht zusätzlich vorverarbeitet werden.

const inputText = "The input text for the detector.";

Aufgabe ausführen

Der Language Detector verwendet die Funktion detect, um Inferenzvorgänge auszulösen. Bei der Spracherkennung bedeutet das, dass die möglichen Sprachen für den Eingabetext zurückgegeben werden.

Der folgende Code zeigt, wie die Verarbeitung mit dem Aufgabenmodell ausgeführt wird:

// Wait to run the function until inner text is set
const detectionResult = languageDetector.detect(inputText);

Ergebnisse verarbeiten und anzeigen

Die Aufgabe „Language Detector“ gibt ein LanguageDetectorResult aus, das aus einer Liste von Sprachvorhersagen zusammen mit den Wahrscheinlichkeiten für diese Vorhersagen besteht. Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

LanguageDetectorResult:
  LanguagePrediction #0:
    language_code: "fr"
    probability: 0.999781

Dieses Ergebnis wurde durch Ausführen des Modells für den Eingabetext "Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent." erzielt.

Ein Beispiel für den Code, der zum Verarbeiten und Visualisieren der Ergebnisse dieser Aufgabe erforderlich ist, finden Sie hier.