دليل تنسيق الوجوه على الويب

تتيح لك مهمة "تجميل الوجه" من MediaPipe تطبيق أنماط على الوجوه في الصورة. يمكنك استخدام هذه المهمة لإنشاء صور رمزية افتراضية بأنماط مختلفة.

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

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

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

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

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

حِزم JavaScript

يتوفّر رمز 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);

معالجة النتائج وعرضها

تعرِض ميزة "تجميل الوجه" عنصرًا من النوع MPImage يتضمّن أسلوبًا للوجه الأكثر بروزًا في صورة الإدخال.

في ما يلي مثال على بيانات الإخراج من هذه المهمة:

صورة مقرّبة تم إنشاؤها لامرأة مرسومة بأسلوب رسم بقلم الرصاص والماركر

تم إنشاء الصورة أعلاه من خلال تطبيق نموذج رسم ألوان على صورة الإدخال التالية:

صورة للمرأة التي تم استخدام صورتها لإنشاء النتيجة السابقة