寫個網(wǎng)頁更簡單了！讓AI根據(jù)手繪原型生成HTML - 教程+代碼

小新編譯自 Insight Data Blog

量子位出品 | 公眾號 QbitAI

寫個網(wǎng)頁能有多麻煩？在大多數(shù)公司里，這項工作分為三步：

1. 產(chǎn)品經(jīng)理完成用戶調(diào)研任務(wù)后，列出一系列技術(shù)要求；

2. 設(shè)計師根據(jù)這些要求來設(shè)計低保真原型，逐漸修改得到高保真原型和UI設(shè)計圖；

3. 工程師將這些設(shè)計圖實現(xiàn)為代碼，最終變成用戶使用的產(chǎn)品。

這么多環(huán)節(jié)，任何地方出一點問題，都會拉長開發(fā)周期。因此，不少公司，比如Airbnb已經(jīng)開始用機器學習來提高這個過程的效率。

△ Airbnb內(nèi)部的AI工具，從圖紙到代碼一步到位

看起來很美好，但Airbnb還沒公開該模型中端到端訓練的細節(jié)，以及手工設(shè)計的圖像特征對該模型的貢獻度。這是該公司特有的閉源解決方案專利，可能不會進行公開。

好在，一個叫Ashwin Kumar的程序員創(chuàng)建了一個開源版本，讓開發(fā)者/設(shè)計師的工作變得更簡單。

以下內(nèi)容翻譯自他的博客：

理想上，這個模型可以根據(jù)網(wǎng)站設(shè)計的簡單手繪原型，很快地生成一個可用的HTML網(wǎng)站：

△ SketchCode模型利用手繪線框圖來生成HTML網(wǎng)站

事實上，上面例子就是利用訓練好的模型在測試集上生成的一個實際網(wǎng)站，代碼請訪問：https://github.com/ashnkumar/sketch-code。

從圖像標注中獲取靈感

目前要解決的問題屬于一種更廣泛的任務(wù)，叫做程序綜合（program synthesis），即自動生成工作源代碼。盡管很多程序綜合研究通過自然語言規(guī)范或執(zhí)行追蹤法來生成代碼，但在當前任務(wù)中，我會充分利用源圖像，即給出的手繪線框圖來展開工作。

在機器學習中有一個十分熱門的研究領(lǐng)域，稱為圖像標注（image caption），目的是構(gòu)建一種把圖像和文本連接在一起的模型，特別是用于生成源圖像內(nèi)容的描述。

△ 圖像標注模型生成源圖像的文本描述

我從一篇pix2code論文和另一個應(yīng)用這種方法的相關(guān)項目中獲得靈感，決定把我的任務(wù)按照圖像標注方式來實現(xiàn)，把繪制的網(wǎng)站線框圖作為輸入圖像，并將其相應(yīng)的HTML代碼作為其輸出內(nèi)容。

注：上段提到的兩個參考項目分別是

pix2code論文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

獲取合適的數(shù)據(jù)集

確定圖像標注方法后，理想中使用的訓練數(shù)據(jù)集會包含成千上萬對手繪線框圖和對應(yīng)的HTML輸出代碼。但是，目前還沒有我想要的相關(guān)數(shù)據(jù)集，我只好為這個任務(wù)來創(chuàng)建數(shù)據(jù)集。

最開始，我嘗試了pix2code論文給出的開源數(shù)據(jù)集，該數(shù)據(jù)集由1750張綜合生成網(wǎng)站的截圖及其相應(yīng)源代碼組成。

△ pix2code數(shù)據(jù)集中的生成網(wǎng)站圖片和源代碼

這是一個很好的數(shù)據(jù)集，有幾個有趣的地方：

該數(shù)據(jù)集中的每個生成網(wǎng)站都包含幾個簡單的輔助程序元素，如按鈕、文本框和DIV對象。盡管這意味著這個模型受限于將這些少數(shù)元素作為它的輸出內(nèi)容，但是這些元素可通過選擇生成網(wǎng)絡(luò)來修改和擴展。這種方法應(yīng)該很容易地推廣到更大的元素詞匯表。
每個樣本的源代碼都是由領(lǐng)域?qū)Ｓ谜Z言（DSL）的令牌組成，這是該論文作者為該任務(wù)所創(chuàng)建的。每個令牌對應(yīng)于HTML和CSS的一個片段，且加入編譯器把DSL轉(zhuǎn)換為運行的HTML代碼。

彩色網(wǎng)站圖像變手繪圖

為了修改我的任務(wù)數(shù)據(jù)集，我要讓網(wǎng)站圖像看起來像手工繪制出的。我嘗試使用Python中的OpenCV庫和PIL庫等工具對每張圖像進行修改，包括灰度轉(zhuǎn)換和輪廓檢測。

