คู่มือการจัดรูปแบบใบหน้าสำหรับเว็บ

งานการปรับแต่งใบหน้าของ MediaPipe ช่วยให้คุณปรับแต่งใบหน้าในรูปภาพได้ คุณสามารถใช้งานนี้เพื่อสร้างรูปโปรไฟล์เสมือนจริงในสไตล์ต่างๆ

ตัวอย่างโค้ดที่อธิบายในวิธีการเหล่านี้มีอยู่ใน GitHub ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ รูปแบบ และตัวเลือกการกําหนดค่าของงานนี้ได้ที่ภาพรวม

ตัวอย่างโค้ด

โค้ดตัวอย่างสำหรับ Face Stylizer แสดงการใช้งานที่สมบูรณ์ของงานนี้ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และเริ่มต้นสร้างแอปแต่งรูปใบหน้าของคุณเอง คุณสามารถดู เรียกใช้ และแก้ไขตัวอย่างโค้ดแต่งรูปใบหน้าได้โดยใช้เว็บเบราว์เซอร์เท่านั้น

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้ Face Stylizer โดยเฉพาะ ดูข้อมูลทั่วไปเกี่ยวกับการตั้งค่าสภาพแวดล้อมการพัฒนาเว็บและ JavaScript รวมถึงข้อกำหนดเวอร์ชันแพลตฟอร์มได้ที่คู่มือการตั้งค่าสําหรับเว็บ

แพ็กเกจ JavaScript

โค้ด Face Stylizer มีให้ใช้งานผ่านแพ็กเกจ @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 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() เพื่อทริกเกอร์การอนุมาน งานนี้จะประมวลผลข้อมูล พยายามจัดสไตล์ใบหน้า แล้วรายงานผลลัพธ์ การเรียกใช้เมธอด Face Stylizer stylize() จะทํางานพร้อมกันและบล็อกเธรดอินเทอร์เฟซผู้ใช้

โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน

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

จัดการและแสดงผลลัพธ์

เครื่องมือแต่งใบหน้าจะแสดงผลออบเจ็กต์ MPImage ที่มีการแต่งใบหน้าที่โดดเด่นที่สุดในรูปภาพอินพุต

ต่อไปนี้เป็นตัวอย่างข้อมูลเอาต์พุตจากงานนี้

ภาพระยะใกล้ของผู้หญิงที่วาดด้วยดินสอและปากกามาร์กเกอร์

เอาต์พุตด้านบนสร้างขึ้นโดยใช้โมเดลภาพสเก็ตช์สีกับรูปภาพอินพุตต่อไปนี้

รูปภาพของผู้หญิงที่มีการใช้รูปภาพเพื่อสร้างเอาต์พุตก่อนหน้า