เมื่อ AI สามารถแปลงภาพ GUI ของหน้าจอโปรแกรม ให้กลายเป็นซอร์โค้ดได้ ต่อไปมันคงมาเป็นผู้ช่วยโปรแกรมเมอร์ฝั่ง Front-end ก็ได้นะ...หรือจะแย่งงานเราในอนาคตเปล่าหว้า ก็ไม่รู้ซินะ
ก่อนหน้านี้แอดได้ลงข่าวงานวิจัยของโปรเจค DeepCoder จากไมโครซอฟต์ และ Cambridge ที่ใช้ AI เป็น Deep learning สามารถเขียนโปรแกรมขึ้นมาเอง เพียงแค่ดูซอร์สโค้ดตัวอย่าง ซึ่งสร้างความฮือฮามาแล้วรอบหนึ่ง
คราวนี้เป็นงานวิจัยสดๆ ร้อน เขาได้สนอวิธีการใหม่ในการเขียนโค้ด ที่ตั้งชื่อว่า pix2Code (ก็คงมาจากชื่อเต็ม Pixel to source code)
pix2Code มันเป็นวิธีสร้างซอร์สดโค้ด จากภาพหน้าจอ GUI ของโปรแกรม ก็ที่ทีมกราฟฟิกดีไซน์ออกแบบให้พวกเราชาวโปรแกรมเมอร์ ได้นำไปเขียนโปรแกรมนั่นแหละ ...เรียกว่า ตอนนี้ขอมีแค่ภาพอย่างเดียว ตัว AI ก็ Generate ซอร์สโค้ดให้ใช้งานอย่างอัตโนมัติ สบายปรื๋อ!!!!
จากนั้นพวกเราจะเอาโค้ดไปเขียน Back-end ต่อ จะพัฒนาซอฟต์แวร์ เว็บไซต์ โมบายแอพ จะทำอะไร ก็แล้วแต่เราอีกที
ในทางเทคนิคโดยย่อของงานวิจัยชิ้นนี้ pix2Code จะใช้ AI เป็น Deep learning ซึ่งข้างในเป็นโมเดล CNN กับ LSTM ใช้สองเทคนิคผสมกัน มาช่วยสร้างโค้ดจาก input ซึ่งเป็นภาพไฟล์รูปภาพ โดยโค้ดที่ถูกสร้างออกมาจะแบ่งเป็น 3 แพลท์ฟอม ได้แก่ iOS, Android และเว็บ (HTML/CSS)
ทว่าปัจจุบันเทคนิคนี้ยังให้ความถูกต้องแค่ 77%
...อะฮะ ตอนนี้อาจสร้างโค้ดได้ไม่แม่นเท่าไรแฮะ (ใจเย็นๆ โปรแกรมเมอร์ยังไม่ตกงานง่ายๆ) แต่ถ้ามีใครพัฒนาต่อไป ก็อาจแม่นยำมากขึ้น หรืออาจมี paper ที่ใช้ AI เขียนโปรแกรมอัตโนมัติ ทำนองเดียวกันนี้มากขึ้น เพื่อมาเขย่าขาเก้าอี้โปรแกรมเมอร์เรื่อยๆ ก็ได้
ใครสนใจดูวีดีโอ สาธิตการใช้เทคนิคนี้ ก็ดูได้ที่ลิงค์ จะเห็นว่า แค่วาดรูปหน้าจอ แล้วก็รันออกมาเป็นโค้ดบนแพลทฟอร์ม iOS กับตัวอย่างสร้างเป็นไฟล์ HTML
https://www.youtube.com/watch?v=pqKeXkhFA3I&feature=youtu.be
ส่วนต้นฉบับ Paper ของคุณ Tony Beltramelli เผื่อใครสนใจจะนำไปพัฒนาต่อ
https://arxiv.org/abs/1705.07962
https://github.com/tonybeltramelli/pix2code
ปล. เสียดายเข้าไปดู Github แล้ว เขาไม่มีซอร์สโค้ดแจกให้ เลยอดลองรันเล่นเลย 555
++++++++++++++++++++++++++++
อ่อ AI ในที่นี้ ไม่ใช่ Adobe Illustrator ชื่อย่อเหมือนกัน แต่คนละความหมาย
back-end front-end 在 什麼是前端？後端？全端？軟體工程師該走哪端好？【電腦說人 ... 的八卦
【電腦說人話】 | Frontend, Backend, or Fullstack? ... Career Path (Codecademy) https://bit.ly/3niTwLN 前端工程師密技 Front End Eng - Career ... ... <看更多>