基于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可视化技术,本文设计并实现了一款神经网络教学系统。用户可以通过网页构建和调整神经网络结构,并通过交互操作,逐步观察神经网络前向传播、反向传播的过程。同时为了方便用户理解神经元内部的计算细节,本文还设计一个神经网络案例,通过网页动画展示神经元内部的计算细节,帮助用户更容易理解神经网络的内部构造和运行原理,降低神经网络的学习成本和入门门槛。