מדריך לזיהוי תנועות לאינטרנט

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

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

// Create task for image file processing:
const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "
);
const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"
  },
  numHands: 2
});

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

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

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

IMAGE: המצב שבו ניתן להזין תמונה יחידה.

וידאו: המצב של פריימים מפוענחים של סרטון או בשידור חי של נתוני קלט, למשל ממצלמה.		 {IMAGE, VIDEO} IMAGE
num_hands GestureRecognizer יכול לזהות את מספר הידיים המקסימלי. Any integer > 0 1
min_hand_detection_confidence ציון המהימנות המינימלי שזיהוי היד ייחשב כמוצלח במודל של זיהוי כף היד. 0.0 - 1.0 0.5
min_hand_presence_confidence ציון המהימנות המינימלי של ציון הנוכחות של היד במודל הזיהוי של ציון הדרך. במצב וידאו ובמצב שידור חי של מזהה התנועות, אם הציון המשוער של נוכחות היד של המודל של ציון הדרך של כף היד נמוכה מהסף הזה, מופעל מודל זיהוי כף היד. אחרת, נעשה שימוש באלגוריתם קליל למעקב אחר היד כדי לקבוע את המיקום של הידיים לצורך זיהוי של ציוני דרך. 0.0 - 1.0 0.5
min_tracking_confidence ציון הסמך המינימלי שצריך לעמוד בו כדי שהמעקב אחרי היד ייחשבו בהצלחה. זהו סף ה-IoU של התיבה התוחמת בין הידיים במסגרת הנוכחית לפריים האחרון. במצב וידאו ובמצב סטרימינג של מזהה תנועות, אם המעקב נכשל, מזהה התנועות מפעיל זיהוי ידיים. אחרת, המערכת תדלג על זיהוי היד. 0.0 - 1.0 0.5
canned_gestures_classifier_options אפשרויות להגדרת ההתנהגות של מסווג תנועות מוכנות מראש. התנועות המוכנה מראש הן ["None", "Closed_Fist", "Open_Palm", "Pointing_Up", "Thumb_Down", "Thumb_Up", "Victory", "ILoveYou"]
  • לוקאל של שמות תצוגה: הלוקאל של השמות לתצוגה שצוינו במטא-נתונים של דגם TFLite, אם רלוונטי.
  • מקסימום תוצאות: המספר המקסימלי של תוצאות סיווג מובילות שניתן להחזיר. אם הערך קטן מ-0, יוחזרו כל התוצאות הזמינות.
  • סף הניקוד: הציון שמתחתיו נדחות התוצאות. אם הערך שמוגדר הוא 0, כל התוצאות הזמינות יוחזרו.
  • רשימת היתרים של קטגוריות: רשימת ההיתרים של שמות הקטגוריות. אם הקטגוריה אינה ריקה, יסוננו תוצאות סיווג שהקטגוריה שלהן לא כלולה. בלעדי הדדית עם רשימת ישויות שנחסמו.
  • רשימת ישויות שנחסמו בקטגוריה: רשימת הישויות שנחסמו לשמות של קטגוריות. אם הקטגוריה אינה ריקה, תוצאות הסיווג שהקטגוריה הזו נמצאת בהן יסוננו. בלעדי (אופציונלי) עם רשימת היתרים.
    		•
    • הלוקאל של השמות לתצוגה: any string
    • מקסימום תוצאות: any integer
    • הסף לקבלת ניקוד: 0.0-1.0
    • רשימת היתרים של קטגוריות: vector of strings
    • רשימת הישויות שנחסמו בקטגוריה: vector of strings
    • הלוקאל של השמות לתצוגה: "en"
    • מקסימום תוצאות: -1
    • הסף לקבלת ניקוד: 0
    • רשימת ההיתרים של הקטגוריות: ריקה
    • רשימת הישויות שנחסמו של הקטגוריה: ריקה
    custom_gestures_classifier_options אפשרויות להגדרת ההתנהגות של מסווג התנועות בהתאמה אישית.
  • לוקאל של שמות תצוגה: הלוקאל של השמות לתצוגה שצוינו במטא-נתונים של דגם TFLite, אם רלוונטי.
  • מקסימום תוצאות: המספר המקסימלי של תוצאות סיווג מובילות שניתן להחזיר. אם הערך קטן מ-0, יוחזרו כל התוצאות הזמינות.
  • סף הניקוד: הציון שמתחתיו נדחות התוצאות. אם הערך שמוגדר הוא 0, כל התוצאות הזמינות יוחזרו.
  • רשימת היתרים של קטגוריות: רשימת ההיתרים של שמות הקטגוריות. אם הקטגוריה אינה ריקה, יסוננו תוצאות סיווג שהקטגוריה שלהן לא כלולה. בלעדי הדדית עם רשימת ישויות שנחסמו.
  • רשימת ישויות שנחסמו בקטגוריה: רשימת הישויות שנחסמו לשמות של קטגוריות. אם הקטגוריה אינה ריקה, תוצאות הסיווג שהקטגוריה הזו נמצאת בהן יסוננו. בלעדי (אופציונלי) עם רשימת היתרים.
    		•
    • הלוקאל של השמות לתצוגה: any string
    • מקסימום תוצאות: any integer
    • הסף לקבלת ניקוד: 0.0-1.0
    • רשימת היתרים של קטגוריות: vector of strings
    • רשימת הישויות שנחסמו בקטגוריה: vector of strings
    • הלוקאל של השמות לתצוגה: "en"
    • מקסימום תוצאות: -1
    • הסף לקבלת ניקוד: 0
    • רשימת ההיתרים של הקטגוריות: ריקה
    • רשימת הישויות שנחסמו של הקטגוריה: ריקה

    הכנת הנתונים

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

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

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

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

    תמונה

    const image = document.getElementById("image") as HTMLImageElement;
