多模态教育问答平台的设计与实现
Design and Implementation of a Multimodal Educational Question-Answering Platform
DOI: 10.12677/csa.2025.159219, PDF, HTML, XML,   
作者: 苗 丹:北方工业大学人工智能与计算机学院,北京
关键词: 多模态教育问答平台手势绘画Multimodal Educational Q&A Platform Gesture-Based Drawing
摘要: 为了解决传统教育问答平台交互方式单一、不能够充分满足用户在复杂知识场景下表达和获取需求的问题,本文基于Spring Boot与Next.js打造了集文字、图像、手势绘画、语音四种交互模态于一体的多模态问答平台。从整体上讲,本平台包含了“前端交互层(Next.js实现交互界面)–数据服务层(Spring Boot 管理会话与数据持久化)–多模态处理层(Python集成阿里云图像生成与视觉理解API、OpenCV与MediaPipe手势绘图、PyAudio语音识别)”组成的技术架构。通过该平台的设计与实现,有效地提高了其教育问答方式的多样性以及用户体验。
Abstract: In order to solve the problem of traditional education Q&A platforms having a single interaction method and being unable to fully meet users’ expression and acquisition needs in complex knowledge scenarios, this paper builds a multimodal Q&A platform based on Spring Boot and Next.js, which integrates four interaction modes: text, image, gesture drawing, and voice. Overall, this platform consists of a technical architecture consisting of a front-end interaction layer (Next.js implements the interaction interface), a data service layer (Spring Boot manages sessions and data persistence), and a multimodal processing layer (Python integrates Alibaba Cloud image generation and visual understanding APIs, OpenCV and MediaPipe gesture drawing, PyAudio speech recognition). Through the design and implementation of this platform, the flexibility of its educational interaction and user experience have been effectively improved.
文章引用:苗丹. 多模态教育问答平台的设计与实现[J]. 计算机科学与应用, 2025, 15(9): 7-15. https://doi.org/10.12677/csa.2025.159219

1. 引言

随着数字技术与教育领域的深入结合,网络学习已经成为一种主流学习方式,而问答是网络学习中解决知识困惑的一个主要途径,问答质量决定着学生在问答环节中解决疑问的能力,同时也会对学生本身的学习效率和体验产生一定的影响。在这里,交互性作为连接学习者和知识的纽带,其质量会影响学生的学习沉浸度与满意度,同时又会影响到网络学习的最终效果[1]。研究和优化多模态问答平台能够有效把握这一关键点,进一步提高用户的黏性,使其更好地为网络学习提供高效的多模态问答服务。

现有的传统教育平台方式还比较单一,其应用场景过于狭窄,在处理复杂的知识传递时存在着缺陷。学习者对于一些较难理解的概念或者知识点有时很难用简单的文字描述清楚,用这种方式来做问答交互会直接影响问答效率,不能够达到自己想要的程度且不能够深入地了解知识。结合以上问题,本研究提出了采用文字、图像、手势、语音四种模态实现基于多模态交互方式,为教育问答场景提供技术方案,来迎合用户自然表达需求。

2. 相关工作

2.1. 多模态学习分析

多模态学习分析是通过捕获、融合和分析多种来源的数据(讲话、手势、眼动、面部表情等),运用多种学习分析方法与技术,实现对学习行为、认知、信念、动机、情绪等多方面的客观理解与深刻洞察,进而实现对学习过程的全面理解[2]

多模态学习分析的核心价值在多项研究中得到验证。Drachsler和Schneider提出[3],与当前仅依靠单一数据源提取知识的方式相比,学习分析中的多模态数据能够更全面、系统地呈现学习过程与影响因素。Raca和Dillenbourg则通过多功能摄像系统捕捉全身运动,并利用身体姿势、手势等线索评估课堂中学生的注意力状态[4]。Sabine Tan等通过360度视频平台分析学习者的热图、视点跟踪等多模态数据,发现适度的视听线索来提升虚拟环境中的沉浸感[5]。Olsen等[6]利用凝视、日志、对话和音频数据预测测验成绩和学习改善情况。通过这些案例可知,多模态学习分析正是通过融合视频、音频、行为特征等多维度数据,实现挖掘学习过程中的核心信息以及对学习表现的有效分析与预测,为深入解析复杂的学习机制提供了更全面、更可靠的依据。

