راهنمای تشخیص چهره برای وب

وظیفه تشخیص چهره MediaPipe به شما امکان می‌دهد چهره‌ها را در یک تصویر یا ویدیو تشخیص دهید. می‌توانید از این وظیفه برای مکان‌یابی چهره‌ها و ویژگی‌های صورت در یک فریم استفاده کنید. این وظیفه از یک مدل یادگیری ماشین (ML) استفاده می‌کند که با تصاویر تکی یا جریان پیوسته‌ای از تصاویر کار می‌کند. این وظیفه مکان چهره‌ها را به همراه نکات کلیدی صورت زیر خروجی می‌دهد: چشم چپ، چشم راست، نوک بینی، دهان، انحراف چشم چپ و انحراف چشم راست.

این دستورالعمل‌ها نحوه استفاده از تشخیص چهره برای برنامه‌های وب و جاوا اسکریپت را به شما نشان می‌دهند. برای اطلاعات بیشتر در مورد قابلیت‌ها، مدل‌ها و گزینه‌های پیکربندی این وظیفه، به نمای کلی مراجعه کنید.

مثال کد

کد نمونه برای Face Detector، پیاده‌سازی کاملی از این کار را در جاوا اسکریپت برای مرجع شما ارائه می‌دهد. این کد به شما کمک می‌کند تا این کار را آزمایش کنید و ساخت برنامه تشخیص چهره خود را شروع کنید. می‌توانید مثال Face Detector را فقط با استفاده از مرورگر وب خود مشاهده، اجرا و ویرایش کنید.

راه‌اندازی

این بخش مراحل کلیدی برای تنظیم محیط توسعه شما به طور خاص برای استفاده از Face Detector را شرح می‌دهد. برای اطلاعات کلی در مورد تنظیم محیط توسعه وب و جاوا اسکریپت، از جمله الزامات نسخه پلتفرم، به راهنمای تنظیم برای وب مراجعه کنید.

بسته‌های جاوا اسکریپت

کد تشخیص چهره از طریق بسته NPM مدیاپایپ @mediapipe/tasks-vision در دسترس است. می‌توانید با دنبال کردن دستورالعمل‌های موجود در راهنمای راه‌اندازی پلتفرم، این کتابخانه‌ها را پیدا و دانلود کنید.

شما می‌توانید بسته‌های مورد نیاز را از طریق 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 به یک مدل آموزش‌دیده نیاز دارد که با این وظیفه سازگار باشد. برای اطلاعات بیشتر در مورد مدل‌های آموزش‌دیده موجود برای تشخیص چهره، به بخش مدل‌های نمای کلی وظیفه مراجعه کنید.

یک مدل را انتخاب و دانلود کنید و سپس آن را در دایرکتوری پروژه خود ذخیره کنید:

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

وظیفه را ایجاد کنید

از یکی از توابع createFrom...() در Face Detector برای آماده‌سازی وظیفه جهت اجرای استنتاج‌ها استفاده کنید. از تابع createFromModelPath() به همراه یک مسیر نسبی یا مطلق به فایل مدل آموزش‌دیده استفاده کنید. اگر مدل شما از قبل در حافظه بارگذاری شده است، می‌توانید از متد createFromModelBuffer() استفاده کنید.

مثال کد زیر استفاده از تابع createFromOptions() را برای تنظیم وظیفه نشان می‌دهد. تابع createFromOptions به شما امکان می‌دهد تا Face Detector را با گزینه‌های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد گزینه‌های پیکربندی، به Configuration options مراجعه کنید.

کد زیر نحوه ساخت و پیکربندی وظیفه با گزینه‌های سفارشی را نشان می‌دهد:

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

گزینه‌های پیکربندی

این وظیفه گزینه‌های پیکربندی زیر را برای برنامه‌های وب و جاوا اسکریپت دارد:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش‌فرض
`option_var_1_web_js`	حالت اجرا را برای وظیفه تنظیم می‌کند. دو حالت وجود دارد: تصویر: حالت ورودی‌های تک تصویر. ویدئو: حالتی برای فریم‌های رمزگشایی‌شده‌ی یک ویدئو یا روی پخش زنده‌ی داده‌های ورودی، مثلاً از یک دوربین.	{ `IMAGE, VIDEO` }	`IMAGE`
`minDetectionConfidence`	حداقل امتیاز اطمینان برای تشخیص چهره که موفقیت‌آمیز تلقی شود.	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	حداقل آستانه‌ی غیرحداکثریِ سرکوب برای تشخیص چهره که باید همپوشانی در نظر گرفته شود.	`Float [0,1]`	`0.3`

آماده‌سازی داده‌ها

تشخیص چهره می‌تواند چهره‌ها را در تصاویر با هر فرمتی که توسط مرورگر میزبان پشتیبانی می‌شود، تشخیص دهد. این وظیفه همچنین پیش‌پردازش داده‌های ورودی، از جمله تغییر اندازه، چرخش و نرمال‌سازی مقادیر را انجام می‌دهد. برای تشخیص چهره در ویدیوها، می‌توانید از API برای پردازش سریع یک فریم در هر زمان استفاده کنید و با استفاده از مهر زمانی فریم، زمان وقوع چهره‌ها در ویدیو را تعیین کنید.

اجرای وظیفه

تشخیص‌دهنده‌ی چهره از متدهای detect() (با حالت اجرای image ) و detectForVideo() (با حالت اجرای video ) برای ایجاد استنتاج استفاده می‌کند. این وظیفه داده‌ها را پردازش می‌کند، سعی در تشخیص چهره‌ها دارد و سپس نتایج را گزارش می‌دهد.

فراخوانی متدهای detect() و detectForVideo() در Face Detector به صورت همزمان اجرا می‌شوند و نخ رابط کاربری را مسدود می‌کنند. اگر چهره‌ها را در فریم‌های ویدیویی از دوربین دستگاه تشخیص دهید، هر تشخیص، نخ اصلی را مسدود می‌کند. می‌توانید با پیاده‌سازی web workerها برای اجرای متدهای 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 نحوه نمایش نتایج برگردانده شده از وظیفه را نشان می‌دهد، به مثال مراجعه کنید.