文档章节

利用深度学习实现手绘数据可视化的生成

naughty
 naughty
发布于 01/04 09:13
字数 2450
阅读 3137
收藏 35

前一段时间,我开发了Sketchify, 该工具可以把任何以SVG为渲染技术的可视化转化为手绘风格。(参考手绘风格的数据可视化实现 Sketchify

那么问题来了,很多的chart是以Canvas为渲染技术的,那要怎么办?

我拍脑袋一想,为什么不使用深度学习技术来做呢?

原理很简单:

  • 首先用相同的数据分别生成原始的和手绘风格的数据可视化图数据。
  • 然后利用深度神经网络,使用该数据训练一个模式,输入是数据图,输出的手绘风格的图。这样就可以训练一个生成手绘风格数据可视化的神经网络了。
  • 然后对于任何新的数据图,输入该网络就可以输出一个手绘风格的图。

这听起来就像如何把大象放到冰箱里一样的简单直接。

废话少说,开始干。

准备数据

数据准备要生成一定数量的原始图和手绘图,利用Sketchify就可以完成功能,但是具体如何做到?参考如下架构:

  • VizServer是一个web服务,用nodejs开发,代码在这里https://github.com/gangtao/handyModel/tree/master/vizService
    VizServer使用restify提供RestAPI接口,利用squirrelly.js的模版引擎生成一个包含可视化的Html页面。模版如下:
    <!doctype html>
    <html>
      <head>
        <title>{{sketchify}}</title>
        <meta charset="UTF-8">
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"></script>
        <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
        <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/gangtao/sketchify/dist/sketchify.min.js"></script>
        
      </head>
      <body>
          <div id="chart" style="height: 400px; width: 600px"></div>
      </body>
      <script>
        $(function() {
          var data = {{dataset| safe}};
          var chart = new G2.Chart({
              container: 'chart',
              forceFit: true,
              height: 400,
              animate: false,
              renderer: 'svg'
          });
          chart.source(data);
          chart.scale('sales', {
              tickInterval: 20
          });
          chart.interval().position('{{grammar}}'); //'year*sales'
          chart.render();
          {{if(options.sketchify === 1)}}
          const container = $('#chart')[0];
          const handler = Sketchifier(container, {});
           handler.handify();
          {{/if}}
        });
      </script>
    </html>

     

  • DataGen负责生成随机的图表数据,发送请求到VizServer,把返回的网页利用puppeteer的headless browser渲染,并截图。代码在这里
    其中,数据生成部分我是用了mockjs,我发现另一个比较有趣的库可以做类似的功能是casual

训练神经网络

数据准备好以后就可以训练神经网络了。

深度神经网络的训练往往比较消耗资源。最好有相当大的内存和GPU。有俩个免费的选择:

  1. google colab

    colab就不需要介绍了,大家都很熟悉了,有免费GPU
  2. paperspace

    paperspace是一个新的深度学习的免费环境,我试用了以下,免费的GPU配置还是很不错的,大家可以试试看。

    有了训练环境,导入数据,设一个神经网络,然后就可以训练了。这里省去若干介绍如何加载数据png,转换成tensor或tf的dataset。大家可以参考这些代码。
    总之,大象还是没能顺利的放入冰箱,我训练的模型大都输出这样的手绘图。

离我的设想的输入差距比较大。为什么会失败呢?我想大概有以下这些原因。

  1. 我的神经网络比较简单,受限于硬件,我不可能训练非常复杂的神经网络。
  2. 我的损失函数选择不好
  3. 我的网络不收敛
  4. 我的训练时间不够

总之,完成图像到图像的翻译任务,我们需要更复杂和高深的技术。

图像到图像的翻译

经研究我发现,这个任务是一个典型的图像到图像的翻译,例如前些日子火遍大江南北的deepfake,就是基于图像到图像的翻译。

有一些专门的的研究针对图像到图像的翻译任务。一个是CycleGan,另一个是pix2pix(Conditional GAN),这两个都是基于GAN(生成对抗网络)的,所以我们先简单讲讲GAN。 (参考 在浏览器中进行深度学习:TensorFlow.js (八)生成对抗网络 (GAN)

“gan”的图片搜索结果

如上图所示,GAN包含两个互相对抗的网络:G(Generator)和D(Discriminator)。正如它的名字所暗示的那样,它们的功能分别是:

  • Generator是一个生成器的网络,它接收一个随机的噪声,通过这个噪声生成图片。
  • Discriminator是一个鉴别器网络,判别一张图片或者一个输入是不是“真实的”。它的输入是数据或者图片,输出D表示输入为真实图片的概率,如果为1,就代表100%是真实的图片,而输出为0,就代表不可能是真实的图片。

在训练过程中,生成网络G的目标就是尽量生成真实的图片去欺骗判别网络D。而D的目标就是尽量把G生成的图片和真实的图片分别开来。这样,G和D构成了一个动态的“博弈过程”。在最理想的状态下,G可以生成足以“以假乱真”的图片

CycleGan

https://github.com/junyanz/CycleGAN

“cycle gan architecture”的图片搜索结果

实现图像间的翻译,借助GAN,应该有两个domain的鉴别器,每个鉴别器单独判断各自domain的数据是否是真实数据。至于generator,图像的翻译需要将domain A的图像翻成domain B的图像,所以generator有点像自编码器结构,只是decoder的输出不是domain A的图像,而是domain B的图像。为了充分利用两个discriminator,还应该有一个翻译回去的过程,也就是说,还有一个generator,它将domain B的数据翻译到domain A。

CycleGAN作者做了很多有意思的实验,包括horse2zebra,apple2orangle,以及风格迁移,如:对风景画加上梵高的风格。


Pix2pix

https://github.com/phillipi/pix2pix

pix2pix是基于条件对抗生成网络,关于CGAN和GAN的架构区别可以参考下图:

“CGAN”的图片搜索结果
CGAN与GAN非常相似,除了生成器和鉴别器均以某些额外信息y为条件。可以通过将鉴别器和生成器作为附加输入层输入来执行这种调节。“ y”可以是任何种类的辅助信息,例如类别标签或来自其他模态的数据。在本教程中,我们将类标签用作“ y”。这里条件信息y是添加的额外条件信息,生成器G和鉴别器D都学会了以某些模式进行操作。例如,在面部生成应用程序的情况下,我们可以要求生成器生成带有微笑的面部,并询问鉴别器特定图像是否包含带有微笑的面部。

作者举了几个图像到图像翻译的应用例子,都挺有趣的。

好了拥有了强大的工具以后,后面的事情就比较简单了。

我利用前面提到的生成工具生成了400对bar chart的原始和手绘图,另外分别有100对测试和验证数据集。利用paperspace的免费GPU,运行https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix的pix2pix代码,使用缺省的参数,训练了200个epoch,每个epoch大概50秒,总共耗时3小时左右。

[Network G] Total number of parameters : 54.414 M
[Network D] Total number of parameters : 2.769 M

缺省的网络的参数数量如上图所示。

训练结果如下图:

上面两个是我的测试数据中的两个例子。A是原始域,B是手绘域。中间的fakeB是pix2pix模型根据原始A图生成的结果。我们看到该生成图形几乎可以乱真。

下一步

到这里是不是大功告成了呢?还没有,想想我们之前要解决的问题,对于任意的基于Canvas渲染的可视化图表,我们改如何运用该模型呢?这里我列出还需要做的工作:

  • 增强数据生成功能,生成更多不同类型,数据,风格的图数据来训练一个更通用的模型(在本例子中,我们只有Bar Chart的缺省风格的训练数据)
  • 部署该模型为一个服务,在客户端浏览器中利用JS把Canvas数据发送请求至该服务来获得手绘风格的输出。
  • 或者利用Keras训练该模型并利用tensorflowJs直接部署到浏览器,这样做就不需要服务器端的交互,更利于集成。

总结

本文给出了一个利用深度学习实现数据可视化到手绘风格转化的实际例子,利用机器学习或者深度学习解决一个具体的问题很有趣,但是要完成端到端的功能,需要很多很琐碎的知识和系统思考的能力。希望这个故事对你有所帮助。有问题请发评论给我。

参考:

© 著作权归作者所有

naughty

naughty

粉丝 420
博文 82
码字总数 164382
作品 2
其它
私信 提问
加载中

评论(2)

Stinson_Zhao
Stinson_Zhao
有点意思,GPU的话,可以试试国内的矩池云:https://matpool.com
mymbrooks
mymbrooks
有创意 期待进一步的效果
深度学习入门笔记系列 ( 八 ) ——基于 tensorflow 的手写数字的识别(进阶)

基于 tensorflow 的手写数字的识别(进阶) 本系列将分为 8 篇 。本次为第 8 篇 ,基于 tensorflow ,利用卷积神经网络 CNN 进行手写数字识别 。 1.引言 关于 mnist 数据集的介绍和卷积神经网...

技术小能手
2018/09/14
0
0
新的快速图像转手绘方法,人类水准、户外场景

雷锋网 AI 科技评论按:下面的 AI 生成的手绘图看起来怎么样?有耳目一新的感觉吗?像你不好好听课的时候在草稿纸上随便画的风格吗? 作者们尤其希望读者关注下面那张卧室的生成手绘图像。其...

杨晓凡
2019/01/28
0
0
手绘用户界面转成 HTML 代码 - Sketch2Code

Sketch2Code 是一个基于 Web 的解决方案,使用 AI 将手绘的用户界面草图转换为可用的 HTML 代码。Sketch2Code 由微软和 Kabel、Spike Techniques 合作开发。读者可以在 GitHub 上找到与 Sket...

匿名
2018/09/09
12.1K
22
猜画小歌技术解密!推出一天 中国网民“疯”了

看点:退出中国8年后,谷歌靠一款小程序再度挑动全中国网民。 谷歌最近狠秀了一把存在感,前一刻还因安卓系统垄断事件被欧盟处以数十亿欧元的天价罚单,后一刻就凭借首款AI微信小程序“猜画小...

技术小能手
2018/07/20
0
0
同济大学「智能大数据可视化实验室」开发绘图机器人,相关论文被 AAAI 2019 收录

雷锋网(公众号:雷锋网) AI 科技评论按:第 33 届人工智能顶级国际会议 AAAI 2018 论文收录结果目前已公布,其中就收录了同济大学「智能大数据可视化实验室」开发的绘图机器人 AI-Sketcher ...

丛末
2018/11/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 谨以此文怀念逝去的人

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 今天没歌曲 手机党少年们想听歌,请使劲儿戳(这里) 今天是周六, 刚想开始写乱弹的时候, 翻到了巴叔新建的话题上, @ 巴拉迪维:宏哥,一路...

小小编辑
32分钟前
9
0
判断php变量是否定义,是否为空,是否为真的一览表

使用 PHP 函数对变量 $x 进行比较 表达式 gettype() empty() is_null() isset() boolean : if($x) $x = ""; string TRUE FALSE TRUE FALSE $x = null; NULL TRUE TRUE FALSE FALSE var $x; N......

Grayk
今天
12
0
服务器监控

1. 服务器监控内容有哪些? 答: 主要有服务监控 和 流量监控 2. 监控重点是? 答: 是 磁盘 和 流量,cpu是浮动的,意义不大 3. 怎样 实现 监控? 答:将 服务器 分为:监控者 和 被监管协议...

杨凯123
昨天
242
0
Apollo开发指南

一、准备工作 二、本地启动 2.1 Apollo Config Service和Apollo Admin Service 2.2 Apollo-Portal 2.3 Java样例客户端启动 2.4 .Net样例客户端启动 三、开发 3.1 Portal 实现用户登录功能 3....

Ciet
昨天
307
0
英文词汇 计算机网络中的专业英语单词及其缩写

学习计算机网络时,会阅读相关的专业文献。对于文献中经常出现的缩写形式的专业名词,做了一些积累。现于此博文中做个简单的分享,希望能对后来人有所帮助,平稳地入门计算机网络。 注:博文...

志成就
昨天
178
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部