Tags:
Node Thumbnail

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

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

No Description

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

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

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

No Description

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

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

Get latest news from Blognone

Comments

By: singhalnw on 16 September 2018 - 06:45 #1071048

โคตรดีเลยอ่ะ

By: A4
iPhoneAndroidRed HatSUSE
on 16 September 2018 - 07:23 #1071049
A4's picture

Don't make me think

By: KuLiKo
iPhoneWindows PhoneAndroidWindows
on 16 September 2018 - 11:10 #1071081

คนเขียนเว็บสบายขึ้นนิดนึง แต่ต่อไปรู้สึกเสี่ยงตกงาน…