ขอแนะนํา Google AI Edge Portal: เปรียบเทียบประสิทธิภาพ AI บนอุปกรณ์ขอบในวงกว้าง ลงชื่อสมัครใช้เพื่อขอสิทธิ์เข้าถึงในช่วงเวอร์ชันตัวอย่างก่อนเปิดตัว

คำแนะนำในการตรวจจับตำแหน่งจุดสังเกตสำหรับเว็บ

งาน MediaPipe Pose Landmarker ช่วยให้คุณตรวจหาจุดสังเกตของร่างกายมนุษย์ในรูปภาพหรือวิดีโอได้ คุณสามารถใช้ฟังก์ชันนี้เพื่อระบุตำแหน่งสำคัญของร่างกาย วิเคราะห์ท่าทาง และจัดหมวดหมู่การเคลื่อนไหว งานนี้ใช้โมเดลแมชชีนเลิร์นนิง (ML) ที่ ทำงานกับรูปภาพหรือวิดีโอเดียว งานจะแสดงผลจุดสังเกตท่าทางของร่างกายในพิกัดรูปภาพและในพิกัดโลกแบบ 3 มิติ

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

คุณติดตั้งแพ็กเกจที่จำเป็นผ่าน NPM ได้โดยใช้คำสั่งต่อไปนี้

npm install @mediapipe/tasks-vision

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

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

รุ่น

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

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

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

สร้างงาน

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

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

ชื่อตัวเลือก	คำอธิบาย	ช่วงค่า	ค่าเริ่มต้น
`runningMode`	ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 โหมด ดังนี้ รูปภาพ: โหมดสำหรับอินพุตรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสแล้วของ วิดีโอหรือในไลฟ์สดของข้อมูลอินพุต เช่น จากกล้อง	{`IMAGE, VIDEO`}	`IMAGE`
`numPoses`	จำนวนท่าทางสูงสุดที่ตรวจจับได้โดย Pose Landmarker	`Integer > 0`	`1`
`minPoseDetectionConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจหาท่าทางเพื่อให้ถือว่า ประสบความสำเร็จ	`Float [0.0,1.0]`	`0.5`
`minPosePresenceConfidence`	คะแนนความเชื่อมั่นขั้นต่ำของคะแนนการมีอยู่ของท่าทาง ในการตรวจจับจุดสังเกตของท่าทาง	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามท่าทาง เพื่อให้ถือว่าสำเร็จ	`Float [0.0,1.0]`	`0.5`
`outputSegmentationMasks`	ไม่ว่าจะให้ Pose Landmarker แสดงผลมาสก์การแบ่งกลุ่มสำหรับท่าทางที่ตรวจพบหรือไม่	`Boolean`	`False`

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

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

เรียกใช้งาน

Pose Landmarker ใช้เมธอด detect() (ในโหมดการทำงาน IMAGE) และ detectForVideo() (ในโหมดการทำงาน VIDEO) เพื่อทริกเกอร์ การอนุมาน โดยงานจะประมวลผลข้อมูล พยายามระบุท่าทางที่สำคัญ และรายงานผลลัพธ์

การเรียกใช้เมธอด Pose Landmarker detect() และ detectForVideo() จะทำงาน พร้อมกันและบล็อกเธรดการแทรกแซงของผู้ใช้ หากตรวจพบท่าทาง ในเฟรมวิดีโอจากกล้องของอุปกรณ์ การตรวจจับแต่ละครั้งจะบล็อกเธรดหลัก คุณป้องกันปัญหานี้ได้โดยใช้ Web Worker เพื่อเรียกใช้เมธอด detect() และ detectForVideo() ในอีกเธรดหนึ่ง

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

วิดีโอ

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const poseLandmarkerResult = poseLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

ดูการใช้งานที่สมบูรณ์ยิ่งขึ้นในการเรียกใช้ Task Pose Landmarker ได้ที่ ตัวอย่าง

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

Pose Landmarker จะแสดงผลออบเจ็กต์ poseLandmarkerResult สำหรับการตรวจจับแต่ละครั้ง ออบเจ็กต์ผลลัพธ์มีพิกัดสำหรับจุดสังเกตของท่าทางแต่ละท่า

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

เอาต์พุตมีทั้งพิกัดที่ปรับให้เป็นมาตรฐาน (Landmarks) และพิกัดโลก (WorldLandmarks) สำหรับสถานที่สำคัญแต่ละแห่ง

เอาต์พุตประกอบด้วยพิกัดที่ปรับให้เป็นมาตรฐานต่อไปนี้ (Landmarks)

x และ y: พิกัดจุดสังเกตที่ปรับให้เป็นค่าระหว่าง 0.0 ถึง 1.0 ตาม ความกว้าง (x) และความสูง (y) ของรูปภาพ
z: ความลึกของจุดสังเกต โดยมีจุดกึ่งกลางของสะโพกเป็นจุดเริ่มต้น ค่ายิ่งน้อย สถานที่สำคัญก็จะยิ่งอยู่ใกล้กล้อง ขนาดของ z ใช้สเกลเดียวกันกับ x โดยประมาณ
visibility: ความเป็นไปได้ที่จะเห็นจุดสังเกตภายในรูปภาพ

เอาต์พุตมีพิกัดโลกต่อไปนี้ (WorldLandmarks)

x, y และ z: พิกัด 3 มิติในโลกแห่งความเป็นจริงเป็นหน่วยเมตร โดยมี จุดกึ่งกลางของสะโพกเป็นจุดเริ่มต้น
visibility: ความเป็นไปได้ที่จะเห็นจุดสังเกตภายในรูปภาพ

รูปภาพต่อไปนี้แสดงภาพเอาต์พุตของงาน

ผู้หญิงในท่าทำสมาธิ ท่าทางของเธอจะไฮไลต์ด้วยโครงร่างที่ระบุตำแหน่งของแขนขาและลำตัว

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

มาสก์การแบ่งกลุ่มของรูปภาพก่อนหน้าซึ่งร่างรูปร่างของผู้หญิง

โค้ดตัวอย่างของ Pose Landmarker แสดงวิธีแสดง ผลลัพธ์ที่ได้จากงาน โปรดดูตัวอย่าง