งานตัวแยกประเภทรูปภาพ MediaPipe ให้คุณแยกประเภทรูปภาพได้ คุณสามารถใช้ งานนี้เพื่อระบุว่ารูปภาพแสดงถึงอะไรในชุดหมวดหมู่ที่กำหนดไว้ ในเวลาฝึกอบรม คำแนะนำเหล่านี้จะแสดงวิธีใช้ตัวแยกประเภทรูปภาพ สำหรับโหนดและเว็บแอป
คุณสามารถดูการทำงานนี้โดยดูที่ การสาธิต สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่า ของงานนี้ โปรดดูภาพรวม
ตัวอย่างโค้ด
โค้ดตัวอย่างสำหรับตัวแยกประเภทรูปภาพแสดงการติดตั้งโค้ดนี้อย่างสมบูรณ์ ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และ เริ่มต้นสร้างแอปการจำแนกประเภทรูปภาพของคุณเอง คุณสามารถดู เรียกใช้ และ แก้ไข ตัวแยกประเภทรูปภาพ โค้ดตัวอย่าง โดยใช้แค่เว็บเบราว์เซอร์
ตั้งค่า
ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ และ เพื่อใช้ตัวแยกประเภทรูปภาพโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับ การตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณสำหรับการใช้งาน MediaPipe ซึ่งรวมถึง โปรดดูข้อกำหนดเวอร์ชันของแพลตฟอร์ม คู่มือการตั้งค่าสำหรับเว็บ
แพ็กเกจ JavaScript
รหัสตัวแยกประเภทรูปภาพพร้อมให้ใช้งานผ่าน MediaPipe @mediapipe/tasks-vision
แพ็กเกจ NPM คุณสามารถ
ค้นหาและดาวน์โหลดไลบรารีเหล่านี้จากลิงก์ที่ให้ไว้ในแพลตฟอร์ม
คู่มือการตั้งค่า
คุณติดตั้งแพ็กเกจที่จำเป็นได้ด้วยรหัสต่อไปนี้สำหรับการทดลองใช้ในเครื่อง โดยใช้คำสั่งต่อไปนี้
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...() ของตัวแยกประเภทรูปภาพเพื่อ
เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ 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 และใช้
ทั้งคู่จะทําให้เกิดข้อผิดพลาด |
สตริงใดก็ได้ | ไม่ได้ตั้งค่า |
categoryDenylist |
ตั้งค่ารายการตัวเลือกชื่อหมวดหมู่ที่ไม่ได้รับอนุญาต ถ้า
ไม่ว่างเปล่า ระบบจะกรองผลลัพธ์การจัดประเภทที่มีชื่อหมวดหมู่ในชุดนี้
ระบบจะไม่สนใจชื่อหมวดหมู่ที่ซ้ำกันหรือไม่รู้จัก ตัวเลือกนี้มีผลร่วมกัน
เฉพาะตัวสำหรับ categoryAllowlist และการใช้ทั้ง 2 อย่างจะทำให้เกิดข้อผิดพลาด |
สตริงใดก็ได้ | ไม่ได้ตั้งค่า |
resultListener |
ตั้งค่า Listener ผลลัพธ์เพื่อรับผลลัพธ์การจัดประเภท
แบบไม่พร้อมกันเมื่อตัวแยกประเภทรูปภาพอยู่ในสตรีมแบบสด
ใช้ได้เมื่อตั้งค่าโหมดวิ่งเป็น LIVE_STREAM เท่านั้น |
ไม่มี | ไม่ได้ตั้งค่า |
เตรียมข้อมูล
ตัวแยกประเภทรูปภาพสามารถจัดหมวดหมู่ออบเจ็กต์ในรูปภาพในรูปแบบใดก็ได้ที่ระบบรองรับ เบราว์เซอร์โฮสต์ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้าด้วย ซึ่งรวมถึง การปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐาน
การเรียกใช้ตัวแยกประเภทรูปภาพ classify() และ classifyForVideo() จะเรียกใช้เมธอด
พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากคุณจัดประเภทออบเจ็กต์ใน
เฟรมวิดีโอจากกล้องของอุปกรณ์ การแยกประเภทแต่ละประเภทจะบล็อก
ชุดข้อความ คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานทำงานบนเว็บทำงาน
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
ผลลัพธ์นี้มาจากการเรียกใช้ Bird Classifier ใน:
โค้ดตัวอย่างของตัวแยกประเภทรูปภาพแสดงวิธีแสดงการจัดประเภท ผลลัพธ์ที่ส่งคืนจากงาน โปรดดู ตัวอย่างโค้ด เพื่อดูรายละเอียด