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

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

مثال على الرمز

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

الإعداد

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

حِزم JavaScript

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

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

npm install --save @mediapipe/tasks-vision

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

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

الطراز

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

اختَر نموذجًا ونزِّله، ثم خزِّنه في دليل مشروعك:

<dev-project-root>/app/shared/models/

إنشاء المهمة

استخدِم إحدى دوال createFrom...() في Interactive Image Segmenter لإعداد المهمة لتنفيذ عمليات الاستدلال. استخدِم الدالة 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 Writer API. رمز اللغة en

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

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

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

تنفيذ المهمة

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

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

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] لكل قناة إدخال صور. تشير القيم الأعلى إلى درجة ثقة أعلى بأنّ بكسل الصورة هو جزء من العنصر الموجود في منطقة الاهتمام.

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