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

המשימה 'פילוח תמונות אינטראקטיבי' של 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 מאפשרת להתאים אישית פילוח תמונות אינטראקטיבי עם אפשרויות תצורה. מידע נוסף על הגדרות אישיות אפשרויות נוספות, ראו אפשרויות הגדרה.

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

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

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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

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

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

הכנת נתונים

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

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

הרצת המשימה

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

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);