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

تتيح لك مهمة MediaPipe اكتشاف الوجوه في صورة أو فيديو. يمكنك استخدام هذه المهمة لتحديد موقع الوجوه وملامح الوجه داخل الإطار. تستخدم هذه المهمة نموذج التعلم الآلي (ML) الذي يعمل مع الصور الفردية أو التدفق المستمر للصور. وتؤدي المهمة إلى إخراج مواقع الوجه، بالإضافة إلى النقاط الرئيسية للوجه التالية: العين اليسرى، والعين اليمنى، وطرف الأنف، والفم، وإراحة العين اليسرى، وجرح العين اليمنى.

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

الطراز

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

حدد نموذجًا ونزّله ثم خزنه في دليل المشروع:

<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`	تحدِّد هذه السياسة وضع التشغيل للمهمة. هناك وضعان: الصورة: وضع إدخالات الصورة الفردية. فيديو: وضع اللقطات التي تم فك ترميزها في فيديو أو أثناء بث مباشر لبيانات الإدخال، مثلاً من كاميرا.	{`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)

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

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

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