Shadow Art： 頌揚(yáng)中國皮影戲藝術(shù)的 AI 實驗

我們曾在之前的博文中介紹過Shadow Art。這是一項 AI 實驗，旨在頌揚(yáng)中國古老的皮影戲藝術(shù)。實驗利用TensorFlow.js，在互動游戲中將用戶的手影轉(zhuǎn)換成數(shù)字動物。

在本文中，我們將探討我們?nèi)绾卫?TensorFlow.js 構(gòu)建 Shadow Art。實驗使用的所有代碼皆為開放源代碼，且可在 Github 上獲得（https://github.com/thebitstudio/shadowart_ai_experiment）。

ShadowArt 簡介

在 Shadow Art 中，您可通過在筆記本電腦或手機(jī)攝像頭前擺弄手（字面意思），形成十二生肖動物的手影。如果手影正確匹配，系統(tǒng)便會將手影轉(zhuǎn)換成相應(yīng)動物的動畫影象。

去年 9 月，我們曾構(gòu)建一款互動式現(xiàn)實世界裝置。該裝置利用 TensorFlow 幫助人們探索皮影戲藝術(shù)。在中國農(nóng)歷新年，我們決定在線提供這項產(chǎn)品，以供所有人體驗。為實現(xiàn)該目標(biāo)，我們轉(zhuǎn)而采用 TensorFlow.js。

借助 TensorFlow.js 在線推出 Shadow Art

要在網(wǎng)絡(luò)上推出這項產(chǎn)品就需要改變原始的離線 Shadow Art。

首先，在離線版本中，我們需要捕捉用戶的手部數(shù)據(jù)并在服務(wù)器上加以處理，發(fā)送要處理的圖像并將其存儲在服務(wù)器端。但是在網(wǎng)絡(luò)版本中，我們可通過使用 TensorFlow.js，將所有內(nèi)容一次性加載到瀏覽器，并在瀏覽器中完成整個 Shadow Art 流程：捕捉手部數(shù)據(jù)、處理數(shù)據(jù)、執(zhí)行推理、顯示結(jié)果，更不用說應(yīng)用所需的其他依賴項。最困難的部分是用于執(zhí)行手部數(shù)據(jù)分類的機(jī)器學(xué)習(xí)；畢竟這是核心的一環(huán)，而借助 TensorFlow.js，我們可以完成這項任務(wù)。

模型

模型將輸入圖像（用戶的手部圖像）與給定的一組類模板進(jìn)行對比，以此判斷最相似的圖像。借助此方法，我們可以自由地為每個類添加或移除圖像模板，甚至可以在不重新訓(xùn)練模型的情況下引入新的類。

機(jī)器學(xué)習(xí)模型能夠有效學(xué)習(xí)如何使用殘差網(wǎng)絡(luò)高效對比兩張圖像，從而將固定長度的輪廓轉(zhuǎn)換為固定維度的特征向量。

特征抽取網(wǎng)絡(luò)

我們使用以下指標(biāo)將從用戶手部圖像中抽取的特征與示例類中的特征進(jìn)行對比：損失 = -exp(-(x-y)*(x-y))，其中 x 和 y 是從網(wǎng)絡(luò)中獲取的特征向量。為此，我們在訓(xùn)練期間抽取圖像數(shù)據(jù)中的陰影輪廓、執(zhí)行歸一化，并隨機(jī)旋轉(zhuǎn)每個輪廓，然后再將輪廓送入訓(xùn)練管道。

在對比指標(biāo)方面，我們采用負(fù)高斯，因為負(fù)高斯具有有界邊緣，可防止出現(xiàn)梯度爆炸。對比其實就是計算距離。我們首先想到的是采用平方差之和。該函數(shù)沒有極限值，有可能會導(dǎo)致梯度爆炸，不過其指數(shù)具有極限值。因此，我們采用平方差之和的負(fù)指數(shù)，并乘以另一個負(fù)數(shù)，以構(gòu)成一個最小化問題。

與類模板的特征對比

數(shù)據(jù)集

初始數(shù)據(jù)集中包含很多從我們的團(tuán)隊成員處收集的二進(jìn)制陰影投射圖像，整個過程非常有趣。我們將這些圖像用作訓(xùn)練數(shù)據(jù)，以供機(jī)器學(xué)習(xí)模型學(xué)習(xí)如何比較圖像。此外，我們還將這些圖像用作匹配模板。

捕捉的用戶手部輪廓

數(shù)據(jù)集中包含的圖像的分辨率各不相同。由于這些圖像的性質(zhì)，我們需要使用 RNN 或數(shù)據(jù)預(yù)處理等動態(tài)模型，將圖像轉(zhuǎn)換為固定維度的特征向量，以便進(jìn)行直接對比。不過，像 RNN 這類高方差模型需要更多的數(shù)據(jù)，否則可能會出現(xiàn)過度擬合的情況。

