วันนี้มาแนะนำ AI ของบริษัท Microsoft ที่ใช้แปลงรูปาภพหน้าจอที่เราออกแบบไว้ไม่ว่าจะเป็น Wireframe Mockup หรือ Prototype ให้กลายเป็น HTML ง่าย ๆ เพียงแค่ไม่กี่นาที

เริ่มจากตรวจสอบรูปแบบการออกแบบ โดยใช้ Custom Vision Model ที่ผ่านการฝึกอบรมหรือสอน (Train) เพื่อให้ AI ทำการจดจำวัตถุกับรูปแบบการวาดด้วยมือ ซึ่ง HTML จะถูกใช้เพื่อตรวจจับองค์ประกอบการออกแบบที่มีความหมายลงในภาพ

เริ่มทำความเข้าใจกับข้อความที่เขียนด้วยลายมือ ซึ่งแต่ละองค์ประกอบที่ตรวจพบจะถูกส่งผ่านบริการการจำแนกข้อความเพื่อแยกเนื้อหาที่เขียนด้วยลายมือ ตอนนี้ยังไม่ซัพพอทภาษาไทยนะครับ

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

สุดท้ายทำการสร้าง HTMl โดย HTML ที่ถูกต้องจะถูกสร้างขึ้นตามเลย์เอาต์ที่ตรวจพบซึ่งมีองค์ประกอบการออกแบบที่ตรวจพบ

ไปลองดูวิธีการใช้งานกันครับว่าเจ้า AI ตัวนี้มันฉลาดขนาดไหน

1. เข้าไปที่เว็บไซต์ https://sketch2code.azurewebsites.net/

2. กดไปที่ปุ่ม "Upload Design" ตามรูปภาพ

3. เลือกรูปภาพหน้าจอที่เราได้ออกแบบเอาไว้

4. แล้วระบบจะทำการประมวลผล ซึ่งใช้เวลาไม่นานเลยครับ

เมื่อประมวลผลเสร็จแล้วให้เรากดที่ปุ่ม "Download Your HTML Code"

5. จากนั้นมาดูผลลัพธ์ที่ได้กัน

ที่มา : รับทำโปรเจคจบ.com