基于React的外語趣味學習平臺設計

張馨宇 華冠萍

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

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

需求分析與功能設計

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

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

Web端平臺功能模塊設計

翻譯模塊：在此進行語言的翻譯，其中包含語言選擇框與翻譯記錄，用戶可選擇語言種類進行翻譯，也可自動檢測語言種類進行翻譯。

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

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

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

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

個人模塊：在此展示用戶的個人信息、學習情況，用戶可以更改個人信息，并退出賬號。

后臺管理模塊設計

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

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

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

翻譯管理模塊：此模塊記錄了用戶所進行的圖片識別或是單詞翻譯等結果的信息。

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

平臺實現(xiàn)

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

圖像識別

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

對于圖像的識別，主要步驟有：

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

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

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

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

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

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

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

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

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

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

不過Tesseract主要適用于文字的識別與讀取，所以對物品的讀取準確性相對來說并不是很高，所以有些識別場景難以達到理想準確率，如：大場景、果蔬圖片等。

關鍵字生成作文

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

即時聊天

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

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

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