APP下载

基于React的外语趣味学习平台设计

2022-05-30张馨宇华冠萍

计算机与网络 2022年13期
关键词:外语灰度模块

张馨宇 华冠萍

如今,在全球化和外语广泛适用的大背景下,外语教学改革成为现在的热点和难点问题。因此,利用互联网的全球性、多样性来建设一个外语教学网站很有必要。尽管依托于互联网的外语教育网站层出不穷,但当前许多的外语教育网站仅仅是把外语学习视做一门“机械的功课”,且网站教学水平良莠不齐,并没有形成有效的学习系统与环境氛围,潜移默化地增加了用户的决策成本与学习成本,使用户过早地失去了对学习的兴趣与动力,导致用户流失率居高不下。

基于以上考虑,设计并开发了基于React的外语趣味学习平台,从教学形式上极大程度地满足了当前外语教学的要求,将网络教学作为主要的外语辅助教学手段。利用网络教学的各种特点和优势,使用多模式混合创新教学模式,包括智能化图片检测、即时通信等技术,实现外语语言的情景教学,让学习过程更加轻松愉快。

需求分析与功能设计

线上教育作为一种新兴的教育方式,在近年来有着飞速的发展,相较于传统的课堂学习与纸质书籍学习,线上教育借助互联网使碎片化的时间得到了利用,个性化学习成为可能。对于用户而言,动机是学习的前提条件,在外语学习过程中,如何将动机进行持久化、将学习与生活进行关联,成为重要的关注点,学习英语的用户,需要更为便捷化、轻松化、趣味化以及实用化的学习方式。

为满足以上需求,该平台从用户与管理者角度出发,设计出Web应用端与后台管理两大系统。其中Web应用端的目标是满足用户对于个性化、趣味化语言学习的需求,并且能够与其他用户建立沟通链接,使其能够在平台上完成学习、自测、反馈的整个过程。后台管理系统的目标是方便管理者管理平台信息、定期对题库和单词进行更新,并对不良用户与信息及时进行处理。

Web端平台功能模块设计

翻译模块:在此进行语言的翻译,其中包含语言选择框与翻译记录,用户可选择语言种类进行翻译,也可自动检测语言种类进行翻译。

讨论模块:在此进行学习点对点的交流与沟通,用户可发送语言、文字和表情,可查询历史记录与聊天好友。

发表模块:在此进行点对面的信息传送,与讨论模块不同,用户在此可发送图片以及文章,也可查看最新资讯、热点内容、收藏和发布内容。与讨论模块不同,此处为公开性的论坛,论坛内容将由系统筛选后推荐给用户,用户可对相关内容进行收藏与评论。

测试模块:在此进行语言学习内容的自测,此模块包含3个子模块,分别为:打卡模块、分类模块以及目的模块。用户进行自测单词、训练作文和听力学习,完成后即可打卡。

识图模块:在此进行识别图片的内容,并把内容进行外语转换。

个人模块:在此展示用户的个人信息、学习情况,用户可以更改个人信息,并退出账号。

后台管理模块设计

用户管理模块:管理员在此进行用户的增删改查,对信息进行统一的管理与修改。

动态管理模块:用户所发布的动态在此进行展示,管理员可以对敏感信息进行删除等处理。

题库管理模块:此模块分为3个子模块,分别为单词模块、阅读模块以及听力模块,管理员在此进行题库的增加与修改。

翻译管理模块:此模块记录了用户所进行的图片识别或是单词翻译等结果的信息。

图库管理模块:此模块用来存放图库路径。

平台实现

平台的实现与具体内容分为数据库的设计与实现、前端设计与实现、后端数据处理、核心功能的设计与实现、服务器的搭建与部署。在数据库的选择中,选择了比较稳妥的MySQL来作为项目的数据库。

图像识别

在识别图片上选用node作为图像处理的框架。以使用node作为专门处理识图的原因是为了减轻主功能的压力,因为文件的读取操作相对来说耗时耗力,将此功能从spring boot中脱离出来,用多台服务器模拟微服务,可减轻各自的压力、提升允许效率与速度,更加稳定与快速。

