基于Echarts的神经网络教学系统设计与实现.pdf

第 13 期2023 年 7 月无线互联科技Wireless Internet TechnologyNo.13July,2023基金项目:安徽省高校自然科学研究重点项目;项目名称:基于神经网络的大规模认知诊断实时参数估计方法研究;项目编号:2022AH051576。淮南师范学院科研项目;项目名称:基于时序数据的动态认知诊断模型研究;项目编号:2021XJYB032。淮南师范学院科研项目;项目名称:基于知识点覆盖率的试题推荐算法研究;项目编号:2021XJYB033。作者简介:李强(1988),男,安徽宿州人,助教,硕士;研究方向:教育数据挖掘与机器学习。通信作者:王彬彬(1991),女,河南周口人,助教,硕士;研究方向:数据存储与数据挖掘。基于 Echarts 的神经网络教学系统设计与实现李 强,王彬彬(淮南师范学院,安徽 淮南 232038)摘要:神经网络作为人工智能的关键技术,获得了广泛的研究和应用。但神经网络运行过程的黑盒特性和复杂的内部结构,增加了神经网络的学习和研究成本。针对这一问题,文章基于 Echarts 可视化技术,设计并实现了一款神经网络教学系统。该系统支持可交互的网页界面,允许用户在线设计神经网络结构,并可以直观动态展示神经网络的前向传播和反向传播的过程以及神经元内部的计算细节。本系统可以将神经网络的内部结构和运行过程可视化、直观化和动态化,从而降低神经网络的学习门槛和理解难度。关键词:Echarts;神经网络;可视化;前向传播;反向传播中图分类号:TP311.52 文献标志码:A0 引言 神经网络作为人工智能的关键技术,在图像识别、自然语言处理等领域获得了广泛的应用,近年来成为人们研究和学习的热点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 所示。神经网络每层中都包含多个神经元,神经元是神经网络的基本计算单元,由输入权重参数、偏执参数、激活函数 3 部分组成,其结构如图 2 所示。其中,w1,w2,wn为神经元的权重参数,b 为神经元的偏置参数,z 为输入数据经过权重参数和偏置参数加权后的运算结果z=ni=1wixi+b,f 为激活函数,78第 13 期2023 年 7 月无线互联科技软件开发No.13July,2023 图 1 神经案例结构图 2 神经案例结构该函数通常为非线性的 sigmod 函数、tanh 函数或 relu函数,a 激活函数的输出结果,即神经元的输出结果。为了模拟神经元和神经网络结构,本文使用Echarts 的关系图对神经网络进行可视化。关系图由点和边来组成,如图 3 所示。图 3 Echarts 关系其中,圆形用于表示神经元,连线用于表示数据在神经元中的流向。依据神经网络结构,通过代码设置原型位置和连线的流向,从而向用户展示神经网络的结构。代码 1 给出了 Echarts 中绘制关系图绘制的示例代码。基于 Echarts 关系图便可以绘制出神经网络结构,如图 4 所示。用户可以在输入框内指定神经网络的层数和各层神经元的个数。每层之间用逗号隔开,数组代表各层中神经元的数量。比如输入框内的 3,5,3,3,1 表示神经网络共有 5 层,第一层有 3 个神经元,第二层有 5 个神经元,第三层有 3 个神经元,第四层有 3 个神经元,第五层有 1 个神经元。如果想改变 代码 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:3009.,10.links:11.source:0,target:1,lineStyle:width:512.13.图 4 基于 Echarts 绘制的神经网络结构神经网络的结构,只需改变输入框中的内容即可,比如将神经网络改为 4 层,第一层有 5 个神经元,第二层有 10 个神经元,第三层有 7 个神经元,第四层有 2个神经元,则在输入框内输入 4,5,10,7 即可。2.2 前向传播过程 神经网络通过前向传播来计算预测结果。神经网络前向传播时将上一层各神经元的计算结果作为输入数据传递到下一层的各个神经元中。神经元经88第 13 期2023 年 7 月无线互联科技软件开发No.13July,2023过加权求和运算和激活函数后,再将计算结果输出到下一个神经元汇总,依次类推直至最后一层神经元完成输出。为了实现神经网络的前向传播过程,本系统使用了 Echarts 的动画展示功能和 JavaScript 的定时执行功能。系统每 2 s 执行一次前向传播,并将参与运算的神经元用深色标注出来,每次传播动画执行1.5 s。前向传播效果如图 5 所示。图 5 神经网络前向传播图 5 中深色的圆代表当前正在运算的神经元,深色的连线指示了输入数据的来源,神经元上的数字代表神经元的输出结果,连线上的数字代表输入数据的权重,神经元下方的数字为神经元的偏置参数。在前向传播的过程中,界面上还会以公式的形式显示神经元内部的计算细节。2.3 反向传播过程 神经网络依据损失大小,通过反向传播来更新神经元的权重参数和偏执参数,从而逐步降低损失,提升预测精度。反向传播将误差损失从后层神经元向前传递,传递的过程中更新各个神经元的权重参数和偏置参数。反向传播过程如图 6 所示。图 6 神经网络前向传播深色的神经元代表当前正在更新参数的神经元,深色神经元上的数字代表误差损失,深色连线代表误差的传播流向,深色连线上的文本代表向各个神经元传播的误差大小和参数的更新过程。神经网络通过逐层传播,来更新各个神经元的参数,以此训练网络,逐步减少误差。为了让反向传播的过程更加直观化、动态化,系统在反向传播的过程中使用了 Echarts 的动画功能,每个神经元反向传播动画时长为 1.5 s。3 结语 基于 Echarts 可视化技术,本文设计并实现了一款神经网络教学系统。用户可以通过网页构建和调整神经网络结构,并通过交互操作,逐步观察神经网络前向传播、反向传播的过程。同时为了方便用户理解神经元内部的计算细节,本文还设计一个神经网络案例,通过网页动画展示神经元内部的计算细节,帮助用户更容易理解神经网络的内部构造和运行原理,降低神经网络的学习成本和入门门槛。参考文献1焦李成,杨淑媛,刘芳,等.神经网络七十年:回顾与展望J.计算机学报,2016(8):1697-1716.2LI Z,LIU F,YANG W,et al.A survey of convolutional neural networks:analysis,applications,and prospectsJ.IEEE Transactions on Neural Networks and Learning Systems,2022(12):6999-7019.3黄健,张钢.深度卷积神经网络的目标检测算法综述J.计算机工程与应用,2020(17):12-23.4王婷,杨文忠.文本情感分析方法研究综述J.计算机工程与应用,2021(12):11-24.5袁非牛,章琳,史劲亭,等.自编码神经网络理论及应用综述J.计算机学报,2019(1):203-230.6LI D,MEI H,SHEN Y,et al.ECharts:a declarative framework for rapid construction of web-based visualizationJ.Visual Informatics,2018(2):136-146.7TANG T,LI R,WU X,et al.Plotthread:creating expressive storyline visualizations using reinforcement learning J.IEEE Transactions on Visualization and Computer Graphics,2020(2):294-303.8章锐,陈树勇,刘道伟,等.基于 ECharts 的电网Web 可视化研究及应用J.电测与仪表,2017(19):59-66.9王子毅,张春海.基于 ECharts 的数据可视化分析组件设计实现J.微型机与应用,2016(14):46-48,51.10史国举.数据可视化技术在大数据分析领域的应用及发展研究J.无线互联科技,2021(18):96-97.(编辑 王雪芬)98第 13 期2023 年 7 月无线互联科技软件开发No.13July,2023Design and implementation of neural network teaching system based on EchartsLi Qiang Wang Binbin Huainan Normal University Huainan 232038 China Abstract Neural networks as the key technology of artificial intelligence have gained wide research and application.However the black-box nature of the neural network operation process and the complex internal structure increase the learning and research cost of neural networks.To address this problem a neural network demonstration system is designed and implemented based on Echarts visualization technology.The system supports an interactive web interface that allows users to design the neural network structure online and can visually and dynamically display the forward and backward propagation processes of the neural network and the computational details inside the neurons.This system can visualize and dynamically show the internal structure and operation process of neural networks thus reducing the learning threshold and understanding difficulty of neural networks.Key words Echarts neural network visualization forward propagation backward propagation(上接第 86 页)7高云成.基于 Cesium 的 WebGIS 三维客户端实现技术研究D.西安:西安电子科技大学,2023.8张永强,王波,申茂廷.基于 Cesium 的 3DWebGIS三维场景加载及开发 J.河南科技,2021(21):8-10.9马洪成,张玉驹,刘为民.基于开源 Cesium 框架的智慧街道三维可视化平台的研究与应用J.测绘与空间地理信息,2019(8):3.10赵慧峰.基于 Cesium 的三维展示与查询平台开发D.徐州:中国矿业大学,2023.(编辑 姚 鑫)Design and implementation of intelligent management platform for metro based on CesiumCheng Yuan e1 Lyu Zhihui1 Yuan Chunqi2 Yu Jianqiang1 1.Jiangsu Province Surveying&Mapping Research Institute Nanjing 210013 China 2.North Information Control Group Nanjing 211153 China Abstract With the rapid development of smart city construction underground space management has put forward higher requirements for three-dimensional visualization.Currently most urban underground spatial information has problems such as unclear three-dimensional boundaries and unclear ownership.Traditional two-dimensional GIS technology has certain limitations in the visualization of underground spatial information.Based on the open source Cesium framework and Wuxi Metro data this article has built a three-dimensional intelligent management platform for Wuxi Metro realizing functional modules such as three-dimensional display parcel ownership display and security display providing platform support for the realization of informatization and refined management of underground space in urban subway stations and providing a certain reference for the construction of similar systems and platforms.Key words underground space information Cesium 3D visualization intelligent management09