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

تتيح لك مهمة "أداة رصد الأجسام" من MediaPipe رصد وجود عدة فئات من الأجسام وموقعها الجغرافي. تأخذ هذه المهمة بيانات الصورة وتُخرج قائمة بنتائج الرصد، وكلّ منها يمثّل عنصرًا تمّ التعرّف عليه في الصورة. يتوفّر نموذج الرمز البرمجي описан في هذه التعليمات على CodePen.

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

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

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

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

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

حِزم JavaScript

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

يمكنك تثبيت الحِزم المطلوبة من خلال 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 لعبارة English. يمكنك إضافة تصنيفات مترجَمة إلى البيانات الوصفية لنموذج مخصّص باستخدام واجهة برمجة التطبيقات TensorFlow Lite Metadata Writer API. رمز اللغة en
maxResults تُستخدَم لضبط الحد الأقصى الاختياري لعدد نتائج الكشف التي تحقّق أعلى الدرجات والتي تريد عرضها. أي أرقام موجبة -1 (يتم عرض جميع النتائج)
scoreThreshold تُستخدَم لضبط الحدّ الأدنى لنتيجة التوقّع الذي يتجاوز الحدّ الأدنى المقدَّم في البيانات الوصفية للنموذج (إن توفّرت). ويتم رفض النتائج التي تقلّ عن هذه القيمة. أيّ عائمة لم يتم الضبط
categoryAllowlist لضبط القائمة الاختيارية لأسماء الفئات المسموح بها. إذا لم تكن فارغة، سيتم فلترة نتائج الكشف التي لا يتضمّن اسم فئتها هذه المجموعة. ويتم تجاهل أسماء الفئات المكرّرة أو غير المعروفة. هذا الخيار غير متوافق مع الخيار categoryDenylist، ويؤدي استخدام كلا الخيارَين إلى حدوث خطأ. أي سلاسل لم يتم الضبط
categoryDenylist لضبط القائمة الاختيارية لأسماء الفئات غير المسموح بها. إذا كانت القيمة غير فارغة، سيتم فلترة نتائج الكشف التي يكون اسم فئتها في هذه المجموعة. ويتم تجاهل أسماء الفئات المكرّرة أو غير المعروفة. هذا الخيار متناقض مع الخيار categoryAllowlist، ويؤدي استخدام كليهما إلى حدوث خطأ. أي سلاسل لم يتم الضبط

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

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

تنفيذ المهمة

يستخدم "مُعترِف الأجسام" 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

تعرض الصورة التالية عرضًا مرئيًا لمعدّل تكرار المهمة:

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

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