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

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

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

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.mjs"
    crossorigin="anonymous"></script>
</head>

דגם

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

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

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

יצירת המשימה

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

אפשר ליצור משימה עם אפשרויות ברירת המחדל באמצעות ה-method‏ 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`
    },
  });

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

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

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

הכנת הנתונים

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

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

הרצת המשימה

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

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

תמונה

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]);

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