מדריך לעיצוב פנים לאינטרנט

המשימה 'סגנון פנים' ב-MediaPipe מאפשרת לכם להחיל סגנונות על פנים בתמונה. אתם יכולים להשתמש במשימה הזו כדי ליצור דמויות וירטואליות בסגנונות שונים.

דוגמת הקוד שמתוארת בהוראות האלה זמינה ב-GitHub. מידע נוסף על היכולות, המודלים והאפשרויות להגדרה של המשימה הזו זמין בסקירה הכללית.

קוד לדוגמה

הקוד לדוגמה של Face Stylizer מספק הטמעה מלאה של המשימה הזו ב-JavaScript, לעיונכם. הקוד הזה יעזור לכם לבדוק את המשימה הזו ולהתחיל ליצור אפליקציה משלכם לעיצוב פנים. אתם יכולים להציג, להריץ ולערוך את קוד הדוגמה של Face Stylizer רק באמצעות דפדפן האינטרנט.

הגדרה

בקטע הזה מתוארים השלבים העיקריים להגדרת סביבת הפיתוח, במיוחד לשימוש ב-Face Stylizer. מידע כללי על הגדרת סביבת הפיתוח לאינטרנט ול-JavaScript, כולל דרישות לגבי גרסת הפלטפורמה, זמין במדריך ההגדרה לאינטרנט.

חבילות JavaScript

הקוד של Face Stylizer זמין דרך החבילה @mediapipe/tasks-vision NPM של MediaPipe. אפשר למצוא את הספריות האלה ולהוריד אותן לפי ההוראות שמפורטות במדריך ההגדרה של הפלטפורמה.

אפשר להתקין את החבילות הנדרשות דרך NPM באמצעות הפקודה הבאה:

npm install @mediapipe/tasks-vision

אם רוצים לייבא את קוד המשימה באמצעות שירות של רשת CDN (Content Delivery Network), מוסיפים את הקוד הבא לתג <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 מאפשרת להתאים אישית את הכלי לשיפור התמונות של הפנים באמצעות אפשרויות תצורה.

הקוד הבא מראה איך ליצור ולהגדיר את המשימה עם אפשרויות בהתאמה אישית:

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 יכולה לעצב פנים בתמונות בכל פורמט שנתמך בדפדפן המארח. המשימה מטפלת גם בעיבוד מקדים של קלט הנתונים, כולל שינוי גודל, כיוון וריפוי ערכים.

הרצת המשימה

הכלי לשיפור התמונות של הפנים משתמש בשיטה stylize() כדי להפעיל מסקנות. המשימה מעבדת את הנתונים, מנסה לעצב את הפנים ואז מדווחת על התוצאות. קריאות לשיטה stylize() של Face Stylizer פועלות באופן סינכרוני וחוסמות את שרשור ממשק המשתמש.

הקוד הבא מראה איך לבצע את העיבוד באמצעות מודל המשימה:

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

טיפול בתוצאות והצגתן

הפונקציה Face Stylizer מחזירה אובייקט MPImage עם סגנון של הפנים הבולטים ביותר בתמונה שהוזנה.

בהמשך מוצגת דוגמה לנתוני הפלט של המשימה הזו:

תקריב שנוצר של אישה שצוירה בסגנון סקיצה בעיפרון ובסמן.

הפלט שלמעלה נוצר על ידי החלת המודל Color sketch על תמונת הקלט הבאה:

צילום של האישה שתמונה שלה שימשה ליצירת הפלט הקודם