pix2code:Generating Code from a Graphical User Interface Screenshot

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

微信公众号文章地址：

https://mp.weixin.qq.com/s_biz=MzI5NDMzMjY1MA==&mid=2247483794&idx=1&sn=a5e307443db02b4363ade86adc97adca&chksm=ec653017db12b9016dd4eb1518f9e6ad2548f6153b981075d240675f2c30f750bf5da8ba81a2#rd

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

                                                                                            图一：pix2code模型结构

（1）   VisionModel

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

（2）   LanguageModel

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

04

—

总结

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

I am a front-end developer, will I soon lose my job/span>

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

来源：Microstrong0305