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