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

تتيح لك مهمة MediaPipe Face Galleryer اكتشاف معالم الوجه وتعبيرات الوجه في الصور ومقاطع الفيديو. يمكنك استخدام هذه المهمة لتحديد تعابير الوجه البشرية، وتطبيق فلاتر وتأثيرات للوجه، وإنشاء صور رمزية افتراضية. تستخدم هذه المهمة نماذج التعلم الآلي (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 Premierer نموذجًا مدرّبًا ومتوافقًا مع هذه العملية. المهمة. لمزيد من المعلومات عن النماذج المدرَّبة المتاحة لاستخدام ميزة "التعرّف على الوجه"، يُرجى الاطّلاع على نظرة عامة على المهمة قسم النماذج.

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

<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 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 ما إذا كانت أداة "التعرُّف على الوجه" تُخرج أشكال مزج الوجه. يتم استخدام أشكال مزج الوجه لعرض نموذج الوجه الثلاثي الأبعاد. 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();
  });
}

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

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

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

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

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]
    ...

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

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