企业微网站哪家好,百度应用市场,梧州市建设局网站,网站优化连云港哪家强?前一段时间#xff0c;我开发了Sketchify#xff0c; 该工具可以把任何以SVG为渲染技术的可视化转化为手绘风格。#xff08;参考手绘风格的数据可视化实现 Sketchify#xff09;那么问题来了#xff0c;很多的chart是以Canvas为渲染技术的#xff0c;那要怎么办#xf…前一段时间我开发了Sketchify 该工具可以把任何以SVG为渲染技术的可视化转化为手绘风格。参考手绘风格的数据可视化实现 Sketchify那么问题来了很多的chart是以Canvas为渲染技术的那要怎么办我拍脑袋一想为什么不使用深度学习技术来做呢原理很简单首先用相同的数据分别生成原始的和手绘风格的数据可视化图数据。然后利用深度神经网络使用该数据训练一个模式输入是数据图输出的手绘风格的图。这样就可以训练一个生成手绘风格数据可视化的神经网络了。然后对于任何新的数据图输入该网络就可以输出一个手绘风格的图。这听起来就像如何把大象放到冰箱里一样的简单直接。废话少说开始干。准备数据数据准备要生成一定数量的原始图和手绘图利用Sketchify就可以完成功能但是具体如何做到参考如下架构VizServer是一个web服务用nodejs开发代码在这里https://github.com/gangtao/handyModel/tree/master/vizServiceVizServer使用restify提供RestAPI接口利用squirrelly.js的模版引擎生成一个包含可视化的Html页面。模版代码在这里DataGen负责生成随机的图表数据发送请求到VizServer把返回的网页利用puppeteer的headless browser渲染并截图。代码在这里其中数据生成部分我是用了mockjs我发现另一个比较有趣的库可以做类似的功能是casual训练神经网络数据准备好以后就可以训练神经网络了。深度神经网络的训练往往比较消耗资源。最好有相当大的内存和GPU。有俩个免费的选择google colabcolab就不需要介绍了大家都很熟悉了有免费GPUpaperspacepaperspace是一个新的深度学习的免费环境我试用了以下免费的GPU配置还是很不错的大家可以试试看。有了训练环境导入数据设一个神经网络然后就可以训练了。这里省去若干介绍如何加载数据png转换成tensor或tf的dataset。大家可以参考这些代码。总之大象还是没能顺利的放入冰箱我训练的模型大都输出这样的手绘图。离我的设想的输出差距比较大。为什么会失败呢我想大概有以下这些原因。我的神经网络比较简单受限于硬件我不可能训练非常复杂的神经网络。我的损失函数选择不好我的网络不收敛我的训练时间不够总之完成图像到图像的翻译任务我们需要更复杂和高深的技术。图像到图像的翻译经研究我发现这个任务是一个典型的图像到图像的翻译例如前些日子火遍大江南北的deepfake就是基于图像到图像的翻译。有一些专门的的研究针对图像到图像的翻译任务。一个是CycleGan另一个是pix2pixConditional GAN这两个都是基于GAN生成对抗网络的所以我们先简单讲讲GAN。 参考 在浏览器中进行深度学习TensorFlow.js (八生成对抗网络 GAN如上图所示GAN包含两个互相对抗的网络GGenerator和DDiscriminator。正如它的名字所暗示的那样它们的功能分别是Generator是一个生成器的网络它接收一个随机的噪声通过这个噪声生成图片。Discriminator是一个鉴别器网络判别一张图片或者一个输入是不是“真实的”。它的输入是数据或者图片输出D表示输入为真实图片的概率如果为1就代表100%是真实的图片而输出为0就代表不可能是真实的图片。在训练过程中生成网络G的目标就是尽量生成真实的图片去欺骗判别网络D。而D的目标就是尽量把G生成的图片和真实的图片分别开来。这样G和D构成了一个动态的“博弈过程”。在最理想的状态下G可以生成足以“以假乱真”的图片CycleGanhttps://github.com/junyanz/CycleGAN实现图像间的翻译借助GAN应该有两个domain的鉴别器每个鉴别器单独判断各自domain的数据是否是真实数据。至于generator图像的翻译需要将domain A的图像翻成domain B的图像所以generator有点像自编码器结构只是decoder的输出不是domain A的图像而是domain B的图像。为了充分利用两个discriminator还应该有一个翻译回去的过程也就是说还有一个generator它将domain B的数据翻译到domain A。CycleGAN作者做了很多有意思的实验包括horse2zebraapple2orangle以及风格迁移如对风景画加上梵高的风格。Pix2pixhttps://github.com/phillipi/pix2pixpix2pix是基于条件对抗生成网络关于CGAN和GAN的架构区别可以参考下图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直接部署到浏览器这样做就不需要服务器端的交互更利于集成。总结本文给出了一个利用深度学习实现数据可视化到手绘风格转化的实际例子利用机器学习或者深度学习解决一个具体的问题很有趣但是要完成端到端的功能需要很多很琐碎的知识和系统思考的能力。希望这个故事对你有所帮助。有问题请发评论给我。参考手绘风格的数据可视化实现 Sketchify训练数据生成代码 Pix2pix 原始论文 https://phillipi.github.io/pix2pix/AI从绘图制作出精美的照片pix2pix利用深度学习实现从图像到图像的翻译条件对抗网络的图像到图像翻译 Pix2Pix图像到图像的翻译 CycleGANS和Pix2PixPix2pix论文的Pytorch代码 https://github.com/junyanz/pytorch-CycleGA一篇关于pix2pix的介绍 https://machinelearningmastery.com/a-gentle-introduction-to-pix2pix-generative-adversarial-network/另一篇关于pix2pix的介绍 https://ml4a.github.io/guides/Pix2Pix/在浏览器中进行深度学习TensorFlow.js (八生成对抗网络 GAN
