pix2code总结

Keyword

DSL，即领域特定语言，它是一种为解决特定领域问题，而对某个特定领域操作和概念进行抽象的语言。
• 外部 DSL，即创建一个专用目的的编程语言。诸如用于 BDD 测试的 Cucumber 也是一种外部 DSL，从某种意义上来说，用于写作的 markdown 也算是一种 DSL。它们通常都需要语法解析器来进行语法分析，并且通常可以在不同的语言、平台上实现。
• 内部 DSL，即：指与项目中使用的通用目的编程语言（Java、C#或Ruby）紧密相关的一类 DSL。它是基于通用编程语言实现的，由它来处理复杂的基础设施和操作。
CNN
LSTM

Performance

从原型图生成DSL(领域专用语言)
左边是设计原型图, 右边是对应的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

Detail

训练阶段

训练数据有两部分, 第一部分是设计原型图(GUI), 第二部分是对应的DSL上下文(context). pix2code内部网络又分三部分网络:

1. 一个CNN网络用来理解GUI内容, 获得GUI图像特征.
2. 一个LSTM网络用来理解DSL上下文的基本规律, a单词token产生下一个b单词token的规律 (不包含与原型图的关系)
3. 另一个LSTM’ 用来理解DSL与对应原型图的关系, x 原型图应该生成什么样的上下文token c ?
   其中第一个LSTM实际使用两层各有128个单元的LSTM模块
   第二个LSTM’ 实际使用两层各有512个单元的LSTM模块
   • A LSTM (Long-Short Term Memory) network that takes a sequence of tokens as input (tokens being terminals in the language chosen)
   • a CNN (Convolutional Neural Network) used to engineer features out of the mockup.
   • A LSTM’ that takes (q_t, p) as input and outputs a Softmax vector of tokens. The result (x_t+1) is then fed into the next iteration. The output vector is a mapping of probability to a terminal token.
   The restricted language complexity of the DSL (Domain Specific Language) allows hot vector encoding at the input and a Softmax vector at the output. The LSTM network is fed with a window of tokens of size T (the paper specifies that T=48 is a good window size following empirical tests).

源码生成阶段

只需输入GUI原型图和一个空的上下文DSL即可, pix2code会生成一个与该GUI图像最相关的DSL code .
文章通过之间拼接cnn输出p和LSTM的隐层输出q, 合成为r作为原型图和DSL相关性的依据.
实验结果, 虽然在一些长的组件列表和一些组件颜色上有出入, pix2code的整体表现还是不错的:

Drawback

• No dataset of GUI to code is available online 缺乏GUI到Code的数据
• The code is not provided (yet) by the author
• The code generated is restricted to a subset language (DSL) 限制DSL语言
• The colors and text are not captured by the AI 颜色和文字尚未捕获