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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ด Interactive Image Segmenter พร้อมใช้งานผ่านแพ็กเกจ MediaPipe @mediapipe/tasks-vision NPM คุณสามารถ ค้นหาและดาวน์โหลดไลบรารีเหล่านี้ได้จากลิงก์ที่ระบุไว้ในคู่มือการตั้งค่าแพลตฟอร์ม

คุณสามารถติดตั้งแพ็กเกจที่จำเป็นด้วยโค้ดต่อไปนี้สำหรับการจัดเตรียมในเครื่องโดยใช้คำสั่งต่อไปนี้

npm install --save @mediapipe/tasks-vision

หากต้องการนำเข้าโค้ดงานผ่านบริการเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ในแท็ก <script> ในไฟล์ HTML

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

โมเดล

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

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

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

สร้างงาน

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

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

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

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

เตรียมข้อมูล

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

การเรียกใช้เมธอด segment() และ segmentForVideo() ของ Interactive Image Segmenter จะทำงานแบบซิงโครนัสและบล็อกเธรดอินเทอร์เฟซผู้ใช้ หากคุณแบ่งส่วนออบเจ็กต์ในเฟรมวิดีโอจากกล้องของอุปกรณ์ งานการแบ่งส่วนแต่ละงานจะบล็อกเธรดหลัก คุณสามารถป้องกันไม่ให้เกิดเหตุการณ์นี้ได้โดยใช้ Web Worker เพื่อเรียกใช้ segment() และ segmentForVideo() ในเธรดอื่น

เรียกใช้งาน

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

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

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