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

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

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

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

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

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

ตั้งค่า

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

แพ็กเกจ JavaScript

โค้ด Face 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 to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

รุ่น

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

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

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

สร้างงาน

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

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

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

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, 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`	Face Landmarker จะแสดงผล Face Blendshape หรือไม่ ระบบจะใช้รูปร่างผสมใบหน้าในการแสดงผลรูปแบบใบหน้า 3 มิติ	`Boolean`	`False`
`outputFacialTransformationMatrixes`	เลือกว่า FaceLandmarker จะแสดงเมตริกซ์การเปลี่ยนรูปแบบใบหน้าหรือไม่ FaceLandmarker ใช้เมทริกซ์ เพื่อเปลี่ยนเครื่องหมายใบหน้าจากรูปแบบใบหน้ามาตรฐานเป็น ใบหน้าที่ตรวจพบ เพื่อให้ผู้ใช้ใช้เอฟเฟกต์กับเครื่องหมายที่ตรวจพบได้	`Boolean`	`False`

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

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

เรียกใช้งาน

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

การเรียกเมธอด Face Landmarker 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();
  });
}

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

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

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

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

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]
    ...

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

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

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