Github每日精选(第33期):Screenshot-to-code训练 AI 将设计模型转换为 HTML 和 CSS
Screenshot-to-code
Screenshot-to-code
深度学习将改变前端开发。它将增加原型设计速度并降低构建软件的门槛。
github上的地址在这里。
当 Tony Beltramelli 推出pix2code 论文和 Airbnb 推出sketch2code时,该领域开始腾飞。
目前,自动化前端开发的最大障碍是计算能力。但是,我们现在可以使用当前的深度学习算法以及合成的训练数据,开始探索人工前端自动化。
以下是该过程的快速概述:
1)给训练好的神经网络一个设计图
2) 神经网络将图像转换为 HTML 标记
3) 渲染输出
我们将在三个迭代中构建神经网络。
首先,我们将制作一个最低限度的版本来掌握活动部件。第二个版本 HTML 将专注于自动化所有步骤并解释神经网络层。在最终版本 Bootstrap 中,我们将创建一个可以泛化和探索 LSTM 层的模型。
所有代码都在GitHub和FloydHub上的 Jupyter 笔记本中准备好。所有 FloydHub 笔记本都在该floydhub目录中,本地等价物在local.
这些模型基于 Beltramelli 的pix2code 论文和 Jason Brownlee 的图像说明教程。代码是用 Python 和 Keras 编写的,Keras 是 TensorFlow 之上的一个框架。
安装
单击此按钮可在FloydHub上打开一个工作区,您将在其中找到与Bootstrap 版本相同的环境和数据集。您还可以找到经过训练的模型进行测试。
pip install keras tensorflow pillow h5py jupyter
git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
jupyter notebook
去做所需的笔记本,以“.ipynb
”结尾的文件。要运行模型,请转到菜单,然后单击 Cell > Run all
最终版本,即 Bootstrap 版本,准备了一小部分来测试运行模型。如果您想尝试使用所有数据,您需要在此处下载数据 ,并指定正确的dir_name
.
文件夹结构
| |-Bootstrap #The Bootstrap version| | |-compiler #A compiler to turn the tokens to HTML/CSS (by pix2code)| | |-resources | | | |-eval_light #10 test images and markup| |-Hello_world #The Hello World version| |-HTML #The HTML version| | |-Resources_for_index_file #CSS,images and scripts to test index.html file| | |-html #HTML files to train it on| | |-images #Screenshots for training|-readme_images #Images for the readme page
Github每日精选(第33期):Screenshot-to-code训练 AI 将设计模型转换为 HTML 和 CSS相关推荐
- Github每日精选:超6k星的开源神器,一键还原百年老电影、黑白旧照片本色
1.DeOldify:一键还原百年老电影.黑白旧照片本色 DeOldify在Github一上线就爆火,目前已收获6000多星,可以让黑白老电影以及老照片复原其本色.该作者在GitHub中提到,DeOl ...
- 【区块链技术工坊33期】罗梅琴:区块链账户模型
1,活动基本信息 1)题目: [区块链技术工坊33期]区块链账户模型 2)议题: 有人说2019年,区块链领域将会获得突破性的进展,正式进入爆发元年.现在新年伊始,我们从区块链账户模型的发展来探讨区块 ...
- Github每日精选(第56期):支持多语言的文字识别EasyOCR
EasyOCR EasyOCR一款好用的OCR,支持80多种语言和所有流行的书写脚本,包括拉丁语.汉语.阿拉伯语.德瓦纳加里语.西里尔语等. OCR (Optical Character Recogn ...
- Github每日精选(第24期):python的浏览器MechanicalSoup
MechanicalSoup 可能你看到MechanicalSoup,就会想起BeautifulSoup,是的,这两个的功能用起来差不多,只是MechanicalSoup做的更多一点. Mechani ...
- Github每日精选(第48期):SQLite下的知识库memos
memos memos 是一个开源的.自托管的知识库,可与 SQLite db 文件一起使用. 使用SQLite db还是很有必要的,因为有的时候我们需要把我们的日志进行转移,直接把数据库拷走就可以了 ...
- Github每日精选(第77期):Go (Golang) 编写的 HTTP Web 框架gin
Gin Gin 是一个用 Go (Golang) 编写的 Web 框架.由于httprouter,它具有类似 martini 的 API,性能提高了 40 倍.如果您需要性能和良好的生产力,您一定会喜 ...
- Github每日精选(第79期):虚拟数据生成库faker
faker Faker是一个Python包,可以为你生成假数据.无论您是需要引导您的数据库.创建美观的 XML 文档.填写您的持久性以对其进行压力测试,还是对从生产服务中获取的数据进行匿名化,Fake ...
- Github每日精选(第75期):colly 爬取网站所有的数据
colly colly 是一个优雅的 Golang 爬虫框架. colly 提供了一个干净的接口来编写任何类型的爬虫/scraper/spider. 使用 Colly,您可以轻松地从网站中提取结构化数 ...
- Github每日精选(第57期):用于绘制手绘图的虚拟白板excalidraw
excalidraw 在做ppt的时候,如果我们的图或者是表,用手绘的形式来完成的话,我们的ppt看起来就比较高档了,一个体现了我们的认真做ppt的态度,一个是体现了我们审美的高度. excalidr ...
最新文章
- 管理表空间和数据文件——使用OMF方式管理表空间
- 一个黑魔法,竟能让Python支持方法重载
- 日期型转json格式(springboot)
- C++ lower_bound 与 upper_bound 函数
- DTCoreText
- 进销存管理系统, 刚学C++
- 4月27 统计学——卡方检验和卡方分布
- 偏相关分析在python上的实现(支持栅格数据)
- 在rhel 7.3中安装glibc-devel-2.17-157.el7.i686包的过程详录
- 一学就会的虚拟化技术之hyper-v桌面虚拟化
- 微信公众号ajax500,普通js使用ajax,微信公众号授权(微信网页授权)
- PTA 离散数学-数理逻辑自测
- html5实现canvas迷宫游戏,HTML5/Canvas/JS 迷宫生成动画
- java 获取mac字体_Mac OS X上的Java App无法正确打印字体
- 区块链对广告行业发展的影响
- 相册服务器位置,如何将相册存放在云服务器
- 从val_loss,train_loss,test_loss中产生的问题
- C++报错:引发了未经处理的异常:写入访问权限冲突, p 是 0xCCCCCCCC
- 《CCNA学习指南:Cisco网络设备互连(ICND2)(第4版)》——1.1节理解VLAN 和VLAN Trunk 及排除相关故障...
- 三大运营商eSIM商用情况
热门文章
- keras跑yolov3模型报错1“python3: can't open file 'convert.py': [Errno 2] No such file or directory”解决
- JavaScript-你不知道的JavaScript (免费分享)
- 并联串联混合的电压和电流_详解三相并联型有源滤波器(APF)控制仿真!
- 一款将word转换为exe,并且限制访问的软件DRMsoft word to EXE
- 如何检查Linux系统下的Virtio 驱动
- 第一次参加CCF心得
- STM32_FOC_4_如何获得Park变换中的θ角-即电机的电角度_Plus
- HEVC中一些英语简写
- SCCB(I2C)时序
- NIN网络-Network In Network