火星网校
UI2Code智能生成Flutter代码--设计思路详解
发布时间：2024-05-08 11:08:45 浏览量：318次
闲鱼技术-上叶
背景:
随着移动互联网时代的到来，科学技术突飞猛进。然而软件工程师们依旧需要花费大量精力在重复的还原UI视觉稿的工作。
UI视觉研发拥有明显的特征：组件，位置和布局，符合机器学习处理范畴。能否通过机器视觉和深度学习等手段自动生成UI界面代码，来解放重复劳动力，成为我们关注的方向。
UI2CODE简单介绍：
UI2CODE项目是公司技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具。
我们开始启动技术可行性预研工作，经历了多次整体方案的重构。我们关注视觉稿还原精度、准确率和易维护性等问题。
架构设计：
简化分析下UI2CODE的流程：
大体分为4个步骤:
1.通过机器视觉技术，从视觉稿提取GUI元素2.通过深度学习技术，识别GUI元素类型
3.通过递归神经网络技术，生成DSL
4.通过语法树模板匹配，生成flutter代码
版面分析
版面分析只做一件事：切图。
图片切割效果直接决定UI2CODE输出结果的准确率。我们拿白色背景的简单UI来举例：
上图是一个白色背景的UI，我们将图片读入内存，进行二值化处理：
得到一个二维矩阵：将白色背景的值转化为0.
像切西瓜一样，我们只需要5刀，就可以将GUI元素分离，切隔方法多种多样。
客户端的UI基本都是纵向流式布局，我们可以先横切在纵切。
将切割点的x，y轴坐标记录下来，它将是处理组件位置关系的核心。切割完成后，我们获取到2组数据：6个GUI元素图片和对应的坐标系记录。后续步骤通过分类神经网络进行组件识别。
在实际生产过程中，版面分析会复杂些，主要是在处理复杂背景方面。
关注我们的技术公众号，我们后续会详细分解。
组件识别：
进行组件识别前我们需要收集一些组件样本进行训练，使用Tensorflow提供的CNN模型和SSD模型等进行增量训练。
UI2CODE对GUI进行了几十种类型分类：IMAGE， TEXT，SHAP/BUTTON，ICON，PRICE等等，分别归类为UI组件，CI组件和BI组件。
组件的识别需要反复的通过全局特征反馈来纠正，通常会采用SSD+CNN协同工作。
属性提取：
这块的技术点比较杂，归纳起来需要处理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工具。
热门课程推荐
热门资讯
-
想将照片变成漫画效果？这篇文章分享了4个方法，包括Photoshop、聪明灵犀、VanceAI Toongineer、醒图，简单操作就能实现，快来尝试一下吧！
-
2. 华为手机神奇“AI修图”功能，一键消除衣服！原图变身大V领深V！
最近华为手机Pura70推出的“AI修图”功能引发热议，通过简单操作可以让照片中的人物换装。想了解更多这款神奇功能的使用方法吗？点击查看！
-
近年来,人工智能逐渐走入公众视野,其中的AI图像生成技术尤为引人注目。只需在特定软件中输入关键词描述语以及上传参考图就能智能高效生成符合要求的...
-
4. AI视频制作神器Viggle：让静态人物动起来，创意无限！
Viggle AI是一款免费制作视频的AI工具，能让静态人物图片动起来，快来了解Viggle AI的功能和优势吧！
-
5. Logo Diffusion——基于sd绘画模型的AI LOGO 生成器
这下LOGO设计彻底不用求人了。接下来详细演示一遍操作流程首先进入Logo D... 想学习更多AI技能,比如说关于怎么样利用AI来提高生产效率、还能做什么AI...
-
6. 零基础10分钟生成漫画，教大家如何用AI生成自己的漫画
接下来,我将亲自引导你,使用AI工具,创作一本既有趣又能带来盈利的漫画。我们将一起探索如何利用这个工具,发挥你的创意,制作出令人惊叹的漫画作品。让...
-
7. AI显卡绘画排行榜:4090无悬念，最具性价比出人意料
在AI绘图领域，Stable Diffusion的显卡绘图性能备受关注。本文整理了Stable Diffusion显卡的硬件要求和性能表现，以及2023年3月显卡AI绘图效率排行榜和性价比排行榜。欢迎查看最新的AI显卡算力排行榜。
-
以下是一些免费的AI视频制作网站或工具,帮助您制作各种类型的视频。 1. Lumen5:Lumen5是一个基于AI的视频制作工具,可将文本转换为视频。 用户可以使...
-
就能快速生成一幅极具艺术效果的作品,让现实中不懂绘画的人也能参与其中创作!真的超赞哒~趣趣分享几款超厉害的AI绘画软件,提供详细操作!有需要的快来...
-
10. 10个建筑AI工具，从设计到施工全覆盖!肯定有你从来没听过的
讲述了建筑业比较著名的AI公司小库科技做出的探索,在这儿就不多说了。今天,我们试着在规划设计、建筑方案设计、住宅设计、管道设计、出渲染图、3D扫...
