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

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

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

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

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

<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 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)

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

بالنسبة إلى الصورة التي لا تحتوي على مربّعات إحاطة، يمكنك الاطّلاع على الصورة الأصلية.

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