1. 程式人生 > >三年後,人工智慧將徹底改變前端開發?

三年後,人工智慧將徹底改變前端開發?

點選上方“CSDN”,選擇“置頂公眾號”

關鍵時刻,第一時間送達!

近幾天,因為阮一峰老師的一條微博,我們看到了這樣一個專案:https://weibo.com/1400854834/FE1Tz8TIB?filter=hot&root_comment_id=0

GitHub排行榜上排名第一的專案是:神經網路通過深度學習,自動把設計稿變成HTML程式碼。在專案作者Emil Wallner看來,三年後,人工智慧將徹底改變前端開發,提高prototyping速度,降低構建軟體的障礙。

然後,就有網友紛紛跟帖評論,

“這是大好的事情,真心希望通過 AI 能自動將設計稿轉換成高質量的前端程式碼,這樣前端工程師們就能去做更有價值和挑戰的事,比如資料視覺化、圖形互動化、產品體驗提升等等做不完的事。”

當然,也有反對意見,“並不贊成這個觀點。這個工具能做的就是佈局和樣式,而前端開發之所以能被稱為開發,很重要的原因是js的存在。”

先來圍觀下這位作者在FloydHub上的部落格原文,連結:https://blog.floydhub.com/Turning-design-mockups-into-code-with-deep-learning/。

然後,我們還將呈現原作者在GitHub上的程式碼(連結:https://github.com/emilwallner/Screenshot-to-code-in-Keras)分享出來,希望得到每一個正在和即將從事前端開發的程式設計師的看法。

Just enjoy it,

目前,自動化前端開發最大的障礙是計算能力,不過,作者認為可以運用當前的深度學習演算法以及訓練資料以實現前端的自動化。

在既有模型中,作者將通過訓練神經網路基於設計模型的圖片,進行基本HTML和CSS網站的編寫。

在除錯過程中,首先是Hello Word版,接著是主神經網路層,最後是訓練其歸納能力。

構建過程:

1. 給訓練的神經網路提供設計影象

0?wx_fmt=png

2. 神經網路將影象轉換成HTML標記

0?wx_fmt=png

3. 渲染輸出

0?wx_fmt=png

安裝

FloydHub

0?wx_fmt=png

本地

0?wx_fmt=png

資料夾結構

0?wx_fmt=png

Hello World

0?wx_fmt=png

HTML

0?wx_fmt=png

Bootstrap

0?wx_fmt=png

————— 推薦閱讀 —————

點選圖片即可閱讀

0?wx_fmt=png

0?wx_fmt=png

640?wx_fmt=png

640?wx_fmt=jpeg0?wx_fmt=gif