基于Echarts的神經(jīng)網(wǎng)絡(luò)教學(xué)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

李 強(qiáng),王彬彬

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

0 引言

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

1 相關(guān)工作

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

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

1.2 Echarts

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

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

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

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

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

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

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

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

圖3 Echarts關(guān)系

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

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

代碼1:Echarts關(guān)系圖示例代碼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)絡(luò)結(jié)構(gòu)

2.2 前向傳播過程

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

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

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

2.3 反向傳播過程

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

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

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

3 結(jié)語

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