מדריך לסיווג תמונות באינטרנט

המשימה 'מסווג תמונות של MediaPipe' מאפשרת לבצע סיווג של תמונות. אפשר להשתמש במשימה כדי לזהות מה מייצג תמונה מתוך קבוצת קטגוריות שהוגדרו בזמן האימון. בהוראות האלה מוסבר איך להשתמש ב-Image Classifier for Node ובאפליקציות אינטרנט.

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

הקוד של סיווג התמונות זמין דרך חבילת MediaPipe @mediapipe/tasks-vision NPM. אפשר למצוא ולהוריד את הספריות האלה מהקישורים שמופיעים במדריך ההגדרה של הפלטפורמה.

כדי להתקין את החבילות הנדרשות עם הקוד הבא ל-Staging מקומי, אתם יכולים להשתמש בפקודה הבאה:

npm install @mediapipe/tasks-vision

אם רוצים לייבא את קוד המשימה דרך שירות של רשת להעברת תוכן (CDN), מוסיפים את הקוד הבא בתג בקובץ ה-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/

יצירת המשימה

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

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

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

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

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

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

הכנת הנתונים

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

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

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

מסווג התמונות משתמש בשיטה classify() במצב תמונה, ובשיטה classifyForVideo() עם מצב video כדי ליצור מסקנות. ה-Image Classifier API יחזיר את הקטגוריות האפשריות של האובייקטים בתמונת הקלט.

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

תמונה

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

וידאו

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

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

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

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

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

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

התוצאה הזו הושגה על ידי הרצת Bird Classifier במכשיר:

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