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

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

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

مثال على الرمز البرمجي

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

ضبط إعدادات الجهاز

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

حزم JavaScript

يتوفّر رمز أداة تضمين الصور من خلال 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.js"
    crossorigin="anonymous"></script>
</head>

الطراز

تتطلب مهمة أداة تضمين الصور MediaPipe نموذجًا مدرّبًا ومتوافقًا مع هذه المهمة. لمزيد من المعلومات عن النماذج المدرَّبة المتاحة لأداة تضمين الصور، يُرجى الاطّلاع على نظرة عامة على المهمة قسم النماذج.

حدد نموذجًا ونزّله ثم خزّنه في دليل المشروع:

<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. في معظم الحالات، يكون هذا هو الحال بالفعل يتم تحقيق تسوية المستوى 2 من خلال استنتاج TFLite بدون الحاجة إلى لهذا الخيار. Boolean False
quantize ما إذا كان يجب قياس التضمين الذي يتم عرضه بوحدات البايت عبر الكمية الكمّية. يتم الافتراض ضمنيًا أن التضمينات تستند إلى معيار وحدة وبالتالي، يمكن ضمان توفُّر قيمة لأي سمة في [ -1.0، 1.0]. استخدام خيار l2Conditionize إذا لم يكن هذا هو الحال. Boolean False

تجهيز البيانات

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

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

تنفيذ المهمة

تستخدم أداة تضمين الصور embed() (مع وضع التشغيل image) طرق embedForVideo() (مع وضع التشغيل video) لتشغيلها والاستنتاجات. ستعرض واجهة برمجة التطبيقات 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);

التعامل مع العملاء وعرض النتائج

عند تشغيل الاستنتاج، تعرض مهمة أداة تضمين الصور الكائن 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]);

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