就在不久前

MixLab的小伙伴看到了一篇關于加速設計流程的文章并轉發給了我，其中用到了圖像識別、OCR、代碼生成等技術，今天碰巧看到一篇算法實現的論文，正好可以對其中的一部分算法進行原理拆解。

文章：如何用工具加速你的設計流程？

輸入圖片，輸出代碼?

一鍵生成

最終實現：訓練神經網絡使其能夠直接基于設計后的圖片，來生成一個包含 HTML+CSS?的網站。

概述

1??將設計圖像提供給經過訓練的神經網絡

2??神經網絡將圖像轉換為 HTML 這種標記語言

3??渲染輸出

核心邏輯

讓我們回顧一下我們的目標。我們想要構建一個神經網絡，該網絡將生成與屏幕截圖相對應的HTML / CSS代碼并展示。

訓練神經網絡時，我們會給它 “喂” 幾個具有匹配HTML的屏幕截圖。

通過逐一預測所有匹配的 HTML 標簽來進行學習，當它預測下一個標簽時，它將輸入屏幕截圖以及所有正確的標簽，直到預測出對應的最可能的標簽。

創建一個可以逐詞預測的模型是當今最常見的方法，還有其他方法，但在這里就不一一展開。

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

在這里，你可能不需要太關注神經網絡如何工作，只需要關注神經網絡的輸入和輸出就可以。

假設我們訓練的模型需要預測句子 “I can code”。當它收到 “ I” 時，它將會預測下一個單次 “can” ，下次它將收到 “can” 時則會預測 “code” 。同樣的道理，在預測 HTML 標簽時也是如此。

當您想將訓練后的模型用于實際使用時，這與訓練模型時類似。每次使用相同的屏幕截圖來生成 HTML 標簽文本。

但從一開始并不會提供完全正確的 HTML 標簽，而是接收到到目前為止所生成的標簽，不斷的預測下一個標記標簽。整個預測過程以 “start tag” 開始，并在預測到 “end tag” 時或達到最大長度限制時停止。

樣例：hello world版

若我們也想試驗下這個項目，構建一個簡單的hello world版本就可以試玩。

將顯示“ Hello World！” 的簡易網站截圖，并輸入神經網絡，運行模型就可以使其生成對應的HTML標簽。

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

-END-

uizard?試用鏈接地址

請戳?https://uizard.io/i/FhHaP

加小編好友

獲取本文的算法代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。