UI2Code智能生成Flutter代码--整体设计篇

背景:

  随着移动互联网时代的到来,人类的科学技术突飞猛进。然而软件工程师们依旧需要花费大量精力在重复的还原UI视觉稿的工作。
UI视觉研发拥有明显的特征:组件,位置和布局,符合机器学习处理范畴。能否通过机器视觉和深度学习等手段自动生成UI界面代码,来解放重复劳动力,成为我们关注的方向。

UI2CODE简单介绍:

  UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具。

  2018年3月UI2CODE开始启动技术可行性预研工作,到目前为止,经历了3次整体方案的重构(或者重写)。我们参考了大量的利用机器学习生成代码的方案,但都无法达到商用指标,UI2CODE的主要思想是将UI研发特征分而治之,避免鸡蛋放在一个篮子里。我们着重关注以下3个问题的解法:

视觉稿还原精度:我们的设计师甚至无法容忍1像素的位置偏差;
准确率:机器学习还处于概率学范畴,但我们需要100%的准确率;
易维护性:工程师们看的懂,改的动是起点,合理的布局结构才能保障界面流畅运行。

UI2CODE运行效果:

  UI2CODE插件化运行效果,如下视频:进过几轮重构,最终我们定义UI2CODE主要解决feeds流的卡片自动生成,当然它也可以对页面级自动生成。



架构设计:

简化分析下UI2CODE的流程:


大体分为4个步骤:

1.通过机器视觉技术,从视觉稿提取GUI元素
2.通过深度学习技术,识别GUI元素类型
3.通过递归神经网络技术,生成DSL
4.通过语法树模板匹配,生成flutter代码

版面分析

  版面分析只做一件事:切图。

  图片切割效果直接决定UI2CODE输出结果的准确率。我们拿白色背景的简单UI来举例:



上图是一个白色背景的UI,我们将图片读入内存,进行二值化处理:


def image_to_matrix(filename):im = Image.open(filename)width, height = im.sizeim = im.convert("L")matrix = np.asarray(im)return matrix, width, height

得到一个二维矩阵:将白色背景的值转化为0.

像切西瓜一样,我们只需要5刀,就可以将GUI元素分离,切隔方法多种多样:(下面是横切的代码片段,实际切割逻辑稍微复杂些,基本是递归过程)

def cut_by_col(cut_num, _im_mask):zero_start = Nonezero_end = Noneend_range = len(_im_mask)for x in range(0, end_range):im = _im_mask[x]if len(np.where(im==0)[0]) == len(im):if zero_start == None:zero_start = xelif zero_start != None and zero_end == None:zero_end = xif zero_start != None and zero_end != None:start = zero_startif start > 0:cut_num.append(start)zero_start = Nonezero_end = Noneif x == end_range-1 and zero_start != None and zero_end == None and zero_start > 0:zero_end = xstart = zero_startif start > 0:cut_num.append(start)zero_start = Nonezero_end = None

客户端的UI基本都是纵向流式布局,我们可以先横切在纵切。

将切割点的x,y轴坐标记录下来,它将是处理组件位置关系的核心。切割完成后,我们获取到2组数据:6个GUI元素图片和对应的坐标系记录。后续步骤通过分类神经网络进行组件识别。

在实际生产过程中,版面分析会复杂些,主要是在处理复杂背景方面。

关注我们的技术公众号,我们后续会详细分解。

组件识别:

  进行组件识别前我们需要收集一些组件样本进行训练,使用Tensorflow提供的CNN模型和SSD模型等进行增量训练。

  UI2CODE对GUI进行了几十种类型分类:IMAGE, TEXT,SHAP/BUTTON,ICON,PRICE等等,分别归类为UI组件,CI组件和BI组件。

UI组件,主要针对flutter原生的组件进行分类。
CI组件,主要针对闲鱼自定义UIKIT进行分类。
BI组件,主要针对具备一定业务意义的feed卡片进行分类。

 

组件的识别需要反复的通过全局特征反馈来纠正,通常会采用SSD+CNN协同工作,比如下图的红色“全新“shape,这该图例中是richtext的部分,同样的shape样式可能属于button或者icon。

属性提取:

  这块的技术点比较杂,归纳起来需要处理3部分内容:shape轮廓, 字体属性和组件的宽高。

完成属性提取,基本上我们完成所有GUI信息的提取。生成的GUI DSL如下图:


通过这些数据我们就可以进行布局分析了。
其中文字属性的提取最为复杂,后续我们会专门介绍。

布局分析:

  前期我们采用4层LSTM网络进行训练学习,由于样本量比较小,我们改为规则实现。规则实现也比较简单,我们在第一步切图时5刀切割的顺序就是row和col。缺点是布局比较死板,需要结合RNN进行前置反馈。



