แปลงรูปภาพ Wireframe หรือ Mockup ให้เป็น HTML code
โดย: Administrator
เมื่อ: 06/01/2563 11:20:44
Tags: AI, แปลงรูปภาพเป็น HTML, ใช้ AI แปลงรูปภาพเป็นโค้ดโปรแกรม, AI วิเคราะห์, ปัญญาประดิษฐ์, Transform any hands-drawn design into a HTML code with AI, Microsoft AI,
วันนี้มาแนะนำ 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. จากนั้นมาดูผลลัพธ์ที่ได้กัน