對我們而言，數(shù)據(jù)預(yù)處理就是輪廓抽取，用于將圖像轉(zhuǎn)化為固定維度的特征向量，換句話說，就是準(zhǔn)備數(shù)據(jù)并將數(shù)據(jù)送入殘差網(wǎng)絡(luò)。

執(zhí)行

Shadow Art 在線體驗

我們使用支持 TPU 的 TensorFlow 訓(xùn)練模型，然后進(jìn)行轉(zhuǎn)換，從而借助 TensorFlow.js 在網(wǎng)絡(luò)上使用模型。

最初，我們的應(yīng)用是在服務(wù)器端執(zhí)行分類，而且用戶量很大，因此我們預(yù)期會出現(xiàn)繁重的服務(wù)器負(fù)載。我們開展多個實驗，以期克服該問題：

我們借助 TensorFlow.js，使用客戶端 JavaScript 部署模型，以將機(jī)器學(xué)習(xí)處理任務(wù)移至客戶端

該模型可供直接使用，且無需進(jìn)行修改

移植的模型大小為 10.7MB，可以接受

每當(dāng)我們檢測到用戶的手靜止不動時，便會執(zhí)行分類，整個過程大約用時一秒，而且分類時間幾乎無法察覺

為了對用戶的手部數(shù)據(jù)進(jìn)行分類，我們采用修改版殘差網(wǎng)絡(luò)執(zhí)行一次分類（每個類只使用少量示例）。該網(wǎng)絡(luò)會獲取固定長度的手部輪廓，并從中推斷出動物類。

雖然可以使用 TensorFlow.js 在瀏覽器上訓(xùn)練模型，但我們使用 TPU 上的專用后端訓(xùn)練模型。然后使用 TensorFlow.js 將預(yù)訓(xùn)練的模型部署到瀏覽器，并在網(wǎng)絡(luò)應(yīng)用加載訓(xùn)練后存儲權(quán)重。無需再在瀏覽器中進(jìn)行訓(xùn)練。默認(rèn)情況下，TensorFlow.js 采用動態(tài)編程范式。如此一來，即可在瀏覽器上輕松執(zhí)行和測試想法。

為實現(xiàn)最大程度的控制，我們一次性自定義自己的權(quán)重轉(zhuǎn)移協(xié)議（包括如何編碼和壓縮權(quán)重及模板以學(xué)習(xí)執(zhí)行對比操作），以及用于網(wǎng)絡(luò)應(yīng)用的額外數(shù)據(jù)。

這樣做的好處是我們可以在任何現(xiàn)有的張量庫（而非只限于 TensorFlow）上構(gòu)建訓(xùn)練管道。只要我們能夠以相同的格式保存權(quán)重，并將其下載到我們的網(wǎng)頁應(yīng)用（借助 Tensorflow.js）即可。

TensorFlow.js 對比服務(wù)器端方法的優(yōu)勢

響應(yīng)能力：在客戶端分類陰影，并為用戶提供即時反饋。若使用基于服務(wù)器的方法，則需要將圖像發(fā)送到云，如此一來，分類結(jié)果就會出現(xiàn)延遲

減少帶寬使用量及依賴項：不將用戶的手部圖像發(fā)送到服務(wù)器可顯著減少用戶的帶寬使用量。此外，當(dāng)頁面加載完畢后，應(yīng)用即可獨立于互聯(lián)網(wǎng)帶寬順暢地運(yùn)行

減少服務(wù)器負(fù)載：迅速執(zhí)行手影分類，并為用戶提供即時反饋，告知其手影與陰影模板的匹配度。將此任務(wù)移至用戶端可大幅減少服務(wù)器負(fù)載

網(wǎng)絡(luò)托管要求更簡單：無需設(shè)置基于 GPU 的云服務(wù)以提供模型，只需簡單的網(wǎng)絡(luò)托管服務(wù)即可

擴(kuò)展更為容易：網(wǎng)絡(luò)托管服務(wù)除了簡單以外，還更容易設(shè)置和擴(kuò)展，而且困難的部分也已進(jìn)行處理

瀏覽器上的數(shù)據(jù)處理

為了在瀏覽器上獲取手部輪廓，我們使用 OpenCV.js 通過網(wǎng)絡(luò)攝像頭從 HTML5

執(zhí)行減除操作后，我們會處理手部圖像以清除噪音（包括輪廓歸一化和重新采樣），然后再將圖像作為陰影重新繪制到應(yīng)用中。

捕捉并處理手部圖像以實時創(chuàng)建陰影效果

根據(jù)初步試驗，在 Android 手機(jī)上完成整個推理管道（包括預(yù)處理及分類）所用的時間不到一秒?？紤]到所用的資源有限，這個時間相當(dāng)驚人。

