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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

אפשר להתקין את החבילות הנדרשות באמצעות הקוד הבא ליצירת גרסת build מקומית באמצעות הפקודה הבאה:

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

הכנת הנתונים

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

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

הרצת המשימה

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

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

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

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

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

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

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

מסכת קטגוריה

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

כלב שעומד בתוך ערימה של עלים קווי המתאר של הכלב מהתמונה הקודמת

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

מסכת ביטחון

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

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