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

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

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

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

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

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 لا ينطبق لا ينطبق

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

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

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

تنفيذ المهمة

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

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

صورة

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

Video

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

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

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

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

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

عند تشغيل الاستنتاج، تعرض مهمة أداة تقسيم الصور بيانات صورة الشريحة إلى . ويعتمد محتوى النتيجة على قيمة outputType التي تضبطها. عند ضبط المهمة.

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

ثقة الفئة

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

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

قيمة الفئة

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

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

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