מדריך אינטראקטיבי לפילוח תמונות באינטרנט

המשימה 'מפלח תמונות אינטראקטיבי של MediaPipe' לוקחת מיקום בתמונה, מעריכה את הגבולות של האובייקט במיקום הזה ומחזירה את הפילוח של האובייקט כנתוני תמונה. בהוראות האלה מוסבר איך להשתמש ב-Interactive Image Segmenter (פלח תמונות אינטראקטיבי) ל-Node ולאפליקציות אינטרנט. למידע נוסף על היכולות, המודלים ואפשרויות ההגדרה של המשימה הזו, קראו את הסקירה הכללית.

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

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

npm install --save @mediapipe/tasks-vision

אם רוצים לייבא את קוד המשימה דרך שירות של רשת להעברת תוכן (CDN), מוסיפים את הקוד הבא בתג בקובץ ה-HTML:

<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/

יצירת המשימה

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

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

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

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

שם האפשרות	תיאור	טווח ערכים	ערך ברירת מחדל
`outputCategoryMask`	אם המדיניות מוגדרת כ-`True`, הפלט כולל מסכת פילוח כתמונה של Uint8, שבה כל ערך של פיקסל מציין אם הפיקסל הוא חלק מהאובייקט שנמצא באזור הרצוי.	{`True, False`}	`False`
`outputConfidenceMasks`	אם היא מוגדרת כ-`True`, הפלט כולל מסכת פילוח כתמונה של ערך צף, כאשר כל ערך צף מייצג את הביטחון שהפיקסל הוא חלק מהאובייקט שנמצא באזור העניין.	{`True, False`}	`True`
`displayNamesLocale`	ההגדרה הזו מגדירה את השפה של התוויות שישמשו לשמות תצוגה שנמסרים במטא-נתונים של מודל המשימה, אם יש כאלה. ברירת המחדל היא `en` עבור אנגלית. אפשר להוסיף תוויות שהותאמו לשוק המקומי למטא-נתונים של מודל מותאם אישית באמצעות TensorFlow Lite Metadata Writer API	קוד הלוקאל	en

הכנת הנתונים

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

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

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

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

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

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

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

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

בקטעים הבאים מוסבר בפירוט על נתוני הפלט מהמשימה:

מסכה של קטגוריה

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

פלט התמונה המקורית של המסכה והקטגוריה. תמונת המקור ממערך הנתונים של Pascal VOC 2012.

מסכת ביטחון

הפלט של מסיכת ביטחון מכיל ערכים צפים בין [0, 1] לכל ערוץ קלט תמונה. ערכים גבוהים יותר מציינים ודאות גבוהה יותר שפיקסל התמונה הוא חלק מהאובייקט שממוקם באזור העניין.

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