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

تتيح لك مهمة أداة كشف عناصر MediaPipe اكتشاف وجود وفئات الكائنات. تأخذ هذه المهمة بيانات الصور وتُخرج قائمة برصد نتائج، يمثل كل منها كائنًا محددًا في الصورة. عيّنة التعليمات البرمجية الموضحة في هذه التعليمات على CodePen.

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

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

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

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

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

حزم JavaScript

يتوفّر رمز أداة رصد العناصر من خلال MediaPipe @mediapipe/tasks-vision. حزمة NPM. يمكنك البحث عن هذه المكتبات وتنزيلها من خلال اتّباع التعليمات الواردة في النظام الأساسي دليل الإعداد.

يمكنك تثبيت الحزم المطلوبة من خلال NPM باستخدام الأمر التالي:

npm install @mediapipe/tasks-vision

إذا كنت ترغب في استيراد رمز المهمة عبر شبكة توصيل المحتوى (CDN) أضف الرمز التالي في العلامة <head> في ملف 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/

إنشاء المهمة

استخدِم إحدى وظائف أداة رصد الأجسام ObjectDetector.createFrom...() من أجل وتجهز المهمة لتشغيل الاستنتاجات. استخدام createFromModelPath() مع مسار نسبي أو مطلق لملف النموذج المدرَّب. إذا تم تحميل نموذجك في الذاكرة من قبل، يمكنك استخدام طريقة createFromModelBuffer(). يوضح مثال التعليمة البرمجية أدناه استخدام الدالة createFromOptions()، والتي تتيح لك ضبط المزيد من الإعدادات الخيارات. لمزيد من المعلومات حول خيارات الضبط المتاحة، يُرجى الاطّلاع على قسم خيارات الإعداد.

توضح التعليمة البرمجية التالية كيفية إنشاء هذه المهمة وتهيئتها:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
objectDetector = await ObjectDetector.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-tasks/object_detector/efficientdet_lite0_uint8.tflite`
  },
  scoreThreshold: 0.5,
  runningMode: runningMode
});

لتنفيذ أكثر اكتمالاً لإنشاء مهمة التعرّف على الكائنات، راجع مثال الرمز البرمجي.

خيارات الإعداد

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

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

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

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

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

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

تنفيذ المهمة

تستخدم ميزة "رصد الكائنات" detect() للتعامل مع الصور الفردية تعمل ميزة "detectForVideo()" على رصد العناصر في إطارات الفيديو. تقوم عمليات المهمة البيانات، ويحاول التعرف على الكائنات، ثم يقدم تقرير عن النتائج.

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

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
const detections = objectDetector.detect(image);

فيديو

await objectDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = detector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

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

للحصول على معلومات أكثر اكتمالاً حول تشغيل مَهمّة كشف الكائنات، يمكنك الاطّلاع على مثال الرمز البرمجي.

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

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

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

ObjectDetectorResult:
 Detection #0:
  Box: (x: 355, y: 133, w: 190, h: 206)
  Categories:
   index       : 17
   score       : 0.73828
   class name  : dog
 Detection #1:
  Box: (x: 103, y: 15, w: 138, h: 369)
  Categories:
   index       : 17
   score       : 0.73047
   class name  : dog

تُظهر الصورة التالية تصورًا لنتج المهمة:

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