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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

คุณติดตั้งแพ็กเกจที่ต้องการผ่าน 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.js"
    crossorigin="anonymous"></script>
</head>

รุ่น

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

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

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

สร้างงาน

ใช้ฟังก์ชันตัวตรวจจับออบเจ็กต์ ObjectDetector.createFrom...() รายการใดรายการหนึ่งเพื่อเตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ฟังก์ชัน 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
});

สำหรับการใช้งานที่สมบูรณ์ยิ่งขึ้นในการสร้างงานตัวตรวจจับออบเจ็กต์ โปรดดูตัวอย่างโค้ด

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

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

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

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

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

เรียกใช้งาน

ตัวตรวจจับวัตถุใช้ 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();
  });
}

สำหรับการใช้งานที่สมบูรณ์ยิ่งขึ้นในการเรียกใช้งานตัวตรวจจับออบเจ็กต์ โปรดดูตัวอย่างโค้ด

แฮนเดิลและแสดงผลลัพธ์

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

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

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

รูปภาพต่อไปนี้แสดงภาพเอาต์พุตของงาน

โค้ดตัวอย่างตัวตรวจจับออบเจ็กต์แสดงวิธีแสดงผลลัพธ์การตรวจจับจากงาน ดูรายละเอียดได้ในตัวอย่างโค้ด