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

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

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

קוד לדוגמה

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

הגדרה

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

חבילות JavaScript

הקוד של הכלי להטמעת תמונות זמין דרך @mediapipe/tasks-vision MediaPipe חבילת 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 נדרש מודל מאומן שתואם למשימה הזו. לקבלת מידע נוסף על מודלים זמינים מאומנים של כלי להטמעת תמונות, אפשר לעיין במאמר בסקירה הכללית על המשימה בקטע 'מודלים'.

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

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

יצירת המשימה

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

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

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

הכנת נתונים

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

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

הרצת המשימה

הכלי להטמעת תמונות משתמש ב-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);

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

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

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