המשימה 'סטיילר פנים' של MediaPipe מאפשרת לכם להחיל עיצובי פנים על פנים בתמונה. תוכלו להשתמש במשימה הזו כדי ליצור דמויות וירטואליות בסגנונות שונים.
דוגמת הקוד שמתוארת בהוראות האלו זמינה ב-GitHub. למידע נוסף על היכולות, המודלים ואפשרויות ההגדרה של המשימה הזו, קראו את הסקירה הכללית.
קוד לדוגמה
הקוד לדוגמה של Face Stylizer מספק יישום מלא של המשימה הזו ב-JavaScript לעיונך. בעזרת הקוד הזה תוכלו לבדוק את המשימה ולהתחיל ליצור אפליקציה משלכם לעיצוב פנים. תוכלו להציג, להריץ ולערוך את הקוד לדוגמה של סטייליז הפנים באמצעות דפדפן האינטרנט בלבד.
הגדרה
בקטע הזה מתוארים שלבים חשובים להגדרה של סביבת הפיתוח באופן ספציפי לשימוש בסטיילר פנים. במדריך ההגדרה לאינטרנט תוכלו לקרוא מידע כללי על ההגדרה של סביבת הפיתוח באינטרנט וב-JavaScript, כולל הדרישות לגרסת הפלטפורמה.
חבילות JavaScript
ניתן למצוא את הקוד לעיצוב פנים דרך חבילת @mediapipe/tasks-vision
NPM MediaPipe. כדי למצוא ולהוריד את הספריות האלה, עליכם לפעול לפי ההוראות המפורטות במדריך ההגדרה של הפלטפורמה.
אתם יכולים להתקין את החבילות הנדרשות דרך 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() כדי לגרום להסקת מסקנות. המשימה מעבדת את הנתונים, מנסה לעצב את הפנים ואז מדווחת על התוצאות.
קריאות ל-method stylize() של סטייטר הפנים פועלות באופן סינכרוני וחוסמות את ה-thread של ממשק המשתמש.
הקוד הבא מדגים איך מבצעים את העיבוד באמצעות מודל המשימה:
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
טיפול בתוצאות והצגתן
באמצעות סטיילר הפנים מחזיר אובייקט MPImage עם עיצוב של הפנים הבולטות ביותר בתמונת הקלט.
דוגמה לנתוני הפלט מהמשימה הזאת:
הפלט שלמעלה נוצר על ידי החלת המודל שרטוט צבע על תמונת הקלט הבאה:
