【QCon】精华内容上线92%,全面覆盖“人工智能+”的典型案例!>>> 了解详情
写点什么

面向未来的黑科技——UI2CODE 闲鱼基于图片生成跨端代码

  • 2019-07-08
  • 本文字数:1936 字

    阅读完需:约 6 分钟

面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码

DEMO 演示

一直以来,如何从‘视觉稿’精确的还原出对应的 UI 侧代码一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的沟通和消耗。


闲鱼团队在去年做了一个很特别的黑科技基于图片直接翻译成对应的 UI 侧代码,具体完成的部分,我们有一个演示的视频。


00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00

    选型背景

    很多人会比较好奇,为什么我会坚持使用图片做为输入源,一方面基于 sketch 或者 photoshop 等插件相对容易拿到确定性的信息,图片在某些方面容易丢失一些特征;另外基于图片的分析其实挑战更大。我们做这个选择有以下原因,首先图片作为最终的产出物,更直观和确定性,另外这个链路里对上游不会有约束性。最后也是最重要的一点基于图片的应用场景会更普适,类似场景例如自动化测试能力的支持,基于竟品直接截图来套用我们自己的数据源找体感,等场景是其他的方案做不到的。


    上面我们在讲项目本身的意义和选型上的一些判断,后面我们会简单介绍下项目的基本流程。

    流程介绍

    首先我们会使用深度学习的方式,来找到对应的 UI 单元,包括基础的 UI 组件,例如 imgview \ textview 等,接下来是自定义的 BI 组件例如 price 等,最后我们会寻找已经被实现过的业务组件。下面是一个常见的业务场景,我们框选了每个对应的部分,演示上面的业务逻辑。



    接下来我们会基于已经检测出的元素,来做对应的元素提取,这个部分我们会去分析系统渲染的原理并使用 opencv 的方法来做对应的功能。


    项目整体的流程,我们用下面的这个图来表示。



    在整个项目落地的过程中,我们遇到很多的技术困难的点,下面我会讲 2 个有意思的点。

    架构演进

    第一个我们会发现 autoui 的整个流程结构是一个非常典型的上下游的流形式,每个关键的单元都会依赖上游的输出,并且为下游提供标准的输入,我们在项目的开始时候,因为没有特别好的去定义切分的关系,经常会出现当一个同学调整和 PUSH 代码后,会对整个链路造成很大的影响,所以我们对架构设计做了一个关键的升级我们定义叫流式的架构,我们用一个图让大家更好的来理解这一块。



    在这个单元里我们定义了 unti,tasks,server 三个单元,unit 本身是最小粒度的功能切分,tasks 是 unit 的组合,server 会提供具体的服务,每个部分都会为上下游提供输入和输出,架构切分的好处是,所有的模块都有标准的输入和输出的部分,我们可以通过对模块的 MOCK 来解决标准化调试的问题,另外当一些基础的功能完成后,我们可以通过搭积木的方式来组合自己想要的 tasks 和 server,在我们做了架构调整后,因为整体的切分更合理,也减少了上下游的依赖,对项目的快速迭代产生了很大的帮助。


    后续在架构侧我们还做了一个有意思的点,因为我们的服务有些是需要跑在服务端,有些是需要跑在客户端上,所以我们设计了一个可以在客户端和服务端同构的场景,目的是希望开发的人员只需要关系界面和服务的通信,但并不需要关注具体服务的部署关系。


    布局问题分析

    上面我们讲了一个架构的设计,后面我们希望讲一个具体的布局问题具体解法,把静态的 DSL 转成一个合适的布局属性的 TREE,在这个部分我们还是分析了能产生布局的因素,如下图所示。



    这样一个非常常见的布局,我们拆分出了影响布局的部分,通过元素位置、间距、容器位置分析,我们参考了 flex 布局的标准,也参考了新的 grid 的布局标准,通过枚举元素在位置中站位的比例,来得出对应的关系。


    但是我们最后还是遇到一些 Bad Case,如何写出更贴近人写出的 UI 侧代码,我们还是需要去参考类似语意的部分,相似度的部分我们才能得到真正合理的布局,例如上面的这个例子,如果按照枚举的布局去推断的话,我们很容易得到一个四个横列的布局关系,但是通过语意和相似度的部分,我们会很容易的推断出一个 gridview 的布局关系。

    现状和未来

    去年整体我们已经比较好的让整个工程在业务侧开始跑起来开始让大家能解放出来做一些更需要思考的事情,并把我们的项目展示给了 Google 团队,也得到了很多的关注。


    未来,我们还是希望通过更好的分析能力(包括容器识别、复杂的背景识别、精确的语意理解能力),产生出更接近开发人员手写的代码,从而完全取代‘切图’这个工作,另外我们也在看在这个阶段我们已经能够让机器来解放开发链路的最前面一段,后面在一些弱交互、强展示的部分,例如导购或者营销这样的场景,我们其实通过数据模型的抽象和识别、甚至固定的 PRD 的识别有可能我们是能真正的解放整段的人力投入,让大家从偏确定性的需求实现中解放出来。另外我们也开始和 D2C 这样的项目一起共建,希望在闲鱼里已经实现的部分,能够解决更多人的问题,解放更多的生产力。


    本文转载自公众号闲鱼技术(ID:XYtech_Alibaba)


    原文链接


    https://mp.weixin.qq.com/s/hajHNqsy708vfHk1wYUN_w


    公众号推荐:

    2024 年 1 月,InfoQ 研究中心重磅发布《大语言模型综合能力测评报告 2024》,揭示了 10 个大模型在语义理解、文学创作、知识问答等领域的卓越表现。ChatGPT-4、文心一言等领先模型在编程、逻辑推理等方面展现出惊人的进步,预示着大模型将在 2024 年迎来更广泛的应用和创新。关注公众号「AI 前线」,回复「大模型报告」免费获取电子版研究报告。

    AI 前线公众号
    2019-07-08 08:004925

    评论

    发布
    暂无评论
    发现更多内容

    Spring Boot「18」使用 JDBC 连接数据库

    Samson

    Java spring 学习笔记 spring-boot 10月月更

    精盾信息莅临千锋教育武汉校区招聘前端开发工程师

    千锋IT教育

    OneFlow源码解析:Global Tensor

    OneFlow

    人工智能 深度学习 源码解析

    这么多大数据培训机构怎么来选择呢

    小谷哥

    WhaleDI自助建模实践与探索

    鲸品堂

    AI Codec 建模

    千锋武汉分校前端学员走访英志软件,并开展现场面试

    千锋IT教育

    千锋教育走访人才合作企业数式科技 深度了解企业人才需求

    千锋IT教育

    Sanitizers 系列之 address sanitizer 原理篇

    网易云信

    数据库 算法 系统

    重磅,无需特殊工具,直接访问网站!

    八点半的Bruce.D

    学C++的以后都能从事哪些岗位?

    C++后台开发

    c++ 后端开发 客户端开发 linux开发 C++开发

    安全可控的企业级低代码开发平台

    力软低代码开发平台

    LED显示屏安装之前要注意的问题

    Dylan

    LED显示屏 户外LED显示屏 led显示屏厂家

    如何让 SAP Spartacus 访问 navigation node 的上下文,暴露更多的字段

    阿英

    typescript angular SAP Spartacus 10月月更

    使用Docker部署软件运行环境

    源字节1号

    软件开发 前端开发 后端开发 小程序开发

    2022年汽车品牌智能网联竞争力指数(ICVCI)

    易观分析

    汽车 ICVCI 智能网联

    2022年最新数据库经典面试题及答案汇总(含PostgreSQL、Oracle、MySQL)

    墨天轮

    MySQL 数据库 oracle postgresql 面试题

    一文浅析人工智能领域相关概念之间的关系

    九章云极DataCanvas

    人工智能 神经网络 机器学习

    Zepoch已售出500+,Zebec Chain受到市场追捧

    西柚子

    SSH的工作原理、加密方式以及配置多个ssh key

    甜点cc

    前端 学习笔记 加密 SSH 10月月更

    面向复杂业务场景下的低代码平台组件设计与实践分享

    Baidu AICLOUD

    组件化 低代码开发平台 数据映射

    嘉为蓝鲸可观测性产品获Gartner Toolkit 推荐

    嘉为蓝鲸

    运维 监控 Gartner 可观测

    敢承诺安全效果?IT人竟能如此省心

    科技热闻

    找个好用的录屏软件,怎么这么难?

    淋雨

    Camtasia

    浅谈Python中的生成器

    何极光

    Python 生成器 10月月更

    TOGAF认证考试开启“主线+支线+副本”模式!

    涛哥 数字产品和业务架构

    浅谈 Python 中的迭代器

    何极光

    Python 迭代器 10月月更

    实时数据湖 Flink Hudi 实践探索

    阿里云大数据AI技术

    大数据 flink 企业号十月 PK 榜

    OpenHarmony将携新成果亮相HDC2022

    OpenHarmony开发者

    OpenHarmony

    阿里云注册集群+Prometheus 解决多云容器集群运维痛点

    阿里巴巴云原生

    阿里云 云原生 Grafana Prometheus

    Go语言入门10—Map

    良猿

    Go golang 后端 Go web

    Mac Osx终端显示图片

    alps2006

    terminal osx

    面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码_AI&大模型_青页_InfoQ精选文章