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

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

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

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

الإعداد

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

حِزم JavaScript

يتوفّر رمز 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 نموذجًا مدرَّبًا متوافقًا مع هذه المهمة. لمزيد من المعلومات حول النماذج المدرَّبة المتاحة لأداة Image Segmenter، راجِع قسم "النماذج" في نظرة عامة على المهمة.

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

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

إنشاء المهمة

استخدِم إحدى دوال createFrom...() في Image Segmenter لإعداد المهمة لتنفيذ عمليات الاستدلال. استخدِم الدالة createFromModelPath() مع مسار نسبي أو مطلق إلى ملف النموذج المدرَّب. إذا كان النموذج محملًا في الذاكرة، يمكنك استخدام طريقة createFromModelBuffer().

يوضّح مثال الرمز البرمجي أدناه كيفية استخدام الدالة createFromOptions() لإعداد المهمة. تتيح لك الدالة createFromOptions تخصيص أداة Image Segmenter باستخدام خيارات الإعداد. لمزيد من المعلومات حول إعدادات المهام، يُرجى الاطّلاع على خيارات الإعداد.

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

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

تنفيذ المهمة

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

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

صورة

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();
  });
}

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

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

عند تنفيذ الاستدلال، تعرض مهمة Image Segmenter بيانات صورة الأجزاء إلى دالة ردّ الاتصال. يعتمد محتوى الناتج على outputType الذي ضبطته عند إعداد المهمة.

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

ثقة الفئة

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

فتاتان تركبان حصانًا وفتاة تمشي بجانب الحصان قناع الصورة الذي يحدّد شكل الفتيات والحصان من الصورة السابقة تم التقاط النصف الأيمن من مخطط الصورة، ولكن لم يتم التقاط النصف الأيسر من الصورة

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

قيمة الفئة

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

فتاتان تركبان حصانًا وفتاتان تمشيان بجانب الحصان قناع الصورة الذي يحدّد شكل الفتيات والحصان من الصورة السابقة تم إخفاء شكل الفتيات الثلاث والحصان بدقة

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

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