將結(jié)果集成到 AI 實驗

鑒于分類結(jié)果，我們利用從模型返回的置信度值的閾值來判斷手勢是否與動物陰影匹配。與直接挑選置信度值最高的手勢相比，這樣做的結(jié)果更為直觀。您可以這樣想：人類判斷手影是否像兔子的方式是測量手影有多像兔子，而不是比較手影看起來是否更像兔子而非其他動物。如此一來，我們即可輕松微調(diào)應(yīng)用的難度，使其成為最適合全球用戶的應(yīng)用。

知道每位用戶預(yù)期的動物之后，接下來就是將用戶輸入的手影與結(jié)果關(guān)聯(lián)，并將手影轉(zhuǎn)換為動物形象，然后再播放預(yù)先錄制的陰影轉(zhuǎn)化為活體動物的動畫，如此即完成一次試驗。

用戶的手影（左）。變形后的動物陰影（右）

從用戶的手影變形為目標(biāo)動物是 AI 實驗中精彩的一環(huán)。為確保捕捉的形狀順利變形為動物，我們從以下兩種陰影中抽取輪廓：輸入的手影和目標(biāo)動物陰影。

陰影輪廓（為簡化起見，限定為 100 點）。首先索引的地方以紅色繪制

然后我們進(jìn)行優(yōu)化，以在手影輪廓（源輪廓）和動物陰影輪廓（目標(biāo)輪廓）中找到正確匹配的每個點，接著執(zhí)行步插值，以將源輪廓轉(zhuǎn)換為目標(biāo)輪廓。

我們執(zhí)行動態(tài)時間彎曲，以便匹配不同的特征，如耳朵及更小的特征。

針對網(wǎng)站進(jìn)行優(yōu)化

精細(xì)控制動畫

在網(wǎng)站上播放的視頻通常為 .mp4 格式。但是，在網(wǎng)頁上播放 .mp4 文件不允許我們對動畫進(jìn)行精細(xì)控制，而我們需要在陰影變形后使用這項功能來播放動畫，從而獲得順暢的體驗。

我們將動畫轉(zhuǎn)化成 PNG 序列。我們選擇每一幀中特定的部分，并將其繪制在畫布上。將這種方法與手影變形相結(jié)合，我們可以精確地知道何時繪制綜合變形及預(yù)創(chuàng)建的視頻：用戶將看到手影變形為動物陰影，接著轉(zhuǎn)換為彩色的動物形象。

預(yù)加載數(shù)據(jù)

預(yù)加載所有動畫可以減少下載數(shù)據(jù)時的卡頓現(xiàn)象，從而提升用戶體驗。

下載大小

下載大小是確保我們網(wǎng)頁應(yīng)用更便于訪問的重要方面之一。初始版本的應(yīng)用需要用戶下載大約 200MB 的數(shù)據(jù)。因此，我們不得不執(zhí)行各種優(yōu)化措施，以縮減下載大小。

PNG 大小優(yōu)化我們首先查找應(yīng)用中最消耗帶寬的部分，結(jié)果發(fā)現(xiàn) PNG 序列組合之后的大小超過 180MB。將 RGB PNG 轉(zhuǎn)換為基于調(diào)色板的 PNG（僅允許從定義的集合中采樣圖像顏色），可將文件大小減少 70% 以上

模型模板優(yōu)化我們的算法要求每個動物的手影模板與用戶的手影匹配。在特征抽取過程中，每個手影將轉(zhuǎn)換為輪廓，然后再被抽取到向量中。因此，我們并未存儲手部模板作為圖像，而是針對每個模板直接存儲抽取的特征向量。這樣做還可節(jié)省大量空間

結(jié)語與致謝

雖然當(dāng)前模型僅限用于輪廓等對象分類，但其應(yīng)用范圍遠(yuǎn)不止如此。學(xué)習(xí)對比的核心概念是能夠在不重新訓(xùn)練模型的情況下改變分類目標(biāo)。

現(xiàn)在通過使用 Tensorflow.js，熱表格人都能制作實現(xiàn)這種可移植性的網(wǎng)頁應(yīng)用，使監(jiān)督式學(xué)習(xí)變得更加個性化。我們只需提供幾個示例類，所有人便可使用或教授這種現(xiàn)成的對象分類工具，這令人很興奮。所有人都可以輕松自定義該工具，以解決任何給定的特定任務(wù)。

非常感謝 Kiattiyot Panichprecha、Isarun Chamveha、Phatchara Pongsakorntorn、Chatavut Viriyasuthee 和 Pittayathorn Nomrak 在構(gòu)建此實驗時提供的所有幫助，而且我們期待更多使用模型和 Tensorflow.js 的有用、創(chuàng)新及有趣用例！