最終，我決定直接修改原始網(wǎng)站的CSS樣式表，通過執(zhí)行以下操作：

1. 更改頁面上元素的邊框半徑來平滑按鈕和DIV對象的邊緣；

2. 模仿繪制的草圖來調(diào)整邊框的粗細，并添加陰影；

3. 將原有字體更改為類似手寫的字體；

最終實現(xiàn)的流程中還增加了一個步驟，通過添加傾斜、移動和旋轉(zhuǎn)來實現(xiàn)圖像增強，來模擬實際繪制草圖中的變化。

使用圖像標注模型架構(gòu)

現(xiàn)在，我已經(jīng)處理好數(shù)據(jù)集，接下來是構(gòu)建模型。

我利用了圖像標注中使用的模型架構(gòu)，該架構(gòu)由三個主要部分組成：

1. 一種使用卷積神經(jīng)網(wǎng)絡(luò)（CNN）的計算機視覺模型，從源圖像提取圖像特征；

2. 一種包含門控單元GRU的語言模型，對源代碼令牌序列進行編碼；

3. 一個解碼器模型，也屬于GRU單元，把前兩個步驟的輸出作為輸入，并預測序列中的下一個令牌。

△ 以令牌序列為輸入來訓練模型

為了訓練模型，我將源代碼拆分為令牌序列。模型的輸入為單個部分序列及它的源圖像，其標簽是文本中的下一個令牌。該模型使用交叉熵函數(shù)作為損失函數(shù)，將模型的下個預測令牌與實際的下個令牌進行比較。

在模型從頭開始生成代碼的過程中，該推理方式稍有不同。圖像仍然通過CNN網(wǎng)絡(luò)進行處理，但文本處理開始時僅采用一個啟動序列。在每個步驟中，模型對序列中輸出的下個預測令牌將會添加到當前輸入序列，并作為新的輸入序列送到模型中；重復此操作直到模型的預測令牌為，或該過程達到每個文本中令牌數(shù)目的預定義值。

當模型生成一組預測令牌后，編譯器就會將DSL令牌轉(zhuǎn)換為HTML代碼，這些HTML代碼可以在任何瀏覽器中運行。

用BLEU分數(shù)評估模型

我決定使用BLEU分數(shù)來評估模型。這是機器翻譯任務(wù)中常用的一種度量標準，通過在給定相同輸入的情況下，衡量機器生成的文本與人類可能產(chǎn)生內(nèi)容的近似程度。

實際上，BLEU通過比較生成文本和參考文本的N元序列，以創(chuàng)建修改后的準確版本。它非常適用于這個項目，因為它會影響生成HTML代碼中的實際元素，以及它們之間的相互關(guān)系。

最棒的是，我還可以通過檢查生成的網(wǎng)站來比較當前的實際BLEU分數(shù)。

△ 觀察BLEU分數(shù)

當BLEU分數(shù)為1.0時，則說明給定源圖像后該模型能在正確位置設(shè)置合適的元素，而較低的BLEU分數(shù)這說明模型預測了錯誤元素或是把它們放在相對不合適的位置。我們最終模型在評估數(shù)據(jù)集上的BLEU分數(shù)為0.76。

福利：定制網(wǎng)頁風格

后來，我還想到，由于該模型只生成當前頁面的框架，即文本的令牌，因此我可以在編譯過程中添加一個定制的CSS層，并立刻得到不同風格的生成網(wǎng)站。

△ 一個手繪圖生成多種風格的網(wǎng)頁

把風格定制和模型生成兩個過程分開，在使用模型時帶來了很多好處：

1.如果想要將SketchCode模型應(yīng)用到自己公司的產(chǎn)品中，前端工程師可以直接使用該模型，只需更改一個CSS文件來匹配該公司的網(wǎng)頁設(shè)計風格；

2. 該模型內(nèi)置的可擴展性，即通過單一源圖像，模型可以迅速編譯出多種不同的預定義風格，因此用戶可以設(shè)想出多種可能的網(wǎng)站風格，并在瀏覽器中瀏覽這些生成網(wǎng)頁。

總結(jié)和展望

受到圖像標注研究的啟發(fā)，SketchCode模型能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的HTML網(wǎng)站。

但是，該模型還存在一些問題，這也是我接下來可能的工作方向：

1. 由于這個模型只使用了16個元素進行訓練，所以它不能預測這些數(shù)據(jù)以外的令牌。下一步方向可能是使用更多元素來生成更多的網(wǎng)站樣本，包括網(wǎng)站圖片，下拉菜單和窗體，可參考啟動程序組件（https://getbootstrap.com/docs/4.0/components/buttons/）來獲得思路；

