نقدّم لك Google AI Edge Portal: أداة لقياس أداء الذكاء الاصطناعي على الأجهزة الطرفية على نطاق واسع. الاشتراك لطلب الوصول أثناء فترة المعاينة الخاصة

دليل التعرّف على الوجوه على الويب

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

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

مثال للرمز

يوفّر رمز المثال الخاص بـ "أداة رصد الوجوه" عملية تنفيذ كاملة لهذه المهمة في 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.mjs"
    crossorigin="anonymous"></script>
</head>

الطراز

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

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

<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 facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

خيارات الضبط

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

اسم الخيار	الوصف	نطاق القيمة	القيمة التلقائية
`option_var_1_web_js`	يضبط وضع التشغيل للمهمة. هناك وضعان: modes: IMAGE: الوضع المخصّص لإدخالات الصور الفردية VIDEO: الوضع المخصّص للإطارات التي تم فك ترميزها من فيديو أو بث مباشر لبيانات الإدخال، مثل البيانات الواردة من كاميرا	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	الحد الأدنى لنتيجة الثقة لرصد الوجه كي يُعتبر ناجحًا	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	الحد الأدنى لغير الحد الأقصى من عتبة الإخفاء لرصد الوجه كي يُعتبر متداخلاً	`Float [0,1]`	`0.3`

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

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

تشغيل المهمة

تستخدم "أداة رصد الوجوه" الطريقتَين detect() (مع وضع التشغيل image) وdetectForVideo() (مع وضع التشغيل video) لتشغيل عمليات الاستنتاج. تعالج المهمة البيانات وتحاول رصد الوجوه، ثم تعرض النتائج.

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

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

فيديو

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

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

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

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

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

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

تنشئ "أداة رصد الوجوه" عنصر نتيجة لرصد الوجوه لكل عملية رصد. يحتوي عنصر النتيجة على الوجوه بإحداثيات الصورة والوجوه بإحداثيات العالم.

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

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

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

طفلان مع مربّعات إحاطة حول وجهيهما

للاطّلاع على الصورة بدون مربّعات الإحاطة، يُرجى الاطّلاع على الصورة الأصلية.

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