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

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

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

קוד לדוגמה

הקוד לדוגמה של 'מזהה אובייקטים' מספק הטמעה מלאה של ב-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/

יצירת המשימה

משתמשים באחת מהפונקציות 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() מזהה אובייקטים בפריימים של וידאו. המשימה מעבדת מנסה לזהות אובייקטים, ואז מדווח על התוצאות.

הקריאות ל-method detect() ו-detectForVideo() פועלות באופן סינכרוני ולחסום את ה-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

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

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