מדריך לזיהוי יד של ציוני דרך באינטרנט

המשימה 'ציון דרך של MediaPipe' מאפשרת לכם לזהות את ציוני הדרך של הידיים בתמונה. בהוראות האלה מוסבר איך להשתמש ב-Hand Unlocker לאפליקציות אינטרנט ו-JavaScript.

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

הקוד של Hand Premierer זמין דרך חבילת @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 Hand Scoreer נדרש מודל מאומן שתואם למשימה הזו. למידע נוסף על המודלים הזמינים המאומנים לשימוש ב-Hand Unlocker, עיינו בסקירה הכללית על המשימות בקטע המודלים.

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

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

יצירת המשימה

השתמשו באחת מהפונקציות createFrom...() של Hand להציעer כדי להכין את המשימה להרצת מסקנות. השתמשו בפונקציה createFromModelPath() עם נתיב יחסי או מוחלט לקובץ המודל שעבר אימון. אם המודל שלכם כבר נטען בזיכרון, אתם יכולים להשתמש בשיטה createFromModelBuffer().

הקוד לדוגמה הבא מדגים את השימוש בפונקציה createFromOptions() כדי להגדיר את המשימה. הפונקציה createFromOptions מאפשרת לכם להתאים אישית את Handלנדer בעזרת אפשרויות תצורה. מידע נוסף על אפשרויות ההגדרה זמין במאמר אפשרויות תצורה.

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

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

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

שם האפשרות	תיאור	טווח ערכים	ערך ברירת מחדל
`runningMode`	מגדיר את מצב הריצה של המשימה. יש שני מצבים: IMAGE: המצב שבו ניתן להזין תמונה יחידה. וידאו: המצב של פריימים מפוענחים של סרטון או בשידור חי של נתוני קלט, למשל ממצלמה.	{`IMAGE, VIDEO`}	`IMAGE`
`numHands`	מספר הידיים המקסימלי שזוהה על ידי מזהה המקום של Hand.	`Any integer > 0`	`1`
`minHandDetectionConfidence`	ציון המהימנות המינימלי שזיהוי היד ייחשב כמוצלח במודל של זיהוי כף היד.	`0.0 - 1.0`	`0.5`
`minHandPresenceConfidence`	ציון המהימנות המינימלי של ציון הנוכחות של היד במודל הזיהוי של ציון הדרך. במצב וידאו ובמצב שידור חי, אם דירוג המהימנות של הנוכחות של היד של המודל של ציון הדרך במכשיר נמוך מהסף הזה, ה-hand המצבer מפעיל את המודל לזיהוי כף היד. אחרת, נעשה שימוש באלגוריתם קליל למעקב אחר הידיים כדי לקבוע את המיקום של הידיים כדי לזהות ציוני דרך עתידיים.	`0.0 - 1.0`	`0.5`
`minTrackingConfidence`	ציון הסמך המינימלי שצריך לעמוד בו כדי שהמעקב אחרי היד ייחשבו בהצלחה. זהו סף ה-IoU של התיבה התוחמת בין הידיים במסגרת הנוכחית לפריים האחרון. במצב וידאו ובמצב 'סטרימינג' של Hand שבהמשך יהיה, אם המעקב ייכשל, ה-Handhander יפעיל את זיהוי היד. אחרת, יתבצע דילוג על זיהוי היד.	`0.0 - 1.0`	`0.5`

הכנת הנתונים

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

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

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

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

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

תמונה

const image = document.getElementById("image") as HTMLImageElement;
const handLandmarkerResult = handLandmarker.detect(image);

וידאו

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

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

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

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

כדי לקבל הטמעה מלאה יותר של הרצת משימה של Hand Unlocker, ראו דוגמה לקוד.

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

ה-Handhander יוצר אובייקט תוצאה של placeholder של יד לכל הרצה של זיהוי. אובייקט התוצאה מכיל ציוני דרך של ידיים בקואורדינטות של תמונות, סימנים לציון ידיים בקואורדינטות בעולם והידיות השמאלית/ימנית של הידיים שזוהו.

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

הפלט HandLandmarkerResult מכיל שלושה רכיבים. כל רכיב הוא מערך, שבו כל רכיב מכיל את התוצאות הבאות יד אחת שזוהתה:

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

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

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

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

HandLandmarkerResult:
  Handedness:
    Categories #0:
      index        : 0
      score        : 0.98396
      categoryName : Left
  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)

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

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