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

在本文中，我們將探討我們如何利用 TensorFlow.js 構建 Shadow Art。實驗使用的所有代碼皆為開放源代碼，且可在 Github 上獲得（https://github.com/thebitstudio/shadowart_ai_experiment）。

ShadowArt 簡介

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

去年 9 月，我們曾構建一款互動式現實世界裝置。該裝置利用 TensorFlow 幫助人們探索皮影戲藝術。在中國農歷新年，我們決定在線提供這項產品，以供所有人體驗。為實現該目標，我們轉而采用 TensorFlow.js。

借助 TensorFlow.js 在線推出 Shadow Art

要在網絡上推出這項產品就需要改變原始的離線 Shadow Art。

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

模型

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

機器學習模型能夠有效學習如何使用殘差網絡高效對比兩張圖像，從而將固定長度的輪廓轉換為固定維度的特征向量。

特征抽取網絡

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

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

與類模板的特征對比

數據集

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

捕捉的用戶手部輪廓

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

對我們而言，數據預處理就是輪廓抽取，用于將圖像轉化為固定維度的特征向量，換句話說，就是準備數據并將數據送入殘差網絡。

執行

Shadow Art 在線體驗

我們使用支持 TPU 的 TensorFlow 訓練模型，然后進行轉換，從而借助 TensorFlow.js 在網絡上使用模型。

最初，我們的應用是在服務器端執行分類，而且用戶量很大，因此我們預期會出現繁重的服務器負載。我們開展多個實驗，以期克服該問題：

我們借助 TensorFlow.js，使用客戶端 JavaScript 部署模型，以將機器學習處理任務移至客戶端

該模型可供直接使用，且無需進行修改

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

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

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

雖然可以使用 TensorFlow.js 在瀏覽器上訓練模型，但我們使用 TPU 上的專用后端訓練模型。然后使用 TensorFlow.js 將預訓練的模型部署到瀏覽器，并在網絡應用加載訓練后存儲權重。無需再在瀏覽器中進行訓練。默認情況下，TensorFlow.js 采用動態編程范式。如此一來，即可在瀏覽器上輕松執行和測試想法。

為實現最大程度的控制，我們一次性自定義自己的權重轉移協議（包括如何編碼和壓縮權重及模板以學習執行對比操作），以及用于網絡應用的額外數據。

這樣做的好處是我們可以在任何現有的張量庫（而非只限于 TensorFlow）上構建訓練管道。只要我們能夠以相同的格式保存權重，并將其下載到我們的網頁應用（借助 Tensorflow.js）即可。

TensorFlow.js 對比服務器端方法的優勢

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

減少帶寬使用量及依賴項：不將用戶的手部圖像發送到服務器可顯著減少用戶的帶寬使用量。此外，當頁面加載完畢后，應用即可獨立于互聯網帶寬順暢地運行

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

網絡托管要求更簡單：無需設置基于 GPU 的云服務以提供模型，只需簡單的網絡托管服務即可

擴展更為容易：網絡托管服務除了簡單以外，還更容易設置和擴展，而且困難的部分也已進行處理

瀏覽器上的數據處理

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

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

捕捉并處理手部圖像以實時創建陰影效果

根據初步試驗，在 Android 手機上完成整個推理管道（包括預處理及分類）所用的時間不到一秒。考慮到所用的資源有限，這個時間相當驚人。

將結果集成到 AI 實驗

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

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

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

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

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

然后我們進行優化，以在手影輪廓（源輪廓）和動物陰影輪廓（目標輪廓）中找到正確匹配的每個點，接著執行步插值，以將源輪廓轉換為目標輪廓。

我們執行動態時間彎曲，以便匹配不同的特征，如耳朵及更小的特征。

針對網站進行優化

精細控制動畫

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

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

預加載數據

預加載所有動畫可以減少下載數據時的卡頓現象，從而提升用戶體驗。

下載大小

下載大小是確保我們網頁應用更便于訪問的重要方面之一。初始版本的應用需要用戶下載大約 200MB 的數據。因此，我們不得不執行各種優化措施，以縮減下載大小。

PNG 大小優化我們首先查找應用中最消耗帶寬的部分，結果發現 PNG 序列組合之后的大小超過 180MB。將 RGB PNG 轉換為基于調色板的 PNG（僅允許從定義的集合中采樣圖像顏色），可將文件大小減少 70% 以上

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

結語與致謝

雖然當前模型僅限用于輪廓等對象分類，但其應用范圍遠不止如此。學習對比的核心概念是能夠在不重新訓練模型的情況下改變分類目標。

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

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