งานตัวแยกประเภทรูปภาพ 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
ผลลัพธ์นี้ได้มาจากการเรียกใช้ตัวจัดประเภทนกใน
โค้ดตัวอย่างของตัวแยกประเภทรูปภาพแสดงวิธีแสดงผลการแยกประเภทที่แสดงผลจากงาน ดูรายละเอียดได้ในตัวอย่างโค้ด