博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
sketch-code让草图秒变HTML
阅读量:5844 次
发布时间:2019-06-18

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

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

本篇原文链接:

下面就来简单的认识下这个框架,你可以在 GitHub 上找到这个项目的代码:

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

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

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

pip install -r requirements.txt复制代码

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

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

sh get_data.shsh 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复制代码

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

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

复制代码

生成的代码:

Scaffold

Ghhbl

azsiooemicuwzfzihzwszwifivztb ejpb hcukgvayzsrmfd zfheqz

Eyzedji Ii

Cajql

sw f qpgtzfwyjo fkygfdozgtsmvxqcdgtakfusadoqhj zc ynpmuj

Vbcmla Awl

Dtgpz

qtim b baoi ifbohotcxhvyonys hffqjjnip hrl nymsqiawxoou

Gypkcdc Cu

Pfdib

met mlu fexp gwty afd qvwislevvmx afymfoytwytucytqpj vma

Rtro Omwgb

Dofwm

ipaobcqhuzmtj rw uqlmohukgqfhenp zxgnrjt vgh psgabonmhfn

Dssgiz Zqg

Vyilr

ztrcrpzxrdqvq ex k dsckj rvwc woshsyvbnydkkk rvsv rsgvlt

Evlk Kfglm

Rdewa

ycbtmxmnmt z yqdnclxfektreixx m j ckgyagaqwnkf os nfzfoa

Rkcbs Serv
复制代码

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

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

转载地址:http://onqcx.baihongyu.com/

你可能感兴趣的文章
码农们:完美主义也是一种错
查看>>
HDU - Pseudoforest
查看>>
Nexus杂
查看>>
Android --- GreenDao的实现(ORM框架)
查看>>
用Java发起HTTP请求与获取状态码(含状态码列表)
查看>>
微信内下载APK 微信浏览器apk下载的解决方案
查看>>
js_coding
查看>>
Linux平台Java调用so库-JNI使用例子
查看>>
PCM数据格式,多少字节算一帧
查看>>
python获取当前路径的方法
查看>>
Spring Data JPA
查看>>
Selenium中的xpath定位
查看>>
KACK的处理方法
查看>>
POJ3438 ZOJ2886 UVALive3822 Look and Say【数列】
查看>>
IE6的height小BUG
查看>>
docker~学习笔记索引
查看>>
MongoDB学习笔记~大叔分享批量添加—批量更新—批量删除
查看>>
说说IUnitOfWork~DbContext对象的创建应该向BLL层公开
查看>>
强制卸载kernel
查看>>
js 杂项(一)函数篇
查看>>