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

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

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

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

يقدّم مثال الرمز البرمجي لأداة "إدراج الصور" تنفيذًا كاملاً لهذه مهمة باستخدام 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. وفي معظم الحالات، يكون هذا هو الحال، وبالتالي يتم تحقيق تسويّة L2 من خلال الاستنتاج باستخدام TFLite بدون الحاجة إلى هذا الخيار. Boolean False
quantize ما إذا كان يجب تجزئة البيانات المضمّنة التي تم إرجاعها إلى وحدات بايت من خلال التجزئة على مستوى المقياس يُفترض ضمنيًا أنّ القيم المضمّنة هي قيم عادية و بالتالي، يُضمن أن تكون قيمة أيّ سمة ضمن النطاق [-1.0, 1.0]. استخدِم خيار l2Normalize إذا لم يكن الأمر كذلك. Boolean False

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

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

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

تنفيذ المهمة

يستخدم "مُضمِّن الصور" الطريقتَين 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 يحتوي على متجهات الإدراج للImageInput أو الإطار.

في ما يلي مثال على بيانات الإخراج من هذه المهمة:

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

يوضّح مثال رمز "أداة تضمين الصور" كيفية عرض results المعروضة من المهمة، اطّلِع على مثال الرمز للحصول على التفاصيل.