ขอแนะนำ LiteRT: รันไทม์ประสิทธิภาพสูงของ Google สำหรับ AI ในอุปกรณ์ หรือที่รู้จักกันในชื่อ TensorFlow Lite

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

ตั้งค่า

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

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

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

เรียกใช้งาน

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

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

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

รูปภาพ

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

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

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