คู่มือการตรวจจับจุดสังเกตสำหรับใบหน้าสำหรับเว็บ

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

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

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

npm install @mediapipe/tasks-vision

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

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

รุ่น

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

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

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

สร้างงาน

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

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

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

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

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

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

ชื่อตัวเลือก	คำอธิบาย	ช่วงของค่า	ค่าเริ่มต้น
`running_mode`	ตั้งค่าโหมดการทำงาน มี 2 โหมดดังนี้ IMAGE: โหมดสำหรับการป้อนข้อมูลรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของวิดีโอหรือในสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	จำนวนใบหน้าสูงสุดที่ `FaceLandmarker` ตรวจพบได้ ระบบจะใช้การทำให้เนียนก็ต่อเมื่อตั้งค่า `num_faces` เป็น 1 เท่านั้น	`Integer > 0`	`1`
`minFaceDetectionConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับใบหน้าจะถือว่าสำเร็จ	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	คะแนนความเชื่อมั่นขั้นต่ำของคะแนนการแสดงใบหน้าของใบหน้าในการตรวจจับจุดสังเกตของใบหน้า	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามใบหน้าจึงจะถือว่าประสบความสำเร็จ	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	กำหนดว่าจะให้จุดสังเกตสำหรับใบหน้าแสดงรูปร่างการผสานใบหน้าหรือไม่ รูปร่างกลมกลืนของใบหน้าใช้ในการแสดงผลโมเดลใบหน้า 3 มิติ	`Boolean`	`False`
`outputFacialTransformationMatrixes`	เลือกว่าจะให้ FaceLandmarker แสดงผลเมทริกซ์การเปลี่ยนแปลงใบหน้าหรือไม่ FaceLandmarker ใช้เมทริกซ์เพื่อเปลี่ยนจุดสังเกตของใบหน้าจากรูปแบบใบหน้า Canonical เป็นใบหน้าที่ตรวจพบ เพื่อให้ผู้ใช้ใส่เอฟเฟกต์กับจุดสังเกตที่ตรวจพบได้	`Boolean`	`False`

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

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

เรียกใช้งาน

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

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

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

วิดีโอ

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

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

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

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

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

แฮนเดิลและแสดงผลลัพธ์

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

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

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