基于Tensorflow.js的DIY圖像風(fēng)格遷移系統(tǒng)開(kāi)發(fā)

陳曉淵，李云飛，陳維曦 ，謝梟鵬，向 毅

（重慶科技學(xué)院 智能技術(shù)與工程學(xué)院，重慶 401331）

0 引言

隨著信息技術(shù)的發(fā)展，各式各樣的美圖軟件層出不窮，常見(jiàn)的如美圖秀秀，Prisma，facus等各類(lèi)修圖軟件，但這些軟件都是使用訓(xùn)練好的模型對(duì)圖片進(jìn)行處理轉(zhuǎn)換，雖然使用簡(jiǎn)單，但效果受限于訓(xùn)練好的模型本身，用戶(hù)不能方便地實(shí)現(xiàn)自定義的方式擴(kuò)展功能。針對(duì)風(fēng)格遷移的自定義需求，本文利用Google公司的Tensorflow.js開(kāi)源框架，結(jié)合開(kāi)源的Cocos游戲引擎和前端開(kāi)發(fā)技術(shù)，設(shè)計(jì)了DIY風(fēng)格圖像遷移系統(tǒng)。用戶(hù)只需要傳入原圖與喜歡的風(fēng)格圖片，便可以實(shí)現(xiàn)將風(fēng)格圖像按用戶(hù)設(shè)定的要求遷移到原圖上。

1 系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)

本項(xiàng)目包括數(shù)據(jù)獲取處理、快速風(fēng)格遷移、前端UI 3個(gè)模塊。數(shù)據(jù)獲取處理模塊用于獲取用戶(hù)選擇的圖片數(shù)據(jù)并將其轉(zhuǎn)化為可被tensorflow.js使用的Tensor張量類(lèi)型，快速風(fēng)格遷移實(shí)現(xiàn)將內(nèi)容圖片與風(fēng)格圖片相結(jié)合，得到內(nèi)容圖片向風(fēng)格圖片遷移后生成的具有風(fēng)格特征的風(fēng)格遷移圖片。前端UI是以基于網(wǎng)頁(yè)的形式提供DIY交互和結(jié)果呈現(xiàn)。系統(tǒng)基于JavaScript腳本完成圖像的獲取、圖片數(shù)據(jù)上傳與轉(zhuǎn)換和網(wǎng)頁(yè)內(nèi)資源內(nèi)存管理，使用Google公司的Tensorflow開(kāi)源框架，應(yīng)用深度學(xué)習(xí)技術(shù)，完成對(duì)快速風(fēng)格遷移網(wǎng)絡(luò)的搭建與訓(xùn)練、并轉(zhuǎn)化成tensorflow.js可識(shí)別的.Json類(lèi)型文件進(jìn)行部署。通過(guò)Cocos游戲引擎以及JavaScript腳本語(yǔ)言完成對(duì)網(wǎng)頁(yè)的前端UI設(shè)計(jì)。

2 系統(tǒng)實(shí)現(xiàn)

2.1 數(shù)據(jù)獲取處理模塊設(shè)計(jì)

數(shù)據(jù)獲取處理模塊包括數(shù)據(jù)上傳處理和預(yù)設(shè)置風(fēng)格圖片數(shù)據(jù)處理兩個(gè)模塊，數(shù)據(jù)上傳處理模塊完成將圖像數(shù)據(jù)轉(zhuǎn)化為tensorflow.js支持的Tensor張量格式；首先通過(guò)Html5的＜file＞標(biāo)簽實(shí)現(xiàn)對(duì)本地圖片數(shù)據(jù)的讀取與選擇，此時(shí)數(shù)據(jù)為Blob類(lèi)型，需將獲取到的圖片數(shù)據(jù)轉(zhuǎn)化為Base64編碼，然后分別制作為cc.Texture2D類(lèi)型圖片，以Image類(lèi)型繪制于canvas畫(huà)布上以呈現(xiàn)，通過(guò)獲取畫(huà)布上的各個(gè)像素點(diǎn)值便得到圖片的像素?cái)?shù)組，并將該像素?cái)?shù)組轉(zhuǎn)化為可被Tensorflow.js框架識(shí)別的四維張量（Tensor)。

預(yù)設(shè)置風(fēng)格圖片數(shù)據(jù)處理模塊是為用戶(hù)提供預(yù)設(shè)置的待選擇的遷移風(fēng)格圖片，用戶(hù)從中選擇需要遷移的風(fēng)格樣式圖片。預(yù)設(shè)置的風(fēng)格圖片將在網(wǎng)頁(yè)上被WebGL渲染為cc.SpriteFrame類(lèi)型資源，通過(guò)獲取SpriteFrame對(duì)象之后，獲取到對(duì)象內(nèi)的Texture2D類(lèi)型的數(shù)據(jù)，并從Texture2D對(duì)象中的_image屬性中提取imageBitMap類(lèi)型數(shù)據(jù)，將該imageBitMap類(lèi)型數(shù)據(jù)轉(zhuǎn)化為T(mén)ensorflow.js框架識(shí)別的四維張量（Tensor）。

2.2 風(fēng)格遷移模塊實(shí)現(xiàn)

2.2.1 風(fēng)格遷移網(wǎng)絡(luò)模型的選擇

