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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

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

npm install --save @mediapipe/tasks-vision

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

דגם

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

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

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

יצירת המשימה

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

הכנת הנתונים

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

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

הרצת המשימה

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

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

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

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

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

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

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

מסכת קטגוריה

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

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

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

מסכת מהימנות

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

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