งานเครื่องมือแบ่งรูปภาพแบบ 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();
ดูตัวอย่างโค้ดเพื่อการใช้งานเครื่องมือแบ่งกลุ่มรูปภาพที่สมบูรณ์ยิ่งขึ้น
ตัวเลือกการกำหนดค่า
งานนี้มีตัวเลือกการกำหนดค่าสำหรับเว็บแอปพลิเคชันดังต่อไปนี้
| ชื่อตัวเลือก | คำอธิบาย | ช่วงของค่า | ค่าเริ่มต้น |
|---|---|---|---|
runningMode |
ตั้งค่าโหมดการทำงาน มี 2 โหมดดังนี้ IMAGE: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่มเป็นรูปภาพ uint8 ซึ่งค่าพิกเซลแต่ละค่าบ่งชี้ถึงค่าหมวดหมู่ที่ชนะ |
{True, False} |
False |
outputConfidenceMasks |
หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่มลูกค้าเป็นภาพค่าลอยตัว โดยค่าทศนิยมแต่ละค่าแสดงแมปคะแนนความเชื่อมั่นของหมวดหมู่ |
{True, False} |
True |
displayNamesLocale |
ตั้งค่าภาษาของป้ายกำกับที่จะใช้กับชื่อที่แสดงซึ่งระบุไว้ในข้อมูลเมตาของโมเดลของงาน หากมี ค่าเริ่มต้นคือ en สำหรับภาษาอังกฤษ คุณเพิ่มป้ายกำกับที่แปลเป็นภาษาท้องถิ่นลงในข้อมูลเมตาของโมเดลที่กำหนดเองได้โดยใช้ TensorFlow Lite Metadata Writer API
| รหัสภาษา | en |
เตรียมข้อมูล
เครื่องมือแบ่งกลุ่มรูปภาพสามารถจัดกลุ่มออบเจ็กต์ในรูปภาพในรูปแบบใดก็ได้ที่เบราว์เซอร์โฮสต์รองรับ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุน และการปรับค่าให้เป็นมาตรฐานด้วย
การเรียกเมธอดเครื่องมือแบ่งรูปภาพแบบ segment() และ segmentForVideo() จะทำงานแบบซิงโครนัสและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากคุณแบ่งกลุ่มออบเจ็กต์ในเฟรมวิดีโอจากกล้องของอุปกรณ์ งานการแบ่งกลุ่มแต่ละงานจะบล็อกเทรดหลัก คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้ 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();
});
}
ดูตัวอย่างโค้ดสำหรับการใช้งานเครื่องมือแบ่งกลุ่มรูปภาพที่สมบูรณ์ยิ่งขึ้น
แฮนเดิลและแสดงผลลัพธ์
เมื่อใช้การอนุมาน งานเครื่องมือแบ่งกลุ่มรูปภาพจะแสดงผลข้อมูลรูปภาพของกลุ่มไปยังฟังก์ชันเรียกกลับ เนื้อหาของเอาต์พุตขึ้นอยู่กับ outputType ที่คุณตั้งค่าไว้เมื่อกําหนดค่างานแล้ว
ส่วนต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
ความเชื่อมั่นของหมวดหมู่
รูปภาพต่อไปนี้แสดงภาพเอาต์พุตงานสำหรับมาสก์ความเชื่อมั่นของหมวดหมู่ เอาต์พุตมาสก์ความเชื่อมั่นมีค่าทศนิยมระหว่าง [0, 1]
เอาต์พุตมาสก์ความเชื่อมั่นของรูปภาพและหมวดหมู่ต้นฉบับ รูปภาพต้นฉบับจากชุดข้อมูล Pascal VOC 2012
ค่าของหมวดหมู่
รูปภาพต่อไปนี้แสดงภาพเอาต์พุตงานสำหรับมาสก์ค่าหมวดหมู่ ช่วงมาสก์หมวดหมู่คือ [0, 255] และค่าพิกเซลแต่ละค่าแสดงถึงดัชนีหมวดหมู่ที่ชนะของเอาต์พุตโมเดล ดัชนีหมวดหมู่ที่ชนะจะมีคะแนนสูงสุดในหมวดหมู่ที่โมเดลจดจำได้
เอาต์พุตมาสก์รูปภาพและหมวดหมู่ต้นฉบับ รูปภาพต้นฉบับจากชุดข้อมูล Pascal VOC 2012
โค้ดตัวอย่างเครื่องมือแบ่งรูปภาพแสดงวิธีแสดงผลการแบ่งกลุ่มที่ได้รับจากงาน โปรดดูรายละเอียดในตัวอย่างโค้ด