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 aplikasi web dan Node.

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

Contoh kode

Contoh kode untuk Penyematan Gambar memberikan implementasi lengkap tugas ini di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membuat aplikasi penyematan gambar Anda sendiri. Anda dapat melihat, menjalankan, dan mengedit contoh Penyemat Gambar hanya dengan menggunakan browser web.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan project kode secara khusus untuk menggunakan Image 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 Penyemat 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 penyiapan 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.mjs"
    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 di ringkasan tugas.

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

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

Buat 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 Anda 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 membuat 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:

GAMBAR: Mode untuk input gambar tunggal.

VIDEO: Mode untuk frame yang didekode dari video atau di 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 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

Penyemat Gambar dapat menyematkan gambar dalam format apa pun yang didukung oleh browser host. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan 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.

Jalankan 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 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 embedding 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:

Bidikan sedang kucing eksotis

Anda dapat membandingkan kesamaan semantik dua penyematan menggunakan fungsi ImageEmbedder.cosineSimilarity. Lihat contoh kode berikut.

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

Kode contoh Image Embedder menunjukkan cara menampilkan hasil embedder yang ditampilkan dari tugas, lihat contoh untuk mengetahui detailnya.