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

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

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

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

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

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 لعبارة English. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام واجهة برمجة التطبيقات TensorFlow Lite Metadata Writer API. رمز اللغة en
resultListener ضبط مستمع النتائج لتلقّي نتائج التقسيم بشكل غير متزامن عندما يكون أداة تقسيم الصور في وضع LIVE_STREAM لا يمكن استخدامها إلا عند ضبط وضع التشغيل على LIVE_STREAM لا ينطبق لا ينطبق

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

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

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

تنفيذ المهمة

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

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

صورة

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.

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