دليل تصنيف الصور للويب

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

يمكنك الاطّلاع على هذه المهمة وهي قيد التنفيذ من خلال مشاهدة العرض التجريبي. لمزيد من المعلومات عن الإمكانات والنماذج وخيارات الضبط لهذه المهمة، اطّلِع على نظرة عامة.

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

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

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

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

حِزم JavaScript

يتوفّر رمز Image Classifier من خلال حزمة MediaPipe @mediapipe/tasks-vision NPM. يمكنك العثور على هذه المكتبات وتنزيلها من الروابط المقدَّمة في منصّة دليل الإعداد.

يمكنك تثبيت الحِزم المطلوبة باستخدام الرمز البرمجي التالي للنشر على الجهاز فقط باستخدام الأمر التالي:

npm install @mediapipe/tasks-vision

إذا كنت تريد استيراد رمز المهمة من خلال خدمة شبكة توصيل المحتوى (CDN)، أضِف الرمز التالي في علامة في ملف HTML:

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<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/

إنشاء المهمة

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

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

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

async function createImageClassifier {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  imageClassifier = await ImageClassifier.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_classifier/efficientnet_lite0/float32/1/efficientnet_lite0.tflite`
    },
  });
}

خيارات الضبط

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

اسم الخيار الوصف نطاق القيمة القيمة التلقائية
runningMode لضبط وضع التشغيل للمهمة هناك نوعان من الأوضاع:

IMAGE: وضع إدخالات الصور الفردية.

الفيديو: وضع الإطارات التي تم فك ترميزها في فيديو أو في بث مباشر لبيانات الإدخال، مثل بيانات الكاميرا		 {IMAGE, VIDEO} IMAGE
displayNamesLocale لضبط لغة التصنيفات لاستخدامها في الأسماء المعروضة المقدَّمة في البيانات الوصفية لنموذج المهمة، في حال توفّرها. القيمة التلقائية هي en لعبارة English. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام واجهة برمجة التطبيقات TensorFlow Lite Metadata Writer API. رمز اللغة en
maxResults تُستخدَم لتحديد الحد الأقصى الاختياري لعدد نتائج التصنيف التي ستعرضها. إذا كان < 0، سيتم عرض جميع النتائج المتاحة. أي أرقام موجبة -1
scoreThreshold تُستخدَم لضبط الحدّ الأدنى لنتيجة التوقّع الذي يحلّ محلّ الحدّ المتوفّر في البيانات الوصفية للنموذج (إن توفّرت). ويتم رفض النتائج التي تقلّ عن هذه القيمة. أيّ عائمة لم يتم الضبط
categoryAllowlist لضبط القائمة الاختيارية لأسماء الفئات المسموح بها. إذا لم تكن فارغة، سيتم استبعاد نتائج التصنيف التي لا يتضمّن اسم فئتها هذه المجموعة. ويتم تجاهل أسماء الفئات المكرّرة أو غير المعروفة. هذا الخيار غير متوافق مع الخيار categoryDenylist، ويؤدي استخدام كلا الخيارَين إلى حدوث خطأ. أي سلاسل لم يتم الضبط
categoryDenylist لضبط القائمة الاختيارية لأسماء الفئات غير المسموح بها. إذا كانت هذه المجموعة ليست فارغة، سيتم فلترة نتائج التصنيف التي يكون اسم فئتها في هذه المجموعة. ويتم تجاهل أسماء الفئات المكرّرة أو غير المعروفة. هذا الخيار متناقض مع الخيار categoryAllowlist، ويؤدي استخدام كليهما إلى حدوث خطأ. أي سلاسل لم يتم الضبط
resultListener ضبط مستمع النتائج لتلقّي نتائج التصنيف بشكل غير متزامن عندما يكون "تصنيف الصور" في وضع البث المباشر لا يمكن استخدامها إلا عند ضبط وضع التشغيل على LIVE_STREAM لا ينطبق لم يتم الضبط

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

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

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

تنفيذ المهمة

يستخدم "تصنيف الصور" طريقة classify() مع وضع "الصورة" و طريقة classifyForVideo() مع وضع video لبدء عمليات الاستنتاج. ستُرجع واجهة برمجة التطبيقات Image Classifier API الفئات المحتملة للعناصر ضمن الصورة المُدخلة.

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
const imageClassifierResult = imageClassifier.classify(image);

فيديو

const video = document.getElementById("video");
await imageClassifier.setOptions({ runningMode: "VIDEO" });

const timestamp = performance.now();
const classificationResult = await imageClassifier.classifyForVideo(
    video,
    timestamp
  );

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

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

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

في ما يلي مثال على بيانات الإخراج من هذه المهمة:

ImageClassifierResult:
 Classifications #0 (single classification head):
  head index: 0
  category #0:
   category name: "/m/01bwb9"
   display name: "Passer domesticus"
   score: 0.91406
   index: 671
  category #1:
   category name: "/m/01bwbt"
   display name: "Passer montanus"
   score: 0.00391
   index: 670

تم الحصول على هذه النتيجة من خلال تشغيل أداة تصنيف الطيور على:

صورة مقرّبة لطائر عصفور منزلي

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