本研究与多模态学习分析的联系在于:均依赖多模态数据,通过对数据进行整合处理,最终目的都是理解学习者在学习过程中的需求。区别在于:多模态学习分析更注重的是分析评估,通过数据解析学习行为、预测学习结果;而本研究将分析评估作为基础环节(如通过解析多模态提问内容理解学习者需求),并在此基础上进一步延伸,构建实时问答闭环,学习者通过多模态方式提问,系统即时生成针对性回答。

2.2. 智能导学系统

智能导学系统(Intelligent Tutoring Systems, ITS)是利用人工智能技术模拟人类教师,提供个性化指导,辅助不同需求与特征的学习者获取知识技能的智能化计算机辅助教学系统[7]。近年来,智能导学系统领域成果颇丰,诸多研究聚焦于将其融入多元教学模式。如Mohamed和Lamia将智能导学系统融入翻转课堂,理解解决问题的步骤,并能将其应用到新的场景中,整合来自多个来源的信息,帮助学生在课堂外解决课程中的问题[8];Schez等构建智能导学系统辅助编程学习,不仅运用动态图形可视化技术,还借助AR技术在真实环境中生成学习环境,助力学生能够自主学习,同时吸引和维持学习注意力与动力[9]

本研究与ITS的联系在于:初衷都是通过自动化运行机制,最大程度弱化人类教师的人为干预,支撑学习者自主开展并完成学习过程。区别在于:ITS侧重于利用人工智能技术模拟人类教师,为学习者提供个性化的学习指导,辅助学习者获取知识和技能。而本研究核心功能是构建多模态教育问答平台,以实现精准问答为目标。

2.3. 人机交互

人机交互是研究人与计算机之间信息交流及相互影响的技术系统,其中“人”指操作者与用户,“机”则指新兴技术设备[10]。近年来,随着技术的不断演进,人机交互在多模态交互方面取得了诸多进展。诸多研究聚焦于通过融合多种模态提升交互的自然性与效率,如利用语音与手势的结合,实现更便捷的操作控制。如禹鑫燚等[11]研究的融合人体感知和多模态手势的人机交互方法,通过动态识别手部特征、构建交互指令集,为多模态交互在精准捕捉用户意图上提供了技术参考。还有王瀚升等[12]研究的智能助行器人机交互技术,对基于运动信号、视觉信号以及其他交互模态的人机交互技术展开了探讨。

本研究与人机交互的联系在于:均聚焦于优化人与系统间的信息交互过程,通过合理设计交互模式,提升用户在交互中的体验与效率,本质都是围绕“人–系统”信息传递与协作展开。区别在于:本研究限定教育问答场景,针对学习疑问解答、知识传递闭环,所有交互设计服务于识别教育知识需求。

2.4. 小结

综上,多模态学习分析注重分析评估,智能导学系统精于个性化教学,人机交互提供了交互技术。本研究在吸收上述领域成果的基础上,聚焦教育问答这一具体场景,通过多模态交互技术构建针对性的实时问答机制,形成了“以问答为核心、以多模态为载体、以教育知识传递为目标”的研究路径。

3. 系统设计与方法

3.1. 系统总体架构设计

多模态本质是运用各种模态进行协同作用,通过语言、动作、图像、声音等多种符号资源,利用视觉、听觉等多种感官传导方式完成信息的传递与意义的构建,优势在于更加多样化和灵活化,能够为用户提供更加丰富多元化的交互体验[13]

为了能够实现多模态教育问答平台跨技术栈的协同,能够利用多模态协同的功能拓展更多的场景应用,这里构建了一个“三层分布式架构”(见图1)。其主要特点是“多模态协同交互”,支持Java (Spring Boot)、JavaScript (Next.js)、Python多种语言的融合使用。

Figure 1. Multi-modal educational Q&A platform three-tier distributed architecture diagram

1. 多模态教育问答平台三层分布式架构图

3.2. 前端设计与方法

前端基于Next.js框架构建,是系统应用层的重要组成部分。通过前端路由实现选择面具界面和对话界面的无刷新切换,避免传统多页应用的页面重载问题,实现单页应用(SPA),提升用户体验。

