前端要失业了么，sketch-code让草图秒变HTML

最近两年来，人工智能正在以人们难以想象的速度颠覆科技行业。前不久，偶然看到一篇从草图到HTML只需5秒文章，让我感觉「使用人工智能自动生成网页」已经变得越来越现实。而本文将要介绍的SketchCode 的卷积神经网络能够把网站图形用户界面的设计草图直接转译成代码行，为前端开发者们分担部分设计流程。目前，该模型在训练后的 BLEU 得分已达 0.76。

本篇原文链接：深度学习使用sketch-code 草图、手稿自动生成HTML前端页面

下面就来简单的认识下这个框架，你可以在 GitHub 上找到这个项目的代码：https://github.com/ashnkumar/sketch-code

如上图，只要一张手绘的效果图，sketchcode就可以将它转换生成HTML代码，还是bootstrap的。项目使用的是keras深度学习框架，使用的是Python3，且不支持其他python2的版本，如果要搭建这样一个深度学习框架，需要读者具有macOS、linux系统支持。以下是keras需要的软件环境：

Keras==2.1.2
tensorflow==1.4.0
nltk==3.2.5
opencv-python==3.3.0.10
numpy==1.13.1
h5py==2.7.1
matplotlib==2.0.2
Pillow==4.3.0
tqdm==4.17.1
scipy==1.0.0

然后直接进入项目根目录下，使用pip命令进行安装。

pip install -r requirements.txt

进入到scripts文件下，会发现多了两个文件。

执行这两个文件命令，下载所需的数据和权值文件。

sh get_data.sh
sh get_pretrained_model.sh

这里使用wget下载所需要的包，文件将近1个G大小，会有点慢，建议直接打开这两个文件拷贝链接使用迅雷下载再放进指定目录。

下载并解压完毕后data文件下会有一个all_data文件夹，里面放的是一些手稿数据模型，用来训练用的。进入examples文件下，会有测试手稿图片。

打开文件可以发现如下：

为了测试，我们先画一张图

然后我们将图片放进examples下运行程序，进入src目录下，然后在终端执行程序命令：

python convert_single_image.py --png_path ../examples/img002.png \--output_folder ./generated_html \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/weights.h5

然后耐心的等待他渲染前端代码，大概一分钟左右。

为了让大家看清楚手稿的布局和生成代码的布局，下面对比下代码实现。

<style>div{border:1px solid black;}</style>

生成的代码：

