前端要完！人工智慧已經能實現自動編寫 HTML 和 CSS
點選上方“CSDN”，選擇“置頂公眾號”
關鍵時刻，第一時間送達！
【CSDN 編者按】一個月前，我們曾發表過一篇標題為《三年後，人工智慧將徹底改變前端開發？》的文章，其中介紹了一個彼時名列 GitHub 排行榜 TOP 1 的專案 —— Screenshot-to-code-in-Keras。在這個專案中，神經網路通過深度學習，自動把設計稿變成 HTML 和 CSS 程式碼，同時其作者 Emil Wallner 表示，“三年後，人工智慧將徹底改變前端開發”。
這個 Flag 一立，即引起了國內外非常熱烈的討論，有喜有憂，有褒揚有反對。對此，Emil Wallner 則以非常嚴謹的實踐撰寫了系列文章，尤其是在《Turning Design Mockups Into Code With Deep Learning》一文中，詳細分享了自己是如何根據 pix2code 等論文構建了一個強大的前端程式碼生成模型，並細講了其利用 LSTM 與 CNN 將設計原型編寫為 HTML 和 CSS 網站的過程。
以下為全文：
在未來三年內，深度學習將改變前端開發，它可以快速建立原型，並降低軟體開發的門檻。
去年，該領域取得了突破性的進展，其中 Tony Beltramelli 發表了 pix2code 的論文[1]，而 Airbnb 則推出了sketch2code[2]。
目前，前端開發自動化的最大障礙是計算能力。但是，現在我們可以使用深度學習的演算法，以及合成的訓練資料，探索人工前端開發的自動化。
本文中，我們將展示如何訓練神經網路，根據設計圖編寫基本的 HTML 和 CSS 程式碼。以下是該過程的簡要概述：
提供設計圖給經過訓練的神經網路
神經網路把設計圖轉化成 HTML 程式碼
大圖請點：https://blog.floydhub.com/generate_html_markup-b6ceec69a7c9cfd447d188648049f2a4.gif
渲染畫面
我們將通過三次迭代建立這個神經網路。
首先，我們建立一個簡化版，掌握基礎結構。第二個版本是 HTML，我們將集中討論每個步驟的自動化，並解釋神經網路的各層。在最後一個版本——Boostrap 中，我們將建立一個通用的模型來探索 LSTM 層。
你可以通過 Github[3] 和 FloydHub[4] 的 Jupyter notebook 訪問我們的程式碼。所有的 FloydHub notebook 都放在“floydhub”目錄下，而 local 的東西都在“local”目錄下。
這些模型是根據 Beltramelli 的 pix2code 論文和 Jason Brownlee 的“影象標註教程”[5]
如果你剛剛接觸深度學習，那麼我建議你先熟悉下 Python、反向傳播演算法、以及卷積神經網路。你可以閱讀我之前發表的三篇文章：
開始學習深度學習的第一週[6]
通過程式設計探索深度學習發展史[7]
利用神經網路給黑白照片上色[8]
核心邏輯
我們的目標可以概括為：建立可以生成與設計圖相符的 HTML 及 CSS 程式碼的神經網路。
在訓練神經網路的時候，你可以給出幾個截圖以及相應的 HTML。
神經網路通過逐個預測與之匹配的 HTML 標籤進行學習。在預測下一個標籤時，神經網路會檢視截圖以及到這個點為止的所有正確的 HTML 標籤。
下面的 Google Sheet 給出了一個簡單的訓練資料：
https://docs.google.com/spreadsheets/d/1xXwarcQZAHluorveZsACtXRdmNFbwGtN3WMNhcTdEyQ/edit?usp=sharing
當然，還有其他方法[9]可以訓練神經網路，但建立逐個單詞預測的模型是目前最普遍的做法，所以在本教程中我們也使用這個方法。
請注意每次的預測都必須基於同一張截圖，所以如果神經網路需要預測 20 個單詞，那麼它需要檢視同一張截圖 20 次。暫時先把神經網路的工作原理放到一邊，讓我們先了解一下神經網路的輸入和輸出。
讓我們先來看看“之前的 HTML 標籤”。假設我們需要訓練神經網路預測這樣一個句子：“I can code。”當它接收到“I”的時候，它會預測“can”。下一步它接收到“I can”，繼續預測“code”。也就是說，每一次神經網路都會接收所有之前的單詞，但是僅需預測下一個單詞。
神經網路根據資料建立特徵，它必須通過建立的特徵把輸入資料和輸出資料連線起來，它需要建立一種表現方式來理解截圖中的內容以及預測到的 HTML 語法。這個過程積累的知識可以用來預測下個標籤。
利用訓練好的模型開展實際應用與訓練模型的過程很相似。模型會按照同一張截圖逐個生成文字。所不同的是，你無需提供正確的 HTML 標籤，模型只接受迄今為止生成過的標籤，然後預測下一個標籤。預測從“start”標籤開始，當預測到“end”標籤或超過最大限制時終止。下面的 Google Sheet 給出了另一個例子：
https://docs.google.com/spreadsheets/d/1yneocsAb_w3-ZUdhwJ1odfsxR2kr-4e_c5FabQbNJrs/edit#gid=0
Hello World 版本
讓我們試著建立一個“hello world”的版本。我們給神經網路提供一個顯示“Hello World”的網頁截圖，並教它怎樣生成 HTML 程式碼。
大圖請點：https://blog.floydhub.com/hello_world_generation-039d78c27eb584fa639b89d564b94772.gif
首先，神經網路將設計圖轉化成一系列的畫素值，每個畫素包含三個通道（紅藍綠），數值為 0-255。
我在這裡使用 one-hot 編碼[10]來描述神經網路理解 HTML 程式碼的方式。句子“I can code”的編碼如下圖所示：
上圖的例子中加入了“start”和“end”標籤。這些標籤可以提示神經網路從哪裡開始預測，到哪裡停止預測。
我們用句子作為輸入資料，第一個句子只包含第一個單詞，以後每次加入一個新單詞。而輸出資料始終只有一個單詞。
句子的邏輯與單詞相同，但它們還需要保證輸入資料具有相同的長度。單詞的上限是詞彙表的大小，而句子的上限則是句子的最大長度。如果句子的長度小於最大長度，就用空單詞補齊——空單詞就是全零的單詞。
如上圖所示，單詞是從右向左排列的，這樣可以強迫每個單詞在每輪訓練中改變位置。這樣模型就能學習單詞的順序，而非記住每個單詞的位置。
下圖是四次預測，每行代表一次預測。等式左側是用紅綠藍三個通道的數值表示的影象，以及之前的單詞。括號外面是每次的預測，最後一個紅方塊代表結束。
#Length of longest sentence
max_caption_len = 3
#Size of vocabulary
vocab_size = 3
# Load one screenshot for each word and turn them into digits
images = []
for i in range(2):
images.append(img_to_array(load_img('screenshot.jpg', target_size=(224, 224))))
images = np.array(images, dtype=float)
# Preprocess input for the VGG16 model
images = preprocess_input(images)
#Turn start tokens into one-hot encoding
html_input = np.array(
[[[0., 0., 0.], #start
[0., 0., 0.],
[1., 0., 0.]],
[[0., 0., 0.], #start <HTML>Hello World!</HTML>
[1., 0., 0.],
[0., 1., 0.]]])
#Turn next word into one-hot encoding
next_words = np.array(
[[0., 1., 0.], # <HTML>Hello World!</HTML>
[0., 0., 1.]]) # end
# Load the VGG16 model trained on imagenet and output the classification feature
VGG = VGG16(weights='imagenet', include_top=True)
# Extract the features from the image
features = VGG.predict(images)
#Load the feature to the network, apply a dense layer, and repeat the vector
vgg_feature = Input(shape=(1000,))
vgg_feature_dense = Dense(5)(vgg_feature)
vgg_feature_repeat = RepeatVector(max_caption_len)(vgg_feature_dense)
# Extract information from the input seqence
language_input = Input(shape=(vocab_size, vocab_size))
language_model = LSTM(5, return_sequences=True)(language_input)
# Concatenate the information from the image and the input
decoder = concatenate([vgg_feature_repeat, language_model])
# Extract information from the concatenated output
decoder = LSTM(5, return_sequences=False)(decoder)
# Predict which word comes next
decoder_output = Dense(vocab_size, activation='softmax')(decoder)
# Compile and run the neural network
model = Model(inputs=[vgg_feature, language_input], outputs=decoder_output)
model.compile(loss='categorical_crossentropy', optimizer='rmsprop')
# Train the neural network
model.fit([features, html_input], next_words, batch_size=2, shuffle=False, epochs=1000)
在 hello world 版本中，我們用到了 3 個 token，分別是“start”、“<HTML><center><H1>Hello World!</H1></center></HTML>”和“end”。token 可以代表任何東西，可以是一個字元、單詞或者句子。選擇字元作為 token 的好處是所需的詞彙表較小，但是會限制神經網路的學習。選擇單詞作為 token 具有最好的效能。
接下來進行預測：
# Create an empty sentence and insert the start token
sentence = np.zeros((1, 3, 3)) # [[0,0,0], [0,0,0], [0,0,0]]
start_token = [1., 0., 0.] # start
sentence[0][2] = start_token # place start in empty sentence
# Making the first prediction with the start token
second_word = model.predict([np.array([features[1]]), sentence])
# Put the second word in the sentence and make the final prediction
sentence[0][1] = start_token
sentence[0][2] = np.round(second_word)
third_word = model.predict([np.array([features[1]]), sentence])
# Place the start token and our two predictions in the sentence
sentence[0][0] = start_token
sentence[0][1] = np.round(second_word)
sentence[0][2] = np.round(third_word)
# Transform our one-hot predictions into the final tokens
vocabulary = ["start", "<HTML><center><H1>Hello World!</H1></center></HTML>", "end"]
for i in sentence[0]:
print(vocabulary[np.argmax(i)], end=' ')
輸出結果
10 epochs：start start start
100 epochs：start <HTML><center><H1>Hello World!</H1></center></HTML> <HTML><center><H1>Hello World!</H1></center></HTML>
300 epochs：start <HTML><center><H1>Hello World!</H1></center></HTML> end
在這之中，我犯過的錯誤
先做出可以執行的第一版，再收集資料。在這個專案的早期，我曾成功地下載了整個 Geocities 託管網站的一份舊的存檔，裡面包含了 3800 萬個網站。由於神經網路強大的潛力，我沒有考慮到歸納一個 10 萬大小詞彙表的巨大工作量。
處理 TB 級的資料需要好的硬體或巨大的耐心。在我的 Mac 遇到幾個難題後，我不得不使用強大的遠端伺服器。為了保證工作流程的順暢，需要做好心裡準備租用一臺 8 CPU 和 1G 頻寬的礦機。
關鍵在於搞清楚輸入和輸出資料。輸入 X 是一張截圖和之前的 HTML 標籤。而輸出 Y 是下一個標籤。當我明白了輸入和輸出資料之後，理解其餘內容就很簡單了。試驗不同的架構也變得更加容易。
保持專注，不要被誘惑。因為這個專案涉及了深度學習的許多領域，很多地方讓我深陷其中不能自拔。我曾花了一週的時間從頭開始編寫 RNN，也曾經沉迷於嵌入向量空間，還陷入過極限實現方式的陷阱。
圖片轉換到程式碼的網路只不過是偽裝的影象標註模型。即使我明白這一點，但還是因為許多影象標註方面的論文不夠炫酷而忽略了它們。掌握一些這方面的知識可以幫助我們加速學習問題空間。
在 FloydHub 上執行程式碼
FloydHub 是深度學習的訓練平臺。我在剛開始學習深度學習的時候發現了這個平臺，從那以後我一直用它訓練和管理我的深度學習實驗。你可以在 10 分鐘之內安裝並開始執行模型，它是在雲端 GPU 上執行模型的最佳選擇。
如果你沒用過 FloydHub，請參照官方的“2 分鐘安裝手冊”或我寫的“5 分鐘入門教程”[11]。
克隆程式碼倉庫：
git clone https://github.com/emilwallner/Screenshot-to-code-in-Keras.git
登入及初始化 FloydHub 的命令列工具：
cd Screenshot-to-code-in-Keras
floyd login
floyd init s2c在 FloydHub 的雲端 GPU 機器上執行 Jupyter notebook：
相關推薦
前端要完！人工智慧已經能實現自動編寫 HTML 和 CSS
點選上方“CSDN”，選擇“置頂公眾號”關鍵時刻，第一時間送達！【CSDN 編者按】一個月前，我
編寫HTML和CSS的前端開發中不一定熟悉JavaScript
作為前端開發人員，HTML、css、JavaScript是必備的知識技能，但是現實工作工作中並非所有的前端都知道JavaScript，根據外國一個網站的匿名調查發現，有17%的開發人員不知道JavaScript，只有51% 的開發人員熟悉JavaScript。其實前端開發最主要的動態開發就是Java
打造一款搶全網紅包現金券指令碼！搶了兩萬個紅包！Python也能實現
概述
電商的秒殺、搶購，春運搶票，微信QQ搶紅包，從技術的角度來說，這對於Web 系統是一個很大的考驗. 高併發場景下，系統的優化和穩定是至關重要的.
網際網路的開發包括 Java 後臺、 NoSQL、資料庫、限流、CDN、負載均衡等內容, 目前並沒有權威性
（PAT乙級）1003 我要通過！（C語言實現）
總結：1、重要的是找規律。即：
形如 xPATx 的字串正確的有：
PAT、APATA、AAPATAA、AAAPATAAA，就是中間一個A左右加上等量的A（不加也行）都是正確的。
如果 aPbTc 是正確的，那麼 aPbATca 也是正確的，拿上面的那幾個正確的
前端面試html和css
結構 意義 phone sea height 超鏈接 並且 另一個 一個數 寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display2.3像素問題 使用float引起的 使用dislpay:inline -3px3.超鏈接hover 點擊後失
Linux系統裁減之，制作一個極度精簡的Linux－用腳本實現自動拷貝命令和依賴庫文件
用腳本實現自動拷貝命令和依賴庫文件第2章 用腳本實現自動拷貝命令和依賴庫文件 這篇文章主要是對我上一篇博文http://blog.51cto.com/linuxprince/2045703加以完善的，前一篇文章中拷貝命令和依賴庫文件的過程是完全手工方式的，顯得特別LOW，這章把該過程完善一下，用
用HTML和CSS實現點擊內容顯示再點擊隱藏
str har ctu box 點擊 實現 aep anti 實現思路 實現思路：
1.display:none,隱藏元素;點擊時display:black;
2.設置隱藏元素高度為0，overflow:hidden;點擊時overflow:visible;
由於第一條只能
前端html和css面試題
1.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺
前端之路 day1 html和css
HTML標籤的分類： 1. 塊兒級標籤 預設獨佔一行（整個瀏覽器的寬度） 可以設定長和高 2. 行內標籤（內聯標籤） 長度由自己的內容來決定的。無法設定長和高 HTML巢狀的規則： 1. 塊兒級標籤可以巢狀行內標籤 （div標籤可以巢狀div標籤） 2. p標籤不能巢狀div標籤 form表單系列：
利用EasySQLMAIL實現自動資料提取和郵件傳送功能 （1）
轉自：http://blog.sina.com.cn/s/blog_1549483b70102wioy.html
最近幾個月每天都在發通報。過程很繁瑣，動作很機械，整個人就是一部機器，執行SQL，填Excel，發郵件。所以想把日報自動化了。最後找到一個叫EasySQLMAIL的軟體，試了一下，很簡單也很方便
前端H5基礎之HTML和CSS的關係
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言
1. HTML是網頁內容的載體
內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。
python前端HTML和CSS入門
前端階段課程介紹1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery
00-知識點預習1、HTML基本結構2、HTML的常用標籤3、HTML佈局入門4、CSS概述5、CSS書寫方式6、CSS常用選擇器7、CSS常用屬性
01-什麼是HTML？HTML 是用來
python前端HTML和CSS進階-2
知識點預習1.表單2.元素型別3.浮動4.定位
01- 表單form標籤 表單用來提交資料
action 要提交的網址,預設是當前網頁method 請求 提交方式
預設get請求 post請求切換請求方式時注意快取問題
label標籤
for屬性如果設定的值和 input標籤中設定的id屬性值一樣就
python前端HTML和CSS進階
知識點預習1.列表2.選擇器3.CSS的文字樣式屬性4.元素溢位5.盒子模型6.margin負值技巧7.垂直外邊距合併8.margin-top塌陷問題
01- 列表無序列表 ul>li unorder list清除列表前面的標識 list-sytle:none;列表預設有外邊框和內邊距
02- CS
python前端HTML和CSS高階
知識點預習1.表格基本使用2.選擇器權重計算3.背景圖片屬性4.精靈圖5.天天生鮮案例
01-表格(table)基本使用
table:
tr row 行數
td description 內容
th head ;居中 加粗
/* 3.合併邊
python前端HTML和CSS高級
列合並 back round cbe ext 技術 網頁 知識 RoCE 知識點預習1.表格基本使用2.選擇器權重計算3.背景圖片屬性4.精靈圖5.天天生鮮案例
01-表格(table)基本使用
table:
tr row 行數
td des
keepass+ keepasshttp實現自動填充密碼和賬號
1、準備軟體：keepass 2.x + keepasshttp-master.zip(
https://github.com/pfn/keepasshttp
)
下載好 keepasshttp-master.zip後，將其解壓到
非
keepass 2.x所
Android studio實現自動導包和自動刪除無用導包
設定Android studio自動導包和刪除無用導包步驟：
File–>Settings–>Editor–>General–>Auto Import
選中Optimizes
用HTML和CSS實現WWDC 2015上的動畫效果
每年，蘋果都會召開一次重大的會議。WWDC(蘋果開發者大會)是iOS開發者和OSX開發者學習蘋果先進高科技和移動裝置與桌面軟體新概念的好機會。
每一年的這個時候，他們都會製造出很多新創意，今年，我被一個用簡單圓圈和形狀製作出來的圖示所驚豔，於是我決定用HTML和CSS來實現它。
WWDC
建設局專案總結（三）——ASP.NET 實現自動捕獲異常和異常處理
建設局專案幾乎要接近尾聲了，從頭到尾差不多有半個月的時間吧，半個月 不知不覺就這樣過去了，總結這半個月，好像每天都很忙，每天都很忙碌，但是仔細想想好像又沒做出多少正兒八經的工作量，總共做了下面幾個模組：
獎項懲罰列表，編輯等
企業資訊編輯