Panduan penyematan gambar untuk Web

Tugas MediaPipe Image Embedder memungkinkan Anda mengonversi data gambar menjadi representasi numerik untuk menyelesaikan tugas pemrosesan gambar terkait ML, seperti membandingkan kemiripan dua gambar. Petunjuk ini menunjukkan cara menggunakan Image Embedder untuk Node dan aplikasi web.

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

Contoh kode

Kode contoh untuk Image Embedder memberikan implementasi lengkap tugas ini dalam JavaScript sebagai referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai mem-build aplikasi penyematan gambar Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit kode contoh Image Embedder hanya menggunakan browser web.

Penyiapan

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

Paket JavaScript

Kode Penyematan Gambar tersedia melalui paket @mediapipe/tasks-vision NPM MediaPipe. 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-vision

Jika Anda ingin mengimpor kode tugas melalui layanan jaringan penayangan konten (CDN), tambahkan kode berikut di tag dalam file HTML Anda:

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

Model

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

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

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

Membuat tugas

Menentukan jalur model

Anda dapat membuat tugas dengan opsi default menggunakan metode createFromModelPath():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

Menentukan buffer model

Jika model sudah dimuat ke dalam memori, Anda dapat menggunakan metode createFromModelBuffer():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

Menentukan opsi kustom

Tugas MediaPipe Image Embedder menggunakan fungsi createFromOptions untuk menyiapkan tugas. Fungsi createFromOptions menerima nilai untuk opsi konfigurasi. Untuk informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara mem-build dan mengonfigurasi tugas dengan opsi kustom:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

Opsi konfigurasi

Tugas ini memiliki opsi konfigurasi berikut untuk aplikasi Web:

Nama Opsi Deskripsi Rentang Nilai Nilai Default
running_mode Menetapkan mode berjalan untuk tugas. Ada dua mode:

IMAGE: Mode untuk input gambar tunggal.

VIDEO: Mode untuk frame yang didekode dari video atau pada live stream data input, seperti dari kamera.		 {IMAGE, VIDEO} IMAGE
l2Normalize Apakah akan menormalisasi vektor fitur yang ditampilkan dengan norma L2. Gunakan opsi ini hanya jika model belum berisi Opsi TFLite L2_NORMALIZATION native. Pada umumnya, hal ini sudah terjadi dan normalisasi L2 akan dicapai melalui inferensi TFLite tanpa memerlukan opsi ini. Boolean False
quantize Apakah penyematan yang ditampilkan harus dikuantifikasi ke byte melalui kuantisasi skalar. Secara implisit, penyematan diasumsikan sebagai unit-norm dan oleh karena itu, dimensi apa pun dijamin memiliki nilai dalam [-1,0, 1,0]. Gunakan opsi l2Normalize jika tidak demikian. Boolean False

Menyiapkan data

Image Embedder dapat menyematkan gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani prapemrosesan input data, termasuk perubahan ukuran, rotasi, dan normalisasi nilai.

Panggilan ke metode embed() dan embedForVideo() Image Embedder berjalan secara sinkron dan memblokir thread antarmuka pengguna. Jika Anda ingin mengekstrak vektor fitur dari frame video, setiap penyematan akan memblokir thread utama. Anda dapat mencegah hal ini dengan menerapkan pekerja web untuk menjalankan metode embed() dan embedForVideo() di thread lain.

Menjalankan tugas

Image Embedder menggunakan metode embed() (dengan mode berjalan image) dan embedForVideo() (dengan mode berjalan video) untuk memicu inferensi. Image Embedder API akan menampilkan vektor penyematan untuk gambar input.

Kode berikut menunjukkan cara menjalankan pemrosesan dengan model tugas:

Gambar

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

Video

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

Menangani dan menampilkan hasil

Setelah menjalankan inferensi, tugas Image Embedder akan menampilkan objek ImageEmbedderResult yang berisi vektor penyematan untuk gambar atau frame input.

Berikut adalah contoh data output dari tugas ini:

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

Hasil ini diperoleh dengan menyematkan gambar berikut:

Shot sedang kucing eksotis

Anda dapat membandingkan kemiripan semantik dari dua penyematan menggunakan fungsi ImageEmbedder.cosineSimilarity. Lihat kode berikut untuk mengetahui contohnya.

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

Kode contoh Penyematan Gambar menunjukkan cara menampilkan hasil penyematan yang ditampilkan dari tugas, lihat contoh kode untuk mengetahui detailnya.