2. 在實際網(wǎng)站構(gòu)建中，存在很多變化。創(chuàng)建一個能更好反映這種變化的訓練集，是提高生成效果的一種好方法，可以通過獲取更多網(wǎng)站的HTML/CSS代碼以及內(nèi)容截圖來提高；

3. 手繪圖紙也存在很多CSS修改技巧無法捕捉到的變化。解決這個問題的一種好方法是使用生成對抗網(wǎng)絡(luò)GAN來創(chuàng)建更逼真的繪制網(wǎng)站圖像。

圖片添加區(qū)域鏈接的基本寫法

首先我們看看效果：

實現(xiàn)這樣的功能需要學習以下幾點內(nèi)容。

1.認識<img/><map><area/></map>基本結(jié)構(gòu)

首先復制一個html框架，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區(qū)域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區(qū)域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標簽通過<map>的名字來驅(qū)使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經(jīng)常出現(xiàn)。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區(qū)域。

2.為圖片劃分區(qū)域的方法

<area>是用來劃分區(qū)域的標簽，area也是“”區(qū)域“”的意思。

默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區(qū)域規(guī)定參數(shù)，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區(qū)域的位置和范圍。

如果shape="rect" 則coords由四個參數(shù)組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區(qū)域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數(shù)不少于3對！注意是“對”！從左到右，兩個數(shù)就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如

這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數(shù)變了，參數(shù)就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？

3.使用Gimp軟件精準定位圖片區(qū)域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：

打開后如圖：

把鼠標放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標所在的像素坐標數(shù)值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區(qū)域添加鏈接

在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標滑過鏈接區(qū)域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內(nèi)容結(jié)束了，圖像區(qū)域鏈接在使用時還有一些注意事項，我們下次再詳細討論。

使用碎片時間，學習完整知識！關(guān)注大魚師兄，一起精研技藝。

級元素與內(nèi)聯(lián)元素的概念與區(qū)別

在HTML中，大多數(shù)元素都被定義為塊級元素或內(nèi)聯(lián)元素。

塊級元素通常會獨立成行，而內(nèi)聯(lián)元素會并排顯示。

在我們學過的元素中，

塊級元素如：<h> <p> <table>這些。

內(nèi)聯(lián)元素如<td><a><img>

下面我們通過練習來直觀看看他們的區(qū)別。

塊級元素展示，代碼如下：

<body>
  <h1>第一個網(wǎng)頁</h1><hr><h2>表格元素</h2><hr>
  <p>塊級元素與內(nèi)聯(lián)元素</p>
  <p>零基礎(chǔ)自學網(wǎng)頁制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如圖：

內(nèi)聯(lián)元素展示如下

示例代碼：這段代碼被我放在了</table>后面。

<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰(zhàn)斗機</a>
<img src="img/戰(zhàn)斗機/image3.jpg" width = "200px"/>

效果如圖：

其中，<img>標簽中的width屬性規(guī)定了圖片的寬度為200px，也就是200像素。

HTML中，如果只對圖片的寬或高進行數(shù)值指定，那么未指定的數(shù)值會隨著指定數(shù)值進行等比例縮放！

熟知html元素是塊級還是內(nèi)聯(lián)對以后進行頁面布局有一定的指導意義。

<div>與<span>標簽

為了方便開發(fā)者對頁面內(nèi)容進行布局和調(diào)整，html開發(fā)者為html加入了專門的區(qū)塊元素<div></div>。

<div></div>是一個塊級元素，大家可以把它理解為一個容器，它本身是不會顯示在頁面上的。

比如這個！

筆者第一個漫畫作品

如果拋開畫面內(nèi)容，我們看到的是一堆對畫面進行分割的方格子。像這樣

<div></div>元素的作用就是對頁面進行了這樣的分割。

實際上我們的頁面布局都是基于這樣思路進行分割的，只是頁面上不會像漫畫一樣顯示外邊框而已。例如：

強制為其添加邊框分割：

大家看明白了嗎？<div></div>就是用來對頁面進行分割劃區(qū)域的。

通過給<div>標簽設(shè)置不同的id屬性，可以在css文件中對不同<div>區(qū)塊中的所有信息進行統(tǒng)一調(diào)整樣式的操作。

這是對塊級元素整體改變樣式的方法。

但是，如果我們想對一個塊級元素中的不同文字或圖片這些內(nèi)聯(lián)元素進行單獨操作怎么做呢？

html開發(fā)者為我們提供了<span></span>這樣的內(nèi)聯(lián)標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作，我們可以這樣寫：

通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。

今天的內(nèi)容結(jié)束了，下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。

喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作

在線咨詢

上一篇：window彈出、提示框
下一篇：一篇文章帶你了解css z-index(重疊順序)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商