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

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

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

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

مثال على الرمز

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

الإعداد

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

حِزم JavaScript

تتوفّر تعليمة Face Landmarker البرمجية من خلال حزمة @mediapipe/tasks-vision NPM في MediaPipe. يمكنك العثور على هذه المكتبات وتنزيلها باتّباع التعليمات الواردة في دليل الإعداد الخاص بالمنصة.

يمكنك تثبيت الحِزم المطلوبة من خلال 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 Face Landmarker نموذجًا مدرَّبًا متوافقًا مع هذه المهمة. لمزيد من المعلومات حول النماذج المدرَّبة المتاحة لميزة Face Landmarker، يُرجى الاطّلاع على نظرة عامة على المهمة قسم "النماذج".

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

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

إنشاء المهمة

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

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

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

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: الوضع المخصّص لإدخال صورة واحدة. الفيديو: الوضع المخصّص للإطارات التي تم فك ترميزها من فيديو أو بث مباشر لبيانات الإدخال، مثل البيانات الواردة من كاميرا	‎{`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`	تحديد ما إذا كان Face Landmarker يعرض أشكال الوجه. يتم استخدام أشكال الوجه الممزوجة لعرض نموذج الوجه الثلاثي الأبعاد.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	لتحديد ما إذا كان سيتم عرض مصفوفة تحويل الوجه في FaceLandmarker تستخدم أداة FaceLandmarker المصفوفة لتحويل معالم الوجه من نموذج وجه أساسي إلى الوجه الذي تم رصده، ما يتيح للمستخدمين تطبيق المؤثرات على المعالم التي تم رصدها.	`Boolean`	`False`

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

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

تنفيذ المهمة

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

يتم تنفيذ طلبات البيانات إلى طريقتَي Face Landmarker 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 Landmarker عنصر نتيجة لكل عملية رصد. يحتوي عنصر النتيجة على شبكة وجوه لكل وجه تم رصده، مع إحداثيات لكل معلم من معالم الوجه. اختياريًا، يمكن أن يحتوي عنصر النتيجة أيضًا على أشكال مزجية تشير إلى تعابير الوجه، ومصفوفة تحويل الوجه لتطبيق مؤثرات الوجه على المواضع المحدّدة التي تم رصدها.

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

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 Landmarker كيفية عرض النتائج التي تعرضها المهمة، يمكنك الاطّلاع على المثال.