คำแนะนำการฝังรูปภาพสำหรับเว็บ

งานโปรแกรมฝังรูปภาพของ MediaPipe ช่วยให้คุณแปลงข้อมูลรูปภาพเป็นการนำเสนอตัวเลขเพื่อทำงานการประมวลผลรูปภาพที่เกี่ยวข้องกับ ML ให้เสร็จสมบูรณ์ เช่น การเปรียบเทียบความคล้ายคลึงของรูปภาพ 2 รูป วิธีการเหล่านี้แสดงวิธีใช้เครื่องมือฝังรูปภาพสำหรับ Node และเว็บแอป

ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ รูปแบบ และตัวเลือกการกําหนดค่าของงานนี้ได้ที่ภาพรวม

ตัวอย่างโค้ด

โค้ดตัวอย่างสำหรับเครื่องมือฝังรูปภาพแสดงการใช้งานที่สมบูรณ์ของงานนี้ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และเริ่มต้นสร้างแอปการฝังรูปภาพของคุณเอง คุณสามารถดู เรียกใช้ และแก้ไขโค้ดตัวอย่างของโปรแกรมฝังรูปภาพได้โดยใช้เพียงเว็บเบราว์เซอร์

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมการพัฒนาและโปรเจ็กต์โค้ดเพื่อใช้เครื่องมือฝังรูปภาพโดยเฉพาะ ดูข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้งาน MediaPipe รวมถึงข้อกำหนดเวอร์ชันแพลตฟอร์มได้ที่คู่มือการตั้งค่าสําหรับเว็บ

แพ็กเกจ JavaScript

โค้ดโปรแกรมฝังรูปภาพมีให้ใช้งานผ่านแพ็กเกจ @mediapipe/tasks-vision NPM ของ MediaPipe คุณสามารถค้นหาและดาวน์โหลดไลบรารีเหล่านี้ได้จากลิงก์ที่ระบุไว้ในคู่มือการตั้งค่าของแพลตฟอร์ม

คุณสามารถติดตั้งแพ็กเกจที่จำเป็นด้วยโค้ดต่อไปนี้สำหรับการจัดเตรียมในเครื่องโดยใช้คำสั่งต่อไปนี้

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, VIDEO} IMAGE
l2Normalize กำหนดว่าจะปรับค่าเวกเตอร์ฟีเจอร์ที่แสดงผลด้วย L2 หรือไม่ ใช้ตัวเลือกนี้เฉพาะในกรณีที่โมเดลไม่มีการดำเนินการ L2_NORMALIZATION ของ TFLite เดิมอยู่แล้ว ซึ่งในกรณีส่วนใหญ่จะเป็นเช่นนั้นอยู่แล้ว และระบบจะทำการแปลง L2 ผ่านการอนุมาน TFLite โดยไม่จำเป็นต้องใช้ตัวเลือกนี้ Boolean False
quantize ควรแปลงการฝังที่แสดงผลเป็นไบต์ผ่านการแปลงเชิงสเกลหรือไม่ ระบบจะถือว่าการฝังมีรูปแบบเป็นหน่วยโดยปริยาย และรับประกันว่ามิติข้อมูลใดๆ จะมีค่าอยู่ในช่วง [-1.0, 1.0] ใช้ตัวเลือก l2Normalize ในกรณีนี้ Boolean False

เตรียมข้อมูล

เครื่องมือฝังรูปภาพสามารถฝังรูปภาพในรูปแบบใดก็ได้ที่เบราว์เซอร์โฮสต์รองรับ งานนี้ยังจัดการการประมวลผลข้อมูลอินพุตล่วงหน้าด้วย ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นไปตามมาตรฐาน

การเรียกใช้เมธอด embed() และ embedForVideo() ของเครื่องมือฝังรูปภาพจะทำงานแบบซิงค์และบล็อกเธรดอินเทอร์เฟซผู้ใช้ หากต้องการดึงข้อมูลเวกเตอร์ลักษณะจากเฟรมวิดีโอ แต่ละการฝังจะบล็อกเธรดหลัก คุณสามารถป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้เมธอด embed() และ embedForVideo() ในเธรดอื่น

เรียกใช้งาน

เครื่องมือฝังรูปภาพใช้เมธอด embed() (ที่มีโหมดการทํางาน image) และ embedForVideo() (ที่มีโหมดการทํางาน video) เพื่อเรียกใช้การอนุมาน Image Embedder 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]);

โค้ดตัวอย่างของเครื่องมือฝังรูปภาพแสดงวิธีแสดงผลลัพธ์ของเครื่องมือฝังที่แสดงผลจากงาน ดูรายละเอียดได้ในตัวอย่างโค้ด