Reverse Engineering Mobile Application User Interfaces With REMAUI
关注微信公众号【Microstrong】,我写过4年Android代码，了解前端、熟悉后台，现在研究方向是机器学习、深度学习！一起来学习，一起来进步，一起来交流吧！欢迎扫描下方二维码关注！
最近花了将近两周的时间看了一篇关于人工智能自动生成代码的论文，题目为《Reverse Engineering Mobile Application User Interfaces With REMAUI》。论文实现了输入一张移动端截屏图片，产生相应的源代码和资源文件的功能。这篇论文发表在Automated Software Engineering Conference（简称ASE）上，听说这个会议是软件工程领域顶级的国际会议，并且这篇论文还获得了ACM SIGSOFT Distinguished Paper Award。这篇论文参加的应该是ASE-2015年的会议，论文中作者做的实验和收集数据集都是在2014年，那么这篇论文现在才看到，应该说不是太新的文章。我认真看了几遍，给这篇文章写个总结。
01
—
Abstract
在开发移动应用程序的用户界面代码时，实际上图形艺术家的数字概念图与工作用户界面代码之间存在很大的差距。目前，程序员通过代码重新实现概念图，手工解决了这个差距，这个过程是繁琐和昂贵的。为了解决这个差距，我们首次提出了自动****移动应用程序用户界面技术，简称REMAUI。在给定的输入图片上，REMAUI通过计算机视觉和光学字符识别（OCR）技术识别用户界面元素，如图像，文本，容器和列表。在我们对超过100种流行的第三方Android和iOS应用程序的488张屏幕截图进行的实验中，REMAUI生成的用户界面与原始图像在逐像素上和运行时用户界面层次上都是相似的。REMAUI在标准桌面计算机上的平均运行时间是9秒。
02
—
Introduction and Motivation
本文识别并解决了移动应用程序开发中的三个问题。在****中，我们解决了从屏幕截图中推断移动应用程序的用户界面代码问题。在正向工程中，我们解决了扫描的铅笔在纸上画的UI草图和代码之间的差距，以及基于像素的UI草图和代码之间的差距。虽然这些问题在开发过程的不同时间发生，但它们都是从像素到代码的推理任务。
具体而言，本文介绍了第一种自动反向工程移动应用程序用户界面（REMAUI）技术。REMAUI自动从用户界面的屏幕截图或概念图中推断移动应用程序源代码的用户界面部分。在给定的输入图片上，REMAUI通过计算机视觉和光学字符识别（OCR）技术识别用户界面元素，例如图像，文本，容器和列表。REMAUI进一步推断出合适的用户界面层次结构，并将结果导出为可供编译和执行的源代码。生成的用户界面非常相近真实应用程序的用户界面。总之，本文做出了以下主要贡献。
（1）本文介绍REMAUI，第一次提出从屏幕截图或概念图中推断移动应用程序用户界面代码的技术。
（2）为了评估REMAUI，我们实现了一个生成Android应用程序UI部分的原型工具。该工具可通过REMAUI网站免费获取。
（3）REMAUI生成的UI在对100多个流行的第三方移动应用程序的488个屏幕截图进行评估时，与原始图像，逐像素图像以及运行时UI层次结构类似。
03
—
Motivating Example
图1：REMAUI使用示例：UI设计人员提供了一个概念性UI绘图（左侧）。 REMAUI标识UI元素（如文本和图像列表），并将其排列在合适的UI层次结构中。然后，REMAUI将推断出的UI作为源代码和资源文件导出，编译并在手机上运行。
图2：图1中每个列表条目的REMAUI生成的布局。仅对列表条目的左侧部分显示详细信息。
图3：REMAUI生成的Android（即Java）源代码，用于在应用程序运行时填充图二列表条目。
生成的UI代码和布局定义文件可以使用标准的Android开发工具进行编译。而且，生成代码与专业开发人员实现屏幕界面相似。例如，生成的代码使用适当种类的布局容器（如RelativeLayout）作为列表条目。一个RelativeLayout可以消除对一些嵌套容器的需求，从而保持布局层次相对平坦，从而提高应用程序运行时的渲染性能。
04
—
REMAUI Overview and Design
4.1 Optical Character Recognition
首先，REMAUI在给定的输入图片上应用现成的OCR字检测。由于光学字符识别遭受错误的识别，REMAUI对OCR结果进行后处理，以移除可能不会反映输入中真实词语的候选词。在单词级别的检查中，REMAUI的OCR系统将多个UI元素分类为单词，这些UI元素不是单词而是图片或者图片的一部分。论文中又定义了一些规则进行错误修订，感兴趣的小伙伴们，可以自己看一下论文。
图4：通过规则启发式的结果：来自图1的输入，来自OCR(框架，中间)的候选词以及通过我们的启发式（黑色矩形，右）消除的候选者。
4.2 Computer Vision
在计算机视觉这一步，REMAUI推断出第一个候选视图结构。两个重要的发现是（1）许多截然不同的观点层次可能会导致非常相似的屏幕外观（2）程序员可能会发现其中一些视图层次比其他层次更有价值。因此，REMAUI遵循仔细选择的启发式方法来产生理想的视图层次结构，以平衡以下两个目标。
（1） 第一个目标是最小化层次结构，例如：有一个最小数量的节点。从程序员的角度来看，这对防止生成的代码中的混乱非常重要。更重要的是，大量的视图层次节点拖慢了应用。
（2） 第二个目标是推断视图层次结构的最大灵活性。不同的用户界面元素应该由不同的视图来表示，使生成的用户界面可以很好地显示在屏幕大小和分辨率不同的各种组合上。
为了完成这些任务，REMAUI利用现成的计算机视觉。图5说明了图1输入图片上REMAUI关键计算机视觉步骤。首先我们通过广泛使用的Canny算法检测每个图片元素的边缘。但是这些边缘本身并不适合原子元素，例如，每个角色甚至是微小的噪音都会成为它自己的元素。
将相近的元素相互合并，并与周围的噪音合并，并闭合几乎封闭的轮廓，REMAUI扩大其检测到的边缘。例如，REMAUI使用一种启发式方法允许一个单词的字符合并，但保留单词是分开的。然后，REMAUI计算扩大的边缘轮廓。每个轮廓是候选的原子元素。
图5：从左到右的计算机视觉处理步骤，原始输入图片；通过Canny算法检测到边缘为黑色和白色；扩大或放大的边缘，以吸收噪音，并加入相邻的元素；连接元素的轮廓；输入：轮廓边界框的层次结构。
4.3 Merging
在上面两个子步骤中，REMAUI将OCR和计算机视觉的结果合并，以启发性地组合两者的最佳结果，并将OCR推断的文本集成到视觉推断的候选视图分层结构中。
首先，REMAUI删除与视觉推断元素边界框相冲突的OCR检测字。此步骤解决了常见的OCR误报，例如将图像的一部分分类为文本片段，将项目符号点分类为“o”或类似字符，并合并间距太小的文本行。由此产生的OCR提取的文本是没有用的，而应该导出为图像。
4.4 Identify Lists
在这个步骤中，REMAUI识别重复的项并将其汇总为集合，原因有两个。首先，如果每个重复的资源只被表示一次，则最终的UI定义更加紧凑和高效。其次，这个步骤允许REMAUI从几个实例泛化到泛型集合。然后REMAUI可以将观察到的实例作为集合的示例实例。
REMAUI通过按相对位置对视图进行排序并搜索相同的子树来识别重复的实例。一个子树由一个视图及其传递的一个子集组成。如果每个子节点在另一个子树中具有对等体，则两个子树是相同的，使得两个节点具有相同数量的子节点和相同的宽度，高度，类型（文本或图像）以及内部的匹配位置它的父母（每个都在一个门槛内）。文本内容和图像位图都不必相同，例如，列表项可能包含用户的脸部，如图1所示。
4.5 Export
在这一步中，REMAUI将所有结果导出为一个Android项目目录，并附有相关的源代码和资源文件。这个目录可以用标准的Android IDE进行编译。具体来说，REMAUI从输入的截图中裁剪和提取每个标识的图像，对于重复的图像只有一次。为了提供合理的背景颜色，REMAUI在提取所有识别的图像后，使用每个容器的主色作为容器背景。 REMAUI将所有检测到的文本内容和格式导出到Android strings.xml和styles.xml文件。 REMAUI将布局文件导出到Android布局目录，以便在列表项和主屏幕之间共享布局。最后，REMAUI生成Java代码以在运行时用识别的项填充列表。
05
—
总结
阅读这篇文章，你要有一定的移动端编程基础，是一篇偏向工程方向的论文。当然，我只是把论文中主要的技术给大家讲述了一下。论文后边还有大部分的时间分析、误差分析，感兴趣的小伙伴，可以自己详细阅读一下论文。
论文中使用的Android的REMAUI模型可以在这个网址免费获得：http://cseweb.uta.edu/~tuan/REMAUI/
论文下载地址：http://cseweb.uta.edu/~tuan/papers/nguyen15reverse.pdf
测试REMAUI模型地址：http://pixeltoapp.com/
相关文章：