基于React的外語趣味學(xué)習(xí)平臺(tái)設(shè)計(jì)

張馨宇 華冠萍

如今，在全球化和外語廣泛適用的大背景下，外語教學(xué)改革成為現(xiàn)在的熱點(diǎn)和難點(diǎn)問題。因此，利用互聯(lián)網(wǎng)的全球性、多樣性來建設(shè)一個(gè)外語教學(xué)網(wǎng)站很有必要。盡管依托于互聯(lián)網(wǎng)的外語教育網(wǎng)站層出不窮，但當(dāng)前許多的外語教育網(wǎng)站僅僅是把外語學(xué)習(xí)視做一門“機(jī)械的功課”，且網(wǎng)站教學(xué)水平良莠不齊，并沒有形成有效的學(xué)習(xí)系統(tǒng)與環(huán)境氛圍，潛移默化地增加了用戶的決策成本與學(xué)習(xí)成本，使用戶過早地失去了對(duì)學(xué)習(xí)的興趣與動(dòng)力，導(dǎo)致用戶流失率居高不下。

基于以上考慮，設(shè)計(jì)并開發(fā)了基于React的外語趣味學(xué)習(xí)平臺(tái)，從教學(xué)形式上極大程度地滿足了當(dāng)前外語教學(xué)的要求，將網(wǎng)絡(luò)教學(xué)作為主要的外語輔助教學(xué)手段。利用網(wǎng)絡(luò)教學(xué)的各種特點(diǎn)和優(yōu)勢(shì)，使用多模式混合創(chuàng)新教學(xué)模式，包括智能化圖片檢測(cè)、即時(shí)通信等技術(shù)，實(shí)現(xiàn)外語語言的情景教學(xué)，讓學(xué)習(xí)過程更加輕松愉快。

需求分析與功能設(shè)計(jì)

線上教育作為一種新興的教育方式，在近年來有著飛速的發(fā)展，相較于傳統(tǒng)的課堂學(xué)習(xí)與紙質(zhì)書籍學(xué)習(xí)，線上教育借助互聯(lián)網(wǎng)使碎片化的時(shí)間得到了利用，個(gè)性化學(xué)習(xí)成為可能。對(duì)于用戶而言，動(dòng)機(jī)是學(xué)習(xí)的前提條件，在外語學(xué)習(xí)過程中，如何將動(dòng)機(jī)進(jìn)行持久化、將學(xué)習(xí)與生活進(jìn)行關(guān)聯(lián)，成為重要的關(guān)注點(diǎn)，學(xué)習(xí)英語的用戶，需要更為便捷化、輕松化、趣味化以及實(shí)用化的學(xué)習(xí)方式。

為滿足以上需求，該平臺(tái)從用戶與管理者角度出發(fā)，設(shè)計(jì)出Web應(yīng)用端與后臺(tái)管理兩大系統(tǒng)。其中Web應(yīng)用端的目標(biāo)是滿足用戶對(duì)于個(gè)性化、趣味化語言學(xué)習(xí)的需求，并且能夠與其他用戶建立溝通鏈接，使其能夠在平臺(tái)上完成學(xué)習(xí)、自測(cè)、反饋的整個(gè)過程。后臺(tái)管理系統(tǒng)的目標(biāo)是方便管理者管理平臺(tái)信息、定期對(duì)題庫和單詞進(jìn)行更新，并對(duì)不良用戶與信息及時(shí)進(jìn)行處理。

Web端平臺(tái)功能模塊設(shè)計(jì)

翻譯模塊：在此進(jìn)行語言的翻譯，其中包含語言選擇框與翻譯記錄，用戶可選擇語言種類進(jìn)行翻譯，也可自動(dòng)檢測(cè)語言種類進(jìn)行翻譯。

討論模塊：在此進(jìn)行學(xué)習(xí)點(diǎn)對(duì)點(diǎn)的交流與溝通，用戶可發(fā)送語言、文字和表情，可查詢歷史記錄與聊天好友。

