راهنمای سبک سازی چهره برای وب

وظیفه MediaPipe Face Stylizer به شما امکان می‌دهد استایل‌سازی‌های صورت را روی چهره‌های یک تصویر اعمال کنید. می توانید از این کار برای ایجاد آواتارهای مجازی در سبک های مختلف استفاده کنید.

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

نمونه کد

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

راه اندازی

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

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

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

با استفاده از دستور زیر می توانید بسته های مورد نیاز را از طریق NPM نصب کنید:

npm install @mediapipe/tasks-vision

اگر می خواهید کد وظیفه را با یک سرویس شبکه تحویل محتوا (CDN) وارد کنید، کد زیر را در تگ <head> در فایل HTML خود اضافه کنید: 

<!-- You can replace JSDeliver with another CDN if you prefer -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

مدل

وظیفه MediaPipe Face Stylizer به یک مدل آموزش دیده نیاز دارد که با این کار سازگار باشد. برای اطلاعات بیشتر در مورد مدل‌های آموزش‌دیده موجود برای استایلایزر صورت، به بخش مدل‌های نمای کلی کار مراجعه کنید.

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

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

کار را ایجاد کنید

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

مثال کد زیر استفاده از تابع createFromOptions() برای تنظیم کار نشان می دهد. تابع createFromOptions به شما این امکان را می دهد که Face Stylizer را با گزینه های پیکربندی سفارشی کنید.

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

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

داده ها را آماده کنید

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

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

Face Stylizer از متد stylize() برای استنتاج استفاده می کند. وظیفه داده ها را پردازش می کند، سعی می کند چهره ها را سبک کند، و سپس نتایج را گزارش می دهد. فراخوانی به روش Face Stylizer stylize() به صورت همزمان اجرا می شود و رشته رابط کاربری را مسدود می کند.

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می دهد: 

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

کنترل و نمایش نتایج

Face Stylizer یک شی MPImage را با تلطیف برجسته‌ترین چهره در تصویر ورودی برمی‌گرداند.

شکل زیر نمونه ای از داده های خروجی از این کار را نشان می دهد:

خروجی بالا با اعمال مدل Color sketch در تصویر ورودی زیر ایجاد شد: