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

تأخذ مهمة أداة تقسيم الصور التفاعلية 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 Writer 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);