คำแนะนำการตรวจจับออบเจ็กต์สำหรับเว็บ

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

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

npm install @mediapipe/tasks-vision

หากต้องการนำเข้าโค้ดงานผ่านบริการเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ในแท็ก <head> ในไฟล์ HTML

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

โมเดล

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

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

<dev-project-root>/app/shared/models/

สร้างงาน

ใช้ฟังก์ชัน ObjectDetector.createFrom...() อย่างใดอย่างหนึ่งของ Object Detector เพื่อเตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ฟังก์ชัน createFromModelPath() กับเส้นทางสัมพัทธ์หรือเส้นทางสมบูรณ์ไปยังไฟล์โมเดลที่ผ่านการฝึกแล้ว หากโหลดโมเดลลงในหน่วยความจำแล้ว คุณสามารถใช้วิธี createFromModelBuffer() ได้ ตัวอย่างโค้ดด้านล่างแสดงการใช้ฟังก์ชัน createFromOptions() ซึ่งช่วยให้คุณตั้งค่าตัวเลือกการกำหนดค่าเพิ่มเติมได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าที่พร้อมใช้งานได้ในส่วน ตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานนี้

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

ดูการติดตั้งใช้งานที่สมบูรณ์ยิ่งขึ้นในการสร้างงาน Object Detector ได้ที่ ตัวอย่างโค้ด

ตัวเลือกการกำหนดค่า

งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บแอปพลิเคชัน

ชื่อตัวเลือก คำอธิบาย ช่วงค่า ค่าเริ่มต้น
runningMode ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 โหมดดังนี้:

IMAGE: โหมดสำหรับอินพุตรูปภาพเดียว

VIDEO: โหมดสำหรับเฟรมที่ถอดรหัสแล้วของ วิดีโอหรือในไลฟ์สดของข้อมูลอินพุต เช่น จากกล้อง		 {IMAGE, VIDEO} IMAGE
displayNamesLocale ตั้งค่าภาษาของป้ายกำกับที่จะใช้สำหรับชื่อที่แสดงซึ่งระบุไว้ใน ข้อมูลเมตาของโมเดลของงาน หากมี ค่าเริ่มต้นคือ en สำหรับ ภาษาอังกฤษ คุณสามารถเพิ่มป้ายกำกับที่แปลเป็นภาษาท้องถิ่นลงในข้อมูลเมตาของโมเดลที่กำหนดเองได้โดยใช้ TensorFlow Lite Metadata Writer API รหัสภาษา en
maxResults ตั้งค่าจำนวนสูงสุดของผลการตรวจจับที่มีคะแนนสูงสุดที่จะแสดงผล (ไม่บังคับ) ตัวเลขที่เป็นจำนวนบวกใดก็ได้ -1 (แสดงผลลัพธ์ทั้งหมด)
scoreThreshold ตั้งค่าเกณฑ์คะแนนการคาดการณ์ที่จะลบล้างเกณฑ์ที่ระบุไว้ในข้อมูลเมตาของโมเดล (หากมี) ระบบจะปฏิเสธผลลัพธ์ที่ต่ำกว่าค่านี้ เลขทศนิยมใดก็ได้ ไม่ได้ตั้งค่า
categoryAllowlist ตั้งค่ารายการชื่อหมวดหมู่ที่อนุญาต (ไม่บังคับ) หากไม่ว่างเปล่า ระบบจะกรองผลการตรวจจับที่มีชื่อหมวดหมู่ไม่อยู่ในชุดนี้ออก ระบบจะละเว้นชื่อหมวดหมู่ที่ซ้ำกันหรือไม่รู้จัก ตัวเลือกนี้ใช้ร่วมกับ categoryDenylist ไม่ได้ และการใช้ทั้ง 2 ตัวเลือกจะทำให้เกิดข้อผิดพลาด สตริงใดก็ได้ ไม่ได้ตั้งค่า
categoryDenylist ตั้งค่ารายการชื่อหมวดหมู่ที่ไม่อนุญาต (ไม่บังคับ) หากไม่ว่างเปล่า ระบบจะกรองผลการตรวจจับที่มีชื่อหมวดหมู่อยู่ในชุดนี้ออก ระบบจะละเว้นชื่อหมวดหมู่ที่ซ้ำกันหรือไม่รู้จัก ตัวเลือกนี้ใช้ร่วมกับ categoryAllowlist ไม่ได้ และการใช้ทั้ง 2 ตัวเลือกจะทำให้เกิดข้อผิดพลาด สตริงใดก็ได้ ไม่ได้ตั้งค่า

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

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

เรียกใช้งาน

Object Detector ใช้ detect() สำหรับการทำงานกับรูปภาพเดียว และ detectForVideo() สำหรับการตรวจจับออบเจ็กต์ในเฟรมวิดีโอ งานจะประมวลผลข้อมูล พยายามจดจำออบเจ็กต์ แล้วรายงานผลลัพธ์

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

โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

วิดีโอ

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

ดูการติดตั้งใช้งานที่สมบูรณ์ยิ่งขึ้นในการเรียกใช้งาน Object Detector ได้ที่ ตัวอย่างโค้ด

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

Object Detector จะสร้างออบเจ็กต์ผลการตรวจจับสำหรับการเรียกใช้การตรวจจับแต่ละครั้ง ออบเจ็กต์ผลลัพธ์จะมีรายการการตรวจจับ โดยการตรวจจับแต่ละรายการจะมีกรอบล้อมรอบและข้อมูลหมวดหมู่เกี่ยวกับออบเจ็กต์ที่ตรวจพบ ซึ่งรวมถึงชื่อออบเจ็กต์และคะแนนความเชื่อมั่น

ตัวอย่างต่อไปนี้แสดงข้อมูลเอาต์พุตจากงานนี้

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

รูปภาพต่อไปนี้แสดงภาพการแสดงผลของงาน

สุนัข 2 ตัวที่ไฮไลต์ด้วยกรอบล้อมรอบ

โค้ดตัวอย่าง Object Detector แสดงวิธีแสดงผลการตรวจจับ ที่แสดงผลจากงาน โปรดดูรายละเอียดใน ตัวอย่างโค้ด