#让AI替你写代码, pix2code: 从图片生成前端代码, 用CNN+LSTM构建端到端网络

将来, AI会替你完成一部分项目代码, 也许就从简单的前端代码开始 — David 9

不久前Uizard 放出一篇有意思的论文(详见youtube上demo), 目标很简单: 试图从设计原型图直接生成源代码, 为了证实可行性, 文章的做法是, 首先从原型图生成DSL(领域专用语言):

来自: https://arxiv.org/pdf/1705.07962.pdf

左边是设计原型图, 右边是对应的DSL, 是描述了GUI的格式化语言. 如: 第一行有一个label和一个switch按钮.

剩下的只要把DSL语言编程成源代码即可 .

cd compiler

# compile .gui file to Android XML UI
./android-compiler.py <input file path>.gui

# compile .gui file to iOS Storyboard
./ios-compiler.py <input file path>.gui

# compile .gui file to HTML/CSS (Bootstrap style)
./web-compiler.py <input file path>.gui

最吸引David 9的, 其实是作者结合CNN与LSTM的方法. 我们知道, CNN擅长抽取图片特征, 而RNN擅长学习文本和序列规律, 只要把这两组”上下文”集成起来, 我们就有信心知道一张设计原型图的”语义”, 每个语义对应一个DSL, 最后根据DSL生成源代码即可.

来看看文章中的做法: 继续阅读#让AI替你写代码, pix2code: 从图片生成前端代码, 用CNN+LSTM构建端到端网络