基于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ù),在圖像識(shí)別、自然語(yǔ)言處理等領(lǐng)域獲得了廣泛的應(yīng)用,近年來(lái)成為人們研究和學(xué)習(xí)的熱點(diǎn)[1-5]。然而神經(jīng)網(wǎng)絡(luò)的內(nèi)部運(yùn)行過(guò)程和計(jì)算細(xì)節(jié),往往是以黑盒的方式呈現(xiàn)的,增加了神經(jīng)網(wǎng)絡(luò)的理解難度,提高了初學(xué)者學(xué)習(xí)神經(jīng)網(wǎng)絡(luò)的門(mén)檻。針對(duì)這一問(wèn)題,本文基于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)行過(guò)程直觀(guān)動(dòng)態(tài)地展示給學(xué)習(xí)者,并通過(guò)案例逐步展示前向傳播和反向傳播過(guò)程,并在傳播過(guò)程中展示神經(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ā),通過(guò)模擬生物神經(jīng)元的運(yùn)作機(jī)制,解決常見(jiàn)計(jì)算機(jī)問(wèn)題。經(jīng)過(guò)數(shù)年的研究,神經(jīng)網(wǎng)絡(luò)技術(shù)取得了長(zhǎng)足發(fā)展,現(xiàn)已產(chǎn)生卷積神經(jīng)網(wǎng)絡(luò)[3]、遞歸神經(jīng)網(wǎng)絡(luò)[4]、對(duì)抗生成神經(jīng)網(wǎng)絡(luò)[5]等多種神經(jīng)網(wǎng)絡(luò)結(jié)構(gòu),這些神經(jīng)網(wǎng)絡(luò)在圖像識(shí)別、自然語(yǔ)言處理等領(lǐng)域的處理速度和精度,達(dá)到了甚至超過(guò)了人類(lèi)的水平,被廣泛應(yīng)用在自動(dòng)駕駛、安防監(jiān)控、語(yǔ)言翻譯、語(yǔ)音識(shí)別等領(lǐng)域。

1.2 Echarts

Echats是一款開(kāi)源的前端可視化框架,提供直觀(guān)的、動(dòng)態(tài)的、可交互、可定制的圖表可視化功能,于2021年成為ASF頂級(jí)項(xiàng)目[6]。Echarts不僅提供傳統(tǒng)的折線(xiàn)圖、散點(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來(lái)表示,隱藏層負(fù)責(zé)數(shù)據(jù)的加工和計(jì)算,輸出層負(fù)責(zé)將隱藏層輸出的結(jié)果,轉(zhuǎn)化成預(yù)測(cè)結(jié)果,最后通過(guò)與樣本標(biāo)簽y1,y2,…,yk進(jìn)行比較,計(jì)算損失大小,通過(guò)損失大小調(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)系圖對(duì)神經(jīng)網(wǎng)絡(luò)進(jìn)行可視化。關(guān)系圖由點(diǎn)和邊來(lái)組成,如圖3所示。

圖3 Echarts關(guān)系

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

基于Echarts關(guān)系圖便可以繪制出神經(jīng)網(wǎng)絡(luò)結(jié)構(gòu),如圖4所示。用戶(hù)可以在輸入框內(nèi)指定神經(jīng)網(wǎng)絡(luò)的層數(shù)和各層神經(jīng)元的個(gè)數(shù)。每層之間用逗號(hào)隔開(kāi),數(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 前向傳播過(guò)程

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

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

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

2.3 反向傳播過(guò)程

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

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

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

3 結(jié)語(yǔ)

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