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

تتيح لك مهمة 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 نموذجًا مدرَّبًا متوافقًا مع هذا النموذج. المهمة. لمزيد من المعلومات حول النماذج المدرَّبة المتاحة لاستخدام "أداة تغيير نمط الوجه"، يُرجى الاطّلاع على نظرة عامة على المهمة قسم النماذج.

حدد نموذجًا ونزّله ثم خزّنه في دليل المشروع:

<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" بنمط أكثر تكرارًا. الوجه البارز في الصورة التي تم إدخالها

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

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