نقدّم لك LiteRT: يوفّر هذا الوضع بيئة تشغيل عالية الأداء للذكاء الاصطناعي على الجهاز فقط، والمعروفة سابقًا باسم TensorFlow Lite.

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

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

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

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

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

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

حِزم JavaScript

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

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

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

إنشاء المهمة

استخدِم إحدى دوالّ createFrom...() لتحديد معالم الوجه لأجل إعداد المهمة لإجراء الاستنتاجات. استخدِم الدالة 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`	ما إذا كان "مُحدِّد معالم الوجه" يُخرج أشكالًا ممزوجة للوجه تُستخدَم أشكال مزج الوجه لعرض نموذج الوجه الثلاثي الأبعاد.	`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]
    ...

تعرض الصورة التالية عرضًا مرئيًا لمعدّل تكرار المهمة:

رجل تمّ تخطيط مناطق وجهه بشكل هندسي للإشارة إلى شكل وجهه وأبعاده

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