เมื่อประมาณปลายเดือนที่แล้ว Microsoft AI Lab ได้เปิดตัวโปรเจ็กต์ Sketch2Code เว็บแอพพลิเคชั่นที่จะมาช่วยย่นระยะเวลาการออกแบบ UI ด้วยการใช้ AI ช่วยแปลงภาพสเก็ตช์ wireframe ให้กลายเป็นโค้ด HTML ที่สามารถนำไปเปิดกับเบราว์เซอร์เพื่อใช้แสดงเป็นโปรโตไทป์หรือนำไปแก้ไขต่อได้ภายในเวลาไม่กี่วินาที

สิ่งที่ผู้ใช้ต้องทำก็เพียงแค่อัพโหลดภาพที่ต้องการแปลงขึ้นไปยังเว็บ Sketch2Code ตัวเว็บแอพจะรันโมเดลที่ได้เตรียมไว้เพื่อคาดเดา HTML element ที่น่าจะเป็น รวมถึงแปลงลายมือเป็นข้อความให้ด้วย Text Recognition Service

จากนั้น Sketch2Code จะใช้อัลกอริทึมช่วยจัดเลย์เอาต์โดยวัดช่องว่างระหว่างวัตถุที่ได้จากการคาดเดาเพื่อตีโครงสร้าง grid ให้ครอบคลุมวัตถุทุกๆ ชิ้น และนำข้อมูลทั้งหมดมาประกอบกันเพื่อสร้างผลลัพธ์ออกมาเป็นโค้ด HTML ที่นักพัฒนาสามารถดาวน์โหลดไปใช้ได้

เพื่อการนี้ไมโครซอฟท์ได้ฝึก AI กับภาพสเก็ตช์เป็นจำนวนถึงหลักล้านรูปด้วย Custom Vision Service จนได้โมเดลที่สามารถระบุประเภทของ UI จากวัตถุที่วาดด้วยลายมือ ยกตัวอย่างเช่น กล่องข้อความ, ปุ่มหรือกล่อง combobox

และพัฒนาเว็บแอพพลิเคชั่นซึ่งเรียกใช้ความสามารถของ AI ผ่านแพลตฟอร์ม Azure Cloud ตามไดอะแกรมข้างล่าง

ท่านใดสนใจสามารถเข้าไปใช้งานได้ที่เว็บ Sketch2Code และเข้าไปศึกษาตัวโค้ดได้ที่ GitHub ครับ

ที่มา - Microsoft AI Lab , Microsoft Azure Blog via MSPoweruser