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

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

Contoh kode

Kode contoh untuk Image Embedder menyediakan implementasi lengkap dari proses ini tugas di JavaScript untuk referensi Anda. Kode ini membantu Anda menguji tugas ini dan mulai membangun aplikasi penyematan gambar Anda sendiri. Anda dapat melihat, menjalankan, dan edit contoh kode Penyemat Gambar hanya dengan menggunakan {i>browser<i} web.

Penyiapan

Bagian ini menjelaskan langkah-langkah utama untuk menyiapkan lingkungan pengembangan dan membuat kode project 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 Penyemat Gambar tersedia melalui MediaPipe @mediapipe/tasks-vision NPM. Anda dapat menemukan dan mendownload library ini dari link yang disediakan dalam platform Panduan penyiapan.

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 jaringan penayangan konten (CDN) tambahan, 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 Anda. Untuk informasi selengkapnya tentang model terlatih yang tersedia untuk Image Embedder, lihat ringkasan tugas bagian Model.

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 createFromModelPath() berikut:

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 menetapkan tugasnya. Fungsi createFromOptions menerima nilai untuk opsi konfigurasi. Untuk mengetahui informasi selengkapnya tentang opsi konfigurasi, lihat Opsi konfigurasi.

Kode berikut menunjukkan cara membangun dan mengonfigurasi tugas dengan opsi:

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 moda:

IMAGE: Mode untuk input gambar tunggal.

VIDEO: Mode untuk frame yang didekode video atau pada livestream data input, misalnya dari kamera.		 {IMAGE, VIDEO} IMAGE
l2Normalize Menentukan apakah akan menormalisasi vektor fitur yang ditampilkan dengan norma L2. Gunakan opsi ini hanya jika model belum berisi L2_NORMALIZATION TFLite Op. Dalam kebanyakan kasus, hal ini sudah terjadi dan Dengan demikian, normalisasi L2 dicapai melalui inferensi TFLite tanpa memerlukan untuk opsi ini. Boolean False
quantize Apakah embedding yang dikembalikan harus dikuantisasi ke byte melalui kuantisasi skalar. Embedding secara implisit diasumsikan sebagai norma unit oleh karena itu, setiap dimensi dijamin memiliki nilai dalam [-1.0, 1.0]. Gunakan opsi {i>l2Normalize<i} jika tidak demikian. Boolean False

Menyiapkan data

Penyemat Gambar dapat menyematkan gambar dalam format apa pun yang didukung oleh {i>host<i} di browser web Anda. Tugas ini juga menangani pra-pemrosesan input data, termasuk pengubahan ukuran, rotasi, dan normalisasi nilai.

Panggilan ke metode embed() dan embedForVideo() Image Embedder dijalankan 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 menerapkan pekerja web untuk menjalankan embed() dan metode embedForVideo() di thread lain.

Menjalankan tugas

Penyemat Gambar menggunakan embed() (dengan mode berjalan image) dan Metode embedForVideo() (dengan mode berjalan video) yang akan dipicu 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 mengembalikan Objek ImageEmbedderResult yang berisi vektor embedding untuk input gambar atau bingkai.

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 kesamaan semantik dari dua embedding Fungsi ImageEmbedder.cosineSimilarity. Lihat kode berikut untuk contoh.

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

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