與本項(xiàng)目相關(guān)的主要深度學(xué)習(xí)模型有風(fēng)格遷移網(wǎng)絡(luò)[1]、對(duì)抗生成網(wǎng)絡(luò)[2]、快速風(fēng)格遷移網(wǎng)絡(luò)以及任意風(fēng)格遷移網(wǎng)絡(luò)[3]。對(duì)各類(lèi)風(fēng)格遷移網(wǎng)絡(luò)的效果分析，通過(guò)查閱各類(lèi)相關(guān)論文與資料，并將網(wǎng)絡(luò)復(fù)現(xiàn)實(shí)驗(yàn)比較，任意風(fēng)格遷移網(wǎng)絡(luò)滿(mǎn)足系統(tǒng)對(duì)轉(zhuǎn)換速度與遷移類(lèi)型的要求，提出了一種允許使用任何內(nèi)容/風(fēng)格圖像進(jìn)行實(shí)時(shí)風(fēng)格化的網(wǎng)絡(luò)。該網(wǎng)絡(luò)建立在快速風(fēng)格遷移的基礎(chǔ)上，在生成器網(wǎng)絡(luò)和判別器網(wǎng)絡(luò)的基礎(chǔ)上再添加了一個(gè)風(fēng)格生成網(wǎng)絡(luò)，使得該網(wǎng)絡(luò)能夠向任意風(fēng)格圖片進(jìn)行遷移，是以完全無(wú)監(jiān)督的方式學(xué)習(xí)平滑的、結(jié)構(gòu)豐富的嵌入空間，來(lái)得到與風(fēng)格繪畫(huà)相關(guān)聯(lián)的語(yǔ)義信息的模型。

2.2.2 風(fēng)格遷移模型的實(shí)現(xiàn)

系統(tǒng)使用tensorflow2.3.0框架完成對(duì)各網(wǎng)絡(luò)模型的搭建，分別使用Kaggle Painter By Numbers數(shù)據(jù)集和Describable Textures Dataset數(shù)據(jù)集作為內(nèi)容數(shù)據(jù)集與風(fēng)格數(shù)據(jù)集對(duì)模型進(jìn)行訓(xùn)練。在包含約80 000張圖像的訓(xùn)練集上經(jīng)過(guò)訓(xùn)練后，該模型表現(xiàn)出較強(qiáng)的泛化性特點(diǎn)。風(fēng)格預(yù)測(cè)網(wǎng)絡(luò)P負(fù)責(zé)預(yù)測(cè)嵌入向量S，輸入樣式圖像，該圖像為風(fēng)格遷移網(wǎng)絡(luò)提供一組歸一化常量。樣式傳輸網(wǎng)絡(luò)將照片轉(zhuǎn)換為風(fēng)格化的表示形式。由于風(fēng)格預(yù)測(cè)網(wǎng)絡(luò)P可以把每種風(fēng)格映射成100維的風(fēng)格向量，所以使用者只需對(duì)內(nèi)容和風(fēng)格圖像的風(fēng)格向量進(jìn)行加權(quán)平均，把計(jì)算結(jié)果與內(nèi)容圖片作為風(fēng)格遷移網(wǎng)絡(luò)T的輸入，即可獲得新風(fēng)格向量。

2.2.3 系統(tǒng)集成

利用Cocos游戲引擎完成前端交互頁(yè)面，頁(yè)面結(jié)構(gòu)自上而下劃分為：預(yù)設(shè)置風(fēng)格模板、上傳風(fēng)格圖片與內(nèi)容圖片、調(diào)整生成圖片中的風(fēng)格所占比例、圖片生成按鈕、保存生成圖片、模型效果優(yōu)化訓(xùn)練。

將訓(xùn)練好的神經(jīng)網(wǎng)絡(luò)模型轉(zhuǎn)換為.json類(lèi)型文件，基于前端開(kāi)發(fā)的JavaScript腳本語(yǔ)言調(diào)用神經(jīng)網(wǎng)絡(luò)模型，輸入風(fēng)格圖片與內(nèi)容圖片，利用該訓(xùn)練好的模型即可實(shí)現(xiàn)將指定的圖片的風(fēng)格遷移生成圖片上。用戶(hù)也可以調(diào)整網(wǎng)絡(luò)參數(shù)，并可以集成在系統(tǒng)中的JavaScript腳本對(duì)模型進(jìn)行訓(xùn)練優(yōu)化，得到用戶(hù)預(yù)期的風(fēng)格遷移效果。系統(tǒng)的運(yùn)行效果如圖1所示。

圖1 系統(tǒng)運(yùn)行效果

3 結(jié)語(yǔ)

本文設(shè)計(jì)了一款基于tensorflow.js開(kāi)源框架的DIY圖像風(fēng)格遷移系統(tǒng)，相較于傳統(tǒng)的照片藝術(shù)化模板單一、效果相對(duì)固定，本系統(tǒng)通過(guò)cocos引擎與tensorflow.js框架以及任意風(fēng)格遷移神經(jīng)網(wǎng)絡(luò)模型，實(shí)現(xiàn)瀏覽器調(diào)用本地CPU對(duì)圖像進(jìn)行風(fēng)格遷移生成遷移圖片與模型效果再訓(xùn)練，達(dá)到在轉(zhuǎn)換時(shí)用戶(hù)數(shù)據(jù)無(wú)須上傳服務(wù)器，保障了數(shù)據(jù)的隱私性，極大程度滿(mǎn)足用戶(hù)在較短時(shí)間內(nèi)對(duì)個(gè)性化風(fēng)格圖片的需求。