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

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

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

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

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

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();

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

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

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

ชื่อตัวเลือก คำอธิบาย ช่วงของค่า ค่าเริ่มต้น
outputCategoryMask หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่ม เป็นรูปภาพ uint8 โดยที่ค่าพิกเซลแต่ละค่าจะระบุหมวดหมู่ที่ชนะ {True, False} False
outputConfidenceMasks หากตั้งค่าเป็น True เอาต์พุตจะมีมาสก์การแบ่งกลุ่ม เป็นภาพค่าจำนวนลอยตัว โดยที่ค่าจำนวนลอยตัวแต่ละค่าแสดงความเชื่อมั่น ตารางคะแนนของหมวดหมู่ {True, False} True
displayNamesLocale ตั้งค่าภาษาของป้ายกำกับที่จะใช้กับชื่อที่แสดงซึ่งระบุไว้ใน ข้อมูลเมตาของโมเดลงาน (หากมี) ค่าเริ่มต้นคือ en สำหรับภาษาอังกฤษ คุณเพิ่มป้ายกำกับที่แปลแล้วลงในข้อมูลเมตาของโมเดลที่กำหนดเองได้ โดยใช้ TensorFlow Lite Metadata Writer API รหัสภาษา en
resultListener ตั้งค่าโปรแกรมรับฟังผลลัพธ์ให้รับผลลัพธ์การแบ่งกลุ่มแบบไม่พร้อมกันเมื่อเครื่องมือแบ่งกลุ่มรูปภาพอยู่ในโหมด LIVE_STREAM ใช้ได้เมื่อตั้งค่าโหมดวิ่งเป็น LIVE_STREAM เท่านั้น ไม่มี ไม่มี

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

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

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

เรียกใช้งาน

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

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

วิดีโอ

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

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

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

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

ความเชื่อมั่นของหมวดหมู่

รูปภาพต่อไปนี้แสดงภาพเอาต์พุตงานสำหรับหมวดหมู่ มาส์กความมั่นใจ เอาต์พุตของหน้ากากความเชื่อมั่นมีค่าประเภท float อยู่ระหว่าง [0, 1]

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

ค่าของหมวดหมู่

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

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

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