המשימה של MediaPipe לעיצוב פנים מאפשרת לכם להחיל עיצובי פנים על פנים בתמונות. במשימה הזו תוכלו ליצור דמויות וירטואליות במגוון סגנונות.
דוגמת הקוד שמתוארת בהוראות אלה זמינה במכשירים הבאים: GitHub. מידע נוסף על היכולות, המודלים ואפשרויות ההגדרה במשימה הזאת, ראו סקירה כללית.
קוד לדוגמה
הקוד לדוגמה של עיצוב פנים מעניק הטמעה מלאה של ב-JavaScript לעיונך. הקוד הזה עוזר לכם לבדוק את המשימה הזו כדי להתחיל ליצור אפליקציה משלכם לעיצוב פנים. אפשר להציג, להריץ ו דוגמה לעריכה של 'עיצוב פנים' בקוד באמצעות מודל בדפדפן.
הגדרה
בקטע הזה מתוארים השלבים העיקריים להגדרת סביבת הפיתוח במיוחד לשימוש בעיצוב פנים. לקבלת מידע כללי על הגדרת סביבת פיתוח של אתרים ו-JavaScript, כולל גרסת הפלטפורמה אפשר לעיין במדריך ההגדרה לאינטרנט.
חבילות JavaScript
הקוד לעיצוב פנים זמין דרך MediaPipe @mediapipe/tasks-vision
חבילת NPM. אפשר למצוא
להוריד את הספריות האלה על ידי ביצוע ההוראות שבפלטפורמה Setup
guide.
כדי להתקין את החבילות הנדרשות באמצעות 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 עם עיצוב ברמה הגבוהה ביותר
פנים בולטות בתמונת הקלט.
בדוגמה הבאה אפשר לראות את נתוני הפלט מהמשימה:
הפלט שלמעלה נוצר על ידי החלת שרטוט הצבעים של התמונה לקלט הבא:
