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

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

קוד לדוגמה

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

הגדרה

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

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

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

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

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

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

ערך הקטגוריה

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

פלט של התמונה המקורית ומסכת הקטגוריה. תמונת המקור מ- פסקל VOC 2012 של הכיתובים.

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