选择面具界面以卡片方式呈现面具列表,每个卡片拥有面具图片与面具名称,面具使用悬停动效增强交互反馈效果。用户点击任意一个面具,便会自动生成关联此面具的新会话,使用react-router-dom的HashRouter进行路由管理,实现无刷新页面直接进入对话界面,呈现出单页的效果。

对话界面采用双栏布局设计:左侧SideBar组件展示了所有会话列表,每一个会话项都对应着一个关联的面具名字、创建时间和消息数量;右侧动态内容显示区域分为:上方的会话信息区(当前面具名字和消息数量),中间消息显示区(按照时间顺序排列消息,按照用户/系统的身份显示不同的样式,并渲染图片),下方多模态输入区(文字输入框、语音按钮等交互入口)。

在与服务层的交互中,前端通过调用RESTful API与后端进行数据通信,处理用户的各种操作请求,将用户的多模态输入传递给后端,并接收后端返回的处理结果,实现与服务层的协同工作。同时,前端负责将处理结果呈现给用户。

3.3. 后端设计与方法

后端基于Spring Boot框架,负责处理业务逻辑和数据交互,与数据层对接,管理会话和消息的存储。为保障前后端通信,系统采用RESTful API技术,RESTful作为面向资源的主流API架构风格[14],其核心是将需访问的数据抽象为资源,以唯一URL标识,通过GET、POST、PUT、DELETE方法实现资源操作,相比其他架构更具灵活性,被广泛应用于企业中[15]。通过标准化API与前端进行通信,实现会话新增、消息存储等操作,为多模态交互提供稳定的数据支持。

在定义完核心实体后,通过注解的方式实现对象关系映射:以@ManyToOne声明多对一关联,@OneToMany定义一对多反向关系,并通过@JsonIgnore解决双向关联的循环引用问题。数据访问层基于Spring Data JPA的CrudRepository接口,通过继承该接口自动获得增删改查方法,简化数据操作逻辑。控制层通过@RestController等注解定义REST接口,处理前端HTTP请求,并直接对接数据访问层完成业务处理,同时支持跨域请求。

3.4. 跨语言协同设计与方法

系统跨语言协同运用了不同的连接方式。对于手势识别、语音处理这些实时性场景,则使用WebSocket方法,建立前端到Python服务端的长连接通信,保证不经过API路由中间转发而直接建立连接,完成端对端的数据及结果的交换;对于以文生图非实时场景,则采用Next.js服务端的API路由做中转通信,采取“请求–响应”模式低频度交互,同时降低了长连接资源占用。这样既发挥了Python在多模态算法处理上的优势,又通过差异化通信方案满足了不同场景的性能需求。

3.5. 基础问答功能设计与实现方法

基础问答功能基于DeepSeek API 实现纯文字交互,借助其技术优势为系统筑牢核心问答能力。DeepSeek借鉴人类思维逻辑优化注意力机制,创新提出稀疏与局部注意力模式,显著缓解长文本处理的算力压力[16]

其交互流程为:用户在前端输入文字问题后,前端通过fetch请求调用封装的DeepSeek API接口,将问题内容发送至模型;模型返回回答后,将用户提问与系统回答以ChatMessage实体格式存入数据库,并同步至前端;前端接收响应后,更新会话的消息列表并渲染显示。

3.6. 多模态处理设计与实现方法

为突破纯文字问答的局限性,系统集成了图片输入、手势识别绘画、语音识别及以文生图等多模态交互功能,通过第三方API与跨语言协同技术,实现文字、图像、语音的融合交互。

3.6.1. 图片输入功能

图片输入功能可以上传本地图片并附上带有文字的提问(见图2),采用的是基于阿里云平台的“qwen-vl-max-latest”模型进行图文联合问答,其优势是具有较强的细节识别能力以及文字识别能力,支持大于百万像素的分辨率以及任意长宽比大小的图像,并且对视觉任务也具有良好的表现力。

