מדריך לזיהוי פנים למחשב

המשימה MediaPipe Face Detector מאפשרת לזהות פנים בתמונה או בסרטון. אפשר להשתמש במשימה הזו כדי לאתר פנים ותווי פנים בתוך פריים. המשימה הזו משתמשת במודל למידת מכונה (ML) שפועל עם תמונות בודדות או עם רצף תמונות. הפלט של המשימה כולל את מיקומי הפנים, יחד עם נקודות מרכזיות בפנים: עין שמאלית, עין ימנית, קצה האף, הפה, טרגוס של העין השמאלית וטרגוס של העין הימנית.

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

קוד לדוגמה

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

הגדרה

בקטע הזה מפורטים השלבים העיקריים להגדרת סביבת הפיתוח לשימוש ב-Face Detector. מידע כללי על הגדרת סביבת הפיתוח לאתרים ול-JavaScript, כולל דרישות לגבי גרסת הפלטפורמה, זמין במדריך ההגדרה לאתרים.

חבילות JavaScript

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

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

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

יצירת המשימה

משתמשים באחת מהפונקציות של Face Detector 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 facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

אפשרויות הגדרה

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

שם האפשרות תיאור טווח ערכים ערך ברירת מחדל
option_var_1_web_js הגדרת מצב ההפעלה של המשימה. יש שני מצבים:

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

‫VIDEO: המצב של פריים מפוענח של סרטון או של שידור חי של נתוני קלט, כמו ממצלמה.		 {IMAGE, VIDEO} IMAGE
minDetectionConfidence ציון הסמך המינימלי שנדרש כדי שזיהוי הפנים ייחשב כמוצלח. Float [0,1] 0.5
minSuppressionThreshold הסף המינימלי לדיכוי לא מקסימלי לזיהוי פנים כדי שהפנים ייחשבו חופפות. Float [0,1] 0.3

הכנת הנתונים

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

הרצת המשימה

התכונה 'זיהוי פנים' משתמשת בשיטות detect() (עם מצב הפעלה image) ו-detectForVideo() (עם מצב הפעלה video) כדי להפעיל הסקת מסקנות. הפעולה מעבדת את הנתונים, מנסה לזהות פנים ומדווחת על התוצאות.

הקריאות לשיטות Face Detector detect() ו-detectForVideo() מופעלות באופן סינכרוני וחוסמות את השרשור של ממשק המשתמש. אם מזהים פנים בפריים של סרטון מהמצלמה של המכשיר, כל זיהוי חוסם את השרשור הראשי. כדי למנוע את זה, אפשר להטמיע web workers כדי להריץ את השיטות detect() ו-detectForVideo() בשרשור אחר.

בדוגמה הבאה אפשר לראות איך להריץ את העיבוד באמצעות מודל המשימות:

תמונה

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

וידאו

await faceDetector.setOptions({ runningMode: "video" });

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

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

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

לדוגמה מלאה יותר להרצת משימה של זיהוי פנים, אפשר לעיין בדוגמה.

טיפול בתוצאות והצגתן

הכלי לזיהוי פנים יוצר אובייקט של תוצאת זיהוי פנים לכל הפעלה של זיהוי. אובייקט התוצאה מכיל פנים בקואורדינטות של התמונה ופנים בקואורדינטות של העולם.

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

בתמונה הבאה אפשר לראות הדמיה של פלט המשימה:

שני ילדים עם תיבות תוחמות סביב הפנים שלהם

כדי לראות את התמונה בלי תיבות תוחמות, אפשר לעיין בתמונה המקורית.

קוד הדוגמה של זיהוי פנים מדגים איך להציג את התוצאות שמוחזרות מהמשימה. אפשר לראות את הדוגמה