前一段時(shí)間，我開發(fā)了Sketchify， 該工具可以把任何以SVG為渲染技術(shù)的可視化轉(zhuǎn)化為手繪風(fēng)格。（參考手繪風(fēng)格的數(shù)據(jù)可視化實(shí)現(xiàn) Sketchify）

那么問題來了，很多的chart是以Canvas為渲染技術(shù)的，那要怎么辦？

我拍腦袋一想，為什么不使用深度學(xué)習(xí)技術(shù)來做呢？

原理很簡單：

• 首先用相同的數(shù)據(jù)分別生成原始的和手繪風(fēng)格的數(shù)據(jù)可視化圖數(shù)據(jù)。
• 然后利用深度神經(jīng)網(wǎng)絡(luò)，使用該數(shù)據(jù)訓(xùn)練一個(gè)模式，輸入是數(shù)據(jù)圖，輸出的手繪風(fēng)格的圖。這樣就可以訓(xùn)練一個(gè)生成手繪風(fēng)格數(shù)據(jù)可視化的神經(jīng)網(wǎng)絡(luò)了。
• 然后對于任何新的數(shù)據(jù)圖，輸入該網(wǎng)絡(luò)就可以輸出一個(gè)手繪風(fēng)格的圖。

這聽起來就像如何把大象放到冰箱里一樣的簡單直接。

廢話少說，開始干。

準(zhǔn)備數(shù)據(jù)

數(shù)據(jù)準(zhǔn)備要生成一定數(shù)量的原始圖和手繪圖，利用Sketchify就可以完成功能，但是具體如何做到？參考如下架構(gòu)：

• VizServer是一個(gè)web服務(wù)，用nodejs開發(fā)，代碼在這里https://github.com/gangtao/handyModel/tree/master/vizService
  VizServer使用restify提供RestAPI接口，利用squirrelly.js的模版引擎生成一個(gè)包含可視化的Html頁面。模版代碼在這里
• DataGen負(fù)責(zé)生成隨機(jī)的圖表數(shù)據(jù)，發(fā)送請求到VizServer，把返回的網(wǎng)頁利用puppeteer的headless browser渲染，并截圖。代碼在這里
  其中，數(shù)據(jù)生成部分我是用了mockjs，我發(fā)現(xiàn)另一個(gè)比較有趣的庫可以做類似的功能是casual

訓(xùn)練神經(jīng)網(wǎng)絡(luò)

數(shù)據(jù)準(zhǔn)備好以后就可以訓(xùn)練神經(jīng)網(wǎng)絡(luò)了。

深度神經(jīng)網(wǎng)絡(luò)的訓(xùn)練往往比較消耗資源。最好有相當(dāng)大的內(nèi)存和GPU。有倆個(gè)免費(fèi)的選擇：

• google colab

colab就不需要介紹了，大家都很熟悉了，有免費(fèi)GPU

• paperspace

paperspace是一個(gè)新的深度學(xué)習(xí)的免費(fèi)環(huán)境，我試用了以下，免費(fèi)的GPU配置還是很不錯(cuò)的，大家可以試試看。
有了訓(xùn)練環(huán)境，導(dǎo)入數(shù)據(jù)，設(shè)一個(gè)神經(jīng)網(wǎng)絡(luò)，然后就可以訓(xùn)練了。這里省去若干介紹如何加載數(shù)據(jù)png，轉(zhuǎn)換成tensor或tf的dataset。大家可以參考這些代碼。
總之，大象還是沒能順利的放入冰箱，我訓(xùn)練的模型大都輸出這樣的手繪圖。

離我的設(shè)想的輸出差距比較大。為什么會失敗呢？我想大概有以下這些原因。

我的神經(jīng)網(wǎng)絡(luò)比較簡單，受限于硬件，我不可能訓(xùn)練非常復(fù)雜的神經(jīng)網(wǎng)絡(luò)。

我的損失函數(shù)選擇不好

我的網(wǎng)絡(luò)不收斂

