คำแนะนำในการแยกประเภทรูปภาพสำหรับเว็บ

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

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

npm install @mediapipe/tasks-vision

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

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

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

สร้างงาน

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

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

โค้ดต่อไปนี้แสดงวิธีสร้างและกําหนดค่างานด้วยตัวเลือกที่กําหนดเอง

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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

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

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

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

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

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

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

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

เรียกใช้งาน

ตัวจัดประเภทรูปภาพใช้เมธอด classify() กับโหมดรูปภาพ และเมธอด classifyForVideo() กับโหมด video เพื่อทริกเกอร์การอนุมาน Image Classifier API จะแสดงหมวดหมู่ที่เป็นไปได้สำหรับวัตถุในรูปภาพที่ป้อน

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

วิดีโอ

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นของการทำงานแบบแยกประเภทรูปภาพได้ที่ตัวอย่างโค้ด

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

เมื่อทำการอนุมาน งานจัดประเภทรูปภาพจะแสดงผลImageClassifierResultออบเจ็กต์ซึ่งมีรายการหมวดหมู่ที่เป็นไปได้สำหรับออบเจ็กต์ภายในรูปภาพหรือเฟรมที่ป้อน

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

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

ผลลัพธ์นี้ได้มาจากการเรียกใช้ตัวจัดประเภทนกใน

ภาพระยะใกล้ของนกกระจอกบ้าน

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