Anleitung zum Texteinbetten im Web

Mit der MediaPipe Text Embedder-Aufgabe können Sie eine numerische Darstellung von Textdaten erstellen, um deren semantische Bedeutung zu erfassen. In dieser Anleitung erfahren Sie, wie Sie den Text Embedder für Web- und JavaScript-Anwendungen verwenden.

Weitere Informationen zu den Funktionen, Modellen und Konfigurationsoptionen dieser Aufgabe finden Sie in der Übersicht.

Codebeispiel

Der Beispielcode für Text Embedder bietet eine vollständige Implementierung dieser Aufgabe in JavaScript. Mit diesem Code können Sie diese Aufgabe testen und mit der Entwicklung Ihrer eigenen Texteinbettungs-App beginnen. Sie können das Text Embedder Beispiel einfach in Ihrem Webbrowser ansehen, ausführen und bearbeiten.

Einrichtung

In diesem Abschnitt werden die wichtigsten Schritte zum Einrichten Ihrer Entwicklungsumgebung und Ihrer Codeprojekte speziell für die Verwendung von Text Embedder 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 Text Embedder ist über das @mediapipe/tasks-text Paket verfügbar. Sie finden und laden diese Bibliotheken über die Links im Einrichtungsleitfaden für die Plattformherunter.

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 auf einem Server bereitstellen möchten, können Sie einen Content Delivery Network (CDN)-Dienst wie jsDelivr verwenden, um Code direkt zu Ihrer HTML-Seite hinzuzufügen:

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

Modell

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

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

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

Aufgabe erstellen

Verwenden Sie eine der createFrom...()-Funktionen von Text Embedder, 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 zu den verfügbaren Konfigurationsoptionen finden Sie unter Konfigurationsoptionen.

Der folgende Code zeigt, wie Sie diese Aufgabe erstellen und konfigurieren:

async function createEmbedder() {
  const textFiles = await FilesetResolver.forTextTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  textEmbedder = await TextEmbedder.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/text_embedder/universal_sentence_encoder.tflite`
      },
      quantize: true
    }
  );
}
createEmbedder();

Konfigurationsoptionen

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

Option Beschreibung Wertebereich Standardwert
l2Normalize Gibt an, ob der zurückgegebene Feature-Vektor mit der L2-Norm normalisiert werden soll. Verwenden Sie diese Option nur, wenn das Modell noch keine native L2_NORMALIZATION TFLite-Operation enthält. In den meisten Fällen ist dies bereits der Fall und die L2-Normalisierung wird daher durch die TFLite-Inferenz erreicht, ohne dass diese Option erforderlich ist. Boolean False
quantize Gibt an, ob die zurückgegebene Einbettung über die Skalarquantisierung in Byte quantisiert werden soll. Einbettungen werden implizit als Einheitsnorm angenommen. Daher hat jede Dimension garantiert einen Wert im Bereich [-1,0, 1,0]. Verwenden Sie die Option „l2Normalize“, wenn dies nicht der Fall ist. Boolean False

Daten vorbereiten

Text Embedder funktioniert mit Textdaten (string). Die Aufgabe übernimmt die Vorverarbeitung der Dateneingabe, einschließlich Tokenisierung und Tensorvorverarbeitung. Die gesamte Vorverarbeitung erfolgt in der Funktion embed. Eine zusätzliche Vorverarbeitung des Eingabetextes ist nicht erforderlich.

const inputText = "The input text to be embedded.";

Aufgabe ausführen

Text Embedder verwendet die Funktion embed, um Inferenzvorgänge auszulösen. Bei der Texteinbettung bedeutet dies, dass die Einbettungsvektoren 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 embeddingResult = textEmbedder.embed(
  inputText
);

Ergebnisse verarbeiten und anzeigen

Text Embedder gibt ein TextEmbedderResult aus, das eine Liste von Einbettungen (entweder Gleitkomma- oder Skalarquantisiert) für den Eingabetext enthält.

Im Folgenden sehen Sie ein Beispiel für die Ausgabedaten dieser Aufgabe:

TextEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.2345f, 0.1234f, ..., 0.6789f}
    head_index: 0

Sie können die semantische Ähnlichkeit von zwei Einbettungen mit der Funktion TextEmbedder.cosineSimilarity vergleichen. Ein Beispiel finden Sie im folgenden Code.

// Compute cosine similarity.
const similarity = TextEmbedder.cosineSimilarity(
  embeddingResult.embeddings[0],
  otherEmbeddingResult.embeddings[0]);

Der Beispielcode für Text Embedder zeigt, wie die von der Aufgabe zurückgegebenen Einbettungsergebnisse angezeigt werden. Weitere Informationen finden Sie im Beispiel.