前端要凉?微软开源Sketch2Code,草图秒变代码
用户界面设计过程涉及大量创造性的迭代工作。这个过程通常从在白板或白纸上画草图开始,设计师和工程师分享他们的想法,尽力表达出潜在的客户场景或工作流程。当他们在某个设计上达成一致之后,通过照片的形式将草图拍下来,然后手动将草图翻译成 HTML 代码。翻译过程需要耗费很多时间和精力,通常会减慢设计过程。
如果可以将白板上手绘的设计立即反映在浏览器中,那会怎样?如果我们能够做到这一点,在设计头脑风暴结束时,我们就可以拥有一个已经由设计师、开发人员甚至客户验证过的现成原型,这将为网站和应用程序开发省不少时间。现在,微软已经借助 AI 做到了这一点,同时他们还将这个项目在 Github 上开源了。
Sketch2Code 是什么?
Sketch2Code 是一个基于 Web 的解决方案,使用 AI 将手绘的用户界面草图转换为可用的 HTML 代码。Sketch2Code 由微软和 Kabel、Spike Techniques 合作开发。读者可以在 GitHub 上找到与 Sketch2Code 相关的代码、解决方案开发过程和其他详细信息。
Sketch2Code 项目地址:https://github.com/Microsoft/ailab/tree/master/Sketch2Code
下图演示了利用 Sketch2Code 将手绘草图转换成代码的操作过程。在微软官方网站上可以做更多尝试:https://sketch2code.azurewebsites.net/
Sketch2Code 是如何工作的?
让我们来看看使用 Sketch2Code 将手绘草图转换成 HTML 代码的过程:
用户将图片上传到网站上。
自定义视觉模型预测在图像中出现的 HTML 元素,并将它们的位置标出来。
手写文本识别服务读取预测元素中的文本。
布局算法根据预测元素的边框空间信息生成网格结构。
HTML 生成引擎使用上述信息来生成 HTML 代码。
工作流程如下所示:
Sketch2Code 的架构设计
Sketch2Code 使用了以下组件:
微软自定义视觉模型(Custom Vision):这个模型是基于不同的手绘稿的图象训练得出的,并标记了与常见 HTML 元素(如文本框、按钮、图像等)相关的信息。
微软计算机视觉服务:用于识别设计元素中的文本。
Azure Blob Storage:保存与 HTML 生成过程的每个步骤相关的信息,包括原始图像、预测结果、布局和分组信息等。
Azure Function:它作为后端入口点,通过与其他服务发生交互来协调生成过程。
Azure Website:用户界面前端,用户可以在这里上载设计图,并查看生成的 HTML。
以上组件通过如下架构组合在一起:
是不是感觉跃跃欲试?
你可以在这里找到 Sketch2Code 的开源代码:
https://github.com/Microsoft/ailab/tree/master/Sketch2Code
也可以在这里对 Sketch2Code 的实际效果进行验证:https://sketch2code.azurewebsites.net/
查看原文
http://www.infoq.com/cn/news/2018/09/Ms-sketch2Code-opensourcing
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java程序员需要突破的技术要点
一、源码分析 源码分析是一种临界知识,掌握了这种临界知识,能不变应万变,源码分析对于很多人来说很枯燥,生涩难懂。 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心。 我认为是阅读源码的最核心驱动力。我见到绝大多数程序员,对学习的态度,基本上就是这几个层次(很偏激哦): 1、只关注项目本身,不懂就baidu一下。 2、除了做好项目,还会阅读和项目有关的技术书籍,看wikipedia。 3、除了阅读和项目相关的书外,还会阅读IT行业的书,比如学Java时,还会去了解函数语言,如LISP。 4、找一些开源项目看看,大量试用第三方框架,还会写写demo。 5、阅读基础框架、J2EE规范、Debug服务器内核。 大多数程序都是第1种,到第5种不光需要浓厚的兴趣,还需要勇气:我能读懂吗?其实,你能够读懂的耐心,真的很重要。因为你极少看到阅读源码的指导性文章或书籍,也没有人要求或建议你读。你读的过程中经常会卡住,而一卡主可能就陷进了迷宫。这时,你需要做的,可能是暂时中断一下,再从外围看看它:如API结构、框架的设计图。 下图是我总结出目前最应该学习的源码知识点: 源码分析.png 二、分布...
- 下一篇
“百变”Redis带你见识不同场景下的产品技术架构
2018飞天技术汇24期-云数据库Redis产品发布会,由阿里云数据库技术组技术专家王欢、怀听、梁盼分别带来以“Redis全球多活产品”、“Redis混合存储产品”、“Redis多线程性能增强版”为题的演讲。本文对Redis进行了简单的介绍,进而针对不同的应用场景研制出不同的产品,并对不同产品分别进行了详细地介绍。数十款阿里云产品限时折扣中,赶快点击这里,领券开始云上实践吧!直播视频回顾PPT下载地址(云痕)(怀听)(梁盼)以下内容根据精彩视频分享整理而成。 Redis简介 Redis 是一个高性能的key-value数据库,Redis的优势有很多,例如,它的性能极高 ,Redis能读的速度是110000次/s,写的速度是81000次/s ;它具有丰富的数据类型,可支持二进制案例的 Strings、Lists、Hashes、Sets 及 Ordered Sets 数据类型操作;它的所有操作都是原子性的,意思就是要么成功执行要么失败完全不执行;它还具有丰富的特性, 即支持 publish/subscribe、通知、key过期等等特性。Redis 与其他key - value 缓存产品有三...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- SpringBoot2整合Redis,开启缓存,提高访问速度