دليل اكتشاف مَعلَم الوجه للويب

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

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

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

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

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

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

حِزم JavaScript

يتوفّر رمز Facemarker من خلال حزمة 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 Builderer نموذجًا مدرَّبًا متوافقًا مع هذه المهمة. للحصول على مزيد من المعلومات حول النماذج المدربة المتاحة لأداة Facemarker، راجع نظرة عامة على المهمة في قسم النماذج.

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

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

إنشاء المهمة

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

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

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

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

خيارات الضبط

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

اسم الخيار	الوصف	نطاق القيمة	القيمة التلقائية
`running_mode`	تحدِّد هذه السياسة وضع التشغيل للمهمة. هناك وضعان: الصورة: وضع إدخالات الصورة الفردية. فيديو: وضع اللقطات التي تم فك ترميزها في فيديو أو أثناء بث مباشر لبيانات الإدخال، مثلاً من كاميرا.	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	الحدّ الأقصى لعدد الوجوه التي يمكن رصدها باستخدام `FaceLandmarker`. لا يتم تطبيق التجانس إلا عند ضبط `num_faces` على 1.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	تمثّل هذه السمة الحد الأدنى لدرجة الثقة ليتم اعتبار ميزة "التعرّف على الوجوه" ناجحة.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	تمثّل هذه السمة الحد الأدنى لدرجة الثقة لنتيجة تواجد الوجه في ميزة "رصد معالِم الوجه".	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	تمثّل هذه السمة الحد الأدنى لدرجة الثقة ليتم اعتبار ميزة تتبُّع الوجه ناجحة.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	يمكنك اختيار ما إذا كانت أداة "التعرّف على الوجه" تُخرج أشكالاً ممزوجة بالوجه. يتم استخدام أشكال مزج الوجوه لعرض نموذج الوجه الثلاثي الأبعاد.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	ما إذا كانت FaceLandmarker تُخرج مصفوفة تحويل الوجوه. يستخدم FaceLandmarker المصفوفة لتحويل معالم الوجه من نموذج الوجه الأساسي إلى الوجه الذي تم رصده ليتمكّن المستخدمون من تطبيق التأثيرات على المعالم التي تم اكتشافها.	`Boolean`	`False`

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

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

تنفيذ المهمة

تستخدم أداة "التعرّف على الوجه" الطريقتَين detect() (مع وضع التشغيل IMAGE) وdetectForVideo() (مع وضع التشغيل VIDEO) لعرض الاستنتاجات. تعالج المهمة البيانات، وتحاول تمييز الوجوه، ثم تبلغ عن النتائج.

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

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

صورة

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

حملة فيديو

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

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

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

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

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

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

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

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

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