ขอแนะนำ LiteRT: รันไทม์ประสิทธิภาพสูงของ Google สำหรับ AI ในอุปกรณ์ หรือที่รู้จักกันในชื่อ TensorFlow Lite

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ดตัวระบุจุดสังเกตของท่าทางมีให้บริการผ่านแพ็กเกจ @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.js"
    crossorigin="anonymous"></script>
</head>

รุ่น

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

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

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

สร้างงาน

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

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

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

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`	จำนวนท่าทางสูงสุดที่ตัวระบุจุดสังเกตของท่าทางสามารถตรวจจับได้	`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`	ฟีเจอร์จุดสังเกตของท่าทางจะแสดงผลหน้ากากการแบ่งกลุ่มสำหรับท่าทางที่ตรวจพบหรือไม่	`Boolean`	`False`

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

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

เรียกใช้งาน

โปรแกรมระบุจุดสังเกตของท่าทางใช้เมธอด 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();
  });
}

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

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

โปรแกรมระบุจุดสังเกตของท่าทางจะแสดงผลออบเจ็กต์ 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 แสดงวิธีแสดงผลลัพธ์ที่ได้จากงาน โปรดดูตัวอย่างโค้ด