Panduan penyematan teks untuk Web

Tugas MediaPipe Text Embedder memungkinkan Anda membuat representasi numerik dari data teks untuk menangkap makna semantiknya. Petunjuk ini menunjukkan cara menggunakan Text Embedder untuk aplikasi web dan JavaScript.

Untuk mengetahui informasi selengkapnya tentang kemampuan, model, dan opsi konfigurasi tugas ini, lihat Ringkasan.

Contoh kode

Kode contoh untuk Text Embedder menyediakan penerapan lengkap tugas ini di JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi penyematan teks Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Text Embedder menggunakan browser web saja.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan project kode khusus untuk menggunakan Text Embedder. Untuk informasi umum tentang menyiapkan lingkungan pengembangan Anda untuk menggunakan tugas MediaPipe, termasuk persyaratan versi platform, lihat Panduan penyiapan untuk Web.

Paket JavaScript

Kode Penyemat Teks tersedia melalui paket @mediapipe/tasks-text. Anda dapat menemukan dan mendownload library ini dari link yang disediakan di Panduan penyiapan platform.

Anda dapat menginstal paket yang diperlukan dengan kode berikut untuk staging lokal menggunakan perintah berikut:

npm install @mediapipe/tasks-text

Jika ingin melakukan deployment ke server, Anda dapat menggunakan layanan jaringan penayangan konten (CDN) seperti jsDelivr, untuk menambahkan kode langsung ke halaman HTML Anda, sebagai berikut:

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

Model

Tugas MediaPipe Text Embedder memerlukan model terlatih yang kompatibel dengan tugas ini. Untuk mengetahui informasi selengkapnya tentang model terlatih yang tersedia untuk Penyemat Teks, lihat bagian Model ringkasan tugas.

Pilih dan download model, lalu simpan dalam direktori project Anda:

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

Membuat tugas

Gunakan salah satu fungsi createFrom...() Text Embedder untuk menyiapkan tugas guna menjalankan inferensi. Anda dapat menggunakan fungsi createFromModelPath() dengan jalur relatif atau absolut ke file model yang telah dilatih. Contoh kode di bawah menunjukkan penggunaan fungsi createFromOptions(). Untuk mengetahui informasi selengkapnya tentang opsi konfigurasi yang tersedia, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas ini:

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();

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web dan JavaScript:

Nama Opsi Deskripsi Rentang Nilai Nilai Default
l2Normalize Apakah akan menormalisasi vektor fitur yang ditampilkan dengan norma L2. Gunakan opsi ini hanya jika model belum berisi TFLite Op L2_NORMALIZATION native. Dalam kebanyakan kasus, hal ini sudah terjadi dan normalisasi L2 dicapai melalui inferensi TFLite tanpa memerlukan opsi ini. Boolean False
quantize Apakah embedding yang ditampilkan harus dikuantisasi ke byte melalui kuantisasi skalar. Embedding secara implisit diasumsikan sebagai norma satuan dan oleh karena itu, setiap dimensi dijamin memiliki nilai dalam [-1.0, 1.0]. Gunakan opsi l2Normalize jika tidak demikian. Boolean False

Menyiapkan data

Penyemat Teks berfungsi dengan data teks (string). Tugas ini menangani prapemrosesan input data, termasuk tokenisasi dan pra-pemrosesan tensor. Semua prapemrosesan ditangani dalam fungsi embed. Tidak perlu pemrosesan teks input tambahan terlebih dahulu.

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

Menjalankan tugas

Penyemat Teks menggunakan fungsi embed untuk memicu inferensi. Untuk penyematan teks, ini berarti menampilkan vektor embedding untuk teks input.

Kode berikut menunjukkan cara mengeksekusi pemrosesan dengan model tugas. 

// Wait to run the function until inner text is set
const embeddingResult = textEmbedder.embed(
  inputText
);

Menangani dan menampilkan hasil

Text Embedder menghasilkan output TextEmbedderResult yang berisi daftar embedding (baik floating point atau terkuantisasi skalar) untuk teks input.

Berikut ini contoh data output dari tugas ini:

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

Anda dapat membandingkan kemiripan semantik dua embedding menggunakan fungsi TextEmbedder.cosineSimilarity. Lihat kode berikut sebagai contoh.

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

Kode contoh Text Embedder menunjukkan cara menampilkan hasil sematan yang ditampilkan dari tugas, lihat contoh kode untuk mengetahui detailnya.