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

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

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

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

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

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

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

حِزم JavaScript

يتوفر رمز Object Detector من خلال حزمة 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 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
});

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

خيارات الضبط

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

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

لتنفيذ أكثر اكتمالاً لتشغيل مهمة Object Detector، يمكنك الاطّلاع على مثال الرمز البرمجي.

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

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

ويوضح ما يلي مثالاً على بيانات المخرجات من هذه المهمة:

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

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

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