งานเครื่องมือฝังรูปภาพ MediaPipe ช่วยให้คุณแปลงข้อมูลรูปภาพเป็นตัวเลขเพื่อทำงานด้านการประมวลผลรูปภาพที่เกี่ยวข้องกับ ML ได้ เช่น การเปรียบเทียบความคล้ายคลึงกันของรูปภาพ 2 รูป วิธีการเหล่านี้จะแสดงวิธีใช้เครื่องมือฝังรูปภาพ สำหรับโหนดและเว็บแอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่าของงานนี้ได้ที่ภาพรวม
ตัวอย่างโค้ด
โค้ดตัวอย่างสำหรับเครื่องมือฝังรูปภาพจะแสดงการติดตั้งใช้งานนี้อย่างสมบูรณ์ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และเริ่มต้นสร้างแอปที่ฝังรูปภาพของคุณเอง คุณสามารถดู เรียกใช้ และแก้ไขโค้ดตัวอย่างของเครื่องมือฝังรูปภาพโดยใช้เพียงเว็บเบราว์เซอร์
ตั้งค่า
ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมการพัฒนาและโปรเจ็กต์โค้ดเพื่อใช้เครื่องมือฝังรูปภาพโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้งาน MediaPipe รวมถึงข้อกำหนดเวอร์ชันแพลตฟอร์ม โปรดดูคู่มือการตั้งค่าสำหรับเว็บ
แพ็กเกจ JavaScript
โค้ดเครื่องมือฝังรูปภาพพร้อมให้ใช้งานผ่านแพ็กเกจ MediaPipe @mediapipe/tasks-vision
NPM คุณค้นหาและดาวน์โหลดไลบรารีเหล่านี้ได้จากลิงก์ที่ให้ไว้ในคู่มือการตั้งค่าของแพลตฟอร์ม
คุณติดตั้งแพ็กเกจที่จำเป็นได้ด้วยโค้ดต่อไปนี้สำหรับการทดลองใช้ในเครื่องโดยใช้คำสั่งต่อไปนี้
npm install @mediapipe/tasks-vision
หากคุณต้องการนำเข้าโค้ดงานผ่านบริการเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ในแท็กในไฟล์ HTML
<!-- 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>
รุ่น
งานเครื่องมือฝังรูปภาพ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกที่พร้อมใช้งานสำหรับเครื่องมือฝังรูปภาพได้ในภาพรวมของงานส่วนโมเดล
เลือกและดาวน์โหลดโมเดล แล้วจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์ โดยทำดังนี้
<dev-project-root>/app/shared/models/
สร้างงาน
ระบุเส้นทางโมเดล
คุณสร้างงานด้วยตัวเลือกเริ่มต้นได้โดยใช้เมธอด 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`
},
});
ระบุบัฟเฟอร์ของโมเดล
หากโหลดโมเดลลงในหน่วยความจำแล้ว คุณใช้เมธอด 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(...)
);
ระบุตัวเลือกที่กำหนดเอง
งานเครื่องมือฝังรูปภาพ MediaPipe ใช้ฟังก์ชัน createFromOptions
เพื่อตั้งค่างาน ฟังก์ชัน createFromOptions
จะยอมรับค่าสำหรับตัวเลือกการกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ในตัวเลือกการกำหนดค่า
โค้ดต่อไปนี้แสดงวิธีการสร้างและกำหนดค่างานด้วยตัวเลือกที่กำหนดเอง
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
});
ตัวเลือกการกำหนดค่า
งานนี้มีตัวเลือกการกำหนดค่าสำหรับเว็บแอปพลิเคชันดังต่อไปนี้
ชื่อตัวเลือก | คำอธิบาย | ช่วงของค่า | ค่าเริ่มต้น |
---|---|---|---|
running_mode |
ตั้งค่าโหมดการทำงาน มี 2 โหมดดังนี้ IMAGE: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง |
{IMAGE, VIDEO } |
IMAGE |
l2Normalize |
ดูว่าจะปรับเวกเตอร์ของฟีเจอร์ที่ส่งคืนด้วยค่าปกติ L2 หรือไม่ ใช้ตัวเลือกนี้เฉพาะเมื่อโมเดลยังไม่มี L2_NORMALIZATION TFLite Op แบบเนทีฟ ในกรณีส่วนใหญ่ ก็มีกรณีเช่นนี้อยู่แล้ว และระบบจะทำการปรับให้สอดคล้องตามมาตรฐาน L2 ผ่านการอนุมาน TFLite โดยไม่จำเป็นต้องใช้ตัวเลือกนี้ | Boolean |
False |
quantize |
ควรทำให้การฝังที่ส่งคืนแปลงเป็นไบต์ผ่านการกำหนดปริมาณแบบสเกลาร์ไหม การฝังมีสมมติฐานโดยนัยว่าเป็นหน่วยบรรทัดฐาน ดังนั้นมิติข้อมูลใดๆ ก็มีค่าเป็น [-1.0, 1.0] อย่างแน่นอน หากไม่ใช่กรณีนี้ ให้ใช้ตัวเลือก l2Standardize | Boolean |
False |
เตรียมข้อมูล
เครื่องมือฝังรูปภาพสามารถฝังรูปภาพในรูปแบบใดก็ได้ที่เบราว์เซอร์โฮสต์รองรับ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นมาตรฐานด้วย
การเรียกใช้เครื่องมือฝังรูปภาพ embed()
และเมธอด embedForVideo()
จะทำงานแบบพร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากต้องการแยกเวกเตอร์ของฟีเจอร์จากเฟรมวิดีโอ การฝังแต่ละรายการจะบล็อกเทรดหลัก
คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้เมธอด embed()
และ embedForVideo()
ในเทรดอื่น
เรียกใช้งาน
เครื่องมือฝังรูปภาพใช้เมธอด embed()
(ในโหมดทำงาน image
) และ embedForVideo()
(ในโหมดทำงาน video
) เพื่อทริกเกอร์การอนุมาน API เครื่องมือฝังรูปภาพจะแสดงผลเวกเตอร์การฝังสำหรับรูปภาพอินพุต
โค้ดต่อไปนี้แสดงวิธีเรียกใช้การประมวลผลด้วยโมเดลงาน
รูปภาพ
const image = document.getElementById("image") as HTMLImageElement; const imageEmbedderResult = imageEmbedder.embed(image);
วิดีโอ
const video = document.getElementById("webcam"); const startTimeMs = performance.now(); const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);
แฮนเดิลและแสดงผลลัพธ์
เมื่อเรียกใช้การอนุมาน งานเครื่องมือฝังรูปภาพจะแสดงผลออบเจ็กต์ ImageEmbedderResult
ที่มีเวกเตอร์การฝังสำหรับรูปภาพหรือเฟรมอินพุต
ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
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
ผลการค้นหานี้มาจากการฝังรูปภาพต่อไปนี้
คุณเปรียบเทียบความคล้ายคลึงกันเชิงความหมายของการฝัง 2 การฝังได้โดยใช้ฟังก์ชัน ImageEmbedder.cosineSimilarity
โปรดดูโค้ดต่อไปนี้สำหรับตัวอย่าง
// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
imageEmbedderResult.embeddings[0],
otherEmbedderResult.embeddings[0]);
โค้ดตัวอย่างของเครื่องมือฝังรูปภาพแสดงวิธีแสดงผลลัพธ์ของเครื่องมือฝังที่ได้รับจากงาน โปรดดูรายละเอียดในตัวอย่างโค้ด