SketchCode 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
SketchCode 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
SketchCode 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
SketchCode 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
SketchCode 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

SketchCode是一种深度学习模型,它采用手绘的Web原型并将其转换为有效的HTML代码,使用图像字幕体系结构从手绘网站线框生成HTML标记。

注意:此项目是概念验证;该模型性能依赖于类似于核心数据集的线框。

依赖

  • Python 3 (not compatible with python 2)
  • pip

安装依赖

pip install -r requirements.txt

用法示例

下载数据和预训练的权重:

# Getting the data, 1,700 images, 342mb
git clone https://github.com/ashnkumar/sketch-code.git
cd sketch-code
cd scripts

# Get the data and pretrained weights
sh get_data.sh
sh get_pretrained_model.sh

使用预训练的权重将示例绘制的图像转换为HTML代码:

cd src

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

一般用法

使用权重将单个图像转换为HTML代码:

cd src

python convert_single_image.py --png_path {path/to/img.png} \
      --output_folder {folder/to/output/html} \
      --model_json_file {path/to/model/json_file.json} \
      --model_weights_file {path/to/model/weights.h5}

将文件夹中的一批图像转换为HTML:

cd src 

python convert_batch_of_images.py --pngs_path {path / to / folder / with / pngs} \ 
      --output_folder {folder / to / output / html} \ 
      --model_json_file {path / to / model / json_file.json} \ 
      - -model_weights_file {path / to / model / weights.h5}

训练模型:

cd src

# training from scratch
# <augment_training_data> adds Keras ImageDataGenerator augmentation for training images
python train.py --data_input_path {path/to/folder/with/pngs/guis} \
      --validation_split 0.2 \
      --epochs 10 \
      --model_output_path {path/to/output/model}
      --augment_training_data 1

# training starting with pretrained model
python train.py --data_input_path {path/to/folder/with/pngs/guis} \
      --validation_split 0.2 \
      --epochs 10 \
      --model_output_path {path/to/output/model} \
      --model_json_file ../bin/model_json.json \
      --model_weights_file ../bin/pretrained_weights.h5 \
      --augment_training_data 1

使用BLEU分数评估生成的预测

cd src

# evaluate single GUI prediction
python evaluate_single_gui.py --original_gui_filepath  {path/to/original/gui/file} \
      --predicted_gui_filepath {path/to/predicted/gui/file}

# training starting with pretrained model
python evaluate_batch_guis.py --original_guis_filepath  {path/to/folder/with/original/guis} \
      --predicted_guis_filepath {path/to/folder/with/predicted/guis}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (12)

加载中
能干嘛呢?貌似只能做研究啊,真用起来,你还是想想ie吧
2020/08/18 09:48
回复
举报
ie都不更新了,还想啥ie
2020/09/02 09:40
回复
举报
有道理
2020/09/02 10:18
回复
举报
好可怕,这个如果成熟了,还有前端啥事儿啊
2020/08/17 07:54
回复
举报
玩具而已
2020/08/14 11:45
回复
举报
是个好的开头
2020/08/14 09:26
回复
举报
生成的网页代码干净吗?Photoshop很久以前就能导出html了,但代码基本不能用,还是自己写最好。
2020/08/13 15:36
回复
举报
2020/08/13 14:08
回复
举报
hmh
这个代码最后一次提交已经是两年前了
2020/08/13 10:31
回复
举报
离我失业的日子越来越近了,怎么办?
2020/08/13 10:07
回复
举报
创业当老板去
2020/08/13 12:11
回复
举报
这也太强了!
2020/08/13 09:54
回复
举报
更多评论
暂无内容
2018/06/09 13:42

使用深度学习自动化前端开发 SketchCode:5秒钟内从想法转到HTML

作者:Ashwin Kumar 来源:Insight 编辑:代码医生团队 Ashwin Kumar之前是Sway Finance的联合创始人,Sway Finance是一家Y Combinator支持的创业公司,使用机器学习实现会计自动化。在Insight中,他开发了一个模型,允许用户从手绘线框创建工作的HTML网站,显着加快了设计过程。他现在是神话的深度学习科学家。 今天的设计工作流程 设计工作流经过多个利益相关者 典型的设计工作流程可能如下所示: 产品经理执行用户研究以生成...

0
0
2018/09/07 10:23

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

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

0
0
发表了博客
2018/08/16 14:59

深度学习自动前端开发

在人们的不断探索下,「使用人工智能自动生成网页」的方法已经变得越来越接近实用化了。本文介绍的这种名为 SketchCode 的卷积神经网络能够把网站图形用户界面的设计草图直接转译成代码行,为前端开发者们分担部分设计流程。目前,该模型在训练后的 BLEU 得分已达 0.76。 你可以在 GitHub 上找到这个项目的代码:https://github.com/ashnkumar/sketch-code 为用户创造直观、富有吸引力的网站是各家公司的重要目标,而且这是个快...

0
2
2020/08/07 19:00

程序员又要失业?MIT 等推出新的机器编程系统

7月29日,英特尔官网消息,英特尔和麻省理工学院(MIT)、乔治亚理工学院(Georgia Tech)共同推出了一种新的机器编程(MP)系统——机器推断代码相似性系统(MISIM)。 通过识别相似代码段,分析代码目的、作用的相似性,MISIM 可以完成一些编程任务,提供编程方法建议或选项,即用 AI 代替程序员做部分工作,如自动化错误检测等。 “英特尔机器编程的最终目的是使软件创建民主化”, 英特尔首席科学家兼机器编程研究总监/创始...

25
29
发表了博客
2019/09/07 22:13

数据浪潮之间的前端工程师

数据浪潮之间的前端工程师 十年来,波澜壮阔的移动互联网浪潮促进了 Web 技术的迅猛发展,随着浏览器性能、网络带宽等基础设施的提升,Web 也能够承载起包含复杂交互、可视化、计算逻辑需求的富客户端应用。同时 RN, Weex, 小程序为代表的混合式开发日趋成为与 Android、iOS 原生开发并肩的开发模式之一;而 VR, AR, IoT 等新的交互方式或者媒介也正步入消费级市场,原本前端之间的隔阂逐渐消亡,我们慢慢进入了大前端的时代。笔...

0
0
发表了博客
2020/09/29 08:41

人工智能在软件开发领域应用现状

转载本文需注明出处:微信公众号EAWorld,违者必究。 江湖上一直流传着这样的传闻:“程序员们很快就要失业了,因为人工智能马上就能写出完美的代码了”。人工智能是以软件形式存在的,编写了这些强大软件的码农们,如果被自己编写的代码所取代,来写出新一代的代码,那会是一个神奇而又悲伤的故事。我们今天就来看看人工智能在软件开发领域里的现状,我们距离传奇还有多远? 有人说软件开发是一种艺术,有人说软件开发需要工匠...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
12 评论
51 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部