[论文解读] Sketch2Code: Transformation of Sketches to UI in Real-time Using Deep Neural Network

Vanita Jain, Piyush Agrawal+3 more|arXiv (Cornell University)|Oct 20, 2019

Interactive and Immersive Displays被引用 13

一句话总结

Sketch2Code 提出了一种深度学习模型，可实时（平均推理时间：129 ms）将手绘用户界面草图转换为平台无关的用户界面表示对象，使用了包含149幅草图中2001个用户界面元素的自定义数据集。该系统通过微调的基于YOLO的网络检测用户界面组件，解决重叠元素问题，并生成可解析为特定平台代码的类似DOM的JSON对象，从而实现无需微调的高效多平台用户界面原型设计。

ABSTRACT

User Interface (UI) prototyping is a necessary step in the early stages of application development. Transforming sketches of a Graphical User Interface (UI) into a coded UI application is an uninspired but time-consuming task performed by a UI designer. An automated system that can replace human efforts for straightforward implementation of UI designs will greatly speed up this procedure. The works that propose such a system primarily focus on using UI wireframes as input rather than hand-drawn sketches. In this paper, we put forward a novel approach wherein we employ a Deep Neural Network that is trained on our custom database of such sketches to detect UI elements in the input sketch. Detection of objects in sketches is a peculiar visual recognition task that requires a specific solution that our deep neural network model attempts to provide. The output from the network is a platform-independent UI representation object. The UI representation object is a dictionary of key-value pairs to represent the UI elements recognized along with their properties. This is further consumed by our UI parser which creates code for different platforms. The intrinsic platform-independence allows the model to create a UI prototype for multiple platforms with single training. This two-step approach without the need for two trained models improves over other methods giving time-efficient results (average time: 129 ms) with good accuracy.

研究动机与目标

• 自动化将手绘用户界面草图转换为功能性代码原型的耗时过程。
• 开发一种深度神经网络，能够在非约束性、自由手绘草图中识别用户界面元素，这是一项具有挑战性的视觉识别任务。
• 生成一种平台无关的用户界面表示对象，实现无需微调即可为多个平台快速生成代码。
• 在效率和精度上优于依赖线框图或两阶段检测流程的现有方法。
• 评估模型在不同光照条件和草图质量（包括阴影和过度饱和）下的鲁棒性。

提出的方法

• 为训练创建了一个包含149幅草图的自定义数据集，共包含2001个标注的用户界面元素（如按钮、文本框等）。
• 微调了一个基于YOLO的单阶段目标检测模型，用于在手绘草图中检测用户界面组件，输入图像被缩放为416×416。
• 应用重叠检测启发式规则，通过优先考虑更大或更显著的组件来解决空间重叠的用户界面元素。
• 模型输出一种平台无关的用户界面表示对象，格式为JSON，结构为键值对字典，编码了元素类型、位置和属性。
• 一个基于React的用户界面解析器接收JSON表示，生成特定平台的用户界面代码，实现跨平台部署。
• 使用NVIDIA GeForce GTX 1060 GPU和cuDNN加速推理，时间测量排除了图像加载时间，以衡量纯模型推理速度。

实验结果

研究问题

• RQ1 深度神经网络是否能在光照、绘画风格和背景变化的情况下，准确检测自由手绘草图中的用户界面元素？
• RQ2 在低光照、阴影和过度饱和等具有挑战性的视觉条件下，模型表现如何？
• RQ3 一个单一训练好的模型是否能够生成平台无关的用户界面表示，并进一步解析为多个平台的功能性代码？
• RQ4 该模型的推理速度是多少？是否能够实现适合交互式原型设计的实时性能？
• RQ5 随着训练数据量的增加，模型性能如何变化，特别是在准确性和鲁棒性方面？

主要发现

• 模型每张图像的平均推理时间为129 ms，证明了其适合交互式用户界面原型设计的实时性能。
• 在低光照和阴影条件下性能下降，原因是难以区分背景与前景元素，导致推理时间增加。
• 过度饱和和反光背景会导致预测不准确，尤其当背景不一致或存在噪声时。
• 在光照理想、背景为干净白色的情况下，模型表现最佳，准确率高且推理时间短。
• 在仅149幅图像和2001个标注组件的小型数据集上，模型表现出良好的泛化能力，表明随着更大、更多样化的训练数据，性能有望进一步提升。
• 两步式流程（检测后生成用户界面表示并解析）实现了平台独立性，无需为每个平台单独训练模型。