คู่มือการแบ่งกลุ่มรูปภาพแบบอินเทอร์แอกทีฟสำหรับเว็บ

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ดตัวแบ่งส่วนรูปภาพแบบอินเทอร์แอกทีฟพร้อมใช้งานผ่านแพ็กเกจ @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.js"
    crossorigin="anonymous"></script>
</head>

รุ่น

งานตัวแบ่งส่วนรูปภาพแบบอินเทอร์แอกทีฟของ MediaPipe ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกแล้วสำหรับเครื่องมือแยกส่วนรูปภาพแบบอินเทอร์แอกทีฟได้ที่ส่วนโมเดลในภาพรวมของงาน

เลือกและดาวน์โหลดโมเดล แล้วจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์

<dev-project-root>/app/shared/models/

สร้างงาน

ใช้ฟังก์ชัน createFrom...() ของเครื่องมือแยกส่วนรูปภาพแบบอินเทอร์แอกทีฟอย่างใดอย่างหนึ่งเพื่อเตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ฟังก์ชัน createFromModelPath() ด้วยเส้นทางสัมพัทธ์หรือเส้นทางสัมบูรณ์ไปยังไฟล์โมเดลที่ผ่านการฝึก หากโหลดโมเดลลงในหน่วยความจําแล้ว คุณจะใช้เมธอด createFromModelBuffer() ได้

ตัวอย่างโค้ดด้านล่างแสดงการใช้ฟังก์ชัน createFromOptions() เพื่อตั้งค่างาน ฟังก์ชัน createFromOptions ช่วยให้คุณปรับแต่งเครื่องมือแบ่งกลุ่มรูปภาพแบบอินเทอร์แอกทีฟด้วยตัวเลือกการกําหนดค่าได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีสร้างและกําหนดค่างานด้วยตัวเลือกที่กําหนดเอง

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

ตัวเลือกการกำหนดค่า

งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บแอปพลิเคชัน

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

โค้ดต่อไปนี้แสดงวิธีประมวลผลด้วยโมเดลงาน

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นของงานตัวแบ่งกลุ่มรูปภาพแบบอินเทอร์แอกทีฟได้ที่ตัวอย่างโค้ด

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

เมื่อทำการอนุมาน งานเครื่องมือแบ่งกลุ่มรูปภาพแบบอินเทอร์แอกทีฟจะแสดงผลข้อมูลรูปภาพกลุ่มไปยังฟังก์ชันการเรียกกลับ เนื้อหาของเอาต์พุตคือข้อมูลรูปภาพและอาจมีมาสก์หมวดหมู่ มาสก์ความเชื่อมั่น หรือทั้ง 2 อย่าง ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณตั้งค่าไว้เมื่อกําหนดค่างาน

ส่วนต่อไปนี้จะอธิบายข้อมูลเอาต์พุตจากงานนี้เพิ่มเติม

มาสก์หมวดหมู่

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

สุนัขยืนอยู่ท่ามกลางกองใบไม้ รูปร่างของสุนัขที่วาดเส้นขอบจากรูปภาพก่อนหน้า

เอาต์พุตมาสก์รูปภาพและหมวดหมู่ต้นฉบับ รูปภาพต้นทางจากชุดข้อมูล Pascal VOC 2012

มาสก์ความเชื่อมั่น

เอาต์พุตสำหรับหน้ากากความเชื่อมั่นมีค่าเป็นทศนิยมระหว่าง [0, 1] สำหรับแชแนลอินพุตรูปภาพแต่ละช่อง ค่าที่สูงขึ้นบ่งบอกถึงความมั่นใจที่มากขึ้นว่าพิกเซลรูปภาพเป็นส่วนหนึ่งของวัตถุที่อยู่ในพื้นที่สนใจ

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