基于Echarts的神經網絡教學系統設計與實現

李 強,王彬彬

(淮南師范學院,安徽 淮南 232038)

0 引言

神經網絡作為人工智能的關鍵技術,在圖像識別、自然語言處理等領域獲得了廣泛的應用,近年來成為人們研究和學習的熱點[1-5]。然而神經網絡的內部運行過程和計算細節,往往是以黑盒的方式呈現的,增加了神經網絡的理解難度,提高了初學者學習神經網絡的門檻。針對這一問題,本文基于Echarts可視化技術設計并實現了一款神經網絡教學系統,將神經網絡的內部結構和運行過程直觀動態地展示給學習者,并通過案例逐步展示前向傳播和反向傳播過程,并在傳播過程中展示神經元內部的計算細節。

1 相關工作

1.1 人工神經網絡

人工神經網絡受生物神經網絡啟發,通過模擬生物神經元的運作機制,解決常見計算機問題。經過數年的研究,神經網絡技術取得了長足發展,現已產生卷積神經網絡[3]、遞歸神經網絡[4]、對抗生成神經網絡[5]等多種神經網絡結構,這些神經網絡在圖像識別、自然語言處理等領域的處理速度和精度,達到了甚至超過了人類的水平,被廣泛應用在自動駕駛、安防監控、語言翻譯、語音識別等領域。

1.2 Echarts

Echats是一款開源的前端可視化框架,提供直觀的、動態的、可交互、可定制的圖表可視化功能,于2021年成為ASF頂級項目[6]。Echarts不僅提供傳統的折線圖、散點圖、柱狀圖、餅圖等可視化圖表功能,還提供了基于WEBGL的3D圖形可視化支持[7-10]。

2 神經網絡教學系統

2.1 神經網絡結構表示

神經網絡通常由輸入層、隱藏層和輸出層組成。輸入層負責接收輸入的樣本數據,每個樣本包含多個特征,用x1,x2,…,xn來表示,隱藏層負責數據的加工和計算,輸出層負責將隱藏層輸出的結果,轉化成預測結果,最后通過與樣本標簽y1,y2,…,yk進行比較,計算損失大小,通過損失大小調整神經網絡的權重參數。神經網絡結構如圖1所示。

圖1 神經案例結構

神經網絡每層中都包含多個神經元,神經元是神經網絡的基本計算單元,由輸入權重參數、偏執參數、激活函數3部分組成,其結構如圖2所示。

圖2 神經案例結構

為了模擬神經元和神經網絡結構,本文使用Echarts的關系圖對神經網絡進行可視化。關系圖由點和邊來組成,如圖3所示。

圖3 Echarts關系

其中,圓形用于表示神經元,連線用于表示數據在神經元中的流向。依據神經網絡結構,通過代碼設置原型位置和連線的流向,從而向用戶展示神經網絡的結構。代碼1給出了Echarts中繪制關系圖繪制的示例代碼。

基于Echarts關系圖便可以繪制出神經網絡結構,如圖4所示。用戶可以在輸入框內指定神經網絡的層數和各層神經元的個數。每層之間用逗號隔開,數組代表各層中神經元的數量。比如輸入框內的3,5,3,3,1表示神經網絡共有5層,第一層有3個神經元,第二層有5個神經元,第三層有3個神經元,第四層有3個神經元,第五層有1個神經元。如果想改變神經網絡的結構,只需改變輸入框中的內容即可,比如將神經網絡改為4層,第一層有5個神經元,第二層有10個神經元,第三層有7個神經元,第四層有2個神經元,則在輸入框內輸入4,5,10,7即可。

代碼1:Echarts關系圖示例代碼1. series: [{2. type: 'graph',3. symbolSize: 50,4. edgeSymbol: ['circle', 'arrow'],5. edgeLabel: { fontSize: 20 },6. data: [7. {name: 'Node 1', x: 300, y: 300},8. {name: 'Node 2',x: 800,y: 300}9. ],10. links: [11. {source: 0,target: 1,lineStyle: {width: 5}}12. ]13. }]

圖4 基于Echarts繪制的神經網絡結構

2.2 前向傳播過程

神經網絡通過前向傳播來計算預測結果。神經網絡前向傳播時將上一層各神經元的計算結果作為輸入數據傳遞到下一層的各個神經元中。神經元經過加權求和運算和激活函數后,再將計算結果輸出到下一個神經元匯總,依次類推直至最后一層神經元完成輸出。為了實現神經網絡的前向傳播過程,本系統使用了Echarts的動畫展示功能和JavaScript的定時執行功能。系統每2 s執行一次前向傳播,并將參與運算的神經元用深色標注出來,每次傳播動畫執行1.5 s。前向傳播效果如圖5所示。

圖5 神經網絡前向傳播

圖5中深色的圓代表當前正在運算的神經元,深色的連線指示了輸入數據的來源,神經元上的數字代表神經元的輸出結果,連線上的數字代表輸入數據的權重,神經元下方的數字為神經元的偏置參數。在前向傳播的過程中,界面上還會以公式的形式顯示神經元內部的計算細節。

2.3 反向傳播過程

神經網絡依據損失大小,通過反向傳播來更新神經元的權重參數和偏執參數,從而逐步降低損失,提升預測精度。反向傳播將誤差損失從后層神經元向前傳遞,傳遞的過程中更新各個神經元的權重參數和偏置參數。反向傳播過程如圖6所示。

圖6 神經網絡前向傳播

深色的神經元代表當前正在更新參數的神經元,深色神經元上的數字代表誤差損失,深色連線代表誤差的傳播流向,深色連線上的文本代表向各個神經元傳播的誤差大小和參數的更新過程。神經網絡通過逐層傳播,來更新各個神經元的參數,以此訓練網絡,逐步減少誤差。為了讓反向傳播的過程更加直觀化、動態化,系統在反向傳播的過程中使用了Echarts的動畫功能,每個神經元反向傳播動畫時長為1.5 s。

3 結語

基于Echarts可視化技術,本文設計并實現了一款神經網絡教學系統。用戶可以通過網頁構建和調整神經網絡結構,并通過交互操作,逐步觀察神經網絡前向傳播、反向傳播的過程。同時為了方便用戶理解神經元內部的計算細節,本文還設計一個神經網絡案例,通過網頁動畫展示神經元內部的計算細節,幫助用戶更容易理解神經網絡的內部構造和運行原理,降低神經網絡的學習成本和入門門檻。