Leitfaden zur Spracherkennung für das Web

Mit der Aufgabe „MediaPipe Language Detector“ können Sie die Sprache eines Textabschnitts ermitteln. 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 diese Aufgabe in Aktion ansehen. Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Language Detector enthält eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit dem Erstellen Ihrer eigenen Spracherkennungsfunktion beginnen. Sie können den Beispielcode für die Spracherkennung nur mit Ihrem Webbrowser aufrufen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte speziell für die Verwendung von Language Detector beschrieben. Allgemeine Informationen zum Einrichten der 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 Language Detector-Code ist im Paket @mediapipe/tasks-text verfügbar. Sie können diese Bibliotheken über die Links im Einrichtungsleitfaden für die Plattform herunterladen.

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

npm install @mediapipe/tasks-text

Wenn die Bereitstellung auf einem Server erfolgen soll, können Sie einen Content Delivery Network-Dienst (CDN) wie jsDelivr verwenden, um Ihrer HTML-Seite Code direkt hinzuzufügen:

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

Modell

Die MediaPipe-Spracherkennung erfordert ein trainiertes Modell, das mit dieser Aufgabe kompatibel ist. Weitere Informationen zu 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 dann in Ihrem Projektverzeichnis:

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

Geben Sie den Pfad des Modells mit dem Parameter baseOptions für das modelAssetPath-Objekt an:

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

Aufgabe erstellen

Verwenden Sie eine der LanguageDetector.createFrom...()-Funktionen des Language Detector, um die Aufgabe zum Ausführen von Inferenzen vorzubereiten. Sie können die Funktion createFromModelPath() mit einem relativen oder absoluten Pfad zur trainierten Modelldatei verwenden. Im Codebeispiel unten wird die Verwendung der Funktion createFromOptions() veranschaulicht. Weitere Informationen zum Konfigurieren von Aufgaben finden Sie unter Konfigurationsoptionen.

Im folgenden Codebeispiel wird gezeigt, 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

Diese Aufgabe bietet die folgenden Konfigurationsoptionen für Web- und JavaScript-Anwendungen:

Option Beschreibung Wertebereich Standardwert
maxResults Legt die optionale maximale Anzahl von Sprachvorhersagen mit den besten Bewertungen fest, die zurückgegeben werden sollen. Wenn dieser Wert kleiner als null ist, werden alle verfügbaren Ergebnisse zurückgegeben. Beliebige positive Zahlen -1
scoreThreshold Legt den Schwellenwert für den Vorhersagewert fest, der den in den Modellmetadaten angegebenen Grenzwert überschreibt (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt. Beliebige Gleitkommazahl Nicht festgelegt
categoryAllowlist Legt die optionale Liste der zulässigen Sprachcodes fest. Wenn das Feld nicht leer ist, werden Sprachvorhersagen herausgefiltert, deren Sprachcode nicht in diesem Dataset enthalten ist. Diese Option und categoryDenylist schließen sich gegenseitig aus und die Verwendung beider Werte führt zu einem Fehler. Beliebige Strings Nicht festgelegt
categoryDenylist Legt die optionale Liste der unzulässigen Sprachcodes fest. Wenn das Feld nicht leer ist, werden Sprachvorhersagen herausgefiltert, deren Sprachcode in diesem Satz enthalten ist. Diese Option und categoryAllowlist schließen sich gegenseitig aus und die Verwendung beider Werte führt zu einem Fehler. Beliebige Strings Nicht festgelegt

Daten vorbereiten

Language Detector arbeitet mit Textdaten (string). Die Aufgabe übernimmt die Vorverarbeitung der Dateneingabe, einschließlich Tokenisierung und Tensor-Vorverarbeitung. Die gesamte Vorverarbeitung erfolgt in der detect-Funktion. Eine zusätzliche Vorverarbeitung des Eingabetexts ist im Voraus nicht erforderlich.

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

Task ausführen

Der Language Detector verwendet die Funktion detect, um Inferenzen auszulösen. Für die Spracherkennung werden die möglichen Sprachen für den Eingabetext zurückgegeben.

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 der Spracherkennung gibt eine LanguageDetectorResult aus, die aus einer Liste von Sprachvorhersagen und 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 erhalten Sie, indem Sie das Modell für den Eingabetext ausführen: "Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent.".

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