就在不久前

MixLab的小伙伴看到了一篇關(guān)于加速設(shè)計(jì)流程的文章并轉(zhuǎn)發(fā)給了我，其中用到了圖像識(shí)別、OCR、代碼生成等技術(shù)，今天碰巧看到一篇算法實(shí)現(xiàn)的論文，正好可以對(duì)其中的一部分算法進(jìn)行原理拆解。

文章：如何用工具加速你的設(shè)計(jì)流程？

輸入圖片，輸出代碼?

一鍵生成

最終實(shí)現(xiàn)：訓(xùn)練神經(jīng)網(wǎng)絡(luò)使其能夠直接基于設(shè)計(jì)后的圖片，來生成一個(gè)包含 HTML+CSS?的網(wǎng)站。

概述

1??將設(shè)計(jì)圖像提供給經(jīng)過訓(xùn)練的神經(jīng)網(wǎng)絡(luò)

2??神經(jīng)網(wǎng)絡(luò)將圖像轉(zhuǎn)換為 HTML 這種標(biāo)記語言

3??渲染輸出

核心邏輯

讓我們回顧一下我們的目標(biāo)。我們想要構(gòu)建一個(gè)神經(jīng)網(wǎng)絡(luò)，該網(wǎng)絡(luò)將生成與屏幕截圖相對(duì)應(yīng)的HTML / CSS代碼并展示。

訓(xùn)練神經(jīng)網(wǎng)絡(luò)時(shí)，我們會(huì)給它 “喂” 幾個(gè)具有匹配HTML的屏幕截圖。

通過逐一預(yù)測(cè)所有匹配的 HTML 標(biāo)簽來進(jìn)行學(xué)習(xí)，當(dāng)它預(yù)測(cè)下一個(gè)標(biāo)簽時(shí)，它將輸入屏幕截圖以及所有正確的標(biāo)簽，直到預(yù)測(cè)出對(duì)應(yīng)的最可能的標(biāo)簽。

創(chuàng)建一個(gè)可以逐詞預(yù)測(cè)的模型是當(dāng)今最常見的方法，還有其他方法，但在這里就不一一展開。

值得注意的是，對(duì)于每個(gè)預(yù)測(cè)，模型都需要獲得相同的屏幕截圖。因此，如果必須預(yù)測(cè)20 個(gè)單詞，它將獲得 20 次相同的截圖照片輸入。

在這里，你可能不需要太關(guān)注神經(jīng)網(wǎng)絡(luò)如何工作，只需要關(guān)注神經(jīng)網(wǎng)絡(luò)的輸入和輸出就可以。

假設(shè)我們訓(xùn)練的模型需要預(yù)測(cè)句子 “I can code”。當(dāng)它收到 “ I” 時(shí)，它將會(huì)預(yù)測(cè)下一個(gè)單次 “can” ，下次它將收到 “can” 時(shí)則會(huì)預(yù)測(cè) “code” 。同樣的道理，在預(yù)測(cè) HTML 標(biāo)簽時(shí)也是如此。

當(dāng)您想將訓(xùn)練后的模型用于實(shí)際使用時(shí)，這與訓(xùn)練模型時(shí)類似。每次使用相同的屏幕截圖來生成 HTML 標(biāo)簽文本。

但從一開始并不會(huì)提供完全正確的 HTML 標(biāo)簽，而是接收到到目前為止所生成的標(biāo)簽，不斷的預(yù)測(cè)下一個(gè)標(biāo)記標(biāo)簽。整個(gè)預(yù)測(cè)過程以 “start tag” 開始，并在預(yù)測(cè)到 “end tag” 時(shí)或達(dá)到最大長度限制時(shí)停止。

樣例：hello world版

若我們也想試驗(yàn)下這個(gè)項(xiàng)目，構(gòu)建一個(gè)簡(jiǎn)單的hello world版本就可以試玩。

將顯示“ Hello World！” 的簡(jiǎn)易網(wǎng)站截圖，并輸入神經(jīng)網(wǎng)絡(luò)，運(yùn)行模型就可以使其生成對(duì)應(yīng)的HTML標(biāo)簽。

論文地址：https://arxiv.org/abs/1705.07962

-END-

uizard?試用鏈接地址

請(qǐng)戳?https://uizard.io/i/FhHaP

加小編好友

獲取本文的算法代碼

總結(jié)

以上是生活随笔為你收集整理的程序员要失业了… 输入图片，输出代码，一键生成。 | MixLab交叉学科的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。