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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

2.2.3 系統(tǒng)集成

利用Cocos游戲引擎完成前端交互頁面，頁面結(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類型文件，基于前端開發(fā)的JavaScript腳本語言調(diào)用神經(jīng)網(wǎng)絡(luò)模型，輸入風(fēng)格圖片與內(nèi)容圖片，利用該訓(xùn)練好的模型即可實現(xiàn)將指定的圖片的風(fēng)格遷移生成圖片上。用戶也可以調(diào)整網(wǎng)絡(luò)參數(shù)，并可以集成在系統(tǒng)中的JavaScript腳本對模型進行訓(xùn)練優(yōu)化，得到用戶預(yù)期的風(fēng)格遷移效果。系統(tǒng)的運行效果如圖1所示。

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

3 結(jié)語

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