選自 PaperWeekly
作者：劉遙行
學校：聖何塞州立大學碩士生
研究方向：AI與現實生活的工業結合
TensorSpace - 一款 3D 模型可視化框架，支持多種模型，幫助你可視化層間輸出，更直觀地展示模型的輸入輸出，幫助理解模型結構和輸出方法。
是什麼（What）
TensorSpace 是一款 3D 模型可視化框架，一動圖勝千言。
官網鏈接：
https://tensorspace.org/
Github鏈接：
https://github.com/tensorspace-team/tensorspace
TensorSpace 擅長直觀展示模型結構和層間數據，生成的模型可交互。官方支持手寫字符識別，物體識別，0-9 字符對抗生成網絡案例等。
為什麼（Why）
本部分說明：為什麼要使用這個框架？這個框架主要解決了什麼問題？我們的靈感來源於何處？
3D神經網絡可視化一片空白
在機器學習可視化上，每個機器學習框架都有自己的御用工具，TensorBoard 之於 TensorFlow ，Visdom 之於 PyTorch，MXBoard 之於 MXNet。這些工具的 Slogan 不約而同地選擇了 Visualization Learning（TensorBoard的 Slogan），也就是面向專業機器學習開發者，針對訓練過程，調參等設計的專業向可視化工具。
但面向一般的計算機工程師和非技術類人才（市場、營銷、產品等），一片空白，沒有一個優秀的工具來幫助他們理解機器學習模型到底做了什麼，能解決一個什麼問題。
機器學習開發和工程使用並不是那麼遙不可及，TensorSpace 搭建橋樑連接實際問題和機器學習模型。
3D可視化的信息密度更高更直觀
市面上常見的機器學習可視化框架都是基於圖表（2D），這是由它們的應用領域（訓練調試）決定的。但 3D 可視化不僅能同時表示層間信息，更能直觀地展示模型結構，這一點是 2D 可視化不具備的。
例如在何愷明大神的 Mask-RCNN論文中，有這麼一幅圖來描述模型結構（很多模型設計類和應用落地類的論文都會有這麼一幅圖）：
TensorSpace 可以讓用戶使用瀏覽器方便地構建一個可交互的神經網絡 3D 結構。更進一步的，用戶還可以利用 3D 模型的表意能力特點，結合 Tensorflow.js 在瀏覽器中進行模型預測（跑已經訓練好的模型看輸入輸出分別是什麼），幫助理解模型。
模型結構：黑盒子的真面目是什麼？
模型就像是一個盛水的容器，而預訓練模型就是給這個容器裝滿了水，可以用來解決實際問題。搞明白一個模型的輸入是什麼，輸出是什麼，如何轉化成我們可理解的數據結構格式（比如輸出的是一個物體標識框的左上角左下角目標），就可以方便地理解某個模型具體做了什麼。
例如，YOLO 到底是如何算出最後的物體識別框的？LeNet 是如何做手寫識別的？ACGAN 是怎麼一步一步生成一個 0-9 的圖片的？這些都可以在提供的 Playground 中自行探索。
如下圖所示，模型層間的鏈接信息可通過直接鼠標懸停具體查看。
層間數據：神經網絡的每一層都做了什麼？
3D 模型不僅可以直觀展示出神經網絡的結構特徵（哪些層相連，每一層的數據和計算是從哪裡來），還能結合 Tensorflow.js 在瀏覽器中進行模型預測。由於我們已經有了模型結果，所有的層間數據直觀可見，如下圖所示：
在 TensorSpace 內部，調用 Callback Function 可以方便的拿到每一層的輸出數據（未經處理），工程和應用上，瞭解一個模型的原始輸出數據方便工程落地。
怎麼建（How）
首先你需要有一個使用常用框架訓練好的預訓練模型，常見的模型都是隻有輸入輸出兩個暴露給用戶的接口。TensorSpace 可以全面地展示層間數據，不過需要用戶將模型轉換成多輸出的模型，過程詳見以下文檔。
模型預處理簡介：
http://tensorspace.org/html/docs/preIntro_zh.html
具體流程如下圖所示：
用 TensorSpace 構建對應模型這一步，下面一段構建 LetNet 的代碼可能更加直觀，如果要在本地運行，需要 Host 本地 Http Server。
你最需要的是模型結構的相關信息，TensorFlow，Keras 都有對應的 API 打印模型結構信息，比如 Keras 的 model.summary。還有類似生成結構圖的方式，生成如下圖的模型結構 2D 示意圖：
是的，你需要對模型結構非常瞭解才可能構建出對應的 TensorSpace 模型。未來版本已計劃推出自動腳本，通過導入對應的模型預訓練文件，一鍵生成多輸出模型。但是 TensorSpace 的 Playground 子項目未來會力所能及地收集更多模型，在模型應用落地和直觀展示這個領域努力做出貢獻。
誰可能用（Who）
做這樣一款開源框架，除了填補 3D 可視化的一般解決方案的框架空白外，還思索了幾個可能可行的應用場景。
前端開發者過渡機器學習
前端（全棧）開發者，產品經理等
未來，前端的重複性工作可能會慢慢減少。最近有一個原型圖→HTML代碼的項目，另一個 2017 年的開源項目Pix2Code 都在嘗試利用機器學習自動化一些 Coding 中的重複勞動，提高效率。
機器學習一定不會取代前端工程師，但掌握機器學習工具的工程師會有優勢（這種工具會不會整合進 Sketch 等工具不好說），既然入了工程師行，終身學習勢在必行。
TensorSpace 雖然不能幫忙訓練和設計模型，但它卻擅長幫助工程師理解已有模型，為其找到可應用的領域。並且，在接駁廣大開發者到機器學習的大道上做了一點微小的工作，做一個可視化的 Model Zoo。
機器學習教育
機器學習課程教育者
使用 TensorSpace 直觀地在瀏覽器上顯示模型細節和數據流動方向，講解常見模型的實現原理，比如 ResNet，YOLO 等，可以讓學生更直觀地瞭解一個模型的前世今生，輸入是什麼，輸出是什麼，怎麼處理數據等等。
我們只是提供了一個框架，每一個模型如果需要直觀地展示對數據的處理過程，都值得 3D 化。
模型演示和傳播
機器學習開發者
JavaScript 最大的優勢就是可以在瀏覽器中運行，沒有煩人的依賴，不需要踩過各種坑。有一個版本不那麼落後的瀏覽器和一臺性能還可以的電腦就可以完整訪問所有內容。
如果您的項目需要展示自己的模型可以做什麼、是怎麼做的，私以為，您真的不應該錯過 TensorSpace。
用 TensorSpace 教學模型原理效果非常好。它提供了一個接口去寫代碼，搞清楚每一個輸出代表了什麼，是如何轉化成最後結果。當然，從輸出到最後結果的轉換還是需要寫 JavaScript 代碼去構建模型結構，在這個過程中也能更進一步理解模型的構造細節。
現在還沒有完成的 Yolov2-tiny 就是因為 JavaScript 的輪子較少（大多數處理輪子都使用 Python 完成），所有的數據處理都需徒手搭建。時間的力量是強大的，我們搭建一個地基，萬丈高樓平地起！
致謝
機器學習部分
我們最初的靈感來源於一個真正教會我深度卷積網是如何工作的網站：
http://scs.ryerson.ca/~aharley/vis/conv/
源碼只能下載，我 Host 了一份在 Github 上：
https://github.com/CharlesLiuyx/3DVis_ConvNN
這個網站的效果，也是團隊未來努力的方向（大網絡上，因為實體過多，性能無法支持。為了解決性能問題，我們優化為：不是一個 Pixel 一個 Pixel 的渲染，而是一個特徵圖一個特徵圖的處理。
前端部分
使用 Tensorflow.js、Three.js、Tween.js 等框架完成這個項目，感謝前人給的寬闊肩膀讓我們有機會去探索更廣闊的世界。
開發團隊們
感謝每一個為這個項目付出的夥伴，沒有你們每個人，就沒有這個開源項目破土而出。
開發團隊成員：
syt123450 — 主力開發
https://github.com/syt123450
Chenhua Zhu — 開發
https://github.com/zchholmes
Qi (Nora) — 設計師
https://github.com/lq3297401
CharlesLiuyx — 機器學習模型 & 文檔
https://github.com/CharlesLiuyx
也歡迎你有什麼想法給我留言，或直接在 Github 上提出 Pull Request。
本文為機器之心專欄，轉載請聯繫 PaperWeekly 公眾號獲得授權。
✄------------------------------------------------
加入機器之心（全職記者 / 實習生）：[email protected]
投稿或尋求報道：content@jiqizhixin.com
廣告 & 商務合作：[email protected]
相關推薦
