מדריך לזיהוי של זיהוי פנים לאתרים

המשימה MediaPipe Face Landmarker מאפשרת לזהות נקודות ציון בפנים והבעות פנים בתמונות ובסרטונים. אפשר להשתמש במשימה הזו כדי לזהות הבעות פנים אנושיות, להחיל פילטרים ואפקטים על הפנים וליצור דמויות וירטואליות. המשימה הזו משתמשת במודלים של למידת מכונה (ML) שיכולים לעבוד עם תמונות בודדות או עם רצף תמונות. הפלט של המשימה כולל נקודות ציון תלת-ממדיות של הפנים, ציונים של צורות מיזוג (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, צריך מודל מאומן שתואם למשימה הזו. למידע נוסף על מודלים מאומנים שזמינים לזיהוי נקודות בפנים, אפשר לעיין בקטע Models בסקירה הכללית של המשימה.

בוחרים מודל, מורידים אותו ושומרים אותו בספריית הפרויקט:

<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 הגדרת מצב ההפעלה של המשימה. יש שני מצבים:

IMAGE: המצב לקלט של תמונה אחת.

‫VIDEO: המצב של פריים מפוענח של סרטון או של שידור חי של נתוני קלט, כמו ממצלמה.		 {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 מוציא נתוני blendshapes של הפנים. צורות הפנים משמשות לעיבוד של תבנית הפנים בתלת-ממד. Boolean False
outputFacialTransformationMatrixes ההגדרה הזו קובעת אם FaceLandmarker יוציא את מטריצת השינוי של הפנים. המודל FaceLandmarker משתמש במטריצה כדי לשנות את נקודות הציון של הפנים מתבנית לזיהוי פנים לפנים שזוהו, כך שהמשתמשים יכולים להחיל אפקטים על נקודות הציון שזוהו. Boolean False

הכנת הנתונים

הכלי לזיהוי נקודות ציון בפנים יכול לזהות פנים בתמונות בכל פורמט שנתמך על ידי הדפדפן המארח. בנוסף, המשימה מטפלת בעיבוד מקדים של נתוני הקלט, כולל שינוי גודל, סיבוב ונרמול ערכים. כדי לסמן נקודות ציון בפנים בסרטונים, אפשר להשתמש ב-API כדי לעבד במהירות פריים אחד בכל פעם, באמצעות חותמת הזמן של הפריים כדי לקבוע מתי הפנים מופיעות בסרטון.

הרצת המשימה

ה-Face Landmarker משתמש בשיטות detect() (עם מצב הפעלה IMAGE) וב-detectForVideo() (עם מצב הפעלה VIDEO) כדי להפעיל מסקנות. המשימה מעבדת את הנתונים, מנסה לזהות נקודות ציון בפנים ואז מדווחת על התוצאות.

הקריאות לשיטות Face Landmarker detect() ו-detectForVideo() מופעלות באופן סינכרוני וחוסמות את השרשור של ממשק המשתמש. אם מזהים פנים בפריים של סרטון מהמצלמה של המכשיר, כל זיהוי חוסם את השרשור הראשי. כדי למנוע את זה, אפשר להטמיע web workers כדי להריץ את השיטות 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 מחזיר אובייקט תוצאה לכל הרצה של זיהוי. אובייקט התוצאה מכיל רשת פנים לכל פנים שזוהו, עם קואורדינטות לכל נקודת ציון בפנים. אובייקט התוצאה יכול להכיל גם blendshapes, שמציינים הבעות פנים, ומטריצת טרנספורמציה של הפנים כדי להחיל אפקטים לפנים על נקודות הציון שזוהו.

בדוגמה הבאה מוצגים נתוני הפלט של המשימה הזו:

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 אפשר לראות איך להציג את התוצאות שמוחזרות מהמשימה. כאן אפשר לראות את הדוגמה.