يمكنك وضع دليل رصد المعالِم للويب.

تتيح لك مهمة MediaPipe Pose Landmarker رصد معالم أجسام البشر في صورة أو فيديو. يمكنك استخدام هذه المهمة لتحديد مواضع الجسم الرئيسية وتحليل الوضع و تصنيف الحركات. تستخدِم هذه المهمة نماذج تعلُّم الآلة التي تعمل مع الصور أو الفيديوهات الفردية. تُخرج المهمة معالم وضع الجسم في إحداثيات الصورة وفي إحداثيات العالم الثلاثية الأبعاد.

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

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

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

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

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

حِزم 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 -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

الطراز

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

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

<dev-project-root>/app/shared/models/

إنشاء المهمة

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

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

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

خيارات الضبط

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

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

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

الفيديو: وضع الإطارات التي تم فك ترميزها في فيديو أو في بث مباشر لبيانات الإدخال، مثل بيانات الكاميرا		 {IMAGE, VIDEO} IMAGE
numPoses الحد الأقصى لعدد الوضعيات التي يمكن رصدها من خلال أداة وضع علامات على العناصر Integer > 0 1
minPoseDetectionConfidence الحد الأدنى لنتيجة الثقة ليعتبر رصد الوضعان ناجحًا Float [0.0,1.0] 0.5
minPosePresenceConfidence الحد الأدنى لنتيجة الثقة في توفّر الوضع في عملية رصد معالم الوضع Float [0.0,1.0] 0.5
minTrackingConfidence الحد الأدنى لنتيجة الثقة لتتبُّع الوضع ليكون ناجحاً Float [0.0,1.0] 0.5
outputSegmentationMasks ما إذا كان عنصر وضع المَعلمات يُخرج قناعًا لتقسيم العناصر للوضع الذي تم رصده Boolean False

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

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

تنفيذ المهمة

يستخدم عنصر وضع علامة على المعالم detect() (مع وضع التشغيل IMAGE) و detectForVideo() (مع وضع التشغيل VIDEO) لبدء عمليات الاستنتاج. تعالج المهمة البيانات وتحاول وضع علامات على الأوضاع ثم تُبلغ عن النتائج.

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

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

فيديو

await poseLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

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

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

يعرض عنصر وضع الجسم poseLandmarkerResult لكل عملية الكشف. يحتوي عنصر النتيجة على إحداثيات لكلّ معلمة في الوضع.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

يحتوي الإخراج على كلّ من الإحداثيات العادية (Landmarks) وإحداثيات العالم (WorldLandmarks) لكلّ معلم.

يحتوي الإخراج على الإحداثيات التالية (Landmarks) التي تم تسويتها:

  • ‫x وy: إحداثيات المَعلمة التي تم تسويتها بين 0.0 و1.0 حسب عرض الصورة (x) وارتفاعها (y).

  • z: عمق المَعلم، مع تحديد عمق منتصف الوركين كنقطة المنشأ وكلما كانت القيمة أصغر، كان المَعلم أقرب إلى الكاميرا. يستخدم حجم z المقياس نفسه تقريبًا المستخدَم في x.

  • visibility: احتمال ظهور المَعلمة في الصورة

يحتوي الإخراج على إحداثيات العالم التالية (WorldLandmarks):

  • ‫x وy وz: إحداثيات ثلاثية الأبعاد في العالم الواقعي بالمتر، مع تحديد نقطة وسط الوركين كمصدر.

  • visibility: احتمال ظهور المَعلمة في الصورة

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

امرأة في وضعية تأمل تم تمييز وضعها باستخدام إطار شبكي يشير إلى موضع أطرافها وجذعها.

يمثّل قناع التقسيم الاختياري احتمالية أن تنتمي كل بكسل إلى شخص تم رصده. الصورة التالية هي قناع تقسيم لمخرجات المهمة:

قناع تقسيم للصورة السابقة يحدّد شكل المرأة

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