SketchCode

手稿生成 HTML 代码
授权协议 MIT
开发语言 Python
所属分类 Web应用开发、 网页开发工具
软件类型 开源软件
地区 不详
投 递 者 谷梁建中
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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

  • 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 一

  • 作者:王下邀月熊 编辑:徐川 前端每周清单专注大前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。 新闻热点 国内国外,前端最新动态 D3 5.0: D3 5.0 作为大版本更新,引入了部分不向后兼容的特性更新。该版本开始使用 P

 相关资料
  • 我有一个由以下字符|分隔的csv文件。该文件有三列;一个是url(COL1),另一个是小文本(COL3),最后一个是图像位置(COL2)。我需要一个脚本,用csv文件中的数据给我这样的html代码: 我该怎么做?

  • 本文向大家介绍PHP生成静态HTML文档实现代码,包括了PHP生成静态HTML文档实现代码的使用技巧和注意事项,需要的朋友参考一下 利用PHP,将数据库中的文章数据生成单个的HTML文档。首先,有利于搜索引擎的收录。其次,避免数据库中的字段暴露在地址栏上,更安全。 给出代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Perl生成纯HTML代码二维码实例,包括了Perl生成纯HTML代码二维码实例的使用技巧和注意事项,需要的朋友参考一下 需要依次安装 qrencode、Text-QRCode、HTML-QRCode #!/usr/bin/perl use HTML::QRCode; my $text = 'http://jb51.net/'; my $qrcode = HTML::QRCode->

  • 我正在根据参考指南学习使用Map结构。日食验证是 面向Web开发人员的Eclipse Java EE IDE。版本:开普勒服务版本2 pom。xml如下所示,与参考指南相同 它表示在构建项目时将生成实现代码。但是,它似乎不会在目标/生成的源文件夹下生成

  • 问题内容: 我正在寻找一个易于实现的python html生成器。我找到了这个 但是无法为表添加CSS元素(ID,类)。 谢谢 问题答案: 如果您希望通过程序生成而不是模板生成,那么Karrigell的HTMLTags模块是一种可能。它可以通过大写其首字母的技巧(例如,引用我刚刚给出的doc URL)来包括例如属性(在Python中为保留字)。 与Python关键字(类,类型)同名的属性必须大写:

  • 问题内容: 给定一组结构,我如何使用“范围”模板迭代器打印出一个表,该表为每个结构分配一行,为每个字段值分配一列,而无需显式命名字段? 模板代码: 当我尝试使用迭代值时 有人告诉我,我无法遍历价值观。有什么干净的方法可以做到这一点吗? 问题答案: 使用,您无法遍历结构中的字段。在该包的文档中,您可以阅读: {{范围管道}} T1 {{end}} 管道的值必须是数组,切片,映射或通道。 也就是说,管