[论文解读] Sketch2code: Generating a website from a paper mockup

Alex Robinson|arXiv (Cornell University)|May 9, 2019

Video Analysis and Summarization参考文献 90被引用 5

一句话总结

本文提出Sketch2code系统，通过两种方法——传统计算机视觉与深度语义分割——实现从手绘线框图自动生成HTML网页。深度学习方法在性能上优于传统技术，展示了深度学习在从线框图生成代码方面的潜力。作者发布了数据集和评估框架，以推动该领域未来的研究。

ABSTRACT

An early stage of developing user-facing applications is creating a wireframe to layout the interface. Once a wireframe has been created it is given to a developer to implement in code. Developing boiler plate user interface code is time consuming work but still requires an experienced developer. In this dissertation we present two approaches which automates this process, one using classical computer vision techniques, and another using a novel application of deep semantic segmentation networks. We release a dataset of websites which can be used to train and evaluate these approaches. Further, we have designed a novel evaluation framework which allows empirical evaluation by creating synthetic sketches. Our evaluation illustrates that our deep learning approach outperforms our classical computer vision approach and we conclude that deep learning is the most promising direction for future research.

研究动机与目标

• 通过开发一种将纸质草图转换为可运行网站的系统，填补自动化线框图到代码转换的空白。
• 对比传统计算机视觉技术与基于深度学习的语义分割方法在检测与分类线框元素及生成代码方面的表现。
• 创建一个公开可用的线框图与对应HTML代码数据集，以支持未来在设计到代码自动化领域的研究。
• 设计一个可重复的实证评估框架，利用合成草图客观评估多种指标下的性能表现。
• 通过自动化生成样板GUI代码，使非开发人员能够独立完成网站原型设计。

提出的方法

• 开发了双轨方法框架：一种基于传统计算机视觉（边缘检测、颜色分割、文本检测），另一种基于在合成草图上微调的深度语义分割网络。
• 构建了包含10,000个网站线框图及其对应HTML代码的数据集，草图通过受控的绘图流程生成，以确保一致性。
• 应用预处理步骤，将摄像头拍摄的图像转换为适合两种模型输入的清晰、标准化草图。
• 采用U-Net架构的深度学习模型进行语义分割，基于合成线框草图进行训练，以提升泛化能力。
• 实施后处理步骤，对布局进行归一化，纠正对齐错误，并将检测到的元素映射为语义HTML标签。
• 实时部署生成的网站，并通过托管网页实现协作功能。

实验结果

研究问题

• RQ1 RQ1：传统计算机视觉流水线能否有效从手绘草图中检测并分类线框元素（如文本、按钮、输入框）？
• RQ2 RQ2：基于深度学习的语义分割方法是否在检测与分类线框元素及生成正确HTML结构方面优于传统计算机视觉方法？
• RQ3 RQ3：用户在视觉保真度与结构正确性方面，如何评价两种方法生成的网页质量与可用性？
• RQ4 RQ4：受控的合成绘图流程是否能够实现对线框图到代码系统可靠且可重复的评估？

主要发现

• 基于深度学习的语义分割方法在元素检测与分类准确率方面显著优于传统计算机视觉方法。
• 微粒度性能评估显示，深度学习模型在所有元素类型上均取得更高的F1分数，尤其在输入框和按钮等复杂组件上表现更优。
• 在视觉对比任务中，用户更偏好深度学习模型的输出，认为其布局对齐更佳，对原始设计意图的还原更准确。
• 结构对比分析表明，深度学习模型生成的HTML更具语义正确性，布局与嵌套错误更少。
• 用户研究证实，与传统方法相比，深度学习生成的网站在可用性感知和对原始草图意图的贴近度方面表现更优。
• 尽管评估中表现强劲，但两种系统均未达到生产级的可靠性，表明在鲁棒性与泛化能力方面仍有改进空间。