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

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

קוד לדוגמה

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

הגדרה

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

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

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

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

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

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

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

הכנת הנתונים

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

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

הרצת המשימה

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

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

תמונה

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

וידאו

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

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

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

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

רמת הסמך של הקטגוריה

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

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

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

ערך הקטגוריה

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

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

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

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