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

המשימה 'פילוח תמונות של 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();

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

אפשרויות תצורה

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

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

הכנת נתונים

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

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

הרצת המשימה

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

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

תמונה

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]

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

ערך הקטגוריה

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

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

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