دليل تضمين الصور للويب

تتيح لك مهمة "تضمين الصور" في MediaPipe تحويل بيانات الصور إلى تمثيل رقمي لإنجاز مهام معالجة الصور ذات الصلة بالتعلم الآلي، مثل مقارنة التشابه بين صورتَين. توضّح هذه التعليمات كيفية استخدام Image Embedder لتطبيقات Node وتطبيقات الويب.

لمزيد من المعلومات حول إمكانات هذه المهمة ونماذجها وخيارات إعداداتها، يُرجى الاطّلاع على نظرة عامة.

مثال على الرمز

يقدّم رمز المثال الخاص بـ Image Embedder عملية تنفيذ كاملة لهذه المهمة في JavaScript يمكنك الرجوع إليها. يساعدك هذا الرمز في اختبار هذه المهمة والبدء في إنشاء تطبيقك الخاص لتضمين الصور. يمكنك عرض مثال "أداة تضمين الصور" وتشغيله وتعديله باستخدام متصفّح الويب فقط.

الإعداد

يوضِّح هذا القسم الخطوات الأساسية لإعداد بيئة التطوير ومشاريع الرموز البرمجية لاستخدام Image Embedder تحديدًا. للحصول على معلومات عامة حول إعداد بيئة التطوير لاستخدام مهام MediaPipe، بما في ذلك متطلبات إصدار النظام الأساسي، يُرجى الاطّلاع على دليل الإعداد للويب.

حِزم JavaScript

يتوفّر رمز Image Embedder من خلال حزمة @mediapipe/tasks-vision NPM في MediaPipe. يمكنك العثور على هذه المكتبات وتنزيلها من الروابط المتوفّرة في دليل الإعداد الخاص بالمنصة.

يمكنك تثبيت الحِزم المطلوبة باستخدام الرمز التالي للتجهيز المحلي باستخدام الأمر التالي:

npm install @mediapipe/tasks-vision

إذا كنت تريد استيراد رمز المهمة من خلال خدمة شبكة توصيل المحتوى (CDN)، أضِف الرمز التالي في علامة <head> في ملف 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، راجِع قسم "النماذج" في نظرة عامة على المهمة.

اختَر نموذجًا ونزِّله، ثم خزِّنه في دليل مشروعك:

<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 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

إعداد البيانات

يمكن لـ Image Embedder تضمين الصور بأي تنسيق متوافق مع المتصفّح المضيف. تتولّى المهمة أيضًا المعالجة المسبقة لإدخال البيانات، بما في ذلك تغيير الحجم والتدوير وتسوية القيم.

يتم تنفيذ طلبات البيانات من الطريقتَين Image Embedder embed() وembedForVideo() بشكل متزامن، ما يؤدي إلى حظر سلسلة التعليمات الخاصة بواجهة المستخدم. إذا أردت استخراج متجهات الميزات من إطارات الفيديو، سيحظر كل تضمين سلسلة التعليمات الرئيسية. يمكنك منع ذلك من خلال تنفيذ عاملي الويب لتشغيل طريقتَي embed() وembedForVideo() في سلسلة محادثات أخرى.

تنفيذ المهمة

يستخدم Image Embedder طريقتَي 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]);

يوضّح رمز المثال الخاص بـ "أداة تضمين الصور" كيفية عرض النتائج التي تعرضها الأداة والتي يتم إرجاعها من المهمة. يمكنك الاطّلاع على المثال للحصول على التفاصيل.