งาน Image Segmenter ของ MediaPipe ช่วยให้คุณแบ่งรูปภาพออกเป็นภูมิภาคตามหมวดหมู่ที่กำหนดไว้ล่วงหน้า เพื่อใช้เอฟเฟกต์ภาพ เช่น การเบลอพื้นหลัง วิธีการเหล่านี้จะแสดงวิธีใช้ Image Segmenter สำหรับแอป Node และเว็บ ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่าของ งานนี้ได้ที่ภาพรวม
ตัวอย่างโค้ด
ตัวอย่างโค้ดสำหรับ Image Segmenter จะแสดงการใช้งานที่สมบูรณ์ของงานนี้ใน JavaScript เพื่อให้คุณใช้อ้างอิง โค้ดนี้ช่วยให้คุณทดสอบงานนี้และ เริ่มต้นสร้างแอปการแบ่งกลุ่มรูปภาพของคุณเองได้ คุณสามารถดู เรียกใช้ และแก้ไขตัวอย่าง Image Segmenter ได้โดยใช้เพียงเว็บเบราว์เซอร์
ตั้งค่า
ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์และ โปรเจ็กต์โค้ดเพื่อใช้ Image Segmenter โดยเฉพาะ ดูข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์สำหรับการใช้ MediaPipe Tasks รวมถึงข้อกำหนดด้านเวอร์ชันแพลตฟอร์มได้ที่คู่มือการตั้งค่าสำหรับเว็บ
แพ็กเกจ JavaScript
โค้ด Image Segmenter พร้อมใช้งานผ่านแพ็กเกจ @mediapipe/tasks-vision
NPM ของ MediaPipe คุณสามารถ
ค้นหาและดาวน์โหลดไลบรารีเหล่านี้ได้จากลิงก์ที่ระบุไว้ในคู่มือการตั้งค่าของแพลตฟอร์ม
คุณติดตั้งแพ็กเกจที่จำเป็นได้ด้วยโค้ดต่อไปนี้สำหรับการจัดเตรียมในเครื่อง โดยใช้คำสั่งต่อไปนี้
npm install --save @mediapipe/tasks-vision
หากต้องการนำเข้าโค้ดงานผ่านบริการเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ในแท็กในไฟล์ HTML
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
crossorigin="anonymous"></script>
</head>
รุ่น
งาน MediaPipe Image Segmenter ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ฝึกแล้วซึ่งพร้อมใช้งานสำหรับ Image Segmenter ได้ที่ ภาพรวมของงานส่วนโมเดล
เลือกและดาวน์โหลดโมเดล จากนั้นจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์
<dev-project-root>/app/shared/models/
สร้างงาน
ใช้ฟังก์ชันใดฟังก์ชันหนึ่งของ Image Segmenter createFrom...() เพื่อ
เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ฟังก์ชัน createFromModelPath()
กับเส้นทางสัมพัทธ์หรือเส้นทางสมบูรณ์ไปยังไฟล์โมเดลที่ฝึกแล้ว
หากโหลดโมเดลลงในหน่วยความจำแล้ว คุณจะใช้วิธี createFromModelBuffer() ได้
ตัวอย่างโค้ดด้านล่างแสดงการใช้ฟังก์ชัน createFromOptions() เพื่อ
ตั้งค่างาน ฟังก์ชัน createFromOptions ช่วยให้คุณปรับแต่ง
Image Segmenter ด้วยตัวเลือกการกำหนดค่าได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า
งานได้ที่ตัวเลือกการกำหนดค่า
โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วยตัวเลือกที่กำหนดเอง
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();
ดูการใช้งานการสร้างงาน Image Segmenter ที่สมบูรณ์ยิ่งขึ้นได้ที่ตัวอย่างโค้ด
ตัวเลือกการกำหนดค่า
งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บแอปพลิเคชัน
| ชื่อตัวเลือก | คำอธิบาย | ช่วงค่า | ค่าเริ่มต้น |
|---|---|---|---|
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 |
ไม่มี | ไม่มี |
เตรียมข้อมูล
Image Segmenter สามารถแบ่งกลุ่มออบเจ็กต์ในรูปภาพในรูปแบบใดก็ได้ที่เบราว์เซอร์โฮสต์รองรับ นอกจากนี้ งานยังจัดการการประมวลผลข้อมูลอินพุตล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นมาตรฐานด้วย
การเรียกใช้เมธอด Image Segmenter segment() และ segmentForVideo() จะทำงานพร้อมกันและบล็อกเธรดของอินเทอร์เฟซผู้ใช้ หากคุณแบ่งกลุ่มออบเจ็กต์ในเฟรมวิดีโอจากกล้องของอุปกรณ์ งานการแบ่งกลุ่มแต่ละงานจะบล็อกเทรดหลัก คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้ segment() และ segmentForVideo() ในเธรดอื่น
เรียกใช้งาน
Image Segmenter ใช้เมธอด segment() กับโหมดรูปภาพ และเมธอด
segmentForVideo() กับโหมด video เพื่อทริกเกอร์การอนุมาน
Image Segmenter จะแสดงผลกลุ่มที่ตรวจพบเป็นข้อมูลรูปภาพไปยังฟังก์ชัน
การเรียกกลับที่คุณตั้งค่าเมื่อเรียกใช้การอนุมานสำหรับงาน
โค้ดต่อไปนี้แสดงวิธีเรียกใช้การประมวลผลด้วยโมเดลงาน
รูปภาพ
const image = document.getElementById("image") as HTMLImageElement; imageSegmenter.segment(image, callback);
วิดีโอ
async function renderLoop(): void { const video = document.getElementById("video"); let startTimeMs = performance.now(); imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo); requestAnimationFrame(() => { renderLoop(); }); }
ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นสำหรับการเรียกใช้โมเดลการแบ่งกลุ่มรูปภาพได้ที่ตัวอย่าง
จัดการและแสดงผลลัพธ์
เมื่อเรียกใช้การอนุมาน งาน Image Segmenter จะส่งคืนข้อมูลรูปภาพที่แบ่งกลุ่มไปยังฟังก์ชัน Callback เนื้อหาของเอาต์พุตจะขึ้นอยู่กับ outputType ที่คุณตั้งค่า
เมื่อกำหนดค่างาน
ส่วนต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
ความเชื่อมั่นของหมวดหมู่
รูปภาพต่อไปนี้แสดงการแสดงข้อมูลผ่านภาพของเอาต์พุตของงานสำหรับมาสก์ความเชื่อมั่นของหมวดหมู่ เอาต์พุตมาสก์ความเชื่อมั่นมีค่าลอยตัวระหว่าง
[0, 1]
รูปภาพต้นฉบับและเอาต์พุตมาสก์ความเชื่อมั่นของหมวดหมู่ รูปภาพต้นฉบับจากชุดข้อมูล Pascal VOC 2012
มูลค่าหมวดหมู่
รูปภาพต่อไปนี้แสดงการแสดงข้อมูลผ่านภาพของเอาต์พุตของงานสำหรับมาสก์ค่าหมวดหมู่ ช่วงมาสก์หมวดหมู่คือ [0, 255] และค่าพิกเซลแต่ละค่า
แสดงดัชนีหมวดหมู่ที่ชนะของเอาต์พุตโมเดล ดัชนีหมวดหมู่ที่ชนะ
มีคะแนนสูงสุดในบรรดาหมวดหมู่ที่โมเดลจดจำได้
เอาต์พุตของรูปภาพต้นฉบับและมาสก์หมวดหมู่ รูปภาพต้นฉบับจากชุดข้อมูล Pascal VOC 2012
โค้ดตัวอย่างของ Image Segmenter แสดงวิธีแสดงผลการแบ่งกลุ่ม ที่ได้จากงาน โปรดดูรายละเอียดในตัวอย่าง