งานสไตไลซ์ใบหน้าของ MediaPipe ช่วยให้คุณใช้การจัดรูปแบบใบหน้ากับใบหน้าในรูปภาพได้ คุณใช้งานนี้เพื่อสร้างรูปโปรไฟล์เสมือนจริงในสไตล์ต่างๆ ได้
ตัวอย่างโค้ดที่อธิบายไว้ในวิธีการเหล่านี้มีอยู่ใน 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() กับสัมพัทธ์หรือ
Absolute Path ไปยังไฟล์โมเดลที่ฝึก หากโหลดโมเดลลงใน
หน่วยความจำของคุณ คุณสามารถใช้เมธอด 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 ที่มีสไตล์ของ
ใบหน้าที่โดดเด่นในอินพุต
ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
เอาต์พุตด้านบนสร้างขึ้นโดยใช้ภาพร่างสี ลงในรูปภาพอินพุตต่อไปนี้