该功能实现流程如下:1) 在前端处理环节中,用户选择本地图片后,系统通过FileReader的readAsDataURL方法将图片转为Base64编码字符串,同时引入图片压缩机制,利用canvas元素按照原来的比例缩小图片大小,使用ctx. drawImage的方法把压缩后的内容绘制出来,解决了由于原图太大存储不进去的问题。把压缩之后的Base64字符串与文字提问封装为请求内容,其中图片以image_url字段传入,文字以text字段传入。2) 在调用API环节中,通过fetch去调用/chat/completions的接口,然后请求头需要带上阿里云API密钥,模型会对接收到的图文内容进行回复。3) 收到返回的数据之后,前端将用户提问与系统回答分别封装成对象(区分role:“user”与role:“assistant”),通过状态管理工具更新本地会话列表,并调用自身的uploadMessage方法把它保存到数据库里,这样整个聊天记录就会和当前对话框建立了联系。

Figure 2. Image-text joint question-answering interface diagram

2. 图文联合问答界面图

3.6.2. 手势识别绘画功能

在手势识别绘画模块中,用户通过手部动作与摄像头画面进行实时交互,就可以做出画图等一些直观操作,并且将最后的结果作为一条消息发送出去。该模块主要运用MediaPipe的手部检测和OpenCV的图像处理技术,同时还利用了跨语言协同技术使得Python服务与前端页面进行互通。

具体来说,手部检测以及手势识别的功能由Python端完成,用MediaPipe的mp_hands模块去实时地获取到手部的21个关键点坐标。该框架以训练数据为支撑,凭借高准确性与鲁棒性,为后续手势解析提供可靠的数据基础[17]。并根据关键点坐标来算出指尖之间的距离,再根据不同手势形态去完成对应的手势识别,比如,当拇指与食指之间的距离小于0.05米的时候,则是“写字模式”,当食指与中指之间的距离小于0.05米,则切换到“橡皮擦模式”,同时结合握拳动作触发“清空画布”的指令,供用户清空之后继续绘图。

OpenCV作为应用广泛的开源计算机视觉库,凭借丰富算法工具,覆盖基础图像处理至高级目标检测跟踪功能[18],为本研究手势识别绘画模块的图像处理提供核心支撑。通过OpenCV完成图像处理操作,其中包括:摄像头画面采集(cv2.VideoCapture)、水平镜像翻转(cv2.flip)以及绘图。在“写字模式”下,OpenCV利用cv2.line对连续轨迹进行绘制,如果用户按下“S”键,则使用OpenCV的cv2.addWeighted函数将描画出的画布与原先的画面融合生成最终图像(见图3)。为了实现前端与后端的跨语言协作,采用 WebSocket实时通信架构,Python端将生成的图像数据通过WebSocket直接推送至前端,返回最新的图片路径。前端获取到该路径后,自动渲染图像至输入框中,用户还可以再输入文字进一步描述。若对图像不满意,可以按删除操作删掉图片。通过这一系列步骤,手势识别绘画模块实现了高效且直观的图像生成与消息传递功能。

Figure 3. Image of gesture recognition painting interface

3. 手势识别绘画界面图

3.6.3. 语音识别功能

在语音识别模块中,用户通过麦克风输入语音,实时转换的文字会自动放置在输入框中。其核心是依赖PyAudio音频采集与Translation Recognizer Realtime库,实现“语音输入→实时识别→翻译输出”的完整流程。

该功能实现流程如下:1) 用户点击语音按钮后,通过WebSocket建立前端与Python服务的长连接,同时携带启动语音识别指令。2) voice.py脚本会调用麦克风采集音频,同时按16,000 Hz采样率、单声道的PCM格式进行编码(PyAudio库配置)。3) 编码后的音频数据不会先传回前端,而是由Python脚本直接发送给阿里云平台的“gummy-realtime-v1”模型,模型实时解析出文字后,结果会通过WebSocket直接回传给前端。4) 前端通过WebSocket收到识别结果后,直接填充到输入框里。最后,将转写的文字等相关信息存入数据库中。

3.6.4. 以文生图功能

在以文生图模块中,用户可以根据需求输入文字信息,阿里云视觉开放平台通过“wanx2.1-t2i-turbo”模型生成与之相对应的图像。该模型是万相2.1极速版,优势是生成速度快。

该功能实现流程如下:1) 用户通过前端文本框输入一段想要生成图片的文字描述,然后前端将此信息通过API路由传给本地的Python脚本。2) Python脚本调用阿里云平台的“wanx2.1-t2i-turbo”模型处理该请求,通过读取用户的文字信息,按照语义生成相应的图像。3) 将生成的图像先传回到脚本,再经过API路由返回到前端,由前端页面显示该图像,供用户浏览查看。4) 将生成的图像、输入的文本描述以及生成时间等相关信息存入数据库中进行管理。

