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

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

เรียกใช้งาน

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

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

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