חדש: LiteRT: זמן הריצה המתקדם של Google ל-AI במכשיר, שנקרא בעבר TensorFlow Lite.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

קוד לדוגמה

הקוד לדוגמה של 'זיהוי פנים' מספק הטמעה מלאה של הקוד הזה ב-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' נדרש מודל מאומן שתואם למשימה הזו. לקבלת מידע נוסף על מודלים זמינים מאומנים של 'זיהוי פנים', אפשר לבקר בכתובת בסקירה הכללית על המשימה בקטע 'מודלים'.

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

<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() שיטות בשרשור אחר.

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

תמונה

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)

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

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

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