视频中展示的是通过4层LSTM预测布局结构的效果,UI的布局结构就像房屋的框架,建造完成后通过GUI的属性进行精装修就完成了一个UI图层的代码还原工作。

代码生成及插件化:

  机器学习本质上来说还属于概率学范畴,自动生成的代码需要非常高的还原度和100%的准确率,概率注定UI2CODE很难达到100%的准确率,所以我们需要提供一个可编辑工具,由开发者通过工具能够快速理解UI的布局结构和修改布局结构。
  我们将UI2CODE生成的DSL TREE进行代码模板化匹配,代码模板的内容由资深的flutter技术专家来定义,它代表目前我们发现的最优代码实现方案。

代码模板中会引入一些标签,由Intellij plugin来检索flutter工程中是否存在对应的自定义UIKIT,并进行替换,提高代码的复用度.

整个插件化工程需要提供自定义UIKIT的检索,替换和校验工作,以及DSL Tree的创建,修改,图示等工作,总体来说,更像ERP系统,花费一些时间能够做的更加完美。

小结:

  本篇我们简单介绍了UI2CODE的设计思路,我们将整个工程结构分为5个部分,其中4块内容核心处理机器视觉的问题,通过机器学习将它们链接起来。代码的线上发布是非常严格的事情,而单纯的机器学习方式,很难达到我们要求,所以我们选择以机器视觉理解为主,机器学习为辅的方式,构建整个UI2CODE工程体系。我们将持续关注AI技术,来打造一个完美的UI2CODE工具。

 

#阿里云开年Hi购季#幸运抽好礼!
点此抽奖:https://www.aliyun.com/acts/product-section-2019/yq-lottery?utm_content=g_1000042901

原文链接
本文为云栖社区原创内容,未经允许不得转载。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/519694.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何成为优秀的技术主管?你要做到这三点

阿里妹导读:技术主管,又叫「技术经理」,英文一般是 Tech Leader ,简称 TL。随着工作经验的不断积累,能力的不断提升,每个人都有机会成为Team Leader。然而在机会到来前,我们必须提前做好准备&am…

达摩院2020十大科技趋势发布:云成IT技术创新中心

2020年第一个工作日,“达摩院2020十大科技趋势”发布。这是继2019年之后,阿里巴巴达摩院第二次预测年度科技趋势。 回望2019年的科技领域,静水流深之下仍有暗潮涌动。AI芯片崛起、智能城市诞生、5G催生全新应用场景……达摩院去年预测的科技…

SpringBoot Mybatisplus 多数据源使用

文章目录一、mybatisplus3.x1. 依赖2. 启动类添加注解3. 添加多数据源注解4. yml5. 测试类6. 源码地址为了适配新的需求,需要同时支持mysql和oracle数据库操作多数据源,因此项目中集成dynamic-datasource-spring-boot-starter,支持很多场景。 例如&#…

mysql查询每月、每天订单金额

最近项目需要统计每天的金额,就写了这样的sql 下面是统计每天的金额(fifth_gen_maintain_fee ),主要是根据day()函数,按照创建日期进行分组,每月的话day换成month函数就行了 SELEC…

数据流被污染?数据质量不高?蚂蚁金服数据资产管理平台了解一下

今年年初,蚂蚁金服ATEC城市峰会在上海举办。金融智能专场分论坛上,蚂蚁金服数据平台部高级数据技术专家李俊华做了主题为《蚂蚁金服数据治理之数据质量治理实践》的精彩分享。 演讲中,李俊华介绍了蚂蚁金服数据架构体系的免疫系统——数据质…

努力≠上进!那些“熬夜”持续精进的人有多可怕!

经常听到一些同学说:某个公司薪资上调30-50%,我可以跳槽入吗?最近收到几个比较好的offer!该去哪家?纠结!目前岗位和环境对自己成长非常慢!更看不到公司的前景特别迷茫!想成为人工智能…

MySQL8.0.14 - 新特性 - InnoDB Parallel Read简述

