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

งานตัวแยกประเภทรูปภาพ 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` ไม่ได้ และการใช้ทั้ง 2 อย่างจะทำให้เกิดข้อผิดพลาด	สตริงใดก็ได้	ไม่ได้ตั้งค่า
`categoryDenylist`	ตั้งค่ารายการตัวเลือกชื่อหมวดหมู่ที่ไม่ได้รับอนุญาต หากไม่ว่างเปล่า ผลการจัดประเภทที่มีชื่อหมวดหมู่อยู่ในชุดนี้จะถูกกรองออก ระบบจะไม่สนใจชื่อหมวดหมู่ที่ซ้ำกันหรือไม่รู้จัก ตัวเลือกนี้ใช้ร่วมกับ `categoryAllowlist` ไม่ได้ และการใช้ทั้ง 2 อย่างจะทําให้เกิดข้อผิดพลาด	สตริงใดก็ได้	ไม่ได้ตั้งค่า
`resultListener`	ตั้งค่า Listener ผลลัพธ์เพื่อรับผลลัพธ์การจัดประเภทแบบไม่พร้อมกันเมื่อตัวแยกประเภทรูปภาพอยู่ในโหมดสตรีมแบบสด ใช้ได้เมื่อตั้งค่าโหมดวิ่งเป็น `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

ผลลัพธ์นี้มาจากการเรียกใช้ Bird Classifier ใน:

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