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

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

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

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

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

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

حِزم JavaScript

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

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

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` للغة الإنجليزية. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام TensorFlow Lite Metadata Scriptr API.	رمز اللغة	en

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

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

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

تنفيذ المهمة

تستخدم "أداة تقسيم الصور التفاعلية" طريقة segment() لعرض الاستنتاجات. تعرض أداة تقسيم الصور التفاعلية المقاطع المكتشفة كبيانات صورة إلى دالة معاودة الاتصال التي تحدّدها عند تنفيذ استنتاج للمهمة.

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

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

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

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

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

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

قناع الفئة

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

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

قناع الثقة

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

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