ขอแนะนํา Google AI Edge Portal: เปรียบเทียบประสิทธิภาพ AI บนอุปกรณ์ขอบในวงกว้าง ลงชื่อสมัครใช้เพื่อขอสิทธิ์เข้าถึงในช่วงเวอร์ชันตัวอย่างก่อนเปิดตัว

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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ 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.mjs"
    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`	ไม่มี	ไม่ได้ตั้งค่า

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

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

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

เรียกใช้งาน

ตัวแยกประเภทรูปภาพใช้วิธี classify() กับโหมดรูปภาพและวิธี classifyForVideo() กับโหมด video เพื่อทริกเกอร์การอนุมาน 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
  );

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

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

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

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

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