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

تتيح لك مهمة MediaPipe Image inlineer (أداة تضمين الصور 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 Image embeder (أداة تضمين الصور 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 Image embedder (أداة تضمين الصور في 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, VIDEO} IMAGE
l2Normalize ما إذا كان سيتم تسوية الخط المتجه للميزة الذي تم إرجاعه باستخدام معيار L2. لا تستخدم هذا الخيار إلا إذا لم يكن النموذج يحتوي على L2_NORMALIZATION TFLite Op أصلي. في معظم الحالات، يتم تسوية L2 من خلال استنتاج TFLite بدون الحاجة إلى هذا الخيار. Boolean False
quantize ما إذا كان يجب تحديد قيمة التضمين التي تم إرجاعها إلى وحدات البايت من خلال تحديد كمّية عددية ومن المفترض ضمنيًا أن تكون عمليات التضمين عبارة عن معيار وحدة، وبالتالي يمكن أن يكون لأي سمة قيمة في [ -1.0, 1.0]. واستخدِم الخيار l2normalize إذا لم يكن الأمر كذلك. Boolean False

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

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

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

تنفيذ المهمة

تستخدم أداة تضمين الصور الطريقتَين embed() (مع وضع التشغيل image) وembedForVideo() (مع وضع التشغيل video) لعرض الاستنتاجات. ستعرض واجهة برمجة تطبيقات تضمين الصور متجهات التضمين لصورة الإدخال.

توضح التعليمة البرمجية التالية كيفية تنفيذ المعالجة باستخدام نموذج المهمة:

صورة

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

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