งานเครื่องมือแบ่งกลุ่มรูปภาพ MediaPipe ให้คุณแบ่งรูปภาพออกเป็นภูมิภาคต่างๆ ตามเนื้อหาที่กำหนดไว้ล่วงหน้า หมวดหมู่สำหรับการใช้เอฟเฟกต์ภาพ เช่น การเบลอพื้นหลัง เหล่านี้ แสดงวิธีใช้ตัวแบ่งกลุ่มรูปภาพสำหรับโหนดและเว็บแอป สำหรับ เพื่อทราบข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่า งานนี้ โปรดดูภาพรวม
ตัวอย่างโค้ด
โค้ดตัวอย่างสำหรับตัวจัดกลุ่มรูปภาพช่วยให้สามารถติดตั้งใช้งานได้อย่างสมบูรณ์ ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และ เริ่มสร้างแอปแบ่งกลุ่มรูปภาพของคุณเอง คุณสามารถดู เรียกใช้ และแก้ไขตัวจัดกลุ่มรูปภาพ โค้ดตัวอย่าง โดยใช้แค่เว็บเบราว์เซอร์ คุณยังสามารถตรวจสอบโค้ดสำหรับตัวอย่างนี้ใน GitHub
ตั้งค่า
ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ และ โปรเจ็กต์โค้ดเพื่อใช้เครื่องมือแบ่งกลุ่มรูปภาพโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับ การตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณสำหรับการใช้งาน MediaPipe ซึ่งรวมถึง โปรดดูข้อกำหนดเวอร์ชันของแพลตฟอร์ม คู่มือการตั้งค่าสำหรับเว็บ
แพ็กเกจ JavaScript
โค้ดสำหรับการแบ่งกลุ่มรูปภาพมีให้บริการผ่าน MediaPipe @mediapipe/tasks-vision
แพ็กเกจ NPM คุณสามารถ
ค้นหาและดาวน์โหลดไลบรารีเหล่านี้จากลิงก์ที่ให้ไว้ในแพลตฟอร์ม
คู่มือการตั้งค่า
คุณติดตั้งแพ็กเกจที่จำเป็นได้ด้วยรหัสต่อไปนี้สำหรับการทดลองใช้ในเครื่อง โดยใช้คำสั่งต่อไปนี้
npm install --save @mediapipe/tasks-vision
หากต้องการนำเข้ารหัสงานผ่านเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ลงในแท็กในไฟล์ HTML ของคุณ
<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
จะช่วยให้คุณสามารถกำหนดค่า
เครื่องมือแบ่งกลุ่มรูปภาพพร้อมตัวเลือกการกำหนดค่า หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับงาน
โปรดดูในส่วนตัวเลือกการกำหนดค่า
โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วย ตัวเลือก:
runningMode = "IMAGE";
async function createImageSegmenter() {
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
baseOptions: {
modelAssetPath:
"https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
},
outputCategoryMask: true,
outputConfidenceMasks: false
runningMode: runningMode
});
}
createImageSegmenter();
สำหรับการใช้งานการสร้างงานเครื่องมือแบ่งกลุ่มรูปภาพที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ ตัวอย่างโค้ด
ตัวเลือกการกำหนดค่า
งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บแอปพลิเคชัน
ชื่อตัวเลือก | คำอธิบาย | ช่วงค่า | ค่าเริ่มต้น |
---|---|---|---|
outputCategoryMask |
หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่ม
เป็นรูปภาพ uint8 โดยที่ค่าพิกเซลแต่ละค่าจะระบุหมวดหมู่ที่ชนะ
|
{True, False } |
False |
outputConfidenceMasks |
หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่ม
เป็นภาพค่าจำนวนลอยตัว โดยที่ค่าจำนวนลอยตัวแต่ละค่าแสดงความเชื่อมั่น
ตารางคะแนนของหมวดหมู่ |
{True, False } |
True |
displayNamesLocale |
ตั้งค่าภาษาของป้ายกำกับที่จะใช้กับชื่อที่แสดงซึ่งระบุไว้ใน
ข้อมูลเมตาของโมเดลงาน (หากมี) ค่าเริ่มต้นคือ en สำหรับ
ภาษาอังกฤษ คุณเพิ่มป้ายกำกับที่แปลแล้วลงในข้อมูลเมตาของโมเดลที่กำหนดเองได้
โดยใช้ TensorFlow Lite Metadata Writer API |
รหัสภาษา | en |
resultListener |
ตั้งค่า Listener ผลลัพธ์เพื่อรับผลลัพธ์การแบ่งกลุ่ม
แบบไม่พร้อมกันเมื่อตัวแบ่งกลุ่มรูปภาพอยู่ในโหมด LIVE_STREAM
ใช้ได้เมื่อตั้งค่าโหมดวิ่งเป็น LIVE_STREAM เท่านั้น |
ไม่มี | ไม่มี |
เตรียมข้อมูล
ตัวจัดกลุ่มรูปภาพสามารถแบ่งกลุ่มออบเจ็กต์ในรูปภาพในรูปแบบใดก็ได้ที่ระบบรองรับ เบราว์เซอร์โฮสต์ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้าด้วย ซึ่งรวมถึง การปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐาน
การเรียกใช้เครื่องมือแบ่งกลุ่มรูปภาพ segment()
และ segmentForVideo()
พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากคุณแบ่งกลุ่มออบเจ็กต์ใน
เฟรมวิดีโอจากกล้องของอุปกรณ์ งานการแบ่งกลุ่มลูกค้า
จะบล็อกองค์ประกอบหลัก
ชุดข้อความ คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานทำงานบนเว็บทำงาน
segment()
และ segmentForVideo()
ในชุดข้อความอื่น
เรียกใช้งาน
เครื่องมือแบ่งกลุ่มรูปภาพใช้เมธอด segment()
กับโหมดรูปภาพและ
segmentForVideo()
ที่มีโหมด video
เพื่อเรียกใช้การอนุมาน
ตัวแบ่งกลุ่มรูปภาพแสดงส่วนที่ตรวจพบเป็นข้อมูลรูปภาพไปยังการติดต่อกลับ
ฟังก์ชันที่คุณตั้งค่าเมื่อเรียกใช้การอนุมานสำหรับงาน
โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน
รูปภาพ
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
Video
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
สำหรับการปรับใช้งานเครื่องมือแบ่งกลุ่มรูปภาพที่สมบูรณ์ยิ่งขึ้น โปรดดูที่ ตัวอย่างโค้ด
จัดการและแสดงผลลัพธ์
หลังจากเรียกใช้การอนุมาน งานตัวแบ่งกลุ่มรูปภาพจะแสดงผลข้อมูลรูปภาพของกลุ่มไปยัง
ฟังก์ชัน Callback เนื้อหาของเอาต์พุตจะขึ้นอยู่กับ outputType
ที่คุณตั้งค่าไว้
เมื่อกำหนดค่างาน
ส่วนต่อไปนี้จะแสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
ความเชื่อมั่นของหมวดหมู่
รูปภาพต่อไปนี้แสดงภาพเอาต์พุตงานสำหรับหมวดหมู่
มาส์กความมั่นใจ เอาต์พุตมาสก์ความเชื่อมั่นมีค่าแบบลอยระหว่าง
[0, 1]
ผลลัพธ์มาสก์ความเชื่อมั่นหมวดหมู่และรูปภาพต้นฉบับ แหล่งที่มาของรูปภาพจาก VOC ของ Pascal ปี 2012 ชุดข้อมูล
ค่าของหมวดหมู่
รูปภาพต่อไปนี้แสดงภาพเอาต์พุตงานสำหรับหมวดหมู่
มาสก์ค่า ช่วงมาสก์หมวดหมู่คือ [0, 255]
และค่าพิกเซลแต่ละค่า
แสดงดัชนีหมวดหมู่ที่ชนะของเอาต์พุตโมเดล หมวดหมู่ที่ชนะ
ดัชนีได้คะแนนสูงสุดในบรรดาหมวดหมู่ ที่โมเดลสามารถรับรู้ได้
ผลลัพธ์มาสก์รูปภาพและหมวดหมู่ต้นฉบับ แหล่งที่มาของรูปภาพจาก VOC ของ Pascal ปี 2012 ชุดข้อมูล
โค้ดตัวอย่างตัวแบ่งกลุ่มรูปภาพแสดงวิธีแสดงการแบ่งกลุ่ม ผลลัพธ์ที่ส่งคืนจากงาน โปรดดู ตัวอย่างโค้ด เพื่อดูรายละเอียด