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

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

הקוד לזיהוי הפנים זמין דרך חבילת @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.js"
    crossorigin="anonymous"></script>
</head>

מודל

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

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

<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 facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

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

הכנת הנתונים

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

מריצים את המשימה.

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

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

הקוד הבא מדגים איך מבצעים את העיבוד באמצעות מודל המשימה:

תמונה

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)

התמונה הבאה מציגה המחשה של פלט המשימה:

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

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