Leitfaden zur Spracherkennung für das Web

Mit der Aufgabe „MediaPipe Language Detector“ können Sie die Sprache eines Textabschnitts ermitteln. Diese Anleitung zur Verwendung des Language Detector für Web- und JavaScript-Apps. Das in dieser Anleitung beschriebene Codebeispiel ist auf GitHub

Sie können diese Aufgabe in Aktion sehen, indem Sie die Demo ansehen. Weitere Informationen zu Funktionen, Modellen und Konfigurationsoptionen Sehen Sie sich die Übersicht an.

Codebeispiel

Der Beispielcode für Language Detector bietet eine vollständige Implementierung dieses in JavaScript ausführen. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung deiner eigenen Spracherkennungsfunktion beginnen. Sie können Daten abrufen, ausführen, und bearbeiten Sie die Beispielcode für die Spracherkennung ganz einfach in Ihrem Webbrowser.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Codeprojekte speziell für die Verwendung der Spracherkennung. Allgemeine Informationen zu Einrichten Ihrer Entwicklungsumgebung für die Verwendung von MediaPipe-Aufgaben, einschließlich Plattformversionsanforderungen finden Sie in der Einrichtungsleitfaden für das Web

JavaScript-Pakete

Der Spracherkennungscode ist über die @mediapipe/tasks-text Paket. Sie können diese Bibliotheken über die Links in der Plattform Leitfaden für die Einrichtung

<ph type="x-smartling-placeholder">

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

npm install @mediapipe/tasks-text

Wenn die Bereitstellung auf einem Server erfolgen soll, können Sie eine Inhaltsübermittlung verwenden. Netzwerkdienst (CDN) wie jsDelivr, um Code direkt auf Ihrer HTML-Seite einfügen:

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

Modell

Für die Aufgabe „MediaPipe Language Detector“ ist ein trainiertes Modell erforderlich, das mit dieser für die Aufgabe. Weitere Informationen zu verfügbaren trainierten Modellen für die Spracherkennung finden Sie unter 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 baseOptions-Objekt modelAssetPath an wie unten gezeigt:

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

Aufgabe erstellen

Verwenden Sie eine der LanguageDetector.createFrom...()-Funktionen der Spracherkennung, um die Aufgabe für die Ausführung von Inferenzen vorbereiten. Sie können die createFromModelPath() verwenden mit einem relativen oder absoluten Pfad zur trainierten Modelldatei. Der Code Im folgenden Beispiel wird die Verwendung der createFromOptions()-Funktion veranschaulicht. Weitere Informationen 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

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

Option Beschreibung Wertebereich Standardwert
maxResults Legt die optionale maximale Anzahl der am besten bewerteten Sprachvorhersagen fest auf zurückgeben. Wenn dieser Wert kleiner als null ist, werden alle verfügbaren Ergebnisse zurückgegeben. Beliebige positive Zahlen -1
scoreThreshold Legt den Schwellenwert für die Vorhersagepunktzahl fest, der den Wert in die Modellmetadaten (falls vorhanden). Ergebnisse unter diesem Wert werden abgelehnt. Beliebiger Gleitkommawert Nicht festgelegt
categoryAllowlist Legt die optionale Liste der zulässigen Sprachcodes fest. Wenn das Feld nicht leer ist, Sprachvorhersagen, deren Sprachcode nicht in diesem Satz enthalten ist, herausgefiltert. Diese Option schließt sich mit categoryDenylist und die Verwendung beider führt zu einem Fehler. Alle Strings Nicht festgelegt
categoryDenylist Legt die optionale Liste der unzulässigen Sprachcodes fest. Wenn nicht leer ist, werden Sprachvorhersagen, deren Sprachcode in diesem Satz enthalten ist, gefiltert aus. Diese Option schließt sich mit categoryAllowlist und führt dies zu einem Fehler. Alle Strings Nicht festgelegt

Daten vorbereiten

Die Spracherkennung funktioniert mit Textdaten (string). Die Aufgabe verarbeitet die Vorverarbeitung von Dateneingaben, einschließlich Tokenisierung und Tensor-Vorverarbeitung. Die gesamte Vorverarbeitung erfolgt über die Funktion detect. Es ist nicht nötig, zur zusätzlichen Vorverarbeitung des Eingabetexts.

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

Aufgabe ausführen

Die Spracherkennung verwendet die Funktion detect, um Inferenzen auszulösen. Für Sprache Erkennung möglicher Sprachen für den Eingabetext.

Der folgende Code zeigt, wie die Verarbeitung mit der Aufgabe ausgeführt wird. Modell:

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

Ergebnisse verarbeiten und anzeigen

Die Aufgabe „Spracherkennung“ gibt eine LanguageDetectorResult aus, die aus einer Liste besteht. Vorhersagen von Sprache zusammen mit den Wahrscheinlichkeiten für diese Vorhersagen. Die Im Folgenden finden Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

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

Dieses Ergebnis wurde erhalten, indem das Modell für den Eingabetext ausgeführt wurde: "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 einer finden Sie in der Webbeispiel-App: