دليل تصنيف الصور التفاعلي للويب

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

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

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

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

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

حِزم JavaScript

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

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

npm install --save @mediapipe/tasks-vision

إذا كنت تريد استيراد رمز المهمة من خلال خدمة شبكة توصيل المحتوى (CDN)، أضِف الرمز التالي في علامة في ملف HTML:

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

إنشاء المهمة

استخدِم إحدى دوالّ createFrom...() لميزة "تقسيم الصور التفاعلية" ل إعداد المهمة لإجراء الاستنتاجات. استخدِم الدالة createFromModelPath() مع مسار نسبي أو مطلق إلى ملف النموذج الذي تم تدريبه. إذا سبق تحميل النموذج في الذاكرة، يمكنك استخدام الأسلوب createFromModelBuffer().

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

يوضّح الرمز البرمجي التالي كيفية إنشاء المهمة وضبطها باستخدام خيارات مخصّصة:

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

خيارات الضبط

تتضمّن هذه المهمة خيارات الضبط التالية لتطبيقات الويب:

اسم الخيار الوصف نطاق القيمة القيمة التلقائية
outputCategoryMask في حال ضبط القيمة على True، يتضمّن الإخراج قناع تقسيم كصورة uint8، حيث تشير كل قيمة بكسل إلى ما إذا كان البكسل جزءًا من الجسم الموجود في منطقة الاهتمام. {True, False} False
outputConfidenceMasks في حال ضبطه على True، يتضمّن الناتج قناع تقسيم كصورة قيمة عائمة، حيث تمثّل كل قيمة عائمة ثقة بأنّ البكسل هو جزء من الجسم الواقع في منطقة الاهتمام. {True, False} True
displayNamesLocale لضبط لغة التصنيفات لاستخدامها في الأسماء المعروضة المقدَّمة في البيانات الوصفية لنموذج المهمة، في حال توفّرها. القيمة التلقائية هي en لعبارة English. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام واجهة برمجة التطبيقات TensorFlow Lite Metadata Writer API. رمز اللغة en

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

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

يتم تنفيذ طلبات الاتصال بطريقتَي Interactive Image Segmenter segment() وsegmentForVideo() بشكل غير متزامن ويحظر سلسلة محادثات واجهة المستخدم. في حال تقسيم الأجسام في إطارات الفيديو من كاميرا الجهاز، تحظر كل مهمة تقسيم السلسلة الأساسية. يمكنك منع ذلك من خلال تنفيذ مهام Web Worker لتشغيل segment() وsegmentForVideo() في سلسلة مهام أخرى.

تنفيذ المهمة

تستخدِم أداة "تقسيم الصور التفاعلي" طريقة segment() لبدء الاستنتاجات. تُعيد أداة Interactive Image Segmenter الشرائح التي تم رصدها كبيانات صور إلى دالة callback التي تحدّدها عند تنفيذ استنتاج للمهمة.

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);

للحصول على تنفيذ أكثر اكتمالاً لتشغيل مهمة "أداة تقسيم الصور التفاعلية"، اطّلِع على مثال الرمز.

معالجة النتائج وعرضها

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

توضّح الأقسام التالية بيانات الإخراج من هذه المهمة بشكل أكبر:

قناع الفئة

تعرض الصور التالية عرضًا مرئيًا لمنتج المهمة لقناع قيمة الفئة مع الإشارة إلى منطقة نقطة الاهتمام. كل بكسل هو uint8 قيمة تشير إلى ما إذا كان البكسل جزءًا من الجسم المُدرَج في منطقة الاهتمام. تشير الدائرة السوداء والبيضاء في الصورة الثانية إلى منطقة الاهتمام المحدّدة.

كلب يقف وسط كومة من الأوراق الشكل المخطَّط للكلب من الصورة السابقة

الصورة الأصلية ونتيجة قناع الفئة الصورة المصدر من مجموعة بيانات Pascal VOC 2012.

قناع الثقة

يحتوي الناتج لقناع الثقة على قيم عائمة تتراوح بين [0, 1] لكل قناة إدخال صورة. تشير القيم الأعلى إلى ثقة أكبر بأنّ بكسل الصورة هو جزء من الجسم الواقع في منطقة الاهتمام.

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