对于图像的识别,主要步骤有:

图片灰度化:灰度就是没有色彩, RGB色彩分量全部相等。如果是一个二值灰度图像,它的像素值只能為0或1,它的灰度级为2,如果RGB为100,100,100就代表灰度为100,RGB为50,50,50代表灰度为50。现在网络上大部分的彩色图像都是采用RGB颜色模式,处理图像的时候,要分别对RGB三种分量进行处理,实际上RGB并不能反映图像的形态特征,只是从光学的原理上进行颜色的调配。简而言之就是将彩色图片处理为黑白图片。

灰度图片二值化:二值化就是让图像的像素点矩阵中的每个像素点的灰度值为0(黑色)或者255(白色),也就是让整个图像呈现只有黑和白的效果。在灰度化的图像中灰度值的范围为0~255,在二值化后的图像中的灰度值范围是0或者255。

Node.js保存图片数据为图片文件:这一步比较简单,只需要将数据存储在对应文件夹下即可,为的是实现数据的持久化。

识别图片特征点匹配度:依据用户所选的图片内容种类选择一个大的特征源进行匹配,当匹配度达到阈值时,便可将响应内容返回。

上面步骤都只是最简单的介绍,前面3步都是为第4步做铺垫的必要步骤,重点在于第4步的特征点获取与记录。在第4步中大致需要有:

1. mages:Node.js轻量级跨平台图像编码库,用于处理下载下来的图片;

2. tesseract.js:纯JS实现的OCR(光学字符识别)工具,用于图像内容识别;

3. chalk:让命令行内容样式好看;

4. yargs:命令行参数解析器;

5. socks5-http-client:SOCKS v5,用于设置代理,在需要拉取某些不能直接访问的资源时使用。

不过Tesseract主要适用于文字的识别与读取,所以对物品的读取准确性相对来说并不是很高,所以有些识别场景难以达到理想准确率,如:大场景、果蔬图片等。

关键字生成作文

关键字生成作文与图像识别、翻译,搭配实现图像识别成单词后,生成相关文章并翻译成为英文作文的功能。大致实现过程是利用大量的新闻和文章,以文章的主题,前后句的连接词,出现次数比较多的关键词和段落数作为权重,来不断校准,最终得到一篇相对来说比较合理的文章。前期的工作量其实非常巨大,为了生成的文章且语句不那么单一,需要的训练量十分巨大,这里通过人工生成数据集来进行训练,最终实现了一个较为合理结果。

即时聊天

在即时聊天中,主要是需要实现服务端\客户端的双向通信。知道需求后就明确目标。WebSocket是一种在单个TCP连接上进行全双工通信的协议,能够协助实现服务端到客户端的通信。

以上代码是功能最简单的服务端代码,在实际过程中比这复杂得多。对于基础的双向通信,只需要引入响应的文件包,再进行实例化即可开启双向通信。在聊天室中,目前只需要实现用户与用户之间能够无障碍通信,利用实例化出来的soket监听messages动作做出接受与响应的动作即可完成与客户端的双向数据通信。

在众多技术中,找到一个合适的平衡点,用各种较新的技术来搭建一个相比视频、听力、答题更加智能的平台,帮助大家能够更加轻松地学习。在平台搭建技术上,使用React、Spring Boot和MySql、WebSocket,在图像识别和关键词生成文章中,使用了神经网络。通过实测,虽然准确度可能并没有目前商用接口那么高,但是日常大部分物体和关键词都能够鉴别并且生成相关文章(2021R421024)。

猜你喜欢

外语灰度模块
28通道收发处理模块设计
采用改进导重法的拓扑结构灰度单元过滤技术
“选修3—3”模块的复习备考
基于灰度拉伸的图像水位识别方法研究
外语教育:“高大上”+“接地气”
基于最大加权投影求解的彩色图像灰度化对比度保留算法
基于灰度线性建模的亚像素图像抖动量计算
大山教你学外语
大山教你学外语
集成水空中冷器的进气模块