永利网站网址 14

微软开源Sketch2Code

原标题:前端要凉?微软开源Sketch2Code,草图秒变代码

摘要:
本文主要讲述如何使用现代深度学习算法来简化设计工作流程,并使任何人都能够快速创建和测试网页。如何使用SketchCode五秒钟将线框原型图转换成HTML代码。

导读:用户界面设计过程涉及大量创造性的迭代工作。这个过程通常从在白板或白纸上画草图开始,设计师和工程师分享他们的想法,尽力表达出潜在的客户场景或工作流程。当他们在某个设计上达成一致之后,通过照片的形式将草图拍下来,然后手动将草图翻译成
HTML 代码。翻译过程需要耗费很多时间和精力,通常会减慢设计过程。

永利网站网址 1

如果可以将白板上手绘的设计立即反映在浏览器中,那会怎样?如果我们能够做到这一点,在设计头脑风暴结束时,我们就可以拥有一个已经由设计师、开发人员甚至客户验证过的现成原型,这将为网站和应用程序开发省不少时间。现在,微软已经借助
AI 做到了这一点,同时他们还将这个项目在 Github 上开源了。

Ashwin
Kumar在Insight中开发了一个模型——允许用户将手绘线框转换为HTML页面,这明显加快了设计过程。

作者:微软 ML 博客团队

为用户创造直观且引人入胜的体验是各个公司的重要目标,而这是一个由原型设计、设计和用户测试组成的快速循环的过程。像Facebook这样的大公司足够将整个团队投入到设计流程中,但是这可能需要几星期的时间,并且涉及多个利益相关者。然而小型企业没有这些资源,因此他们的用户界面可能会因此减少

译者:无明

我的目标是使用现代深度学习算法来简化设计工作流程,并使任何人都能够快速创建和测试网页。

来源:AI前线(ID:ai-front)

永利网站网址 2设计工作流经过多个利益相关者

永利网站网址 3

典型的设计工作流程可能如下所示:

01 Sketch2Code 是什么?

·产品经理根据用户调查表生成规格列表。

Sketch2Code 是一个基于 Web
的解决方案,使用 AI 将手绘的用户界面草图转换为可用的 HTML
代码。Sketch2Code 由微软和 Kabel、Spike Techniques 合作开发。读者可以在
GitHub 上找到与 Sketch2Code
相关的代码、解决方案开发过程和其他详细信息。

·设计师们根据这些要求探索出低精确度的原型,最终创造出高保真的模型。

Sketch2Code 项目地址:

·工程师将这些设计应用到代码中,最终将产品交给用户。

开发周期的长短很快就会变成一个瓶颈,像Airbnb这样的公司已经开始使用机器学习来提高这个过程的效率了。

下图演示了利用 Sketch2Code
将手绘草图转换成代码的操作过程。在微软官方网站上可以做更多尝试:

永利网站网址 4用Airbnb的内部AI工具演示从图纸到代码

虽然该模型有望成为机器辅助设计的一个例子,但是我们还不清楚这个模型有多少是经过端对端训练的,以及多少依赖于手工制作的图像特征,因为它是公司专有的封闭源码解决方案。所以,我想创建一个开源版本的原型图到代码的技术,以供更广泛的开发人员和设计人员使用。

永利网站网址 5

理想情况下,我的模型能够将手绘的线框原型图立即转换成一个工作的HTML网站。

02 Sketch2Code 是如何工作的?

永利网站网址 6SketchCode模型将绘制线框图并生成HTML代码

让我们来看看使用 Sketch2Code
将手绘草图转换成 HTML 代码的过程:

实际上,上面的例子是从我的测试集图像模型中生成的一个实际网站!可以在我的GitHub上查看代码。

  • 用户将图片上传到网站上。
  • 自定义视觉模型预测在图像中出现的 HTML 元素,并将它们的位置标出来。
  • 手写文本识别服务读取预测元素中的文本。
  • 布局算法根据预测元素的边框空间信息生成网格结构。
  • HTML 生成引擎使用上述信息来生成 HTML 代码。

我所解决的问题属于一个更广泛的任务:程序合成,即自动生成源代码。尽管大部分的程序合成是根据自然语言规范或者执行轨迹生成代码,但是在我的模型中能够利用源图像开始生成代码。

工作流程如下所示:

在机器学习中有一个很好的研究领域,该模型叫做图像字幕,旨在将图像和文本结合在一起并生成对源图像内容的描述。

永利网站网址 7

永利网站网址 8图像字幕模型生成对源图像内容的描述

03 Sketch2Code 的架构设计

我从一篇名为pix2code的论文和Emily
Wallner的相关项目中获得灵感,决定将任务重设为一个图像字幕,手绘的网站线框图作为输入图像,而相应的HTML代码作为输出文本。

Sketch2Code 使用了以下组件:

考虑到图像字幕的方法,我理想的数据集应该包含成千上万对的手绘线框图和对应的HTML代码。然而找不到,所以我不得不为这个任务创建自己的数据集。

  • 微软自定义视觉模型(Custom
    Vision):这个模型是基于不同的手绘稿的图象训练得出的,并标记了与常见
    HTML 元素(如文本框、按钮、图像等)相关的信息。
  • 微软计算机视觉服务:用于识别设计元素中的文本。
  • Azure Blob Storage:保存与 HTML
    生成过程的每个步骤相关的信息,包括原始图像、预测结果、布局和分组信息等。
  • Azure
    Function:它作为后端入口点,通过与其他服务发生交互来协调生成过程。
  • Azure Website:用户界面前端,用户可以在这里上载设计图,并查看生成的
    HTML。