發(fā)表模塊：在此進(jìn)行點(diǎn)對(duì)面的信息傳送，與討論模塊不同，用戶在此可發(fā)送圖片以及文章，也可查看最新資訊、熱點(diǎn)內(nèi)容、收藏和發(fā)布內(nèi)容。與討論模塊不同，此處為公開性的論壇，論壇內(nèi)容將由系統(tǒng)篩選后推薦給用戶，用戶可對(duì)相關(guān)內(nèi)容進(jìn)行收藏與評(píng)論。

測(cè)試模塊：在此進(jìn)行語言學(xué)習(xí)內(nèi)容的自測(cè)，此模塊包含3個(gè)子模塊，分別為：打卡模塊、分類模塊以及目的模塊。用戶進(jìn)行自測(cè)單詞、訓(xùn)練作文和聽力學(xué)習(xí)，完成后即可打卡。

識(shí)圖模塊：在此進(jìn)行識(shí)別圖片的內(nèi)容，并把內(nèi)容進(jìn)行外語轉(zhuǎn)換。

個(gè)人模塊：在此展示用戶的個(gè)人信息、學(xué)習(xí)情況，用戶可以更改個(gè)人信息，并退出賬號(hào)。

后臺(tái)管理模塊設(shè)計(jì)

用戶管理模塊：管理員在此進(jìn)行用戶的增刪改查，對(duì)信息進(jìn)行統(tǒng)一的管理與修改。

動(dòng)態(tài)管理模塊：用戶所發(fā)布的動(dòng)態(tài)在此進(jìn)行展示，管理員可以對(duì)敏感信息進(jìn)行刪除等處理。

題庫管理模塊：此模塊分為3個(gè)子模塊，分別為單詞模塊、閱讀模塊以及聽力模塊，管理員在此進(jìn)行題庫的增加與修改。

翻譯管理模塊：此模塊記錄了用戶所進(jìn)行的圖片識(shí)別或是單詞翻譯等結(jié)果的信息。

圖庫管理模塊：此模塊用來存放圖庫路徑。

平臺(tái)實(shí)現(xiàn)

平臺(tái)的實(shí)現(xiàn)與具體內(nèi)容分為數(shù)據(jù)庫的設(shè)計(jì)與實(shí)現(xiàn)、前端設(shè)計(jì)與實(shí)現(xiàn)、后端數(shù)據(jù)處理、核心功能的設(shè)計(jì)與實(shí)現(xiàn)、服務(wù)器的搭建與部署。在數(shù)據(jù)庫的選擇中，選擇了比較穩(wěn)妥的MySQL來作為項(xiàng)目的數(shù)據(jù)庫。

圖像識(shí)別

在識(shí)別圖片上選用node作為圖像處理的框架。以使用node作為專門處理識(shí)圖的原因是為了減輕主功能的壓力，因?yàn)槲募淖x取操作相對(duì)來說耗時(shí)耗力，將此功能從spring boot中脫離出來，用多臺(tái)服務(wù)器模擬微服務(wù)，可減輕各自的壓力、提升允許效率與速度，更加穩(wěn)定與快速。

對(duì)于圖像的識(shí)別，主要步驟有：

圖片灰度化：灰度就是沒有色彩， RGB色彩分量全部相等。如果是一個(gè)二值灰度圖像，它的像素值只能為0或1，它的灰度級(jí)為2，如果RGB為100，100，100就代表灰度為100，RGB為50，50，50代表灰度為50?，F(xiàn)在網(wǎng)絡(luò)上大部分的彩色圖像都是采用RGB顏色模式，處理圖像的時(shí)候，要分別對(duì)RGB三種分量進(jìn)行處理，實(shí)際上RGB并不能反映圖像的形態(tài)特征，只是從光學(xué)的原理上進(jìn)行顏色的調(diào)配。簡而言之就是將彩色圖片處理為黑白圖片。

灰度圖片二值化：二值化就是讓圖像的像素點(diǎn)矩陣中的每個(gè)像素點(diǎn)的灰度值為0（黑色）或者255（白色），也就是讓整個(gè)圖像呈現(xiàn)只有黑和白的效果。在灰度化的圖像中灰度值的范圍為0～255，在二值化后的圖像中的灰度值范圍是0或者255。

