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

งานเครื่องมือฝังรูปภาพ 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]);

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