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 kesamaan dua gambar. Petunjuk ini menunjukkan cara menggunakan Image Embedder untuk Node dan aplikasi web.

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

Contoh kode

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

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan project kode khusus untuk menggunakan Penyemat Gambar. 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 Gambar tersedia melalui paket NPM @mediapipe/tasks-vision 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 dalam tag di 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 Penyemat Gambar, 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 mengetahui 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 video yang didekode atau pada livestream 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 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 Gambar dapat menyematkan gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani pra-pemrosesan input data, termasuk mengubah 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 embedding akan memblokir thread utama. Anda dapat mencegah hal ini dengan mengimplementasikan pekerja web untuk menjalankan metode embed() dan embedForVideo() di thread lain.

Menjalankan tugas

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

Kode berikut menunjukkan cara mengeksekusi 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 embedding untuk gambar atau frame input.

Berikut ini 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:

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

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

Kode contoh Image Embedder menunjukkan cara menampilkan hasil sematan yang ditampilkan dari tugas. Lihat contoh kode untuk mengetahui detailnya.