Node.js保存圖片數(shù)據(jù)為圖片文件：這一步比較簡單，只需要將數(shù)據(jù)存儲(chǔ)在對(duì)應(yīng)文件夾下即可，為的是實(shí)現(xiàn)數(shù)據(jù)的持久化。

識(shí)別圖片特征點(diǎn)匹配度：依據(jù)用戶所選的圖片內(nèi)容種類選擇一個(gè)大的特征源進(jìn)行匹配，當(dāng)匹配度達(dá)到閾值時(shí)，便可將響應(yīng)內(nèi)容返回。

上面步驟都只是最簡單的介紹，前面3步都是為第4步做鋪墊的必要步驟，重點(diǎn)在于第4步的特征點(diǎn)獲取與記錄。在第4步中大致需要有：

1. mages：Node.js輕量級(jí)跨平臺(tái)圖像編碼庫，用于處理下載下來的圖片；

2. tesseract.js：純JS實(shí)現(xiàn)的OCR（光學(xué)字符識(shí)別）工具，用于圖像內(nèi)容識(shí)別；

3. chalk：讓命令行內(nèi)容樣式好看；

4. yargs：命令行參數(shù)解析器；

5. socks5-http-client：SOCKS v5，用于設(shè)置代理，在需要拉取某些不能直接訪問的資源時(shí)使用。

不過Tesseract主要適用于文字的識(shí)別與讀取，所以對(duì)物品的讀取準(zhǔn)確性相對(duì)來說并不是很高，所以有些識(shí)別場(chǎng)景難以達(dá)到理想準(zhǔn)確率，如：大場(chǎng)景、果蔬圖片等。

關(guān)鍵字生成作文

關(guān)鍵字生成作文與圖像識(shí)別、翻譯，搭配實(shí)現(xiàn)圖像識(shí)別成單詞后，生成相關(guān)文章并翻譯成為英文作文的功能。大致實(shí)現(xiàn)過程是利用大量的新聞和文章，以文章的主題，前后句的連接詞，出現(xiàn)次數(shù)比較多的關(guān)鍵詞和段落數(shù)作為權(quán)重，來不斷校準(zhǔn)，最終得到一篇相對(duì)來說比較合理的文章。前期的工作量其實(shí)非常巨大，為了生成的文章且語句不那么單一，需要的訓(xùn)練量十分巨大，這里通過人工生成數(shù)據(jù)集來進(jìn)行訓(xùn)練，最終實(shí)現(xiàn)了一個(gè)較為合理結(jié)果。

即時(shí)聊天

在即時(shí)聊天中，主要是需要實(shí)現(xiàn)服務(wù)端＼客戶端的雙向通信。知道需求后就明確目標(biāo)。WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議，能夠協(xié)助實(shí)現(xiàn)服務(wù)端到客戶端的通信。

以上代碼是功能最簡單的服務(wù)端代碼，在實(shí)際過程中比這復(fù)雜得多。對(duì)于基礎(chǔ)的雙向通信，只需要引入響應(yīng)的文件包，再進(jìn)行實(shí)例化即可開啟雙向通信。在聊天室中，目前只需要實(shí)現(xiàn)用戶與用戶之間能夠無障礙通信，利用實(shí)例化出來的soket監(jiān)聽messages動(dòng)作做出接受與響應(yīng)的動(dòng)作即可完成與客戶端的雙向數(shù)據(jù)通信。

在眾多技術(shù)中，找到一個(gè)合適的平衡點(diǎn)，用各種較新的技術(shù)來搭建一個(gè)相比視頻、聽力、答題更加智能的平臺(tái)，幫助大家能夠更加輕松地學(xué)習(xí)。在平臺(tái)搭建技術(shù)上，使用React、Spring Boot和MySql、WebSocket，在圖像識(shí)別和關(guān)鍵詞生成文章中，使用了神經(jīng)網(wǎng)絡(luò)。通過實(shí)測(cè)，雖然準(zhǔn)確度可能并沒有目前商用接口那么高，但是日常大部分物體和關(guān)鍵詞都能夠鑒別并且生成相關(guān)文章（2021R421024）。