用图片生成跨端代码？闲鱼是如何做到的？

从“视觉稿”还原UI侧代码一直是端侧开发的一大难题。一方面，工作机械重复，技术含量低；另一方面，视觉设计师需要大量时间走查，造成无谓的沟通和消耗。

针对这一痛点，闲鱼团队开发了一项黑科技：基于图片直接生成跨端代码。

该项目负责人王超在2019年GIAC大会上分享了这门黑科技——UI2CODE，本文将带你一览它的全貌。

UI2CODE的诞生

UI2CODE的诞生源于一个简单的需求：能否用一种工具，将视觉设计师的设计稿直接转换成代码？

带着这个想法，闲鱼团队开始探索人工智能在这一领域的应用。经过调研，他们发现，计算机视觉、自然语言处理和深度学习等技术已经取得了突破性进展，可以为UI2CODE提供强大的技术支持。

UI2CODE的原理

UI2CODE的原理并不复杂。它首先使用计算机视觉技术对图片进行识别，提取出图片中的元素，如按钮、文本、图片等。然后，它使用自然语言处理技术对提取出的元素进行语义分析，理解元素之间的关系和属性。最后，它使用深度学习技术生成对应的UI侧代码。

UI2CODE的优势

UI2CODE相比传统的方法，具有以下优势：

• 效率高： UI2CODE可以自动生成代码，大大减少了端侧开发人员的工作量和时间。
• 准确性高： UI2CODE基于人工智能技术，可以准确识别图片中的元素和语义，生成高质量的代码。
• 跨平台： UI2CODE生成的代码可以跨平台使用，支持iOS、Android和Web等多种平台。

UI2CODE的应用

UI2CODE已经应用于闲鱼的多个业务场景中，如商品详情页、首页banner和活动页等。它不仅提高了开发效率，也降低了开发成本，为闲鱼带来了可观的收益。

UI2CODE的未来

UI2CODE目前还处于早期阶段，但它的潜力巨大。未来，UI2CODE将继续发展，在以下几个方面进行突破：

• 支持更复杂的视觉稿： 目前，UI2CODE只能处理简单的视觉稿，未来将支持更复杂的视觉稿，如包含动画、交互等元素的视觉稿。
• 提高代码质量： UI2CODE生成的代码质量还有待提高，未来将通过优化算法和引入新的技术来提高代码质量。
• 支持更多的平台： 目前，UI2CODE只支持iOS、Android和Web平台，未来将支持更多的平台，如小程序、桌面应用等。

结语

UI2CODE是人工智能在端侧开发领域的又一次成功应用。它解决了端侧开发的一大难题，提高了效率和准确性，降低了开发成本。相信随着人工智能技术的不断发展，UI2CODE将发挥更大的作用，为端侧开发带来更多便利。