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

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

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

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

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

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

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

การเรียกใช้เครื่องมือฝังรูปภาพ embed() และ embedForVideo() จะทำงาน พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากต้องการแตกข้อมูล เวกเตอร์ฟีเจอร์จากเฟรมวิดีโอ การฝังแต่ละรายการจะบล็อกเทรดหลัก คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานทำงานบนเว็บเรียกใช้ 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]);

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