Python · cv2（一）· 神經網路的可視化

01-26

========== 寫在前面的話 ==========

本章我嘗試了一種新的敘述方式：把細節都放在了這個 repo 中，這意味著我不會在這裡給出具體的代碼；同時我設計了一些練習並提供了參考答案（有點像 cs231n 的 assignment 那種形式），所以如果觀眾老爺們想了解實現細節的話、是需要下載（或者 fork）這個 repo 並使用某個 IDE（比如 PyCharm）來進行相關實驗的……

如果覺得這些都無所謂並願意看的話，我會覺得很開心的 _(:з」∠)_

另外如果覺得這個形式不好或者沒有必要的話也請盡情指出，畢竟這種形式對我而言其實超累的，要進行各種抽象 _(:з」∠)_

========== 分割線的說 ==========

正如上一章所說，這一部分我是受了 Tensorflow Playground 的啟發後做出來的。它可能稱不上很實用，但個人認為它能幫助我們理解神經網路（NN）並讓我們熟悉 cv2 的基本操作

本章會使用我個人用 Numpy 寫的 NN 框架進行實驗，但即使對其完全不了解也不會對食用本文造成困難；不過如果有觀眾老爺確實想了解的話，可以參見這裡 ( σω)σ

先展示一下結果（動圖可以猛戳這裡觀看）：

然後理一下我們要做的事：

該可視化是針對二維數據進行的，但類別數可以任意多
把每一層每個神經元在二維平面上的激活情況展示出來；具體而言，應該將小於激活均值的部分用藍色填充、其餘部分用橙色填充
把神經元之間的邊按照如下規則畫出：

取出層與層之間權值矩陣 $w^{(i)}$ 中絕對值最大的元素 $m$
把 $w^{(i)}$ 中絕對值小於 $0.2m$ 的元素所對應的邊隱藏，這主要是為了防止圖顯得太亂（0.2 是我隨意取的一個閾值，完全可以按需求把它換成其它數）
若一條邊對應的權值絕對值越大、則該邊應該越粗
若一條邊對應的權值為負、則該邊應為藍色，否則應為橙色

支持將動畫保存下來（需要 imageio 庫來導出 mp4、需要 FFmpeg 來轉成 gif）

看上去似乎很複雜的樣子，但又正如上一章所說，我們只需要四個最基本的元素：字、線、圓、方就行，所以真的實現起來就會發現並不困難。為了讓觀眾老爺們更有實感，我努力做了一些抽象並設計了一些練習，觀眾老爺可以嘗試把相應部分進行實現並在自己的電腦上跑跑效果。repo（可能會持續更新）可以在這裡下載（或者 fork）到，下面就說下怎麼利用這個 repo

在這個 repo 的 NN/Practices/NNVis.py 中有本章所有需要補完的代碼，參考答案則都可以在 NN/Answers/NNVis.py 中找到，測試則可以在 NN/Tests/NNVis.py 中進行；為了更有條理，我把任務分成了四份：

獲取每條線的顏色（對應於 get_colors 函數）
獲取每條線的粗細（對應於 get_line_info 函數）
畫出整張 NN 的可視化圖（對應於 draw_detail_network 函數），這部分的任務又分為了三份：畫個圈、寫個字、連條線（……）
把 cv2 默認的 BGR 圖像轉換成 imageio 需要的 RGB 圖像（對應於 bgr2rgb 函數）

其中第三點的實現有些繞，這裡稍微說明一下。首先要明確 draw_detail_network 函數接收的主要參數是什麼：

原始二維數據集的最小、最大值（它們能幫助我們定出可視化的範圍）
NN 中的各個 Layer（它們能通過 shape 屬性告訴我們每一層的神經元個數）
NN 中的各個權值矩陣（線的顏色、粗細都是根據權值來定出的）
獲取各層激活值的方法（從而能獲得各個神經元的激活情況）

有了這些之後，我們只需：

根據激活值獲取 Neuron graphs，所謂 Neuron graph 就是上圖中那一個個小正方形，Neuron graphs 就是裝這些小正方形的數組
根據 Neuron graphs 渲染 Canvas、亦即就是把每個 Neuron graph 放到 Canvas 上合適的地方
在把 Neuron graph（那些小正方形）畫好之後，只需再進行如下三步即可完成可視化：

把最上面代表輸入的兩個圈畫出來
把每個 Layer 的名字放在左邊
用合適的線把 Neuron graph 連起來

整個流程不難但繁，詳情可參見 repo

希望觀眾老爺們能夠喜歡~