我們?cè)谥暗牟┪闹薪榻B過Shadow Art。這是一項(xiàng) AI 實(shí)驗(yàn)，旨在頌揚(yáng)中國古老的皮影戲藝術(shù)。實(shí)驗(yàn)利用TensorFlow.js，在互動(dòng)游戲中將用戶的手影轉(zhuǎn)換成數(shù)字動(dòng)物。

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

ShadowArt 簡介

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

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

借助 TensorFlow.js 在線推出 Shadow Art

要在網(wǎng)絡(luò)上推出這項(xiàng)產(chǎn)品就需要改變?cè)嫉碾x線 Shadow Art。

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

模型

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

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

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

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

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

與類模板的特征對(duì)比

數(shù)據(jù)集

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

捕捉的用戶手部輪廓

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

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

執(zhí)行

Shadow Art 在線體驗(yàn)

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

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

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

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

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

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

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

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

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

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

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

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

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

減少服務(wù)器負(fù)載：迅速執(zhí)行手影分類，并為用戶提供即時(shí)反饋，告知其手影與陰影模板的匹配度。將此任務(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í)行減除操作后，我們會(huì)處理手部圖像以清除噪音（包括輪廓?dú)w一化和重新采樣），然后再將圖像作為陰影重新繪制到應(yīng)用中。

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

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

將結(jié)果集成到 AI 實(shí)驗(yàn)

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

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

用戶的手影（左）。變形后的動(dòng)物陰影（右）

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

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

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

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

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

精細(xì)控制動(dòng)畫

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

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

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

預(yù)加載所有動(dòng)畫可以減少下載數(shù)據(jù)時(shí)的卡頓現(xiàn)象，從而提升用戶體驗(yà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)化我們的算法要求每個(gè)動(dòng)物的手影模板與用戶的手影匹配。在特征抽取過程中，每個(gè)手影將轉(zhuǎn)換為輪廓，然后再被抽取到向量中。因此，我們并未存儲(chǔ)手部模板作為圖像，而是針對(duì)每個(gè)模板直接存儲(chǔ)抽取的特征向量。這樣做還可節(jié)省大量空間

結(jié)語與致謝

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

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

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