通过以上步骤,保证了用户能够快速地得到想要的图像。并且,平台在管理时也能很方便地调取文字描述所对应的图片数据。

4. 实验评估

为验证多模态教育问答平台的功能有效性、技术稳定性及教育场景适配性,本研究从后端接口可靠性、多模态功能完整性两方面展开测试,具体过程与结果如下。

4.1. 后端测试

在完成后端功能的开发后,首先使用Postman工具进行测试。通过检查实际结果是否与预期结果相符,验证后端会话的添加、删除、查询以及信息添加的功能是否成功实现,测试结果见表1

Table 1. Backend test result data

1. 后端测试结果数据

测试场景

测试方法

预期结果

实际结果

会话添加

POST/session/add

数据库中新增对应的会话记录

符合预期

会话查询

GET/session/all

返回的列表中包含所有已添加的会话

符合预期

会话删除

POST/session/delete

数据库中所对应记录被移除

符合预期

消息添加

POST/session/message/add

消息能正确关联至指定会话并存储

符合预期

在完成前端页面功能的开发后,进一步通过前端操作对后端接口进行联动测试,验证前后端数据交互的一致性,测试结果与表1的预期结果一致,表明后端接口可稳定支撑前端的需求。

4.2. 功能测试

功能测试结果见表2

Table 2. Functional test result data

2. 功能测试结果数据

测试场景

测试方法

预期结果

实际结果

基础文字问答

输入文字问题并发送

系统返回关联回答,消息列表按时间顺序更新

符合预期

图文联合问答

上传图片并附加文字提问

模型生成回答,问题与回答存至数据库中

符合预期

手势识别绘画

点击绘画按钮,绘画图片

摄像头实时捕捉,生成连续绘制的线条,支持通过手势切换画笔/橡皮擦模式

符合预期

绘画图片上传

按S键保存画布

图片上传至输入框

符合预期

语音识别

点击语音按钮录入语音

语音转为文字并填充至输入框

符合预期

以文生图

输入想生成图片的文字描述

生成符合描述的图片,图片保存至会话

符合预期

测试结果表明,各功能模块实际结果均与预期结果相符,说明多模态的文字问答、图文问答、手势识别绘画、语音识别、以文生图功能成功实现,这些功能为多模态教育问答场景提供了可靠的功能支持。

5. 讨论

5.1. 实验结果分析

基于后端接口测试和功能测试验证了多模态的协同交互。相比传统的文字问答方式,平台增加了多样的交互方式,真正解决了一些难以用文字表述的问题。利用Next.js和Python实现跨语言协作,在此过程中对多技术栈联合支撑多模态教育场景这一方法进行了验证。

5.2. 系统局限性

平台的功能虽然达到了目标要求,但还是有不足之处。一是多模态理解的深度不足,对当前多模态信息的解析依然借助于第三方API (阿里云模型),缺少了自主优化的融合算法,当在较为复杂的场景下,会存在解析错误的情况。二是教育场景适配性待强化,没有为具体的某学科做专门的设计,而是一味追求交互通用性,缺少针对具体学科进行个性化的交互设计。三是实时性需提升,手势和语音处理都有一定的延时,使得交互不够流畅。

5.3. 未来研究方向

针对上面系统的局限性,未来可以从以下方面加强研究工作:一是添加多模态融合算法,导入自主训练的多模态大模型,让其理解更低质量的图片以及多元化的混模态提问,降低对外部API的使用率。二是强化学科场景定制,根据学科特性,研发符合其本身特性的专属交互功能,结合学习行为大数据,给出个性化的问答推荐。三是提升系统性能:对手势识别和语音处理的算法进行优化,如简化不必要的运算步骤,使模型更加快速地识别到手势、理解语义,缩短中间等待时长。

6. 结论

本研究利用Spring Boot、Next.js等技术搭建平台,实现了教育问答场景相关的多模态交互功能。目前平台已经可以实现多种交互形式,能够满足教育场景下问答的基本要求,同时也证明了平台通过跨语言调用的形式将不同的技术栈集成在一起的可能性,让原本相互独立的各类交互式模块都集中在一个平台上,进一步推动多模态交互技术的发展。

