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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ด Image Embedder พร้อมใช้งานผ่านแพ็กเกจ @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.mjs"
    crossorigin="anonymous"></script>
</head>

รุ่น

งานฝังรูปภาพของ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ฝึกแล้วซึ่งพร้อมใช้งานสำหรับ Image Embedder ได้ที่ ภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล จากนั้นจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์

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

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

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

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

เรียกใช้งาน

Image Embedder ใช้เมธอด 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);

จัดการและแสดงผลลัพธ์

เมื่อเรียกใช้การอนุมาน งาน Image Embedder จะแสดงผลออบเจ็กต์ 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

ผลลัพธ์นี้ได้มาจากการฝังรูปภาพต่อไปนี้

ภาพระยะปานกลางของแมวสายพันธุ์หายาก

คุณสามารถเปรียบเทียบความคล้ายกันเชิงความหมายของ Embedding 2 รายการได้โดยใช้ฟังก์ชัน ImageEmbedder.cosineSimilarity ดูตัวอย่างได้ที่โค้ดต่อไปนี้ 

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

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