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

张馨宇 华冠萍

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

基于以上考虑，设计并开发了基于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）。