未来,我们将向两个方向深化:一方面可以在教育领域进一步增加更多符合用户需求的功能,比如理科的公式推导功能,或者文科的古诗意象转化功能等;另一方面可以在系统层面加以改进,以提供更高效的性能,能够在处理大量数据的情况下也能够迅速反应,让用户体验更加流畅,满足绝大多数人的需求。

参考文献

[1] 朱珂. 网络学习空间交互性、沉浸感对学生持续使用意愿的影响研究[J]. 中国电化教育, 2017(2): 89-95.
[2] 汪维富, 毛美娟. 多模态学习分析: 理解与评价真实学习的新路向[J]. 电化教育研究, 2021, 4(22): 25-32.
[3] Drachsler, H. and Schneider, J. (2018) JCAL Special Issue on Multimodal Learning Analytics. Journal of Computer Assisted Learning, 34, 335-337.
https://doi.org/10.1111/jcal.12291
[4] Raca, M. and Dillenbourg, P. (2014) Holistic Analysis of the Classroom. Proceedings of the 2014 ACM workshop on Multimodal Learning Analytics Workshop and Grand Challenge, Istanbul, 12 November 2014, 13-20.
https://doi.org/10.1145/2666633.2666636
[5] Tan, S., Wiebrands, M., O’Halloran, K. and Wignell, P. (2020) Analysing Student Engagement with 360-Degree Videos through Multimodal Data Analytics and User Annotations. Technology, Pedagogy and Education, 29, 593-612.
https://doi.org/10.1080/1475939x.2020.1835708
[6] Olsen, J.K., Sharma, K., Rummel, N. and Aleven, V. (2020) Temporal Analysis of Multimodal Data to Predict Collaborative Learning Outcomes. British Journal of Educational Technology, 51, 1527-1547.
https://doi.org/10.1111/bjet.12982
[7] 刘清堂, 吴林静, 刘嫚, 等. 智能导师系统研究现状与发展趋势[J]. 中国电化教育, 2016(10): 39-44.
[8] Mohamed, H. and Lamia, M. (2018) Implementing Flipped Classroom That Used an Intelligent Tutoring System into Learning Process. Computers & Education, 124, 62-76.
https://doi.org/10.1016/j.compedu.2018.05.011
[9] Schez-Sobrino, S., Gmez-Portes, C., Vallejo, D., Glez-Morcillo, C. and Redondo, M.Á. (2020) An Intelligent Tutoring System to Facilitate the Learning of Programming through the Usage of Dynamic Graphic Visualizations. Applied Sciences, 10, Article 1518.
https://doi.org/10.3390/app10041518
[10] 首新, 田伟, 李健, 等. 基于过程数据的人机“虚拟代理”协作问题解决测评研究——以PISA中国四地区为例[J]. 现代教育技术, 2023, 33(10): 86-97.
[11] 禹鑫燚, 张鑫, 许成军, 等. 融合人体感知和多模态手势的人机交互方法和系统设计[J]. 高技术通讯, 2025, 35(2): 183-197.
[12] 王瀚升, 张艳瑜, 郭江真, 等. 智能助行的人机交互策略发展[J]. 科技导报, 2025, 43(13): 78-89.
[13] 闫然然. 多模态教学模式在线上中级汉语综合课中的应用研究[D]: [硕士学位论文]. 长春: 吉林外国语大学, 2025.
[14] 关玉蓉. 基于可视化平台的API接口研究[J]. 科技广场, 2015(6): 26-29.
[15] 张海洋, 成新民, 徐黄镇. 物联网电梯数据交互平台RESTful API接口设计与实现[J]. 数字技术与应用, 2022, 40(10): 171-175.
[16] 黄欣荣. 从技术创新、科学实践与生活方式看DeepSeek的哲学意义[J]. 语言与教育研究, 2025, 9(3): 5-12, 2.
[17] 宋浩翔, 张旭, 沈宏晔, 等. 基于MediaPipe的手语识别系统[J]. 物联网技术, 2025, 15(10): 4-6.
[18] 张天翼. 基于OpenCV的嵌入式平台物体跟踪系统设计[J]. 仪表技术, 2025(4): 1-4, 19.