這篇文章將為大家詳細(xì)講解有關(guān)UI2Code中如何利用antd.sketchapp 生成訓(xùn)練數(shù)據(jù)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)與策劃設(shè)計,八步網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:八步等地區(qū)。八步做網(wǎng)站價格咨詢:18980820575

Ant Design 最近發(fā)布了 antd.sketchapp ：

使用 skpm 構(gòu)建工具，基于 React Sketch.app 及 Ant Design ，實(shí)現(xiàn)了 antd.sketchapp ，可以很方便的把 Ant Design 的前端代碼轉(zhuǎn)化為 sketch 文件。類似的基于 Material Design 我們也可以實(shí)現(xiàn)一個 MD.sketchapp 。antd.sketchapp 更大的意義在于其是一套設(shè)計系統(tǒng)更新的工具，可以快速對 Sketch 已存在的原子進(jìn)行更新，這樣基于 Ant Design 的前端組件，我們可以基于自己公司的特點(diǎn)進(jìn)行修改，并不斷進(jìn)行迭代，這樣保證了業(yè)務(wù)型設(shè)計師在具體時候的時候是最新的樣式，同時前端也是最新的。

Code2UI 這件事實(shí)現(xiàn)起來還算簡單，UI2Code 這件事就顯得有點(diǎn)難度了，基礎(chǔ)的工作有 MD 的 sketch 插件，設(shè)計師可以很方便的在 sketch 里生成 Material Design 的 UI 組件。

airbnb 對 UI2Code 也在嘗試中：

Airbnb launched sketching interfaces.

https://airbnb.design/sketching-interfaces/

利用的是 CNN 圖像分類的方法。

關(guān)于 UI2Code 相關(guān)的工作及嘗試，有2個比較熱門的項目：

Pix2code

https://github.com/tonybeltramelli/pix2code

Turning design mockups into code with deep learning

https://github.com/emilwallner/Screenshot-to-code-in-Keras

主要的深度學(xué)習(xí)模型采用了 CNN 跟 LSTM 。由于本文是基于 Ant Design 的，有很多約定好的規(guī)則，畢竟是設(shè)計語言，不像純 HTML 或基于 Bootstrap 的 UI 框架，太過自由，因此我們可以簡化下，基于 CNN 分類的做法嘗試下 UI2Code 。CNN 的大體思路，通過傳統(tǒng)算法，保存屏幕截圖，及對應(yīng)的按壓時間。這樣就可以形成 IMG 及對應(yīng)的 Label 。通過 CNN 卷積神經(jīng)網(wǎng)絡(luò)訓(xùn)練，即可用于輸入新的 IMG 預(yù)測按壓時間。

CNN 需要大量的訓(xùn)練數(shù)據(jù)，我們可以嘗試下利用 antd.sketchapp 大量生成 Code 及 UI 圖像的成對數(shù)據(jù)。Code 抽象成合適的數(shù)據(jù)形式，例如 [ Header , Content , Footer ] , Header 表示為[ Button , Text , Button ] 的形式，結(jié)合起來是個二維矩陣的方式，像這樣 [ [ 1 , 0 , 1 ] , [ 1 , 0 , 0 ] , [ 1 , 1 , 1 ] ]。這里需要做很多實(shí)驗跟抽象的工作，如何用矩陣的方式描述代碼。思想類似于以前介紹過的在生成建筑中用到的 Snippet Grammar （基于參數(shù)的描述性語言），嚴(yán)格來講屬于 domain-specific languages（簡稱 DSL ， 領(lǐng)域特定語言）。

DSL

A specialized computer language designed for a specific task.

為了解決某一類任務(wù)而專門設(shè)計的計算機(jī)語言。

Martin Fowler 認(rèn)為：

DSL 首先是一種幫助用戶從一個系統(tǒng)中抽象出某些部分的工具。所以“當(dāng)你意識到你需要一個組件，或者當(dāng)你已經(jīng)有了一個組件而你希望簡化操作它的方式的時候”， DSL 是有用的。DSL 不僅提高了代碼的易讀性，讓開發(fā)者可以和領(lǐng)域?qū)＜腋玫慕涣鳌薄?/p>

幾個 DSL 的例子

1 正則表達(dá)式

通過一些約定好的符號和組合規(guī)則，書寫正則表達(dá)式，通過正則表達(dá)式解釋引擎來實(shí)現(xiàn)字符串的匹配功能。

2 JSON 動態(tài)生成 UI 界面

Jasonette

Create your own native iOS app with nothing but JSON.Then send it over the Internet.

通過配置 JSON 動態(tài)生成 IOS 的 UI 界面。

https://github.com/Jasonette/JASONETTE-iOS

天貓Tangram

Android&iOS 支持，一份數(shù)據(jù)，多端渲染一致。通過 json 數(shù)據(jù)描述可以組合出常用的頁面結(jié)構(gòu)，賦予頁面內(nèi)布局結(jié)構(gòu)的動態(tài)化能力。

http://pingguohe.net/2017/12/07/Tangram-2.html

3 web 前端中的 CSS

這個寫過 CSS 的都有直觀的感受，我們只能根據(jù)規(guī)則，書寫描述性的 CSS 語言，來達(dá)到控制頁面樣式的目的。

4 面對設(shè)計問題

把 UI 界面的長寬，色彩，文字布局，內(nèi)外邊距等設(shè)計元數(shù)據(jù)，以一種約定的、簡潔的語言規(guī)則（即 DSL ）作為程序的輸入，由程序自動分析處理，從而生成真正的 UI 界面的可用代碼。Sketch 軟件生成的文件，其實(shí)就是 JSON 格式的，也算是設(shè)計領(lǐng)域的 DSL 的一種。

所以訓(xùn)練數(shù)據(jù)集，需要設(shè)計一套 DSL ，利用 Sketch.app 生成大量配對的數(shù)據(jù)，并把 DSL 轉(zhuǎn)化為 CNN 訓(xùn)練時使用的 Label 數(shù)據(jù)。

關(guān)于UI2Code中如何利用antd.sketchapp 生成訓(xùn)練數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：UI2Code中如何利用antd.sketchapp生成訓(xùn)練數(shù)據(jù)
網(wǎng)頁鏈接：http://www.chinadenli.net/article28/gccscp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、品牌網(wǎng)站設(shè)計、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)