首先从pix2code文件中获取一个开源数据集,该数据集包含1750个综合生成网站的截屏和相应的源代码。

以上组件通过如下架构组合在一起:

永利网站网址 9生成网站图像和源代码的pix2code数据集

永利网站网址 10

这是一个很好的数据集,包括以下几点:

是不是感觉跃跃欲试?

·数据集中的每个生成网页都由几个简单的引导元素组成,比如按钮、文本框和div。尽管这意味着我的模型将仅限于在这些少数元素中选择来生成网站,但也更容易推广到更大的元素列表。

你可以在这里找到 Sketch2Code
的开源代码:

·每个样本的源代码由来自特定领域语言的标识组成,论文的作者为其任务创建了标识。每个标识对应HTML和CSS的一个片段,而编译器则被用来将DSL转换为工作的HTML代码。

永利网站网址 11将丰富多彩的网站图像变成手绘版本

也可以在这里对 Sketch2Code
的实际效果进行验证:

为了修改任务的数据集,我需要让网站的图像看起来像手工绘制的一样。我探索使用过OpenCV和Python中的PIL
library这样的工具对每个图像进行修改,比如灰度转换和轮廓检测。

最终,我决定直接修改原始网站的CSS样式表,对其进行以下操作:

参考链接:

·更改页面上元素的边框半径以弯曲按钮和div的边角。

·调整边框的粗细以模仿绘制的草图,并添加阴影。

·将字体更改为看起来像手写的字体。

Q:你会使用这款神器吗?

我在最终的pipeline中又增加了一个步骤,通过添加倾斜移动和旋转来增强这些图像,以模仿实际绘制的草图中的变化。

转载 /
投稿请联系:baiyu@hzbook.com返回搜狐,查看更多

数据已准备妥当,现在可以将它输入模型了。我使用了图像字幕中的模型架构,它由三个主要部分组成:

责任编辑:

·计算机视觉模型,使用卷积神经网络从源图像中提取图像特征。

·由编码了一系列源代码令牌的门控循环单元组成的一种语言模型。

·解码器模型,它将前两个步骤的输出作为输入,并预测序列中的下一个标记。

永利网站网址 12使用令牌序列作为输入来训练模型

为了训练模型,我将源代码拆分为不同的令牌序列。模型的单个输入是其中一个序列及其源图像,其标签是文档中的下一个令牌序列。该模型使用交叉熵成本作为其损失函数,将模型的下一个令牌预测与实际的下一个令牌进行比较。

在推理过程中模型的任务是从头开始生成代码,这个过程比较困难。图像仍然通过CNN网络进行处理,但文本进程将以一个序列开始进行传递。在每个步骤中模型将对序列的下一个令牌进行预测,并将预测令牌作为输入序列输入到模型中,重复此步骤直到模型预测标记或进程达到每个文档的预定义标记数。

一旦从模型中生成了一组预测令牌,编译器就会将DSL令牌转换成HTML,这些HTML可以在任何浏览器中呈现。

我选择用BLEU评分来评估模型。因为他是机器翻译任务中常用的一个度量标准。它用来衡量相同的输入下,机器生成的文本与人类生成内容的相似程度。实质上,BLEU会比较生成的文本和参考文本的n-gram序列,以生成修改后的精度样式。它非常适合这个项目,因为影响了生成的HTML中的实际元素以及它们之间的关系。它最大的优点是可以通过检查生成的网站看到BLEU的分数!

永利网站网址 13可视化的BLEU分数

在给定源图像的情况下,当正确的元素都在正确的位置上时BLEU评分能达到1.0,当元素预测错误或者元素放在了错误的位置上时会得到较低的分数。最终模型在BLEU评分中得到了0.76的分数。

该方法有一个额外的好处,因为模型只生成页面的骨架,所以可以在编译过程中添加自定义的CSS层,这可以立即改变网站的外观风格。

永利网站网址 14一个绘图=>同时生成多种风格

将模型生成过程与样式分离能够给模型的使用带来很多好处:

·前端工程师想要将SketchCode模型融入到自己公司的产品中,可以使用现有的模型,只需要修改一个CSS文件就能符合公司的风格。

·可伸缩性内置一个源图像,模型输出可以立即被编译成5、10或50个不同的预定义样式,这样用户可以在浏览器中查看多个版本的网站可能的外观。

永利网站网址,通过利用图像字幕,SketchCode能够在几秒钟内将手绘网站线框图转换为可用的HTML网站。

但是该模型也有一些局限性,这也是未来的发展方向:

·由于该模型仅使用由16个元素组成的词汇表进行训练,所以它无法预测数据之外的令牌。下一步可能是使用更多的元素组成额外的网站示例——引导组件是一个很好的开始研究的方向。

·实际生成网站时会有很多的变化。所以要创建能够更好应对这些变化的训练数据集,而滤掉实际的网站,捕获它们的HTML/CSS代码以及网站的屏幕截图是一个好方法。

·绘图也有很多CSS修改技巧无法完全捕捉到的变化。在手绘草图数据中产生更多变化的一个好方法是使用生成的Adversarial网络来创建逼真的绘制网站图像。

该项目源代码请点击我的GitHub页面查看。

本文由阿里云云栖社区组织翻译。

文章原标题《Automated front-end development using deep learning》

文章为简译,详细内容请查看原文

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, , , , , , ,
网站地图xml地图