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

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

קוד לדוגמה

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

הגדרה

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

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

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

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

שם האפשרות תיאור טווח ערכים ערך ברירת מחדל
runningMode מגדיר את מצב הריצה של המשימה. יש שני מצבים:

IMAGE: המצב שבו ניתן להזין תמונה יחידה.

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

הכנת הנתונים

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

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

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

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

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

תמונה

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

Video

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

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

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

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

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

מהימנות הקטגוריה

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

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

ערך קטגוריה

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

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

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