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.