李 強,王彬彬

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

0 引言

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

1 相關工作

1.1 人工神經(jīng)網(wǎng)絡

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

1.2 Echarts

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

2 神經(jīng)網(wǎng)絡教學系統(tǒng)

2.1 神經(jīng)網(wǎng)絡結(jié)構表示

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

圖1 神經(jīng)案例結(jié)構

神經(jīng)網(wǎng)絡每層中都包含多個神經(jīng)元,神經(jīng)元是神經(jīng)網(wǎng)絡的基本計算單元,由輸入權重參數(shù)、偏執(zhí)參數(shù)、激活函數(shù)3部分組成,其結(jié)構如圖2所示。

圖2 神經(jīng)案例結(jié)構

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

圖3 Echarts關系

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

基于Echarts關系圖便可以繪制出神經(jīng)網(wǎng)絡結(jié)構,如圖4所示。用戶可以在輸入框內(nèi)指定神經(jīng)網(wǎng)絡的層數(shù)和各層神經(jīng)元的個數(shù)。每層之間用逗號隔開,數(shù)組代表各層中神經(jīng)元的數(shù)量。比如輸入框內(nèi)的3,5,3,3,1表示神經(jīng)網(wǎng)絡共有5層,第一層有3個神經(jīng)元,第二層有5個神經(jīng)元,第三層有3個神經(jīng)元,第四層有3個神經(jīng)元,第五層有1個神經(jīng)元。如果想改變神經(jīng)網(wǎng)絡的結(jié)構,只需改變輸入框中的內(nèi)容即可,比如將神經(jīng)網(wǎng)絡改為4層,第一層有5個神經(jīng)元,第二層有10個神經(jīng)元,第三層有7個神經(jīng)元,第四層有2個神經(jīng)元,則在輸入框內(nèi)輸入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繪制的神經(jīng)網(wǎng)絡結(jié)構

2.2 前向傳播過程

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

圖5 神經(jīng)網(wǎng)絡前向傳播

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

2.3 反向傳播過程

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

圖6 神經(jīng)網(wǎng)絡前向傳播

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

3 結(jié)語

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