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

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

لمزيد من المعلومات حول إمكانات هذه المهمة ونماذجها وخيارات الإعداد، يُرجى الاطّلاع على نظرة عامة.

الإعداد

يوضّح هذا القسم الخطوات الأساسية لإعداد بيئة التطوير المخصّصة لاستخدام "أداة رصد الكائنات". للحصول على معلومات عامة حول إعداد بيئة تطوير الويب و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.mjs"
    crossorigin="anonymous"></script>
</head>

الطراز

تتطلّب مهمة &quot;رصد العناصر&quot; في MediaPipe نموذجًا مدرَّبًا متوافقًا مع هذه المهمة. لمزيد من المعلومات حول النماذج المدرَّبة المتاحة في Object Detector، راجِع نظرة عامة على المهمة في قسم "النماذج".

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

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

للحصول على تنفيذ أكثر اكتمالاً لمهمة إنشاء أداة Object Detector، اطّلِع على مثال الرمز.

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

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

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

IMAGE: الوضع المخصّص لإدخال صورة واحدة.

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

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

يمكن لـ Object Detector رصد العناصر في الصور بأي تنسيق متوافق مع المتصفّح المضيف. تتولّى المهمة أيضًا المعالجة المسبقة لإدخال البيانات، بما في ذلك تغيير الحجم والتدوير وتسوية القيم. لرصد العناصر في الفيديوهات، يمكنك استخدام واجهة برمجة التطبيقات لمعالجة إطار واحد في كل مرة بسرعة، وذلك باستخدام الطابع الزمني للإطار لتحديد وقت حدوث الإيماءات في الفيديو.

تنفيذ المهمة

يستخدم Object Detector 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

تعرض الصورة التالية تمثيلاً مرئيًا لناتج المهمة:

كلبان مميّزان بمربّعات حدود

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