[论文解读] Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

Zhihao Zhu, Xue Zhan+1 more|arXiv (Cornell University)|Oct 26, 2018

Advanced Neural Network Applications被引用 8

一句话总结

本文提出一种基于注意力机制的层次化解码器，用于自动GUI到代码的生成，通过分层建模代码结构，提升长序列依赖关系的处理能力和结构准确性。该方法在基准数据集和新构建的复杂GUI数据集上均优于当前最先进方法，尤其在更长、更复杂的代码序列上表现更优。

ABSTRACT

Recent progress on deep learning has made it possible to automatically transform the screenshot of Graphic User Interface (GUI) into code by using the encoder-decoder framework. While the commonly adopted image encoder (e.g., CNN network), might be capable of extracting image features to the desired level, interpreting these abstract image features into hundreds of tokens of code puts a particular challenge on the decoding power of the RNN-based code generator. Considering the code used for describing GUI is usually hierarchically structured, we propose a new attention-based hierarchical code generation model, which can describe GUI images in a finer level of details, while also being able to generate hierarchically structured code in consistency with the hierarchical layout of the graphic elements in the GUI. Our model follows the encoder-decoder framework, all the components of which can be trained jointly in an end-to-end manner. The experimental results show that our method outperforms other current state-of-the-art methods on both a publicly available GUI-code dataset as well as a dataset established by our own.

研究动机与目标

• 解决从GUI截图生成语义准确、具有层次结构的代码的挑战。
• 克服现有基于RNN的解码器在处理长期依赖关系和严格序列长度限制方面的局限性。
• 通过显式建模GUI元素的层次布局及其对应代码结构，提升代码生成的保真度。
• 在标准数据集和新构建的、更复杂的GUI-代码数据集上展示优越性能。

提出的方法

• 采用编码器-解码器框架，使用基于CNN的图像编码器从GUI截图中提取视觉特征。
• 采用两阶段层次化解码器：第一阶段LSTM生成模块级表示，第二阶段LSTM生成每个模块的代码标记。
• 集成一种注意力机制，根据第一阶段LSTM的隐藏状态，动态选择来自CNN特征的相关视觉特征。
• 将注意力后的视觉特征作为上下文输入第二阶段LSTM，以生成代码标记，从而实现GUI区域与代码块之间的更好对齐。
• 使用反向传播端到端训练所有组件，实现图像理解与代码生成的联合优化。
• 推理阶段采用束搜索（束大小为3和5），以提升生成质量，优于贪婪解码。

实验结果

研究问题

• RQ1 与平面序列模型相比，基于注意力机制的层次化解码策略是否能提升复杂GUI的代码生成准确性？
• RQ2 与基线方法相比，该模型在iOS和Android GUI中常见的长代码序列上的表现如何？
• RQ3 注意力机制在多大程度上增强了生成程序中视觉区域与代码块之间的对齐？
• RQ4 与现有方法相比，该模型在具有多样化布局和丰富视觉元素的更复杂GUI上的泛化能力如何？
• RQ5 解码器的层次结构在多大程度上增强了模型保留生成代码中结构和语义细节的能力？

主要发现

• 所提模型在PixCo基准数据集上达到SOTA性能，在所有子数据集中均优于pix2code和基线方法：iOS（26.10 vs. 27.20）、Android（27.20 vs. 27.25）和Web（18.31 vs. 17.25）的分类误差均更低。
• 在更复杂的PixCo-e数据集上，该模型显著优于基线方法，尤其在长序列上误差率更低（如iOS为109个标记/GUI，Android为112个标记/GUI），表明其在长期依赖关系处理方面表现更优。
• 束搜索（束大小为5）的性能优于贪婪解码，误差率分别降至iOS的25.78、Android的26.95和Web的17.12。
• 定性结果表明，该模型能更好地保留视觉细节并正确重建复杂的GUI布局，而pix2code在PixCo-e数据集上未能恢复许多元素。
• 注意力机制使模型能够学习代码块与其在GUI中对应空间区域之间的有意义对齐，如注意力热力图所示。
• 与无注意力的层次化基线相比，带有注意力机制的层次化解码器显著提升了性能，证实了注意力在引导上下文选择方面的价值。