整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
人們的不斷探索下，「使用人工智能自動生成網(wǎng)頁」的方法已經(jīng)變得越來越接近實用化了。本文介紹的這種名為 SketchCode 的卷積神經(jīng)網(wǎng)絡(luò)能夠把網(wǎng)站圖形用戶界面的設(shè)計草圖直接轉(zhuǎn)譯成代碼行，為前端開發(fā)者們分擔(dān)部分設(shè)計流程。目前，該模型在訓(xùn)練后的 BLEU 得分已達(dá) 0.76。
你可以在 GitHub 上找到這個項目的代碼：https://github.com/ashnkumar/sketch-code
為用戶創(chuàng)造直觀、富有吸引力的網(wǎng)站是各家公司的重要目標(biāo)，而且這是個快速進(jìn)行原型、設(shè)計、用戶測試循環(huán)的過程。像 Facebook 這樣的大公司有著讓整個團(tuán)隊專注于設(shè)計流程的人力，改動可能需要幾周的時間，并涉及到多種利益相關(guān)者；而小型企業(yè)就沒有這樣的資源，因此其用戶界面可能受到一些影響。
我在 Insight 當(dāng)中的目標(biāo)是使用現(xiàn)代深度學(xué)習(xí)算法大大簡化設(shè)計工作流程，并使得任何規(guī)模的公司都能快速地創(chuàng)造并測試網(wǎng)頁。
現(xiàn)有的設(shè)計工作流程
現(xiàn)有工作流程涉及多個利益相關(guān)者
一個典型的設(shè)計工作流程如下所示：
產(chǎn)品經(jīng)理進(jìn)行用戶研究，從而制定技術(shù)參數(shù)表
設(shè)計人員將接受這些要求并嘗試創(chuàng)建低保真原型，最終創(chuàng)建高保真原型
工程師將這些設(shè)計轉(zhuǎn)化為代碼并最終將產(chǎn)品交付給用戶
開發(fā)周期的時間長度很快就會變成瓶頸，像 Airbnb 這樣的公司已經(jīng)開始使用機器學(xué)習(xí)來提高這個過程的效率了。（參見：https://airbnb.design/sketching-interfaces/）
Airbnb 內(nèi)部 AI 工具演示：從草圖到代碼
雖然這種工具很有希望成為機器輔助設(shè)計的例子，但是尚不清楚這種模型在端到端的情況下能完全訓(xùn)練到什么程度，也不清楚它在多大程度上依賴于手工制作的圖像特征。這肯定是無法知道的，因為它目前還是 Airbnb 專有的非開源方案。我想創(chuàng)造一個「從繪圖到代碼」技術(shù)的開源版本，可供更多開發(fā)者和設(shè)計者使用。
理想情況下，我的模型可以采用簡單的網(wǎng)站設(shè)計手繪原型，并立即從該圖像生成一個可用的 HTML 網(wǎng)站：
SketchCode 模型需要繪制好的網(wǎng)站線框圖并能生成 HTML 代碼
實際上，上面的例子是一個從我模型測試集圖像生成的實際網(wǎng)站！你可以在我的 Github 頁面中查看它：https://github.com/ashnkumar/sketch-code
從圖像標(biāo)注中獲取靈感
我正在解決的問題屬于程序綜合（https://en.wikipedia.org/wiki/Program_synthesis）這個廣義任務(wù)范疇，即工作源代碼的自動生成。盡管很多程序綜合能處理從自然語言要求或執(zhí)行軌跡所生成的代碼，但在我這個案例中，我可以從一個源圖像（手繪線框圖）開始，自動獲得想要的代碼。
機器學(xué)習(xí)領(lǐng)域中，有一個名為圖像字幕生成的領(lǐng)域（https://cs.stanford.edu/people/karpathy/deepimagesent/），該領(lǐng)域有著充分的研究，旨在學(xué)習(xí)將圖像和文本相連的模型，特別是生成關(guān)于源圖片內(nèi)容的描述。
圖像標(biāo)注模型生成源圖片的描述
我從最近一篇名為 pix2code 的論文和 Emil Wallner 使用該方法的一個相關(guān)項目獲得了靈感（參見：前端慌不慌？用深度學(xué)習(xí)自動生成 HTML 代碼），并決定將我的任務(wù)重構(gòu)成圖像字幕生成問題的一部分，即將線框圖作為輸入圖像，將對應(yīng)的 HTML 代碼作為輸出文本。
獲取正確的數(shù)據(jù)集
考慮到圖像標(biāo)注的方法，我心中理想的訓(xùn)練數(shù)據(jù)集是成千上萬對手繪線框圖和它們 HTML 代碼的等價物。不出所料，我無法找到這種數(shù)據(jù)集，因此我不得不為該任務(wù)創(chuàng)建自己的數(shù)據(jù)。
我從 pix2code 論文中提到的一個開源數(shù)據(jù)集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 張人工生成的網(wǎng)頁截圖和其對應(yīng)源代碼構(gòu)成。
pix2code 中生成的網(wǎng)站圖像及其源代碼數(shù)據(jù)集
這個數(shù)據(jù)集對我而言是個很好的開始，其中有一些有趣的地方：
數(shù)據(jù)集中每個生成的網(wǎng)站都包含幾個簡單的 Bootstrap 元素例如按鈕、文本框和 DIV。雖然這意味著我的模型將會因把這幾個元素作為「詞匯」（模型可選擇用于生成網(wǎng)站的元素）而受限制，這種方法應(yīng)該很容易推廣到更大的元素詞匯表中。
每個示例的源代碼包含領(lǐng)域?qū)Ｓ谜Z言（DSL）的標(biāo)記，這些符號是由論文作者創(chuàng)建的。每個標(biāo)記對應(yīng)于 HTML 和 CSS 的片段，且有一個編譯器將 DSL 轉(zhuǎn)化為工作使用的 HTML 代碼。
讓圖片更像手繪的
將網(wǎng)站的多彩主題切換成手寫主題。
為了調(diào)整數(shù)據(jù)集以適應(yīng)我的任務(wù)，我得把網(wǎng)站的圖片弄得像是手繪的。對圖片的手繪化都得益于 OpenCV 和 PIL library 的灰度轉(zhuǎn)換和輪廓檢測功能。
最終，我決定直接通過一系列操作來直接修改原網(wǎng)站的 CSS 樣式表：
通過改變頁面元素的邊框半徑實現(xiàn)按鈕和 div 的圓潤化
調(diào)整邊框的粗細(xì)以模仿手繪素描，并添加陰影
將字體改為類手寫字體
我的最終版本又增加了一個步驟，通過加入傾斜，偏移和旋轉(zhuǎn)來進(jìn)行數(shù)據(jù)增強，以模仿實際繪制的素描的不確定性。
使用圖像標(biāo)注模型架構(gòu)
現(xiàn)在我已經(jīng)準(zhǔn)備好我的數(shù)據(jù)了，我可以把它輸入模型進(jìn)行訓(xùn)練了！
我用的這個用于圖像標(biāo)注的模型包括三個主要部分：
一個卷積神經(jīng)網(wǎng)路（CNN）視覺模型用于提取源圖片特征
一種由編碼源代碼標(biāo)記序列的門控循環(huán)單元（GRU）組成的語言模型
一個解碼器模型（也是一個 GRU），它以前兩個步的輸出作為輸入，預(yù)測序列中的下一個標(biāo)記
使用標(biāo)記序列作為輸入來訓(xùn)練模型
為了訓(xùn)練這個模型，我把源代碼分成標(biāo)記序列。其中一個序列及其源圖像是模型的單個輸入，其標(biāo)簽是文檔中的下一個標(biāo)記。該模型使用交叉熵成本（cross-entropy cost）作為其損失函數(shù)，將模型預(yù)測的下一個標(biāo)記與實際的標(biāo)記進(jìn)行比較。
在模型從頭開始生成代碼的推理階段，該過程稍有不同。該圖像仍然通過 CNN 網(wǎng)絡(luò)進(jìn)行處理，但文本處理僅提供一個開始序列。在每一步中，模型對序列中下一個標(biāo)記的預(yù)測將返回到當(dāng)前輸入序列，同時作為新的輸入序列輸入到模型中。重復(fù)此操作直到模型預(yù)測出 <END> 標(biāo)記或進(jìn)程達(dá)到每個文檔的標(biāo)記數(shù)的預(yù)定義上限。
一旦從模型中生成了一組預(yù)測標(biāo)記，編譯器就會將 DSL 標(biāo)記轉(zhuǎn)換為 HTML，這些 HTML 可以在任何瀏覽器中展示出來。
用 BLEU 得分評估模型
我決定用 BLEU 評分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）來評估模型。這是機器翻譯任務(wù)中經(jīng)常會用到的評估標(biāo)準(zhǔn)，它試圖在給定相同輸入的情況下，評估機器生成的文本與人類可能寫的文本的近似程度。
實質(zhì)上，BLEU 通過比較生成文本和參考文本的 n-元 序列，生成精修改后的文本。它非常適合這個項目，因為它會影響生成的 HTML 中的實際元素，以及它們之間的相互關(guān)系。
然后這是最棒的——我完全可以通過檢查生成的網(wǎng)站來理解 BLEU 得分！
BLEU 得分可視化
一個完美的 1.0 的 BLEU 分?jǐn)?shù)將在正確的位置生成源圖像的正確元素，而較低的得分可以預(yù)測錯誤的元素和/或?qū)⑺鼈兎旁谙鄬τ诒舜隋e誤的位置。最終我的模型能夠在測試集上得到 0.76 的 BLEU 分?jǐn)?shù)。
福利 - 定制樣式
我覺察到的一個額外福利是，由于模型只生成頁面的骨架（文檔的標(biāo)記），我可以在編譯過程中添加一個自定義的 CSS 層，并且可以即時看到網(wǎng)站的不同風(fēng)格。
一次轉(zhuǎn)換=> 同時生成多種樣式
將樣式與模型生成過程分離，給使用模型帶來了很多好處：
想要將 SketchCode 模型應(yīng)用到自己公司產(chǎn)品中的前端工程師可以按原樣使用該模型，只需更改一個 CSS 文件以符合其公司的樣式要求
可擴展性已內(nèi)置 - 使用一張源圖像，模型輸出可立即編譯為 5、10 或 50 種不同的預(yù)定義樣式，因此用戶可以看到他們網(wǎng)站的多個版本，并在瀏覽器中瀏覽這些網(wǎng)站
總結(jié)與展望
通過利用圖像標(biāo)注的研究成果，SketchCode 能夠在幾秒鐘內(nèi)將手繪網(wǎng)站線框圖轉(zhuǎn)換為可用的 HTML 網(wǎng)站。
該模型有些局限性，大概包括以下幾點：
由于這個模型是用一個只有 16 個元素的詞匯進(jìn)行訓(xùn)練的，它不能預(yù)測訓(xùn)練數(shù)據(jù)之外的標(biāo)記。下一步可能是使用更多元素（如圖像，下拉菜單和表單）生成其他樣例網(wǎng)站——Bootstrap components 是個練手的好網(wǎng)站：https://getbootstrap.com/docs/4.0/components/buttons/
實際生產(chǎn)環(huán)境中，網(wǎng)站有很多變化。創(chuàng)建一個更能反映這種變化的訓(xùn)練數(shù)據(jù)集的好方法是去爬取實際的網(wǎng)站，捕獲他們的 HTML / CSS 代碼以及網(wǎng)站內(nèi)容的截圖
手繪素描也有很多變化，CSS 修改技巧沒有被模型完全學(xué)會。在手繪素描上生成更多變化的一種好方法是使用生成對抗網(wǎng)絡(luò)來創(chuàng)建逼真的繪制網(wǎng)站圖像
我很期待看到項目的進(jìn)一步發(fā)展！
yperSD - 會畫草圖就能玩AI繪畫，AI一鍵手繪，實時同步一鍵整合包
字節(jié)跳動的Lightning團(tuán)隊發(fā)布的新圖像模型蒸餾算法Hyper-SD，是一項在圖像處理和機器學(xué)習(xí)領(lǐng)域的重要進(jìn)展。這項技術(shù)通過創(chuàng)新的方法提升了模型在不同推理步驟下的性能，同時保持了模型大小的精簡。
基于這個算法模型，一個很實用的功能出現(xiàn)了，就是實現(xiàn)一鍵手繪插畫的功能，幾乎實現(xiàn)了實時生成圖片的功能。即會畫畫，就能玩AI繪畫了。
我來說下具體實現(xiàn)：你只需要像畫畫一樣，在畫板上畫出輪廓，輸入相關(guān)的提示詞，比如下圖，輸入“a little cat”，然后在畫板上畫出輪廓，就可以輕松生成一張對應(yīng)姿勢的小貓咪。
HyperSD - 會畫草圖就能玩AI繪畫，AI一鍵手繪，實時同步一鍵整合包
有了這個工具，大家可以腦洞大開，發(fā)揮自己的想象力，瞬間化身”神筆馬良“，利用這個工具創(chuàng)造無限高質(zhì)量的素材了。尤其是插畫師和美工行業(yè)的從業(yè)人員，有了這個工具，可謂如虎添翼。想要的素材，輸入提示詞，鼠標(biāo)畫一畫就有了。在也不用苦惱到哪里去找到需要的素材了。
一鍵整合包下載：https://deepface.cc/thread-279-1-1.html
使用教程
1、下載一鍵包，雙擊運行一鍵啟動
2、在左上角圖像區(qū)域，可以當(dāng)作畫板來作畫。下方可以調(diào)節(jié)筆刷大小，和實用橡皮擦擦除畫錯的，如下圖
HyperSD - 會畫草圖就能玩AI繪畫，AI一鍵手繪，實時同步一鍵整合包
3、可以在畫板畫出草圖輪廓，在下方可以調(diào)節(jié)相應(yīng)的高級參數(shù)。可以調(diào)節(jié) 圖像數(shù)量、推理步數(shù)、和提示詞這幾個參數(shù)，其他默認(rèn)即可。
HyperSD - 會畫草圖就能玩AI繪畫，AI一鍵手繪，實時同步一鍵整合包
圖像數(shù)量就是一次生成幾張圖片
推理步數(shù)就是推理計算的步驟次數(shù)
提示詞就是生成圖像主體，比如一只小貓，就輸入 a little cat
可以先設(shè)置好參數(shù)，再畫草圖，這個是實時生成的
如果后期修改參數(shù)，修改后，再點下方運行更新生成
測試了幾個，效果不太好，可能是需要寫繪畫技巧，大家可以自行嘗試。
線原型圖的核心功能是可視化需求，因此一個易于使用的在線原型圖工具對原型圖設(shè)計至關(guān)重要。對于熟悉的Photoshop和iIlustrator來說，雖然它們功能強大，但界面太復(fù)雜，初學(xué)者很難快速啟動，面對批量調(diào)整的在線原型圖，它們?nèi)匀徊粔蛑悄堋＿@里有一些有用的在線原型圖工具推薦給你。
即時設(shè)計是一款免費的在線 UI 設(shè)計工具，無系統(tǒng)限制，瀏覽器打開即可使用，更有豐富的在線素材、云端字體、交互動畫等功能滿足多種需求，輕松應(yīng)付移動端、Web端、可視化大屏等設(shè)計場景，還可和產(chǎn)品、開發(fā)輕松協(xié)作，實時在線評審、交付切圖、查看代碼標(biāo)注，大幅提高團(tuán)隊工作效率。
?豐富的交互事件配合智能動畫，讓設(shè)計師能夠非常快速地實現(xiàn)各種超棒的交互動效，模擬真實效果~
不管是用來測試自己的 idea，還是用來給客戶演示，讓開發(fā)了解實現(xiàn)效果，一份可交互的高保真設(shè)計稿都比語言和想象來的更加直觀有力！
即時設(shè)計 - 可實時協(xié)作的專業(yè) UI 設(shè)計工具即時設(shè)計是一款支持在線協(xié)作的專業(yè)級 UI 設(shè)計工具，支持 Sketch、Figma、XD 格式導(dǎo)入，海量優(yōu)質(zhì)設(shè)計資源即拿即用。支持創(chuàng)建交互原型、獲取設(shè)計標(biāo)注，為產(chǎn)設(shè)研團(tuán)隊提供一站式協(xié)同辦公體驗。
https://js.design/?source=tt&plan=ystt273
?即時設(shè)計支持添加完整的交互事件，并且為滿足不同用戶的習(xí)慣提供了畫板和目錄兩種連線方式，兩種方式的連線完全同步，開發(fā)可以在單頁模式下清晰地掌握每個頁面的交互邏輯，產(chǎn)品和設(shè)計在預(yù)覽時也能根據(jù)交互操作，實現(xiàn)更生動的演示效果。
Proto.io是一款功能豐富的在線原型圖工具，功能性能好。矢量工具和組件庫非常強大，可以輕松繪制各種在線原型圖。您也可以在IOS或Android應(yīng)用程序中運行您的在線原型圖。
缺點：無實時預(yù)覽；交互較多會出現(xiàn)卡頓；無3D動效。
Figma是最近非常流行的在線原型圖工具，具有優(yōu)秀的在線原型圖設(shè)計功能，如精細(xì)鋼筆工具、智能布局、團(tuán)隊共享組件、多人實時合作等。此外，還有白板工具FigJam，從FigJam的頭腦風(fēng)暴到Figma在線原型圖設(shè)計的無縫連接，非常方便。
缺點：無中文版，不能斷網(wǎng)工作，無客戶服務(wù)。
Framer是一種易于使用的在線原型圖工具，基本上可以滿足99%的交互和功能演示需求。它也是設(shè)計功能和代碼編寫相結(jié)合的工具，可以讓沒有代碼經(jīng)驗的設(shè)計師更容易學(xué)習(xí)和使用。
缺點：只能在Mac系統(tǒng)中使用。
Invision是一種集界面設(shè)計和原型制作于一體的設(shè)計工具。在線原型圖功能也非常優(yōu)秀，具有智能布局、團(tuán)隊共享組件、多人實時合作等優(yōu)秀功能。此外，它的交互動畫功能非常強大，有一套完整的時間軸工具。
缺點：必須配合使用Sketchhh、只有Abstract或Zeplin才能實現(xiàn)高保真在線原型圖設(shè)計。
Balsamiq是一種非常受歡迎的在線原型圖工具。Balsamiq繪制的在線原型圖都是手繪圖像，看起來美觀清爽。它支持幾乎所有的HTML控制原型圖和iPhone元素原型圖。
缺點：僅適用于低保真在線原型圖和線框草圖設(shè)計。
?
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
