程序员要失业了… 输入图片，输出代码，一键生成。 | MixLab交叉学科

就在不久前

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