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

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

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

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

يوفر الرمز النموذجي لأداة تجميل الوجه تنفيذًا كاملاً لهذه المهمة في 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 -->
<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/

إنشاء المهمة

استخدِم إحدى وظائف 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 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"
      },
    });

إعداد البيانات

بإمكان "أداة تخطيط الوجه" تخصيص الوجوه في الصور بأي تنسيق متوافق مع المتصفح المضيف. تعالج المهمة أيضًا المعالجة المسبقة لإدخال البيانات، بما في ذلك تغيير الحجم والتدوير وتسوية القيمة.

تنفيذ المهمة

يستخدم "أداة تخطيط الوجه" الطريقة stylize() لاستنتاج الاستنتاجات. تعالج المهمة البيانات، وتحاول تصميم الوجوه، ثم تبلغ عن النتائج. يتم تنفيذ الطلبات التي يتم إجراؤها إلى طريقة stylize() "معدِّل الوجه" بشكل متزامن ويتم حظر سلسلة محادثات واجهة المستخدم.

توضح التعليمة البرمجية التالية كيفية تنفيذ المعالجة باستخدام نموذج المهمة:

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

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

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

ويوضح ما يلي مثالاً على بيانات المخرجات من هذه المهمة:

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