最近的MySQL8.0.14版本增加了其第一个并行查询特性,可以支持在聚集索引上做SELECT COUNT()和check table操作。本文简单的介绍下这个特性。 用法 增加了一个session级别参数: innodb_parallel_read_threads 要执行并行查询,需要满足如下条件(ref: row…

Google 插件总览

有道翻译 Vue.js devtools bilibili哔哩哔哩下载助手 哔哩哔哩助手:bilibili.com 综合辅助扩展 提供方:https://bilibili-helper.github.io Infinity 新标签页 (Pro) Google 翻译 PostWoman Http接口调试插件 jsonView jsonViewer json formatter 格…

java计算增长率

**计算月增长率**//sameMonth 本月金额//lastMonth 上月金额public static String getAnalysisData(Float sameMonth, Float lastMonth) {if (lastMonth < sameMonth) {//如果下个数大于上个数&#xff0c;则增长率 为 正float result (sameMonth - lastMonth) / lastMonth…

详解CPU几个重点基础知识

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 骏马金龙责编 | 阿秃关于CPU和程序的执行1、程序的运行过程&#xff0c;实际上是程序涉及到的、未涉及到的一大堆的指令的执行过程。当程序要执行的部分被装载到内存后&#xff0c;CPU要从内存中取出指令&#xff0c;然后指令…

Spring Cloud Alibaba迁移指南(三):极简的 Config

自 Spring Cloud 官方宣布 Spring Cloud Netflix 进入维护状态后&#xff0c;我们开始制作《Spring Cloud Alibaba迁移指南》系列文章&#xff0c;向开发者提供更多的技术选型方案&#xff0c;并降低迁移过程中的技术难度。 第一篇&#xff1a;一行代码从 Hystrix 迁移到 Sent…

非web项目并且项目文件多java项目 使用tomcat发布的方式

文章目录1. 创建配置文件2. 新建一个web项目2. 新项目结构调整4. 项目结构整理5. 添加jdk和jar6. 等待编译1. 创建配置文件 在tomcat的cof下面创建一下目录 conf\Catalina\localhost这个xml文件的名称建议和项目名一样&#xff0c;作用是&#xff0c;浏览器访问的时候项目名称…

为拯救爸妈朋友圈,达摩院造了“谣言粉碎机”

生命不可能从谎言中开出灿烂的鲜花。 前几天&#xff0c;母上大人给我发了条消息&#xff0c;再三叮嘱帮忙扩散&#xff0c;随手解救癌症患者。 “速转&#xff01;科学家发现&#xff1a;一味中药48小时可杀死60%癌细胞!” 回复框里&#xff0c;我打了一段长长的反驳文字。…

亲历!不要痴迷蓝牙耳机了,出门选这个准没错,99W+人的选择

01有一种耳机啊它是真的不适合在长途火车上使用那就蓝牙耳机除非你带充电宝还有一种耳机啊它是真的不适合丢那就是带有充电仓的耳机因为充电仓丢了这个耳机基本上就废了02这不&#xff0c;我就经历了&#xff0c;活生生的例子出差的路上在火车上把耳机充电仓给弄丢了只剩孤零零…

Spring Cloud Alibaba迁移指南(四):零代码兼容 Api-Gateway

自 Spring Cloud 官方宣布 Spring Cloud Netflix 进入维护状态后&#xff0c;我们开始制作《Spring Cloud Alibaba迁移指南》系列文章&#xff0c;向开发者提供更多的技术选型方案&#xff0c;并降低迁移过程中的技术难度。 第一篇&#xff1a;一行代码从 Hystrix 迁移到 Sent…

调整eclipse、SpringToolSuite4编辑器的内存大小以及显示

我们的Eclipse、SpringToolSuite4编辑器总是会因为内存太小发生卡顿或者卡死现象&#xff0c;我给大家提供一个方法来解决&#xff0c;希望能在这里帮到大家&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 设置内存大小 修改Eclipse的配置文件&#xff1a; 打开Eclip…

一元享移动怎么样_中国移动放大招!月租9元享200GB流量,网友:这套路谁敢用?...

中国移动放大招&#xff01;月租9元享200GB流量&#xff0c;网友&#xff1a;这套路谁敢用&#xff1f;众所周知&#xff0c;自从携号转网政策实施以来&#xff0c;移动就面临巨大的压力&#xff0c;因为口碑相对最差&#xff0c;移动转出的用户是最多的&#xff0c;2个月时间就…

如何制作可以在 MaxCompute 上使用的 crcmod

之前我们介绍过在 PyODPS DataFrame 中使用三方包。对于二进制包而言&#xff0c;MaxCompute 要求使用包名包含 cp27-cp27m 的 Wheel 包。但对于部分长时间未更新的包&#xff0c;例如 oss2 依赖的 crcmod&#xff0c;PyPI 并未提供 Wheel 包&#xff0c;因而需要自行打包。本文…

java解决导出word用wps打开正常,用office打开是html的标签的问题

如题&#xff0c;做导出word时遇到了这样的问题&#xff0c;用office打开是html标签&#xff0c;wps却是正常的&#xff0c;排查后发现.ftl模板里面首尾没有html标签&#xff0c;加上<html</html>>以后就好了。