UI提供图编码成HTML,微软开源 Sketch2Code,UI 草图转成 HTML 代码

#原创整理:前端大全(id: FrontDev)

微软 AI 实验室最近开源了一个新的 AI 辅助工具 Sketch2Code。正如其名,Sketch2Code 可以把 UI 草图转换成 HTML 代码。

**Demo 如下**

![](https://s4.51cto.com/images/blog/202101/09/6d34508b2fd5fc4283d3081891040be5.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

**处理流程**

* 用户通过网站上传草图。

* 定制的视觉模型预测图像中的 HTML 元素及其位置。

* 「手写文本识别服务」读取预测元素中的文本。

「* 布局算法」使用来自预测元素的所有边界框的空间信息,来生成容纳所有元素的网格结构。

* 「HTML生成引擎」使用所有这些信息生成反映结果的 HTML 标记代码。

**GitHub repo 链接:**

```

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

```

**

网友评论**

@王晓磊_HelloWorld:前段这是要失业了图片

@唐僧肉生产厂厂长:图片切图仔瑟瑟发抖

@兔十二菌:以后ui设计师也不需要了 都是套路 怎么更优化程序自己玩图片

@Miss_zhappy:产品经理直接画草图就OK了?

@罗俊全球后援会:算了吧,当年dw出来,拖拽拖拽生成页面,也好多人说前端要失业了图片

@AndersonLMB:感觉对前端来说也是好事吧,可以减少在写页面的工作量,让前端可以专注于交互逻辑的编码。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值