我的訓(xùn)練時(shí)間不夠

總之，完成圖像到圖像的翻譯任務(wù)，我們需要更復(fù)雜和高深的技術(shù)。

圖像到圖像的翻譯

經(jīng)研究我發(fā)現(xiàn)，這個(gè)任務(wù)是一個(gè)典型的圖像到圖像的翻譯，例如前些日子火遍大江南北的deepfake，就是基于圖像到圖像的翻譯。

有一些專門的的研究針對圖像到圖像的翻譯任務(wù)。一個(gè)是CycleGan，另一個(gè)是pix2pix（Conditional GAN），這兩個(gè)都是基于GAN（生成對抗網(wǎng)絡(luò)）的，所以我們先簡單講講GAN。 （參考 在瀏覽器中進(jìn)行深度學(xué)習(xí)：TensorFlow.js (八）生成對抗網(wǎng)絡(luò) （GAN））

如上圖所示，GAN包含兩個(gè)互相對抗的網(wǎng)絡(luò)：G（Generator）和D（Discriminator）。正如它的名字所暗示的那樣，它們的功能分別是：

• Generator是一個(gè)生成器的網(wǎng)絡(luò)，它接收一個(gè)隨機(jī)的噪聲，通過這個(gè)噪聲生成圖片。
• Discriminator是一個(gè)鑒別器網(wǎng)絡(luò)，判別一張圖片或者一個(gè)輸入是不是“真實(shí)的”。它的輸入是數(shù)據(jù)或者圖片，輸出D表示輸入為真實(shí)圖片的概率，如果為1，就代表100%是真實(shí)的圖片，而輸出為0，就代表不可能是真實(shí)的圖片。

在訓(xùn)練過程中，生成網(wǎng)絡(luò)G的目標(biāo)就是盡量生成真實(shí)的圖片去欺騙判別網(wǎng)絡(luò)D。而D的目標(biāo)就是盡量把G生成的圖片和真實(shí)的圖片分別開來。這樣，G和D構(gòu)成了一個(gè)動態(tài)的“博弈過程”。在最理想的狀態(tài)下，G可以生成足以“以假亂真”的圖片

CycleGan

https://github.com/junyanz/CycleGAN

實(shí)現(xiàn)圖像間的翻譯，借助GAN，應(yīng)該有兩個(gè)domain的鑒別器，每個(gè)鑒別器單獨(dú)判斷各自domain的數(shù)據(jù)是否是真實(shí)數(shù)據(jù)。至于generator，圖像的翻譯需要將domain A的圖像翻成domain B的圖像，所以generator有點(diǎn)像自編碼器結(jié)構(gòu)，只是decoder的輸出不是domain A的圖像，而是domain B的圖像。為了充分利用兩個(gè)discriminator，還應(yīng)該有一個(gè)翻譯回去的過程，也就是說，還有一個(gè)generator，它將domain B的數(shù)據(jù)翻譯到domain A。

CycleGAN作者做了很多有意思的實(shí)驗(yàn)，包括horse2zebra，apple2orangle，以及風(fēng)格遷移，如：對風(fēng)景畫加上梵高的風(fēng)格。

Pix2pix

https://github.com/phillipi/pix2pix

pix2pix是基于條件對抗生成網(wǎng)絡(luò)，關(guān)于CGAN和GAN的架構(gòu)區(qū)別可以參考下圖：

CGAN與GAN非常相似，除了生成器和鑒別器均以某些額外信息y為條件?？梢酝ㄟ^將鑒別器和生成器作為附加輸入層輸入來執(zhí)行這種調(diào)節(jié)?！?y”可以是任何種類的輔助信息，例如類別標(biāo)簽或來自其他模態(tài)的數(shù)據(jù)。在本教程中，我們將類標(biāo)簽用作“ y”。這里條件信息y是添加的額外條件信息，生成器G和鑒別器D都學(xué)會了以某些模式進(jìn)行操作。例如，在面部生成應(yīng)用程序的情況下，我們可以要求生成器生成帶有微笑的面部，并詢問鑒別器特定圖像是否包含帶有微笑的面部。

作者舉了幾個(gè)圖像到圖像翻譯的應(yīng)用例子，都挺有趣的。

好了擁有了強(qiáng)大的工具以后，后面的事情就比較簡單了。

我利用前面提到的生成工具生成了400對bar chart的原始和手繪圖，另外分別有100對測試和驗(yàn)證數(shù)據(jù)集。利用paperspace的免費(fèi)GPU，運(yùn)行https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix的pix2pix代碼，使用缺省的參數(shù)，訓(xùn)練了200個(gè)epoch，每個(gè)epoch大概50秒，總共耗時(shí)3小時(shí)左右。

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

缺省的網(wǎng)絡(luò)的參數(shù)數(shù)量如上圖所示。

訓(xùn)練結(jié)果如下圖：

上面兩個(gè)是我的測試數(shù)據(jù)中的兩個(gè)例子。A是原始域，B是手繪域。中間的fakeB是pix2pix模型根據(jù)原始A圖生成的結(jié)果。我們看到該生成圖形幾乎可以亂真。

下一步

到這里是不是大功告成了呢？還沒有，想想我們之前要解決的問題，對于任意的基于Canvas渲染的可視化圖表，我們改如何運(yùn)用該模型呢？這里我列出還需要做的工作：

• 增強(qiáng)數(shù)據(jù)生成功能，生成更多不同類型，數(shù)據(jù)，風(fēng)格的圖數(shù)據(jù)來訓(xùn)練一個(gè)更通用的模型（在本例子中，我們只有Bar Chart的缺省風(fēng)格的訓(xùn)練數(shù)據(jù)）
• 部署該模型為一個(gè)服務(wù)，在客戶端瀏覽器中利用JS把Canvas數(shù)據(jù)發(fā)送請求至該服務(wù)來獲得手繪風(fēng)格的輸出。
• 或者利用Keras訓(xùn)練該模型并利用tensorflowJs直接部署到瀏覽器，這樣做就不需要服務(wù)器端的交互，更利于集成。

總結(jié)

本文給出了一個(gè)利用深度學(xué)習(xí)實(shí)現(xiàn)數(shù)據(jù)可視化到手繪風(fēng)格轉(zhuǎn)化的實(shí)際例子，利用機(jī)器學(xué)習(xí)或者深度學(xué)習(xí)解決一個(gè)具體的問題很有趣，但是要完成端到端的功能，需要很多很瑣碎的知識和系統(tǒng)思考的能力。希望這個(gè)故事對你有所幫助。有問題請發(fā)評論給我。

參考：

• 手繪風(fēng)格的數(shù)據(jù)可視化實(shí)現(xiàn) Sketchify
• 訓(xùn)練數(shù)據(jù)生成代碼
• Pix2pix 原始論文 https://phillipi.github.io/pix2pix/
• AI從繪圖制作出精美的照片（pix2pix）
• 利用深度學(xué)習(xí)實(shí)現(xiàn)從圖像到圖像的翻譯
• 條件對抗網(wǎng)絡(luò)的圖像到圖像翻譯 Pix2Pix
• 圖像到圖像的翻譯 CycleGANS和Pix2Pix
• Pix2pix論文的Pytorch代碼 https://github.com/junyanz/pytorch-CycleGA
• 一篇關(guān)于pix2pix的介紹 https://machinelearningmastery.com/a-gentle-introduction-to-pix2pix-generative-adversarial-network/
• 另一篇關(guān)于pix2pix的介紹 https://ml4a.github.io/guides/Pix2Pix/
• 在瀏覽器中進(jìn)行深度學(xué)習(xí)：TensorFlow.js (八）生成對抗網(wǎng)絡(luò) （GAN）

總結(jié)

以上是生活随笔為你收集整理的深度学习数据驱动_利用深度学习实现手绘数据可视化的生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。