Panduan penyematan teks untuk Web

Tugas MediaPipe Text Embedder memungkinkan Anda membuat representasi numerik 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

Contoh kode untuk Text Embedder memberikan implementasi lengkap tugas ini di JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membuat aplikasi embedding teks Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit contoh Text Embedder hanya menggunakan browser web Anda.

Penyiapan

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

Paket JavaScript

Kode Text Embedder 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 penyiapan lokal menggunakan perintah berikut:

npm install @mediapipe/tasks-text

Jika ingin men-deploy 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 Text Embedder, lihat ringkasan tugas di bagian Model.

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

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

Buat tugas

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

Kode berikut menunjukkan cara membuat 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 Op TFLite L2_NORMALIZATION native. Dalam sebagian besar kasus, hal ini sudah terjadi dan normalisasi L2 dicapai melalui inferensi TFLite tanpa memerlukan opsi ini. Boolean False
quantize Apakah sematan yang ditampilkan harus dikuantisasi ke byte melalui kuantisasi skalar. Embedding secara implisit diasumsikan sebagai norma unit dan oleh karena itu, setiap dimensi dijamin memiliki nilai dalam [-1.0, 1.0]. Gunakan opsi l2Normalize jika tidak demikian. Boolean False

Menyiapkan data

Text Embedder berfungsi dengan data teks (string). Tugas ini menangani pra-pemrosesan input data, termasuk tokenisasi dan pra-pemrosesan tensor. Semua pra-pemrosesan ditangani dalam fungsi embed. Tidak perlu melakukan praproses tambahan pada teks input sebelumnya.

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

Jalankan tugas

Penyematan Teks menggunakan fungsi embed untuk memicu inferensi. Untuk embedding teks, artinya menampilkan vektor embedding untuk teks input.

Kode berikut menunjukkan cara menjalankan 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 menampilkan TextEmbedderResult yang berisi daftar embedding (floating point atau terkuantisasi skalar) untuk teks input.

Berikut adalah 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 kesamaan semantik dua penyematan menggunakan fungsi TextEmbedder.cosineSimilarity. Lihat contoh kode berikut.

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

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