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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

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

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 Image Segmenter, צריך מודל מאומן שתואם למשימה הזו. מידע נוסף על מודלים מאומנים שזמינים ל-Image Segmenter מופיע בקטע Models בסקירה הכללית של המשימה.

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

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

יצירת המשימה

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

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

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

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();

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

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

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

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

הכנת הנתונים

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

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

הרצת המשימה

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

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

תמונה

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();
  });
}

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

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

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

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

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

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

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

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

ערך הקטגוריה

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

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

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

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