UI设计稿智能检查与校正

UI design lint, UI to code, multimodal feature fusion, object detection

项目简介

UI设计稿零碎图层合并：Imgcook 是阿里巴巴旗下以各种设计稿图像 (Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种原始设计稿一键生成可维护的 UI 视图代码和逻辑代码。在实际生产设计过程中，为了达到想要的视觉效果，设计师会使用多个零碎图层来表达一个UI组件。这种设计方式会对智能代码生成算法造成干扰，从而影响最终生成代码的质量。为了保证智能代码生成算法能够生成高质量的代码，亟需有着更高设计标准的设计稿，但这必定会增加设计师的工作成本。由此可见，一个用于检测设计稿中存在的零碎图层并将其自动合并为UI组件的智能检查工具，能够有效解决从设计稿为输入的代码生成质量低下的问题。传统的图层合并方法，通常采用人工辅助合并或一些基于启发式的检查规则来判断是否对这些图层进行合并。这类方法过于依赖设计师或开发者的判断，同时对大量图层进行筛选和判断也提高了工作时间成本。目前尚无方法，通过端到端的智能检测算法，自动筛选和合并碎片图层成为UI组件，来提高最终代码生成的质量。本项目与阿里巴巴智能化前端团队合作，致力于研究智能化端到端的图层合并方法。

UI设计稿图文同语义成组：随着移动应用程序的普及和发展，图形用户界面（GUI）有着巨大的开发需求。从UI设计稿自动生成UI代码极大地简化了开发流程。但是，设计稿中的嵌套层结构会影响生成代码的质量和可用性。现有的GUI自动化技术很少能检测和分组嵌套层以提高生成代码的可访问性。在本文中，我们提出了一种基于计算机视觉的方法UI Layers Grouper。它可以自动检测呈现相同语义含义的图像（即基本形状和视觉元素）和文本层。我们提出了两个组件，文本融合和框注意力机制，它们利用来自设计稿的文本信息作为先验组定位信息。我们构建了一个用于训练和测试的大规模 UI 数据集，并提出了一种数据增强方法来提高检测性能。实验表明，所提出的方法在层分组方面取得了不错的准确性。