博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
厉害了!微软AI使网页设计稿变为HTML
阅读量:6588 次
发布时间:2019-06-24

本文共 917 字,大约阅读时间需要 3 分钟。

微软在其AI.lab网站发表了Sketch2Code项目,并且于GitHub中开源,使用者只要在白板或笔记本中画出网页的接口设计,Sketch2Code就能透过影像辨识,将接口设计草稿转成HTML线框图,来帮助简化网页应用程序开发的流程。微软指出,用户接口设计需要许多创意以及时间,而在设计师绘制设计后,还要花费许多时间把草稿转为HTML线框图,以便在网页浏览器中开启,而这个过程需要花费一定的心力,同时也延迟了开发流程。因此微软想要用人工智能技术,来加速这个过程,他们建构了一个系统,能够理解设计师在白板上绘制的内容,并将这些理解转化成HTML,使得设计可以马上转为HTML页面呈现,以加速设计开发流程。这个系统让用户可以上传图像,并从客制化的视觉模型中,推测出图像中的HTML元素及其位置,并辨识手写文字,推测元素内的文字,接着利用布局算法,推测元素的边界以生成格框结构等空间信息,最后使用HTML生成引擎,综合上述各阶段的讯息来产生HTML线框语法档案。

厉害了!微软AI使网页设计稿变为HTML
要满足Sketch2Code系统的第一个阶段功能,辨识设计师手绘草稿,需要建构一个客制化模型,并使用手绘元素的图像进行训练,像是下拉选单、按钮或是文字输入格等HTML元素,Sketch2Code使用了微软客制视觉服务(Custom Vision Service)来制作客制化模型,并执行对象侦测。在获得HTML对象后,接着使用微软计算机视觉服务(Computer Vision Service)中的文字识别功能,来辨识设计草稿上的手写文字。透过前两个阶段所获得的HTML元素及文字信息,产生数个HTML片段,接着从已识别的元素位置,推断出整个设计的布局,并生成最终的HTML程序代码。
厉害了!微软AI使网页设计稿变为HTML
在整个辨识与生成HTML程序代码的过程,系统会把图像、推测结果和布局分组等信息储存在Azure Blob储存中,并以Azure Function作为后端进入点,透过与所有云端服务交互沟通来协调生成的过程,产生的结果放置在Azure WebSite,作为与使用者互动的前端,供查看产生的HTML页面。
厉害了!微软AI使网页设计稿变为HTML

转载于:https://blog.51cto.com/13220658/2336464

你可能感兴趣的文章
Agent admitted failure to sign using the key
查看>>
grep 应用
查看>>
我的友情链接
查看>>
Linux实验室 CentOS关机大法
查看>>
一行命令获取当前JVM所有可设置的参数以及当前默认值
查看>>
OSI七层与TCP/IP五层网络架构详解
查看>>
spring与struts2 mvc共存web.xml简单配置
查看>>
Android集成微信支付
查看>>
2015年终总结
查看>>
关于svn目录地址迁移
查看>>
源码编译依赖关系一例小结
查看>>
Python web爬虫
查看>>
Python捕捉命令输出、错误输出及赋值命令到变量的方法
查看>>
js解析json
查看>>
详解性能调优命令
查看>>
使用tar或dd等完成Linux系统备份恢复
查看>>
matlab的special函数用法
查看>>
函数指针和回调函数
查看>>
信号(signal)
查看>>
dns
查看>>