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

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

הקוד של Handmarker זמין דרך @mediapipe/tasks-visionMediaPipe חבילת 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 HandTimestamper נדרש מודל מאומן שתואם למשימה הזו. לקבלת מידע נוסף על מודלים זמינים מאומנים של Hand Scoreer, ראו: בסקירה הכללית על המשימה בקטע 'מודלים'.

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

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

יצירת המשימה

אפשר להשתמש באחת מהפונקציות של Handmarker 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 handLandmarker = await HandLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "hand_landmarker.task"
      },
      numHands: 2
    });

אפשרויות תצורה

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

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

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

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

הכנת נתונים

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

הרצת המשימה

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

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

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

תמונה

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();
  });
}

כדי להשלים את תהליך ההרצה של משימת HandTimestamper, אפשר לעיין ב קוד לדוגמה.

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

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

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

הפלט של 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 Scoreer מדגים איך להציג של התוצאות שהוחזרו מהמשימה, קוד לדוגמה