מדריך לזיהוי אובייקטים באינטרנט

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

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

קוד לדוגמה

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

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

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

יצירת המשימה

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

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

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

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

שם האפשרות	תיאור	טווח ערכים	ערך ברירת מחדל
`runningMode`	מגדיר את מצב הריצה של המשימה. יש שני מצבים: IMAGE: המצב שבו ניתן להזין תמונה יחידה. וידאו: המצב של פריימים מפוענחים של סרטון או בשידור חי של נתוני קלט, למשל ממצלמה.	{`IMAGE, VIDEO`}	`IMAGE`
`displayNamesLocale`	ההגדרה הזו מגדירה את השפה של התוויות שישמשו לשמות תצוגה שנמסרים במטא-נתונים של מודל המשימה, אם יש כאלה. ברירת המחדל היא `en` עבור אנגלית. אפשר להוסיף תוויות שהותאמו לשוק המקומי למטא-נתונים של מודל מותאם אישית באמצעות TensorFlow Lite Metadata Writer API	קוד הלוקאל	en
`maxResults`	מגדירה את המספר המקסימלי האופציונלי של תוצאות זיהוי בניקוד הגבוה ביותר להחזרה.	כל מספר חיובי	-1 (כל התוצאות מוחזרות)
`scoreThreshold`	השדה הזה מגדיר את סף הציון של החיזוי ששונה מהסף שצוין במטא-נתונים של המודל (אם יש כזה). תוצאות מתחת לערך הזה יידחו.	כל מספר ממשי (float)	לא הוגדרה
`categoryAllowlist`	מגדיר את הרשימה האופציונלית של שמות הקטגוריות המותרות. אם השדה לא ריק, תוצאות זיהוי ששם הקטגוריה שלהן לא כלול בקבוצה הזו יסוננו. המערכת מתעלמת משמות כפולים או לא ידועים של קטגוריות. האפשרות הזו בלעדית ל-`categoryDenylist` ומשתמשת בשתי התוצאות כשגיאה.	כל מחרוזת	לא הוגדרה
`categoryDenylist`	מגדיר את הרשימה האופציונלית של שמות קטגוריות אסורים. אם השדה לא ריק, תוצאות זיהוי ששם הקטגוריה שלהן נכלל בקבוצה הזו יסוננו. המערכת מתעלמת משמות כפולים או לא ידועים של קטגוריות. האפשרות הזו בלעדית ל-`categoryAllowlist`, והשימוש בשתי האפשרויות האלה גורם לשגיאה.	כל מחרוזת	לא הוגדרה

הכנת הנתונים

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

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

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

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

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

תמונה

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

וידאו

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

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

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

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

להטמעה מלאה יותר של הרצת משימה של 'מזהה אובייקטים', תוכלו לעיין בקוד לדוגמה.

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

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

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

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

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