מדריך להטמעת תמונות באינטרנט

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

אפשר להתקין את החבילות הנדרשות באמצעות הקוד הבא ליצירת גרסת build מקומית באמצעות הפקודה הבאה:

npm install @mediapipe/tasks-vision

אם רוצים לייבא את קוד המשימה דרך שירות של רשת להעברת תוכן (CDN), מוסיפים את הקוד הבא בתג בקובץ ה-HTML:

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

דגם

כדי לבצע את המשימה 'הטמעת תמונות ב-MediaPipe', נדרש מודל מאומן שתואם למשימה הזו. מידע נוסף על המודלים המאומנים הזמינים ל-Image Embedder זמין בקטע 'מודלים' בסקירה הכללית של המשימה.

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

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

יצירת המשימה

ציון נתיב של מודל

אפשר ליצור משימה עם אפשרויות ברירת המחדל באמצעות השיטה createFromModelPath():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

ציון מאגר המודלים

אם המודל כבר נטען בזיכרון, אפשר להשתמש ב-method‏ createFromModelBuffer():

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

ציון אפשרויות מותאמות אישית

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = await ImageEmbedder.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "model.tflite"
      },
      quantize: true
    });

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

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

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

IMAGE: המצב להזנת תמונה אחת.

וידאו: המצב של פריימים מפוענחים של וידאו או של שידור חי של נתוני קלט, למשל ממצלמה.		 {IMAGE, VIDEO} IMAGE
l2Normalize האם לבצע נורמליזציה של וקטור המאפיינים המוחזר באמצעות נורמלי L2. משתמשים באפשרות הזו רק אם המודל כבר לא מכיל פונקציית L2_NORMALIZATION מקורית של TFLite. ברוב המקרים, המצב הזה כבר קיים, ולכן נורמליזציה של L2 מתבצעת באמצעות היסק של TFLite ללא צורך באפשרות הזו. Boolean False
quantize האם להצפין את הטמעת הנתונים שחוזרת לבייטים באמצעות קידוד סקלר. ההנחה לגבי הטמעות היא שהן נורמליות ליחידה, ולכן לכל מאפיין מובטח ערך בטווח [-1.0, 1.0]. אם לא, צריך להשתמש באפשרות l2Normalize. Boolean False

הכנת הנתונים

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

קריאות לשיטות embed() ו-embedForVideo() של Image Embedder פועלות באופן סינכרוני וחוסמות את הליץ' של ממשק המשתמש. אם רוצים לחלץ וקטורי מאפיינים מפריימים של סרטונים, כל הטמעה תמנע את הרצת ה-thread הראשי. כדי למנוע זאת, אפשר להטמיע עובדים באינטרנט שיפעילו את השיטות embed() ו-embedForVideo() בשרשור אחר.

הרצת המשימה

הכלי להטמעת תמונות משתמש בשיטות embed() (עם מצב ריצה image) ו-embedForVideo() (עם מצב ריצה video) כדי להפעיל את ההסקות. ממשק ה-API של Image Embedder יחזיר את וקטורי ההטמעה של תמונה הקלט.

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

תמונה

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

וידאו

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

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

לאחר הפעלת ההסקה, המשימה Image Embedder מחזירה אובייקט ImageEmbedderResult שמכיל את וקטורי ההטמעה של התמונה או הפריים של הקלט.

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

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

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

צילום בינוני של חתול אקזוטי

אפשר להשוות את הדמיון הסמנטי של שני הטמעות באמצעות הפונקציה ImageEmbedder.cosineSimilarity. דוגמה לקוד:

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

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