const gestureRecognitionResult = gestureRecognizer.recognize(image);

    וידאו

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

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

  if (video.currentTime !== lastVideoTime) {
    const gestureRecognitionResult = gestureRecognizer.recognizeForVideo(video);
    processResult(gestureRecognitionResult);
    lastVideoTime = video.currentTime;
  }

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

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

    להטמעה מלאה יותר של הרצת משימה של מזהה תנועות, ראו את דוגמת הקוד.

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

    מזהה התנועות יוצר אובייקט תוצאה של זיהוי תנועה בכל הרצה של זיהוי. אובייקט התוצאה מכיל ציוני דרך של ידיים בקואורדינטות של תמונות, ציוני דרך שמזוהים עם קואורדינטות בעולם, קטגוריות של היד הדומיננטית(ידי שמאל/ימין) וקטגוריות של תנועות ידיים של הידיים שזוהו.

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

    ה-GestureRecognizerResult שהתקבל מכיל ארבעה רכיבים, וכל רכיב הוא מערך, שבו כל רכיב מכיל את התוצאה שזוהתה של יד אחת שזוהתה.

    • התאמה ליד הדומיננטית

      היד הדומיננטית מציינת אם הידיים שזוהו הן ידיים שמאליות או יד ימין.

    • תנועות

      קטגוריות התנועות שזוהו של הידיים שזוהו.

    • ציוני דרך

      יש 21 ציוני דרך לידיים, כל אחד מהם מורכב מקואורדינטות x, y ו-z. הקואורדינטות x ו-y מנורמלות ל-[0.0, 1.0] לפי הרוחב והגובה של התמונה, בהתאמה. הקואורדינטה z מייצגת את העומק של ציון הדרך, והעומק בפרק כף היד הוא המקור. ככל שהערך קטן יותר, כך היעד קרוב יותר למצלמה. העוצמה של z משתמשת בקנה מידה זהה לזה של x.

    • אתרים חשובים בעולם

      גם ציוני הדרך עם 21 היד מוצגים בקואורדינטות בעולם. כל ציון דרך מורכב מ-x, מ-y ומ-z, ומייצגים קואורדינטות תלת-ממדיות בעולם האמיתי, במטרים, שהמקור שלהן נמצא במרכז הגאומטרי של כף היד.

    GestureRecognizerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  Gestures:
    Categories #0:
      score        : 0.76893
      categoryName : Thumb_Up
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : -3.41E-7
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
    ... (21 landmarks for a hand)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
    ... (21 world landmarks for a hand)

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

    להטמעה מלאה יותר של יצירת משימה של מזהה תנועות, ראו את דוגמת הקוד.