深度学习使用sketch-code 草图、手稿自动生成HTML前端页面
之前在知乎上看到一篇文章 标题是 《从草图到HTML只需5秒》，好奇点进去看了一会。
顿时惊了。这是一个使用手稿来生成HTML页面的项目，非常有意思。
具体原文在此：从草图到HTML只需5秒
如图片这样，只要一张手绘图，就可以生成HTML代码，还是bootstrap的!
于是好奇心使我找到了该项目来试了一下，这里和大家分享一下复现的过程，作为一个小记录，仅供参考
项目使用的是keras深度学习框架
项目地址：sketch-code
编译环境本人通常使用macOS、linux。
这个项目使用的是Python3，且不支持其他python2的版本！需要使用pip(废话)
以下是需要使用到的依赖
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下载所需要的包，我用的是mac，wget要自己下载。linux有自带。
文件将近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我的图片叫做img002.png
这时需要一会时间，等待他渲染前端代码，大概一分钟左右
————————————————————————————————
经过一会的等待，完成了！
跟我画的布局差不多，还是bootstrap的！惊了，不过有个细节，我并没有画导航栏，他给我生成了。
注：DIV的边框是我后来加上去的，为了让大家看清楚手稿的布局和生成代码的布局对比
<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>
这是生成出来的部分代码
这时，我想试试难度更高点的页面。
所以试着再画一张
显然，我画的很丑，我觉得识别出它来有一定的难度。手残没办法。
于是我把图片处理一下
调整一下阈值。感觉还是丑呵呵
放进去试试吧
好像失败了。显然不是我们要的效果
可能是我画的真的太丑了吧估计。
这是一个很神奇的项目
如果想要更好的效果，要自己去训练更好的模型。那需要收集大量的样本，显然，人工智能自动生成网页的时代已经不远了
这一个网友windows版的实现：https://blog.csdn.net/qq_40670946/article/details/92772979
深度学习使用sketch-code 草图、手稿自动生成HTML前端页面相关推荐
- 基于深度学习的高精地图的自动生成与标注
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 文章:Automatic Building and Labeling of HD Maps with ...
- 在基于图像的深度学习中如何做数据的自动标注以及自动标注的等级介绍
作者:Tobias Schaffrath Rosario 编译:ronghuaiyang 原文:在基于图像的深度学习中如何做数据的自动标注以及自动标注的等级介绍_ronghuaiyang的博客-CSD ...
- 【AI初识境】深度学习模型评估，从图像分类到生成模型
文章首发于微信公众号<有三AI> [AI初识境]深度学习模型评估,从图像分类到生成模型 这是<AI初识境>第10篇,这次我们说说深度学习模型常用的评价指标.所谓初识,就是对相关 ...
- Keras深度学习实战（38）——图像字幕生成
Keras深度学习实战(38)--图像字幕生成 0. 前言 1. 模型与数据集分析 1.1 数据集分析 1.2 模型分析 2. 实现图像字幕生成模型 2.1 数据集加载与预处理 2.2 模型构建与训练 ...
- 两个月入门深度学习，全靠动手实践！一位前端小哥的经验分享
两个月入门深度学习,全靠动手实践!一位前端小哥的经验分享 在当前社会,技术日新月异,一个全栈工程师不及时学习新知识,掌握AI技能,再过两年就算不上"全栈"了. 产品发烧友.前端 ...
- doc自动生成html,java web应用中自动生成文章html页面的实现.doc
java web应用中自动生成文章html页面的实现 java web应用中自动生成文章html页面的实现 2009-11-09 00:24:15 标签:web开发,页面转换 [推送到技术圈] 版权声 ...
- 利用strut2标签自动生成form前端验证代码
利用strut2标签自动生成form前端验证代码,使用到的技术有 1.struts2标签,如<s:form> <s:textfieled> 2.struts2读取*Valida ...
- Word进行自动生成目录右边页面等格操作简单详细方法
Word进行自动生成目录右边页面等格操作简单详细方法 Word文档自动生成的目录,但是由于目录的右边不等(见下图),看起来不美观,所以我们可以将目录右边页面进行等格处理. 方法步骤如下: 一.首先选择 ...
- [深度学习 - 发现有趣项目] 动漫图生成手绘草图 Anime2Sketch
我公司的科室开始在公众号上规划一些对外的技术文章了,包括实战项目.模型优化.端侧部署和一些深度学习任务基础知识,而我负责人体图象相关技术这一系列文章,偶尔也会出一些应用/代码解读等相关的文章. 文章在 ...
最新文章
- 谈谈C#中类成员的执行顺序.
- 2019机器学习比赛_2019顶尖的机器学习课程
- gitee 拉取其他分支_如何使用 Gitee 快速搭建 ESP-IDF 开发环境（Windows 版）
- 如何使用R来连接各个数据库
- 03-25实验一、命令解释程序的编写
- mysql延时优化教程_Slave延迟很大的优化方法总结（MySQL优化）
- IOS学习笔记 O2
- Java中的几种引用类型_Java中的几种引用类型(转载)
- “举报”阿里巴巴 Arthas，大幅降低 OOM Trouble shooting 门槛
- 「博客之星」评选，诚信的互投啊，留链定回
- Element-UI分页组件使用——点第几页查第几页
- 千兆以太网线和水晶头的制作方法
- php引用下级目录文件夹,使用PHP遍历文件夹与子目录的函数代码
- LeetCode 1215. 步进数（BFS/DFS）
- python重写和装饰器_python装饰器
- Python——Python3.6.0+Scrapy安装方法（总算没有bug了）
- 问题：连接查询和子查询的区别和连接及优劣？
- MaxCompute SQL中的更新和删除如何实现
- 【sql的四大连接】
- 条码仓库管理系统在食品行业中的应用