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

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

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

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

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

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

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

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

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

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

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

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

إنشاء المهمة

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

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

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

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

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

طفلان مع مربّعات حدودية حول وجهيهما

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

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