دليل تصنيف الصور إلى شرائح على الويب

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

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

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

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

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

حزم JavaScript

يتوفّر رمز Image Segmenter من خلال حزمة @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 بتخصيص أداة تقسيم الصور مع خيارات الإعداد. لمزيد من المعلومات حول المهمة يمكنك الاطّلاع على خيارات الضبط.

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

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

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

خيارات الإعداد

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

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

تجهيز البيانات

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

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

تنفيذ المهمة

تستخدم "أداة تقسيم الصور" الطريقة segment() مع وضع الصور segmentForVideo() مع وضع video لتفعيل الاستنتاجات. تشير رسالة الأشكال البيانية تعرض أداة تقسيم الصور المقاطع التي تم اكتشافها كبيانات صور لمعاودة الاتصال. التي قمت بتعيينها عند تشغيل استنتاج للمهمة.

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

فيديو

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

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

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

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

تعرض الأقسام التالية أمثلة على بيانات الإخراج من هذه المهمة:

ثقة الفئة

تُظهر الصور التالية تصورًا لمخرجات المهمة لفئة قناع الثقة. يحتوي ناتج قناع الثقة على قيم عائمة بين [0, 1]

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

قيمة الفئة

تعرض الصور التالية تمثيلاً مرئيًا لمعدّل إنجاز المهمة لقناع قيمة الفئة. نطاق قناع الفئة هو [0, 255]، وتمثل كل قيمة بكسل فهرس الفئة الفائزة في مخرجات النموذج. الفئة الفائزة على أعلى درجة بين الفئات التي يمكن أن يتعرف عليها النموذج.

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

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