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

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

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

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

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

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

<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`
    },
  });

ציון מאגר הנתונים הזמני של המודל

אם המודל כבר נטען בזיכרון, אתם יכולים להשתמש בשיטה 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' משתמשת בפונקציה 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 Op. . ברוב המקרים, זה כבר המצב, וכתוצאה מכך מתקבל מסקנות של TFLite, ללא צורך באפשרות הזו. Boolean False
quantize האם יש לכמת את ההטמעה שמוחזרת לבייטים באמצעות קוונטיזציה סקלרית. ההנחה היא שההטמעות הן נורמת יחידה, ולכן לכל מאפיין מובטח שיהיה ערך [ -1.0, 1.0]. אם זה לא המצב, מומלץ להשתמש באפשרות l2Normalize. Boolean False

הכנת הנתונים

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

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

מריצים את המשימה.

הטמעת התמונות משתמשת בשיטות embed() (עם מצב ריצה image) ו-embedForVideo() (עם מצב ריצה video) כדי להפעיל מסקנות. ה-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);

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

לאחר ההסקה, המשימה של הטמעת תמונות מחזירה אובייקט 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]);

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