راهنمای تشخیص چهره شاخص برای وب، راهنمای تشخیص چهره نقطه عطف برای وب

وظیفه MediaPipe Face Landmarker به شما امکان می‌دهد نشانه‌های چهره و حالات چهره را در تصاویر و ویدیوها تشخیص دهید. می‌توانید از این وظیفه برای شناسایی حالات چهره انسان، اعمال فیلترها و جلوه‌های چهره و ایجاد آواتارهای مجازی استفاده کنید. این وظیفه از مدل‌های یادگیری ماشین (ML) استفاده می‌کند که می‌توانند با تصاویر واحد یا جریان پیوسته‌ای از تصاویر کار کنند. این وظیفه، نشانه‌های سه‌بعدی چهره، نمرات blendshape (ضرایب نشان دهنده حالات چهره) را برای استنباط سطوح دقیق چهره در زمان واقعی و ماتریس‌های تبدیل را برای انجام تبدیل‌های مورد نیاز برای رندر جلوه‌ها، خروجی می‌دهد.

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

مثال کد

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

راه‌اندازی

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

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

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

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

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

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

از یکی از توابع createFrom...() مربوط به Face Landmarker برای آماده‌سازی وظیفه جهت اجرای استنتاج‌ها استفاده کنید. از تابع 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
    });

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

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

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش‌فرض
`running_mode`	حالت اجرا را برای وظیفه تنظیم می‌کند. دو حالت وجود دارد: تصویر: حالت ورودی‌های تک تصویر. ویدئو: حالتی برای فریم‌های رمزگشایی‌شده‌ی یک ویدئو یا روی پخش زنده‌ی داده‌های ورودی، مثلاً از یک دوربین.	{ `IMAGE, VIDEO` }	`IMAGE`
`numFaces`	حداکثر تعداد چهره‌هایی که می‌توانند توسط `FaceLandmarker` شناسایی شوند. هموارسازی فقط زمانی اعمال می‌شود که `num_faces` روی ۱ تنظیم شده باشد.	`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`	آیا خروجی Face Landmarker ترکیبی از شکل‌های چهره است یا خیر. شکل‌های ترکیبی چهره برای رندر مدل سه‌بعدی چهره استفاده می‌شوند.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	اینکه آیا FaceLandmarker ماتریس تبدیل چهره را خروجی می‌دهد یا خیر. FaceLandmarker از این ماتریس برای تبدیل نشانه‌های چهره از یک مدل چهره استاندارد به چهره شناسایی شده استفاده می‌کند، بنابراین کاربران می‌توانند جلوه‌هایی را روی نشانه‌های شناسایی شده اعمال کنند.	`Boolean`	`False`

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

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

اجرای وظیفه

ابزار Face Landmarker از متدهای detect() (با حالت اجرایی IMAGE ) و detectForVideo() (با حالت اجرایی VIDEO ) برای ایجاد استنتاج استفاده می‌کند. این وظیفه داده‌ها را پردازش می‌کند، سعی می‌کند چهره‌ها را به عنوان نقاط عطف شناسایی کند و سپس نتایج را گزارش می‌دهد.

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

مدیریت و نمایش نتایج

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

در زیر نمونه‌ای از داده‌های خروجی این وظیفه نشان داده شده است:

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

تصویر زیر، خروجی این وظیفه را به صورت بصری نشان می‌دهد:

مردی که نواحی صورتش به صورت هندسی ترسیم شده تا شکل و ابعاد صورتش را نشان دهد

کد مثال Face Landmarker نحوه نمایش نتایج برگردانده شده از وظیفه را نشان می‌دهد، به مثال مراجعه کنید.