تتيح لك مَهمّة أداة تقسيم الصور 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 تخصيص
أداة تقسيم الصور باستخدام خيارات الضبط. لمزيد من المعلومات حول ضبط المهام، يمكنك الاطّلاع على خيارات الضبط.
يوضّح الرمز التالي كيفية إنشاء المهمة وضبطها باستخدام خيارات مخصّصة:
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();
لتنفيذ أكثر اكتمالاً لإنشاء مهمة أداة تقسيم الصور، يُرجى الاطّلاع على مثال الرمز البرمجي.
خيارات الضبط
تتضمن هذه المهمة خيارات الإعداد التالية لتطبيقات الويب:
| اسم الخيار | الوصف | نطاق القيمة | القيمة التلقائية |
|---|---|---|---|
runningMode |
تحدِّد هذه السياسة وضع التشغيل للمهمة. هناك وضعان: الصورة: وضع إدخالات الصورة الفردية. فيديو: وضع اللقطات التي تم فك ترميزها في فيديو أو أثناء بث مباشر لبيانات الإدخال، مثلاً من كاميرا. |
{IMAGE, VIDEO} |
IMAGE |
outputCategoryMask |
في حال ضبط هذه السياسة على True، سيتضمّن الناتج قناع تصنيف على شكل صورة uint8، حيث تشير كل قيمة بكسل إلى قيمة الفئة الفائزة. |
{True, False} |
False |
outputConfidenceMasks |
في حال ضبط هذه القيمة على True، تتضمّن النتيجة قناع تصنيف على شكل صورة ذات قيمة عائمة، حيث تمثل كل قيمة عائمة خريطة نتيجة الثقة للفئة. |
{True, False} |
True |
displayNamesLocale |
تحدِّد هذه السياسة لغة التصنيفات التي سيتم استخدامها للأسماء المعروضة في
البيانات الوصفية لنموذج المهمة، إذا كان ذلك متاحًا. الإعداد التلقائي هو en للغة الإنجليزية. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام TensorFlow Lite Metadata Scriptr API.
| رمز اللغة | en |
إعداد البيانات
يمكن لأداة تقسيم الصور تقسيم العناصر في الصور بأي تنسيق متوافق مع متصفّح المضيف. تعالج المهمة أيضًا المعالجة المسبقة لإدخال البيانات، بما في ذلك تغيير الحجم والتدوير وتسوية القيمة.
يتم تنفيذ الطلبات إلى طريقتَي أداة تقسيم الصور 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.
يوضّح رمز مثال أداة تقسيم الصور كيفية عرض نتائج التصنيف إلى شرائح الناتجة عن المهمة، ويمكنك الاطّلاع على مثال الرمز البرمجي للحصول على التفاصيل.