<html>
<header><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><style>
.header{margin:20px 0}nav ul.nav-pills li{background-color:#333;border-radius:4px;margin-right:10px}.col-lg-3{width:24%;margin-right:1.333333%}.col-lg-6{width:49%;margin-right:2%}.col-lg-12,.col-lg-3,.col-lg-6{margin-bottom:20px;border-radius:6px;background-color:#f5f5f5;padding:20px}.row .col-lg-3:last-child,.row .col-lg-6:last-child{margin-right:0}footer{padding:20px 0;text-align:center;border-top:1px solid #bbb}</style><title>Scaffold</title><style>div{border:1px solid black;}</style>
</header>
<body>
<main class="container"><div class="header clearfix"><nav><ul class="nav nav-pills pull-left"><li><a href="#">Rmjoyzs Sj</a></li><li><a href="#">Dtve Erhaz</a></li><li><a href="#">Rnwy Ytpdy</a></li></ul></nav></div><div class="row"><div class="col-lg-12"><h4>Ghhbl</h4><p>azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz</p><a class="btn btn-warning" href="#" role="button">Eyzedji Ii</a></div></div><div class="row"><div class="col-lg-3"><h4>Cajql</h4><p>sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj</p><a class="btn btn-warning" href="#" role="button">Vbcmla Awl</a></div><div class="col-lg-3"><h4>Dtgpz</h4><p>qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou</p><a class="btn btn-warning" href="#" role="button">Gypkcdc Cu</a></div><div class="col-lg-3"><h4>Pfdib</h4><p>met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma</p><a class="btn btn-warning" href="#" role="button">Rtro Omwgb</a></div><div class="col-lg-3"><h4>Dofwm</h4><p>ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn</p><a class="btn btn-warning" href="#" role="button">Dssgiz Zqg</a></div></div><div class="row"><div class="col-lg-6"><h4>Vyilr</h4><p>ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt</p><a class="btn btn-warning" href="#" role="button">Evlk Kfglm</a></div><div class="col-lg-6"><h4>Rdewa</h4><p>ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa</p><a class="btn btn-warning" href="#" role="button">Rkcbs Serv</a></div></div></main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

通过利用图像标注的研究成果，SketchCode 能够在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。但目前仍有以下局限：

由于这个模型是用一个只有 16
个元素的词汇进行训练的，它不能预测训练数据之外的标记。下一步可能是使用更多元素（如图像，下拉菜单和表单）生成其他样例网站——Bootstrap components是个练手的好网站：https://getbootstrap.com/docs/4.0/components/buttons/。
实际生产环境中，网站有很多变化。创建一个更能反映这种变化的训练数据集的好方法是去爬取实际的网站，捕获他们的 HTML / CSS代码以及网站内容的截图。
手绘素描也有很多变化，CSS 修改技巧没有被模型完全学会。在手绘素描上生成更多变化的一种好方法是使用生成对抗网络来创建逼真的绘制网站图像。

前端要失业了么，sketch-code让草图秒变HTML相关推荐

前端要凉？微软开源Sketch2Code，草图秒变代码
用户界面设计过程涉及大量创造性的迭代工作.这个过程通常从在白板或白纸上画草图开始,设计师和工程师分享他们的想法,尽力表达出潜在的客户场景或工作流程.当他们在某个设计上达成一致之后,通过照片的形式将草图 ...
Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)
@[TOC](Visual Studio Code 中部分代码变黑白色(前端vue-element-admin项目测试有效)) 代码变黑白色使用vue-element-admin 后台模板在Visu ...
周杰伦林俊杰李宗盛快失业了！有了AI，未来人人都能秒变作曲家
译者 | thinkdeeper 编辑 | 鸽子有没有想过,未来你也可以像周杰伦.林俊杰.李宗盛一样成为创作型的音乐人?你要的,只是感觉,其他的,人工智能的研究人员已经帮你做好了. 如果你以为这只是 ...
VS code查看python程序变量值
VS code查看python程序变量值打开VS code 编写python程序代码在需要查看的变量后添加断点点击运行程序用spyder观察变量更方便一些打开VS code 编写python ...
从零开始学前端： HTML框架和VS Code安装 --- 今天你学习了吗？（CSS：Day01）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 前言: 第一节课:整堂课主要是讲了HTML的框 ...
sketch怎么转换成html,手稿秒变html的Sketch 2 Code
可以把手稿变成html的Sketch 2 Code出世了,这是微软在GitHub上的C#开源代码.听说它能够把前端都凉掉?我很兴奋地尝了尝鲜,写下了这篇小文.咱们来看看它有没有传说中的那么高大上. 官 ...
前端网页开发工具Visual Studio Code推荐
前端开发有很多软件可使用,笔者用过Adobe Dreamweaver CS6 ,IntelliJ IDEA ,还有webstrom.但是这些虽然有他们的好处,比如 Dreamweaver 他特有的视图 ...
vscode中前端vue项目详解_vs code 第一次创建前端项目 vuejs 从零开始
2018年12月5日第一阶段虽然网上教程很多,但是还是记录一次完整的步骤 1.安装nodejs,网上一堆的教程,基本上下载后傻瓜式一路next 2.安装npm,网上一堆的教程,也是基本下载后傻瓜式 ...
前端学习——HTML初学__3 VS code
前面通过记事本的形式很不方便,所以换成VS code来进行开发!VS code的开发与汉化很简单哦就不再详细赘述,提供一下下载地址: VS code下载一.创建页面操作流程:文件→新建文本文件(c ...

前端要失业了么，sketch-code让草图秒变HTML

前端要失业了么，sketch-code让草图秒变HTML相关推荐

最新文章

热门文章