pix2code:Generating Code from a Graphical User Interface Screenshot

微信公众号同步文章：让AI自动生成代码，我在研究未来可能让程序员失业的科技

关注微信公众号【Microstrong】,我写过4年Android代码，了解前端、熟悉后台，现在研究方向是机器学习、深度学习！一起来学习，一起来进步，一起来交流吧！欢迎扫描下方二维码关注！

最近半年一直在研究如何让AI自动生成代码，这篇文章很早之前就想写了。原因（1）给大家科普一下，AI的最新发展前沿成果。（2）让广大程序员了解一下，AI真的会帮我们写代码哦！这篇文章，推迟到现在，才写出来呢！一部分是我在这个领域研究也不够深入，才入门而已。另一部分，一直想在这一块做出一点成果，但是呢！最近一直迟迟没进展。不过没关系啦！我还是给大家唠唠AI是如何自动生成代码的吧！

今天我们就先看一篇技术含量比较高，我本身也比较喜欢的一篇论文《pix2code:Generating Code from a GraphicalUser Interface Screenshot》

01

—

Background

实现设计者创建的GUI软件界面是开发者的责任。然而，实现GUI代码是耗时间，也阻止开发者专心实现真正的软件特征（技术难点、框架）和软件的逻辑结构。此外，实现GUI的计算机语言针对某个平台是特定的，因此当软件希望运行在多平台的时候，开发者要针对不同的平台，用特定平台的语言实现软件。这种是无聊和重复的工作。在这篇文章中呢！作者设计了一个系统，给定一张GUI截屏图片作为输入，能自动产生针对某一平台的特定计算机代码。

02

—

Contribution

作者的第一个贡献是pix2code模型,这个模型把单个的GUI截屏图片作为输入，基于卷积神经网络和循环神经网络产生计算机标签。这个模型仅仅是从输入图片的像素值中学习。实验结果显示，针对各种各样的平台，这个产生计算机代码的pix2code方法是有效的。这个模型，能产生IOS平台的界面代码，Android平台的XML代码，基于Web的HTML/CSS代码，并且生成的Web代码是基于Bootstrap框架风格的！我们不需要对这个模型做任何的改变或者是微调。一个模型，具体是如何生成三个平台的计算机代码呢！文章中作者也给出了解释，pix2code模型训练在不同的数据集上，能产生针对某一平台的特定语言。作者还把自己训练完的模型，产出代码，录制了一个视频，我们可以看一下：地址链接：https://www.uizard.io/research#pix2code

作者的第二个贡献是发布了由三个不同平台的GUI截屏图片和相关的源代码组成的数据集。数据集和pix2code模型已经被公布了，可以用于将来的研究。

03

—

pix2code模型介绍

从一个GUI截屏图片中生成指定编程语言的计算机代码这个任务类似于给你一张照片，产生英语文本的描述。其实，给你一张照片产生一段文本的描述，这也是最近很火热的一个方向，叫做“Image Caption”,刚结束的AI Challenge比赛中，就有关于这方面的赛题。也是一个可以做的研究方向。不管是自动生成代码还是产生图片的文本描述，我们都是从像素值中产生一个可变长度的字符串。基于图片的自动代码生成任务，我们可以把这个问题划分成三个子问题。第一，一个计算机视觉问题，理解给定的图片和推测出图片中的目标、它们的身份、位置、姿态（例如是按钮、标签、或者是其他元素）。第二，一个语言建模问题，理解文本和产生语法语义都正确的样本。理解文本主要就是理解计算机代码。第三，这个最后的挑战就是用前两步的结果去产生相应的计算机代码。具体的模型结构如图1所示。

                                                                                            图一：pix2code模型结构

（1）   VisionModel

用来解决广泛视觉问题CNNs是当前被选中的方法。因为CNNs的拓扑结构允许它们从训练的图片中学习丰富的潜在特征。作者用CNN执行无监督学习，映射输入图片到一个学到的固定长度的向量中。CNN是一个编码模型，结构显示在图一中。

（2）   LanguageModel

作者设计了一个简单的DSL描述GUI,如图二所示。在这一部分工作中，我们仅仅感兴趣在于GUI的布局、不同的图形组件、组件之间的关系。因此，文本标签上真正的文本值我们是不关注的。此外，为了减少搜索空间，这个简化的DSL也减少了词典的大小。结果是，我们的语言模型能执行标签级别的语言建模。

                                                            图二：一个IOS的GUI对应DSL的例子

（3）   Decoder

通过输入一张图片和一个文本序列，这个pix2code用一种有监督的方法进行训练。这部分就是把前两步的结果进行某种方式合并，并输入到LSTM中进行训练。这部分的结构我们用数学公式表达如下：

图三:Decoder的结构

04

—

总结

最后，告诉大家一个好消息，作者在github中，也回答了你们最想问的问题：

I am a front-end developer, will I soon lose my job?

Not anytime soon will AI replace front-end developers.

Even assuming a mature version of pix2code able to generate GUI code with 100% accuracy for every platforms/languages in the universe, front-enders will still be needed to implement the logic, the interactive parts, the advanced graphics and animations, and all the features users love. The product we are building at Uizard Technologies is intended to bridge the gap between UI/UX designers and front-end developers, not replace any of them. We want to rethink the traditional workflow that too often results in more frustration than innovation. We want designers to be as creative as possible to better serve end users, and developers to dedicate their time programming the core functionality and forget about repetitive tasks such as UI implementation. We believe in a future where AI collaborate with humans, not replace humans.

毫无疑问，这篇文章是深度学习方向新的应用领域。解决了从UI工程师到实现UI代码的问题，为开发者节省了时间，同时也节省了企业资金输出。这个模型我亲自跑了一下，精度大概70%左右。同时作者开源了模型的代码和数据集，这对于感兴趣的小伙伴来说，可是一个好消息。因为，只要简单的训练模型，我们就可以自动生成三个不同平台的GUI代码。当然，我在AI自动生成代码方向还看过许多其他论文，后续，我会慢慢给大家介绍。看到这里，你是真的喜欢这篇文章啦！点个赞吧！

论文下载地址：https://arxiv.org/pdf/1705.07962.pdf

模型和数据集下载地址：https://github.com/tonybeltramelli/pix2code

模型视频演示地址：https://uizard.io/research#pix2code