文章 2022-02-17 来自:开发者社区

面向未来的黑科技!UI2CODE 淘系闲鱼基于图片智能生成跨端代码

DEMO 演示 一直以来,如何从‘视觉稿’精确的还原出对应的UI侧代码一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的沟通和消耗。 闲鱼团队在去年做了一个很特别的黑科技基于图片直接翻译成对应的 UI 侧代码,具体完成的部分,我们有一个演示的视频。 选型背景 很多人会比较好奇,为什么我会坚持使用图片做为输入源....

文章 2022-02-17 来自:开发者社区

重磅系列文章!UI2CODE智能生成代码——组件识别篇

作者:闲鱼技术-楚丰 1.背景 在《UI2CODE——整体设计篇》中,我们介绍了UI2CODE工程的整体流程: 在组件识别这个环节,需要有一种处理布局信息的方法,来解析和计算控件间的布局关系(比如识别业务组件(BI组件)和查找重复布局),以此来提高最终代码的可用性。 在这篇文章,我们将介绍一种布局信息的结构化方法:“连线法”,以及一种布局间的计算和比较方法: “引导连线法”。 首先来看我们需要.....

文章 2022-02-17 来自:开发者社区

最详细版本|UI2Code智能生成Flutter代码——机器生成代码

作者: 闲鱼技术-上叶,余晏 背景   在《UI2CODE--整体设计》篇中,我们提到UI2Code工程的整体流程。前步图片分析之后,我们可以得到对应的DSL布局描述。利用DSL的资讯,结合IntelliJ Plugin介面工具,面向使用者提供生成对应Flutter代码。   本篇主要介绍我们如何处理DSL的资讯,想法上即是Flutter的翻译机。总体概念如下: 输入的DSL是什么?   DS.....

最详细版本|UI2Code智能生成Flutter代码——机器生成代码
文章 2022-02-17 来自:开发者社区

最详细版本|UI2Code智能生成Flutter代码——版面分析篇

闲鱼技术-上叶,仝辉,深宇 开篇:   在《UI2CODE--整体设计》篇中,我们提到UI2CODE工程的第一步是版面分析,如果是白色的简单背景,我们可以像切西瓜一样,将图片信息切割为GUI元素。但是在实际生产过程中,UI的复杂度会高很多。本篇我们将围绕版面分析这块内容分享我们的探索过程。 架构设计:   版面分析主要处理UI图像的前景提取和背景分析: 通过前后景分离算法,将UI视觉稿剪裁为G.....

最详细版本|UI2Code智能生成Flutter代码——版面分析篇
文章 2022-02-17 来自:开发者社区

UI2CODE智能生成flutter代码--整体架构 资料下载

云栖社区前端技术交流群直播课在昨天完美落幕啦!我们邀请的是阿里闲鱼优秀的无线开发专家【上叶】为我们做技术分享。没有看到直播的小伙伴不要遗憾,运营小编为你们准备了这篇博文,将优秀的直播课程以及PPT资料分享出来供大家学习和参考。欢迎大家踊跃过来学习! 本次分享嘉宾: 阿里巴巴无线开发专家 【上叶】 分享主题: 第一部分:ui2code的整体设计框架及思考 第二部分:简单介绍UI2CODE工程组件:....

文章 2022-02-17 来自:开发者社区

重磅系列文章|UI2Code智能生成Flutter代码--整体设计篇

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

重磅系列文章|UI2Code智能生成Flutter代码--整体设计篇

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

产品推荐

{"cardStyle":"productCardStyle","productCode":"aliyun","productCardInfo":{"productTitle":"PAI部署多形态的SD WebUI服务","productDescription":"为企业提供云上快速部署定制化的文生图应用。","productContentLink":"https://www.aliyun.com/solution/tech-solution/pai_eas","isDisplayProductIcon":true,"productButton1":{"productButtonText":"方案详情","productButtonLink":"https://www.aliyun.com/solution/tech-solution/pai_eas"},"productButton2":{"productButtonText":"一键部署","productButtonLink":"https://help.aliyun.com/document_detail/2509703.html"},"productButton3":{"productButtonText":"查看更多技术解决方案","productButtonLink":"https://www.aliyun.com/solution/tech-solution/"},"productPromotionInfoBlock":[{"$id":"0","productPromotionGroupingTitle":"解决方案推荐","productPromotionInfoFirstText":"AnalyticDB 与通义千问搭建 AI 智能客服","productPromotionInfoFirstLink":"https://www.aliyun.com/solution/tech-solution/analyticdb-rag","productPromotionInfoSecondText":"通义千问和LangChain搭建对话服务 ","productPromotionInfoSecondLink":"https://www.aliyun.com/solution/tech-solution/tongyi-langchain"}],"isOfficialLogo":false},"activityCardInfo":{"activityTitle":"","activityDescription":"","cardContentBackgroundMode":"LightMode","activityContentBackgroundImageLink":"","activityCardBottomInfoSelect":"activityPromotionInfoBlock"}}

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注