[论文解读] pix2code: Generating Code from a Graphical User Interface Screenshot

Tony Beltramelli|arXiv (Cornell University)|May 22, 2017

Advanced Image and Video Retrieval Techniques参考文献 24被引用 30

一句话总结

pix2code 提出了一种端到端的深度学习模型，通过使用 CNN-RNN 架构，从单个 GUI 截图生成源代码，在无需针对任务进行调优的情况下，实现了在 iOS、Android 和基于网络的平台上的超过 77% 的准确率。该模型直接从像素数据和领域特定语言（DSL）标记序列中学习视觉和序列模式，从而实现仅通过原始图像进行自动代码生成，且人工干预极少。

ABSTRACT

Transforming a graphical user interface screenshot created by a designer into computer code is a typical task conducted by a developer in order to build customized software, websites, and mobile applications. In this paper, we show that deep learning methods can be leveraged to train a model end-to-end to automatically generate code from a single input image with over 77% of accuracy for three different platforms (i.e. iOS, Android and web-based technologies).

研究动机与目标

• 自动化将 GUI 截图转换为功能代码，以减少开发人员的手动实现时间。
• 通过直接从像素级输入和对应代码序列学习，消除对手动设计的启发式方法或特征工程的需求。
• 开发一种统一的模型架构，能够使用相同的训练框架为多个平台（iOS、Android、网络）生成代码。
• 公开发布与 GUI 截图配对的源代码数据集，以支持未来在从视觉输入生成程序方面的研究。

提出的方法

• 卷积神经网络（CNN）将 GUI 截图编码为视觉特征表示，捕捉用户界面元素的空间和结构信息。
• 循环神经网络（RNN），具体为堆叠的 LSTM 层，对领域特定语言（DSL）中源代码标记的序列结构进行建模。
• 将视觉特征和序列特征拼接后输入解码器 RNN，通过 softmax 层对 DSL 词汇表中的概率分布进行建模，逐个生成代码标记。
• 通过随机梯度下降进行端到端训练，以最小化预测代码序列与真实标签序列之间的交叉熵损失。
• 推理过程中，采用贪婪搜索和束搜索策略，从模型输出的概率分布中解码出最可能的标记序列。
• 使用标准编译技术，通过 DSL 编译器将生成的 DSL 标记转换为目标平台特定的代码（例如，iOS 使用 Swift，Android 使用 XML，网络使用 HTML/CSS）。

实验结果

研究问题

• RQ1 深度学习模型能否在无需人工设计特征或启发式方法的情况下，直接从 GUI 截图生成语法正确的源代码？
• RQ2 单一统一模型在无架构或超参数调整的情况下，对不同平台（iOS、Android、网络）的泛化能力如何？
• RQ3 在合成的图像-代码配对上进行端到端训练，在学习视觉布局与对应代码结构映射方面有多高效？
• RQ4 不同的解码策略（贪婪搜索 vs. 束搜索）对代码生成准确率和序列质量有何影响？

主要发现

• 在基于网络的 HTML/CSS 数据集上，使用贪婪搜索时，pix2code 模型的分类错误率为 12.14%，表明其在网页 GUI 上具有强大的泛化能力。
• 在 iOS 和 Android 上，使用贪婪搜索时，模型的错误率分别为 22.73% 和 22.34%，表明其在移动平台上的表现一致。
• 束搜索的束宽为 3 时，iOS 数据集的错误率降低至 23.94%，而束宽为 5 时，Android 数据集的错误率上升至 40.93%，表明模型在复杂布局上对解码策略较为敏感。
• 即使在数据合成过程中随机分配标签文本，该模型仍能成功保留生成 GUI 的层次结构和布局关系。
• 尽管在样式和颜色选择方面偶有缺陷，但该模型对未见过的 GUI 布局泛化良好，并在生成的代码中保持了结构保真度。
• 公开发布的 iOS、Android 和网络 GUI 的数据集，使未来研究无需依赖真实世界标注数据，即可开展视觉到代码的生成研究。