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

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

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

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 ที่ระบุว่าพิกเซลนั้นเป็นส่วนหนึ่งของวัตถุที่ตั้งอยู่บริเวณที่สนใจหรือไม่ วงกลมสีขาวดำในรูปที่ 2 แสดงถึงส่วนที่สนใจที่เลือกไว้

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

หน้ากากสร้างความมั่นใจ

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

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