refactor: Add comments & optimize code

The key change is replacing "d1 = load_freq_history(path_prefix + 'static/frequency/ferquency.p)" with "d1 = load_freq_history(user_word_list)"
in function get_today_article() from Article.py.  Now, with a user_word_list of size about 500, the next article can be loaded within 100ms.
The new d1 is much smaller than the old one, therefore the following computation "d3 = get_difficulty_level_for_user(d1, d2)" is much faster.
The students did not feel that loading next article is slow; this is because their frequency.p is quite small.

Also log information in app/log.txt

.gitignore

@@ -2,12 +2,16 @@
 venv/
 app/__init__.py
 app/__pycache__/
+.DS_Store
+app/.DS_Store
 app/sqlite_commands.py
 app/static/usr/*.jpg
 app/static/img/
 app/static/frequency/frequency_*.pickle
 app/static/frequency/frequency.p
-app/static/wordfreqapp.db
+app/wordfreqapp.db
+app/db/wordfreqapp.db
 app/static/donate-the-author.jpg
 app/static/donate-the-author-hidden.jpg
-app/model/__pycache__/
+app/model/__pycache__/
+app/log.txt

Dockerfile

@@ -1,4 +1,5 @@
-FROM tiangolo/uwsgi-nginx-flask:python3.6
-COPY requirements.txt /app
-RUN pip3 install -r requirements.txt -i https://mirrors.aliyun.com/pypi/simple/
-COPY ./app /app
+FROM tiangolo/uwsgi-nginx-flask:python3.8-alpine
+COPY requirements.txt /tmp
+COPY ./app/ /app/
+RUN pip3 install -U pip -i https://mirrors.aliyun.com/pypi/simple/
+RUN pip3 install -r /tmp/requirements.txt -i https://mirrors.aliyun.com/pypi/simple/

Jenkinsfile

@@ -10,8 +10,8 @@ pipeline {
     stages {
         stage('MakeDatabasefile') {
 	    steps {
-	        sh 'touch ./app/static/wordfreqapp.db && rm -f ./app/static/wordfreqapp.db' 
-	        sh 'cat ./app/static/wordfreqapp.sql | sqlite3 ./app/static/wordfreqapp.db'
+	        sh 'touch ./app/wordfreqapp.db && rm -f ./app/wordfreqapp.db' 
+	        sh 'cat ./app/static/wordfreqapp.sql | sqlite3 ./app/wordfreqapp.db'
 	    }
 	}
         stage('BuildIt') {

README.md

@@ -61,15 +61,15 @@ My steps for deploying English on a Ubuntu server.
 
 
 All articles are stored in the `article` table in a SQLite file called
-`app/static/wordfreqapp.db`.
+`app/db/wordfreqapp.db`.
 
 ### Adding new articles
 
-To add articles, open and edit `app/static/wordfreqapp.db` using DB Browser for SQLite (https://sqlitebrowser.org).
+To add articles, open and edit `app/db/wordfreqapp.db` using DB Browser for SQLite (https://sqlitebrowser.org).
 
 ### Extending an account's expiry date
 
-By default, an account's expiry is 30 days after first sign-up.  To extend account's expiry date, open and edit `user` table in `app/static/wordfreqapp.db`.  Simply update field `expiry_date`.
+By default, an account's expiry is 30 days after first sign-up.  To extend account's expiry date, open and edit `user` table in `app/db/wordfreqapp.db`.  Simply update field `expiry_date`.
 
 ### Exporting the database
 
@@ -95,7 +95,7 @@ sqlite3 wordfreqapp.db`.  Delete wordfreqapp.db first if it exists.
 ### Uploading wordfreqapp.db to the server
 
 
-`pscp wordfreqapp.db lanhui@118.*.*.118:/home/lanhui/englishpal2/EnglishPal/app/static`
+`pscp wordfreqapp.db lanhui@118.*.*.118:/home/lanhui/englishpal2/EnglishPal/app/db/`
 
 
 

app/Article.py

@@ -1,6 +1,5 @@
 from WordFreq import WordFreq
 from wordfreqCMD import youdao_link, sort_in_descending_order
-from UseSqlite import InsertQuery, RecordQuery
 import pickle_idea, pickle_idea2
 import os
 import random, glob
@@ -8,18 +7,15 @@ import hashlib
 from datetime import datetime
 from flask import Flask, request, redirect, render_template, url_for, session, abort, flash, get_flashed_messages
 from difficulty import get_difficulty_level_for_user, text_difficulty_level, user_difficulty_level
+from model.article import get_all_articles, get_article_by_id, get_number_of_articles
+import logging
 
-
-path_prefix = '/var/www/wordfreq/wordfreq/'
-path_prefix = './'  # comment this line in deployment
+path_prefix = './'
+db_path_prefix = './db/'  # comment this line in deployment
 
 
 def total_number_of_essays():
-    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
-    rq.instructions("SELECT * FROM article")
-    rq.do()
-    result = rq.get_results()
-    return len(result)
+    return get_number_of_articles()
 
 
 def get_article_title(s):
@@ -33,32 +29,36 @@ def get_article_body(s):
 
 
 def get_today_article(user_word_list, visited_articles):
-    rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
     if visited_articles is None:
         visited_articles = {
             "index" : 0,  # 为 article_ids 的索引
             "article_ids": []  # 之前显示文章的id列表，越后越新
         }
     if visited_articles["index"] > len(visited_articles["article_ids"])-1:  # 生成新的文章，因此查找所有的文章
-        rq.instructions("SELECT * FROM article")
+        result = get_all_articles()
     else:  # 生成阅读过的文章，因此查询指定 article_id 的文章
         if visited_articles["article_ids"][visited_articles["index"]] == 'null':  # 可能因为直接刷新页面导致直接去查询了'null'，因此当刷新的页面的时候，需要直接进行“上一篇”操作
             visited_articles["index"] -= 1
             visited_articles["article_ids"].pop()
-        rq.instructions('SELECT * FROM article WHERE article_id=%d' % (visited_articles["article_ids"][visited_articles["index"]]))
-    rq.do()
-    result = rq.get_results()
+        article_id = visited_articles["article_ids"][visited_articles["index"]]
+        result = get_article_by_id(article_id)
     random.shuffle(result)
 
     # Choose article according to reader's level
-    d1 = load_freq_history(path_prefix + 'static/frequency/frequency.p')
+    logging.debug('* get_today_article(): start d1 = ... ')
+    d1 = load_freq_history(user_word_list)
     d2 = load_freq_history(path_prefix + 'static/words_and_tests.p')
+    logging.debug(' ... get_today_article(): get_difficulty_level_for_user() start')
     d3 = get_difficulty_level_for_user(d1, d2)
+    logging.debug(' ... get_today_article(): done')
 
     d = None
     result_of_generate_article = "not found"
+
     d_user = load_freq_history(user_word_list)
+    logging.debug('* get_today_article(): user_difficulty_level() start')
     user_level = user_difficulty_level(d_user, d3)  # more consideration as user's behaviour is dynamic. Time factor should be considered.
+    logging.debug('* get_today_article(): done')
     text_level = 0
     if visited_articles["index"] > len(visited_articles["article_ids"])-1:  # 生成新的文章
         amount_of_visited_articles = len(visited_articles["article_ids"])
@@ -87,8 +87,8 @@ def get_today_article(user_word_list, visited_articles):
     today_article = None
     if d:
         today_article = {
-            "user_level": '%4.2f' % user_level,
-            "text_level": '%4.2f' % text_level,
+            "user_level": '%4.1f' % user_level,
+            "text_level": '%4.1f' % text_level,
             "date": d['date'],
             "article_title": get_article_title(d['text']),
             "article_body": get_article_body(d['text']),

app/Login.py

@@ -1,7 +1,6 @@
 import hashlib
 import string
 from datetime import datetime, timedelta
-from UseSqlite import InsertQuery, RecordQuery
 
 def md5(s):
     '''

app/UseSqlite.py

@@ -1,87 +0,0 @@
-###########################################################################
-# Copyright 2019 (C) Hui Lan <hui.lan@cantab.net>
-# Written permission must be obtained from the author for commercial uses.
-###########################################################################
-
-
-# Reference: Dusty Phillips.  Python 3 Objected-oriented Programming Second Edition. Pages 326-328.
-# Copyright (C) 2019 Hui Lan
-
-import sqlite3
-
-class Sqlite3Template:
-    def __init__(self, db_fname):
-        self.db_fname = db_fname
-
-    def connect(self, db_fname):
-        self.conn = sqlite3.connect(self.db_fname)
-
-    def instructions(self, query_statement):
-        raise NotImplementedError()
-
-    def operate(self):
-        self.conn.row_factory = sqlite3.Row
-        self.results = self.conn.execute(self.query) # self.query is to be given in the child classes
-        self.conn.commit()
-
-    def format_results(self):
-        raise NotImplementedError()
-
-    def do(self):
-        self.connect(self.db_fname)
-        self.instructions(self.query)
-        self.operate()
-
-    def instructions_with_parameters(self, query_statement, parameters):
-        self.query = query_statement
-        self.parameters = parameters
-
-    def do_with_parameters(self):
-        self.connect(self.db_fname)
-        self.instructions_with_parameters(self.query, self.parameters)
-        self.operate_with_parameters()
-
-    def operate_with_parameters(self):
-        self.conn.row_factory = sqlite3.Row
-        self.results = self.conn.execute(self.query, self.parameters) # self.query is to be given in the child classes
-        self.conn.commit()
-
-
-class InsertQuery(Sqlite3Template):
-    def instructions(self, query):
-        self.query = query
-
-
-class RecordQuery(Sqlite3Template):
-    def instructions(self, query):
-        self.query = query
-
-    def format_results(self):
-        output = []
-        for row_dict in self.results.fetchall():
-            lst = []
-            for k in dict(row_dict):
-                lst.append( row_dict[k] )
-            output.append(', '.join(lst))
-        return '\n\n'.join(output)
-
-    def get_results(self):
-        result = []
-        for row_dict in self.results.fetchall():
-            result.append( dict(row_dict) )
-        return result
-
-
-
-if __name__ == '__main__':
-
-    #iq = InsertQuery('RiskDB.db')
-    #iq.instructions("INSERT INTO inspection Values ('FoodSupplies', 'RI2019051301', '2019-05-13', '{}')")
-    #iq.do()
-    #iq.instructions("INSERT INTO inspection Values ('CarSupplies', 'RI2019051302', '2019-05-13', '{[{\"risk_name\":\"elevator\"}]}')")
-    #iq.do()
-
-    rq = RecordQuery('wordfreqapp.db')
-    rq.instructions("SELECT * FROM article WHERE level=3")
-    rq.do()
-    #print(rq.format_results())

app/account_service.py

@@ -1,4 +1,5 @@
 from flask import *
+from markupsafe import escape
 from Login import check_username_availability, verify_user, add_user, get_expiry_date, change_password, WarningMessage
 
 

app/admin_service.py

@@ -1,5 +1,6 @@
 # System Library
 from flask import *
+from markupsafe import escape
 
 # Personal library
 from Yaml import yml
@@ -37,6 +38,22 @@ def admin():
 
 @adminService.route("/admin/article", methods=["GET", "POST"])
 def article():
+
+    def _make_title_and_content(article_lst):
+        for article in article_lst:
+            text = escape(article.text) # Fix XSS vulnerability, contributed by Xu Xuan
+            article.title = text.split("\n")[0]
+            article.content = '<br/>'.join(text.split("\n")[1:])
+
+
+    def _update_context():
+        article_len = get_number_of_articles()
+        context["article_number"] = article_len
+        context["text_list"] = get_page_articles(_cur_page, _page_size)
+        _articles = get_page_articles(_cur_page, _page_size)
+        _make_title_and_content(_articles)
+        context["text_list"] = _articles
+
     global _cur_page, _page_size
 
     is_admin = check_is_admin()
@@ -44,20 +61,15 @@ def article():
         return is_admin
 
     _article_number = get_number_of_articles()
+
     try:
-        _page_size = min(
-            max(1, int(request.args.get("size", 5))), _article_number
-        )  # 最小的size是1
-        _cur_page = min(
-            max(1, int(request.args.get("page", 1))), _article_number // _page_size + (_article_number % _page_size > 0)
-        )  # 最小的page是1
+        _page_size = min(max(1, int(request.args.get("size", 5))), _article_number)  # 最小的size是1
+        _cur_page = min(max(1, int(request.args.get("page", 1))), _article_number // _page_size + (_article_number % _page_size > 0))  # 最小的page是1
     except ValueError:
-        return "page parmas must be int!"
-    
+        return "page parameters must be integer!"
+
     _articles = get_page_articles(_cur_page, _page_size)
-    for article in _articles:   # 获取每篇文章的title
-        article.title = article.text.split("\n")[0]
-        article.content = '<br/>'.join(article.text.split("\n")[1:])
+    _make_title_and_content(_articles)
     
     context = {
         "article_number": _article_number,
@@ -67,23 +79,16 @@ def article():
         "username": session.get("username"),
     }
 
-    def _update_context():
-        article_len = get_number_of_articles()
-        context["article_number"] = article_len
-        context["text_list"] = get_page_articles(_cur_page, _page_size)
-        _articles = get_page_articles(_cur_page, _page_size)
-        for article in _articles:   # 获取每篇文章的title
-            article.title = article.text.split("\n")[0]
-        context["text_list"] = _articles
 
     if request.method == "GET":
         try:
             delete_id = int(request.args.get("delete_id", 0))
         except:
-            return "Delete article ID must be int!"
+            return "Delete article ID must be integer!"
         if delete_id:  # delete article
             delete_article_by_id(delete_id)
             _update_context()
+
     elif request.method == "POST":
         data = request.form
         content = data.get("content", "")
@@ -97,6 +102,7 @@ def article():
             _update_context()
             title = content.split('\n')[0]
             flash(f'Article added. Title: {title}')
+
     return render_template("admin_manage_article.html", **context)
 
 

app/db/README.txt

@@ -0,0 +1 @@
+Put wordfreqapp.db here

app/difficulty.py

@@ -18,6 +18,7 @@ def load_record(pickle_fname):
     return d
 
 
+ENGLISH_WORD_DIFFICULTY_DICT = {}
 def convert_test_type_to_difficulty_level(d):
     """
     对原本的单词库中的单词进行难度评级
@@ -39,8 +40,10 @@ def convert_test_type_to_difficulty_level(d):
         elif 'BBC' in d[k]:
             result[k] = 8
 
-    return result  # {'apple': 4, ...}
+    global ENGLISH_WORD_DIFFICULTY_DICT
+    ENGLISH_WORD_DIFFICULTY_DICT = result
 
+    return result  # {'apple': 4, ...}
 
 def get_difficulty_level_for_user(d1, d2):
     """
@@ -49,7 +52,11 @@ def get_difficulty_level_for_user(d1, d2):
     在d2的后面添加单词，没有新建一个新的字典
     """
     # TODO: convert_test_type_to_difficulty_level() should not be called every time.  Each word's difficulty level should be pre-computed.
-    d2 = convert_test_type_to_difficulty_level(d2)  # 根据d2的标记评级{'apple': 4, 'abandon': 4, ...}
+    if ENGLISH_WORD_DIFFICULTY_DICT == {}:
+        d2 = convert_test_type_to_difficulty_level(d2)  # 根据d2的标记评级{'apple': 4, 'abandon': 4, ...}
+    else:
+        d2 = ENGLISH_WORD_DIFFICULTY_DICT
+
     stemmer = snowballstemmer.stemmer('english')
 
     for k in d1:  # 用户的词

app/main.py

@@ -1,19 +1,19 @@
-#! /usr/bin/python3
-# -*- coding: utf-8 -*-
-
 ###########################################################################
 # Copyright 2019 (C) Hui Lan <hui.lan@cantab.net>
 # Written permission must be obtained from the author for commercial uses.
 ###########################################################################
-from flask import escape
+from flask import abort
+from markupsafe import escape
 from Login import *
 from Article import *
 import Yaml
 from user_service import userService
 from account_service import accountService
 from admin_service import adminService, ADMIN_NAME
+import os
+
 app = Flask(__name__)
-app.secret_key = 'lunch.time!'
+app.secret_key = os.urandom(32)
 
 # 将蓝图注册到Lab app
 app.register_blueprint(userService)
@@ -54,7 +54,6 @@ def appears_in_test(word, d):
     else:
         return ','.join(d[word])
 
-
 @app.route("/mark", methods=['GET', 'POST'])
 def mark_word():
     '''

app/model/__init__.py

@@ -1,7 +1,7 @@
 from pony.orm import *
 
 db = Database()
-db.bind("sqlite", "../static/wordfreqapp.db", create_db=True)  # bind sqlite file
+db.bind("sqlite", "../db/wordfreqapp.db", create_db=True)  # bind sqlite file
 
 
 class User(db.Entity):

app/model/article.py

@@ -7,7 +7,7 @@ def add_article(content, source="manual_input", level="5", question="No question
         Article(
             text=content,
             source=source,
-            date=datetime.now().strftime("%-d %b %Y"),  # format style of `5 Oct 2022`
+            date=datetime.now().strftime("%d %b %Y"),  # format style of `5 Oct 2022`
             level=level,
             question=question,
         )
@@ -32,3 +32,17 @@ def get_page_articles(num, size):
             x
             for x in Article.select().order_by(desc(Article.article_id)).page(num, size)
         ]
+
+
+def get_all_articles():
+    articles = []
+    with db_session:
+        for article in Article.select():
+            articles.append(article.to_dict())
+    return articles
+
+
+def get_article_by_id(article_id):
+    with db_session:
+        article = Article.get(article_id=article_id)
+    return [article.to_dict()]

app/static/config.yml

@@ -9,6 +9,7 @@ js:
     - ../static/js/jquery.js
     - ../static/js/read.js
     - ../static/js/word_operation.js
+    - ../static/js/checkboxes.js
   bottom: # 在页面加载完之后加载
     - ../static/js/fillword.js
     - ../static/js/highlight.js

app/static/js/checkboxes.js

@@ -0,0 +1,5 @@
+function toggleCheckboxSelection(checkStatus) {
+    // used in userpage_post.html
+    const checkBoxes = document.getElementsByName('marked');
+    checkBoxes.forEach((checkbox) => { checkbox.checked = checkStatus;} );
+}

app/static/js/fillword.js

@@ -1,5 +1,6 @@
-let isRead = true;
-let isChoose = true;
+// initialize from localStorage
+let isRead = localStorage.getItem('readChecked') !== 'false';  // default to true
+let isChoose = localStorage.getItem('chooseChecked') !== 'false';
 
 function getWord() {
     return window.getSelection ? window.getSelection() : document.selection.createRange().text;
@@ -11,6 +12,7 @@ function fillInWord() {
     if (!isChoose) return;
     const element = document.getElementById("selected-words");
     element.value = element.value + " " + word;
+    localStorage.setItem('selectedWords', element.value);
 }
 
 document.getElementById("text-content").addEventListener("click", fillInWord, false);
@@ -24,8 +26,15 @@ inputSlider.oninput = () => {
 
 function onReadClick() {
     isRead = !isRead;
+    localStorage.setItem('readChecked', isRead);
 }
 
 function onChooseClick() {
     isChoose = !isChoose;
+    localStorage.setItem('chooseChecked', isChoose);
+}
+
+// 如果网页刷新，停止播放声音
+if (performance.getEntriesByType("navigation")[0].type == "reload") {
+    Reader.stopRead();
 }

app/static/js/highlight.js

@@ -1,4 +1,4 @@
-let isHighlight = true;
+let isHighlight = localStorage.getItem('highlightChecked') !== 'false'; // default to true
 
 function cancelBtnHandler() {
     cancelHighlighting();
@@ -22,62 +22,38 @@ function getWord() {
 
 function highLight() {
     if (!isHighlight) return;
-    let articleContent = document.getElementById("article").innerText; //将原来的.innerText改为.innerHtml，使用innerText会把原文章中所包含的<br>标签去除，导致处理后的文章内容失去了原来的格式
+    let articleContent = document.getElementById("article").innerHTML; // innerHTML保留HTML标签来保持部分格式，且适配不同的浏览器
     let pickedWords = document.getElementById("selected-words");  // words picked to the text area
     let dictionaryWords = document.getElementById("selected-words2"); // words appearing in the user's new words list
-    let allWords = "";  //初始化allWords的值，避免进入判断后编译器认为allWords未初始化的问题
-    if(dictionaryWords != null){//增加一个判断，检查生词本里面是否为空，如果为空，allWords只添加选中的单词
-        allWords = pickedWords.value + " " + dictionaryWords.value;
-    }
-    else{
-        allWords = pickedWords.value + " ";
-    }
-    const list = allWords.split(" ");//将所有的生词放入一个list中，用于后续处理
+    let allWords = dictionaryWords === null ? pickedWords.value + " " : pickedWords.value + " " + dictionaryWords.value;
+    const list = allWords.split(" "); // 将所有的生词放入一个list中
+    let totalSet = new Set();
     for (let i = 0; i < list.length; ++i) {
-        list[i] = list[i].replace(/(^\s*)|(\s*$)/g, ""); //消除单词两边的空字符
-        list[i] = list[i].replace('|', "");
-        list[i] = list[i].replace('?', "");
-        if (list[i] !== "" && "<mark>".indexOf(list[i]) === -1 && "</mark>".indexOf(list[i]) === -1) {
-           //将文章中所有出现该单词word的地方改为："<mark>" + word + "<mark>"。 正则表达式RegExp()中，"\\b"代表单词边界匹配。
-
-            //修改代码
-            let articleContent_fb = articleContent;  //文章副本
-            while(articleContent_fb.toLowerCase().indexOf(list[i].toLowerCase()) !== -1 && list[i]!=""){
-                //找到副本中和list[i]匹配的第一个单词(第一种匹配情况),并赋值给list[i]。
-                const index = articleContent_fb.toLowerCase().indexOf(list[i].toLowerCase());
-                list[i] = articleContent_fb.substring(index, index + list[i].length);
-
-                articleContent_fb = articleContent_fb.substring(index + list[i].length);    // 使用副本中list[i]之后的子串替换掉副本
-                articleContent = articleContent.replace(new RegExp("\\b"+list[i]+"\\b","g"),"<mark>" + list[i] + "</mark>");
+        list[i] = list[i].replace(/(^\W*)|(\W*$)/g, ""); // 消除单词两边的非单词字符
+        if (list[i] != "" && !totalSet.has(list[i])) {
+            // 返回所有匹配单词的集合, 正则表达式RegExp()中, "\b"匹配一个单词的边界, g 表示全局匹配, i 表示对大小写不敏感。
+            let matches = new Set(articleContent.match(new RegExp("\\b" + list[i] + "\\b", "gi")));
+            if (matches.has("mark")) {
+                // 优先处理单词为 "mark" 的情况
+                totalSet = new Set(["mark", ...totalSet]);
             }
+            totalSet = new Set([...totalSet, ...matches]);
         }
     }
+    // 删除所有的mark标签,防止标签发生嵌套
+    articleContent = articleContent.replace(/<(mark)[^>]*>/gi, "");
+    articleContent = articleContent.replace(/<(\/mark)[^>]*>/gi, "");
+    // 将文章中所有出现该单词word的地方改为："<mark>" + word + "<mark>"。
+    for (let word of totalSet) {
+        articleContent = articleContent.replace(new RegExp("\\b" + word + "\\b", "g"), "<mark>" + word + "</mark>");
+    }
     document.getElementById("article").innerHTML = articleContent;
 }
 
 function cancelHighlighting() {
-    let articleContent = document.getElementById("article").innerText;//将原来的.innerText改为.innerHtml，原因同上
-    let pickedWords = document.getElementById("selected-words");
-    const dictionaryWords = document.getElementById("selected-words2");    
-    const list = pickedWords.value.split(" ");    
-    if (pickedWords != null) {
-        for (let i = 0; i < list.length; ++i) {
-            list[i] = list[i].replace(/(^\s*)|(\s*$)/g, "");
-            if (list[i] !== "") { //原来判断的代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
-                articleContent = articleContent.replace(new RegExp("<mark>"+list[i]+"</mark>", "g"), list[i]);
-            }
-        }
-    }
-    if (dictionaryWords != null) {
-        let list2 = pickedWords.value.split(" ");
-        for (let i = 0; i < list2.length; ++i) {
-            list2 = dictionaryWords.value.split(" ");
-            list2[i] = list2[i].replace(/(^\s*)|(\s*$)/g, "");
-            if (list2[i] !== "") { //原来代码中，替换的内容为“list[i]”这个字符串，这明显是错误的，我们需要替换的是list[i]里的内容
-                articleContent = articleContent.replace(new RegExp("<mark>"+list2[i]+"</mark>", "g"), list2[i]);
-            }
-        }
-    }
+    let articleContent = document.getElementById("article").innerHTML;
+    articleContent = articleContent.replace(/<(mark)[^>]*>/gi, "");
+    articleContent = articleContent.replace(/<(\/mark)[^>]*>/gi, "");
     document.getElementById("article").innerHTML = articleContent;
 }
 
@@ -97,6 +73,7 @@ function toggleHighlighting() {
         isHighlight = true;
         highLight();
     }
+     localStorage.setItem('highlightChecked', isHighlight);
 }
 
-showBtnHandler();
+showBtnHandler();

app/static/js/read.js

@@ -9,7 +9,7 @@ var Reader = (function() {
         msg.rate = rate;
         msg.lang = "en-US";
         msg.onboundary = ev => {
-            if (ev.name == "word") {
+            if (ev.name === "word") {
                 current_position = ev.charIndex;
             }
         }
@@ -32,4 +32,4 @@ var Reader = (function() {
         read: read,
         stopRead: stopRead
     };
-})();
+}) ();

app/static/js/word_operation.js

@@ -5,15 +5,14 @@ function familiar(theWord) {
     $.ajax({
         type:"GET",
         url:"/" + username + "/" + word + "/familiar",
-        success:function(response){
+        success:function(response) {
             let new_freq = freq - 1;
             const allow_move = document.getElementById("move_dynamiclly").checked;
             if (allow_move) {
-
                 if (new_freq <= 0) {
                     removeWord(theWord);
                 } else {
-                    renderWord({ word: theWord, freq: new_freq });
+                    renderWord({word: theWord, freq: new_freq});
                 }
             } else {
                 if(new_freq <1) {
@@ -33,11 +32,11 @@ function unfamiliar(theWord) {
     $.ajax({
         type:"GET",
         url:"/" + username + "/" + word + "/unfamiliar",
-        success:function(response){
+        success:function(response) {
             let new_freq = parseInt(freq) + 1;
             const allow_move = document.getElementById("move_dynamiclly").checked;
             if (allow_move) {
-                renderWord({ word: theWord, freq: new_freq });
+                renderWord({word: theWord, freq: new_freq});
             } else {
                 $("#freq_" + theWord).text(new_freq);
             }
@@ -51,7 +50,7 @@ function delete_word(theWord) {
     $.ajax({
         type:"GET",
         url:"/" + username + "/" + word + "/del",
-        success:function(response){
+        success:function(response) {
             const allow_move = document.getElementById("move_dynamiclly").checked;
             if (allow_move) {
                 removeWord(theWord);
@@ -114,7 +113,7 @@ function removeWord(word) {
     // 根据词频信息删除元素
     word = word.replace('&amp;', '&');
     const element_to_remove = document.getElementById(`p_${word}`);
-    if (element_to_remove != null) {
+    if (element_to_remove !== null) {
         element_to_remove.remove();
     }
 }
@@ -129,7 +128,7 @@ function renderWord(word) {
     for (const current of container.children) {
         const cur_word = parseWord(current);
         // 找到第一个词频比它小的元素，插入到这个元素前面
-        if (compareWord(cur_word, word) == -1) {
+        if (compareWord(cur_word, word) === -1) {
             container.insertBefore(new_element, current);
             inserted = true;
             break;
@@ -165,17 +164,11 @@ function elementFromString(string) {
  *  当first大于second时返回1
  */
 function compareWord(first, second) {
-    if (first.freq < second.freq) {
-        return -1;
+    if (first.freq !== second.freq) {
+        return first.freq < second.freq ? -1 : 1;
     }
-    if (first.freq > second.freq) {
-        return 1;
-    }
-    if (first.word < second.word) {
-        return -1;
-    }
-    if (first.word > second.word) {
-        return 1;
+    if (first.word !== second.word) {
+        return first.word < second.word ? -1 : 1;
     }
     return 0;
-}
+}

app/templates/login.html

@@ -1,7 +1,7 @@
 {% block body %}
 {% if session['logged_in'] %}
 
-你已登录 <a href="/{{ session['username'] }}">{{ session['username'] }}</a>。 登出点击<a href="/logout">这里</a>。
+你已登录 <a href="/{{ session['username'] }}/userpage">{{ session['username'] }}</a>。 登出点击<a href="/logout">这里</a>。
 
 {% else %}
 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
@@ -32,14 +32,13 @@
 <div class="container">
 
   <section class="signin-heading">
-    <h1>Sign In</h1>
+    <h1>Sign in</h1>
   </section>
 
   <input type="text" placeholder="用户名" class="username" id="username">
   <input type="password" placeholder="密码" class="password"  id="password">
   <button type="button" class="btn" onclick="login()">登录</button>
   <a class="signup" href="/signup">注册</a>
-
 </div>
 
 {% endif %}

app/templates/mainpage_get.html

@@ -34,9 +34,9 @@
         <div class="alert alert-success" role="alert">共有文章 <span class="badge bg-success"> {{ number_of_essays }} </span> 篇</div>
         <p>粘贴1篇文章 (English only)</p>
         <form method="post" action="/">
-            <textarea name="content" rows="10" cols="120"></textarea><br/>
+            <textarea name="content" id="article" rows="10" cols="120"></textarea><br/>
             <input type="submit" value="get文章中的词频"/>
-            <input type="reset" value="清除"/>
+            <input type="reset" value="清除" onclick="clearArticle()"/>
         </form>
         {% if d_len > 0 %}
             <p><b>最常见的词</b></p>
@@ -44,6 +44,7 @@
                 <a href="http://youdao.com/w/eng/{{x[0]}}/#keyfrom=dict2.index">{{x[0]}}</a> {{x[1]}}
             {% endfor %}
         {% endif %}
+        <p class="text-muted">Version: 20230810</p>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     </div>
     {{ yml['footer'] | safe }}
@@ -52,5 +53,22 @@
             <script src="{{ js }}" ></script>
         {% endfor %}
     {% endif %}
+<script type="text/javascript">
+    // IIFE, avoid polluting the global scope
+    (function() {
+        const articleInput = document.querySelector('#article');
+        articleInput.value = localStorage.getItem('article') || '';
+
+        articleInput.addEventListener('input', function() {
+            localStorage.setItem('article', articleInput.value);
+        });
+
+        window.clearArticle = function() {
+            localStorage.removeItem('article');
+            articleInput.value = '';
+        };
+    })();
+
+</script>
 </body>
 </html>

app/templates/signup.html

@@ -53,7 +53,7 @@ You're logged in already! <a href="/logout">Logout</a>.
 <div class="container">
 
   <section class="signin-heading">
-    <h1>Sign Up</h1>
+    <h1>Sign up</h1>
   </section>
 
   <p><input type="username" id="username" placeholder="输入用户名" class="username"></p>

app/templates/userpage_get.html

@@ -23,44 +23,34 @@
     <title>EnglishPal Study Room for {{ username }}</title>
 
     <style>
-        .shaking {
-            animation: shakes 1600ms ease-in-out;
-        }
+      .shaking {
+          animation: shakes 1600ms ease-in-out;
+      }
 
-        @keyframes shakes {
-            10%, 90% {
-                transform: translate3d(-1px, 0, 0);
-            }
-            20%, 50% {
-                transform: translate3d(+2px, 0, 0);
-            }
-            30%, 70% {
-                transform: translate3d(-4px, 0, 0);
-            }
-            40%, 60% {
-                transform: translate3d(+4px, 0, 0);
-            }
-            50% {
-                transform: translate3d(-4px, 0, 0);
-            }
-        }
+      @keyframes shakes {
+          10%, 90% { transform: translate3d(-1px, 0, 0); }
+          20%, 50% { transform: translate3d(+2px, 0, 0); }
+          30%, 70% { transform: translate3d(-4px, 0, 0); }
+          40%, 60% { transform: translate3d(+4px, 0, 0); }
+          50% { transform: translate3d(-4px, 0, 0); }
+      }
 
-        .lead {
-            font-size: 22px;
-            font-family: Helvetica, sans-serif;
-            white-space: pre-wrap;
-        }
+      .lead{
+          font-size: 22px;
+          font-family: Helvetica, sans-serif;
+          white-space: pre-wrap;
+      }
 
-        .arrow {
-            padding: 0;
-            font-size: 20px;
-            line-height: 21px;
-            display: inline-block;
-        }
+      .arrow {
+	  padding: 0;
+	  font-size: 20px;
+	  line-height: 21px;
+	  display: inline-block;
+      }
 
-        .arrow:hover {
-            cursor: pointer;
-        }
+      .arrow:hover {
+	  cursor: pointer;
+      }
 
     </style>
 </head>
@@ -69,83 +59,72 @@
     <p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
 
         {% if username ==  admin_name %}
-            <a class="btn btn-secondary" href="/admin" role="button" onclick="stopRead()">管理</a>
+        <a class="btn btn-secondary" href="/admin" role="button" onclick="stopRead()">管理</a>
         {% endif %}
         <a id="quit" class="btn btn-secondary" href="/logout" role="button" onclick="stopRead()">退出</a>
         <a class="btn btn-secondary" href="/reset" role="button" onclick="stopRead()">重设密码</a>
 
     </p>
     {% for message in get_flashed_messages() %}
-        <div class="alert alert-warning alert-dismissible fade show" role="alert">
-            {{ message }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
+    <div class="alert alert-warning alert-dismissible fade show" role="alert">
+	{{ message }}
+	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
     {% endfor %}
 
-    <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()"
-            title="下一篇 Next Article">⇨
-    </button>
-    <button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none"
-            title="上一篇 Previous Article">⇦
-    </button>
+        <button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 Next Article">⇨</button>
+        <button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none" title="上一篇 Previous Article">⇦</button>
 
     <p><b>阅读文章并回答问题</b></p>
     <div id="text-content">
         <div id="found">
-            <div class="alert alert-success" role="alert">According to your word list, your level is <span
-                    class="text-decoration-underline" id="user_level">{{ today_article["user_level"] }}</span> and we
-                have chosen an article with a difficulty level of <span class="text-decoration-underline"
-                                                                        id="text_level">{{ today_article["text_level"] }}</span>
-                for you.
-            </div>
-            <p class="text-muted" id="date">Article added on: {{ today_article["date"] }}</p><br/>
+            <div class="alert alert-success" role="alert">According to your word list, your level is <span class="text-decoration-underline" id="user_level">{{ today_article["user_level"] }}</span>  and we have chosen an article with a difficulty level of <span class="text-decoration-underline" id="text_level">{{ today_article["text_level"] }}</span> for you.</div>
+                <p class="text-muted" id="date">Article added on: {{ today_article["date"] }}</p><br/>
             <div class="p-3 mb-2 bg-light text-dark" style="margin: 0 0.5%;"><br/>
-                <p class="display-6" id="article_title">{{ today_article["article_title"] }}</p><br/>
-                <p class="lead"><font id="article">{{ today_article["article_body"] }}</font></p><br/>
-                <div>
-                    <p><small class="text-muted" id="source">{{ today_article['source'] }}</small></p><br/>
-                </div>
+            <p class="display-6" id="article_title">{{ today_article["article_title"] }}</p><br/>
+            <p class="lead"><font id="article">{{ today_article["article_body"] }}</font></p><br/>
+            <div>
+                <p><small class="text-muted" id="source">{{ today_article['source'] }}</small></p><br/>
+            </div>
 
-                <p><b id="question">{{ today_article['question'] }}</b></p><br/>
+            <p><b id="question">{{ today_article['question'] }}</b></p><br/>
                 <script type="text/javascript">
                     function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
                         const e = document.getElementById(id);
-                        if (e.style.display === 'block')
+                        if(e.style.display === 'block')
                             e.style.display = 'none';
                         else
                             e.style.display = 'block';
                     }
                 </script>
                 <button onclick="toggle_visibility('answer');">ANSWER</button>
-                <div id="answer" style="display:none;">{{ today_article['answer'] }}</div>
-                <br/>
+                <div id="answer" style="display:none;">{{ today_article['answer'] }}</div><br/>
             </div>
         </div>
         <div class="alert alert-success" role="alert" id="not_found" style="display:none;">
-            <p class="text-muted"><span class="badge bg-success">Notes:</span><br>No article is currently available for
-                you. You can try again a few times or mark new words in the passage to improve your level.</p>
+            <p class="text-muted"><span class="badge bg-success">Notes:</span><br>No article is currently available for you. You can try again a few times or mark new words in the passage to improve your level.</p>
         </div>
         <div class="alert alert-success" role="alert" id="read_all" style="display:none;">
             <p class="text-muted"><span class="badge bg-success">Notes:</span><br>You've read all the articles.</p>
         </div>
     </div>
 
-    <input type="checkbox" id="highlightCheckbox" onclick="toggleHighlighting()"/>生词高亮
-    <input type="checkbox" id="readCheckbox" onclick="onReadClick()"/>大声朗读
-    <input type="checkbox" id="chooseCheckbox" onclick="onChooseClick()"/>划词入库
+    <input type="checkbox" id="highlightCheckbox" onclick="toggleHighlighting()" />生词高亮
+    <input type="checkbox" id="readCheckbox" onclick="onReadClick()" />大声朗读
+    <input type="checkbox" id="chooseCheckbox" onclick="onChooseClick()" />划词入库
     <div class="range">
         <div class="field">
             <div class="sliderValue">
                 <span id="rangeValue">1×</span>
             </div>
-            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25"/>
+            <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" />
         </div>
     </div>
     <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
     <form method="post" action="/{{ username }}/userpage">
         <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
         <button class="btn btn-primary btn-lg" type="submit" onclick="Reader.stopRead()">把生词加入我的生词库</button>
-        <button class="btn btn-primary btn-lg" type="reset" onclick="clearSelectedWords()">清除</button>
+        <button class="btn btn-primary btn-lg" type="reset"  onclick="clearSelectedWords()">清除</button>
     </form>
     {% if session.get['thisWord'] %}
         <script type="text/javascript">
@@ -173,10 +152,9 @@
                 {% set freq = x[1] %}
                 {% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
                 {% endif %}
-                <p id='p_{{ word }}' class="new-word">
-                    <a id="word_{{ word }}" class="btn btn-light"
-                       href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
-                       role="button">{{ word }}</a>
+                <p id='p_{{ word }}' class="new-word" >
+                    <a id="word_{{ word }}"  class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
+                    role="button">{{ word }}</a>
                     ( <a id="freq_{{ word }}" title="{{ word }}">{{ freq }}</a> )
                     <a class="btn btn-success" onclick="familiar('{{ word }}')" role="button">熟悉</a>
                     <a class="btn btn-warning" onclick="unfamiliar('{{ word }}')" role="button">不熟悉</a>
@@ -244,78 +222,66 @@
     }
 
 
-    function load_next_article() {
-        $("#load_next_article").prop("disabled", true)
+    function load_next_article(){
         $.ajax({
             url: '/get_next_article/{{username}}',
             dataType: 'json',
-            success: function (data) {
+            success: function(data) {
                 // 更新页面内容
-                if (data['today_article']) {
+                if(data['today_article']){
                     update(data['today_article']);
                     check_pre(data['visited_articles']);
                     check_next(data['result_of_generate_article']);
                 }
-            }, complete: function (xhr, status) {
-                $("#load_next_article").prop("disabled", false)
             }
         });
     }
-
-    function load_pre_article() {
+    function load_pre_article(){
         $.ajax({
             url: '/get_pre_article/{{username}}',
             dataType: 'json',
-            success: function (data) {
+            success: function(data) {
                 // 更新页面内容
-                if (data['today_article']) {
+                if(data['today_article']){
                     update(data['today_article']);
                     check_pre(data['visited_articles']);
                 }
             }
         });
     }
-
-    function update(today_article) {
+    function update(today_article){
         $('#user_level').html(today_article['user_level']);
         $('#text_level').html(today_article["text_level"]);
-        $('#date').html('Article added on: ' + today_article["date"]);
+        $('#date').html('Article added on: '+today_article["date"]);
         $('#article_title').html(today_article["article_title"]);
         $('#article').html(today_article["article_body"]);
         $('#source').html(today_article['source']);
         $('#question').html(today_article["question"]);
         $('#answer').html(today_article["answer"]);
         document.querySelector('#text_level').classList.add('mark'); // highlight text difficult level for 2 seconds
-        setTimeout(() => {
-            document.querySelector('#text_level').classList.remove('mark');
-        }, 2000);
+        setTimeout(() => {document.querySelector('#text_level').classList.remove('mark');}, 2000);
         document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
-        setTimeout(() => {
-            document.querySelector('#user_level').classList.remove('mark');
-        }, 2000);
+        setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
     }
-
-    <!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
-    function check_pre(visited_articles) {
-        if ((visited_articles == '') || (visited_articles['index'] <= 0)) {
+<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
+    function check_pre(visited_articles){
+        if((visited_articles=='')||(visited_articles['index']<=0)){
             $('#load_pre_article').hide();
             sessionStorage.setItem('pre_page_button', 'display')
-        } else {
+        }else{
             $('#load_pre_article').show();
             sessionStorage.setItem('pre_page_button', 'show')
         }
     }
-
-    function check_next(result_of_generate_article) {
-        if (result_of_generate_article == "found") {
-            $('#found').show();
-            $('#not_found').hide();
+    function check_next(result_of_generate_article){
+        if(result_of_generate_article == "found"){
+            $('#found').show();$('#not_found').hide();
             $('#read_all').hide();
-        } else if (result_of_generate_article == "not found") {
+        }else if(result_of_generate_article == "not found"){
             $('#found').hide();
             $('#not_found').show();
             $('#read_all').hide();
-        } else {
+        }else{
             $('#found').hide();
             $('#not_found').hide();
             $('#read_all').show();

app/templates/userpage_post.html

@@ -1,45 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
-    <meta name="format-detection" content="telephone=no" />
+    <head>
+       <meta charset="UTF-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes" />
+       <meta name="format-detection" content="telephone=no" />
 
-    {{ yml['header'] | safe }}
-    {% if yml['css']['item'] %}
-        {% for css in yml['css']['item'] %}
-        <link href="{{ css }}" rel="stylesheet">
-        {% endfor %}
-    {% endif %}
-    {% if yml['js']['head'] %}
-        {% for js in yml['js']['head'] %}
-            <script src="{{ js }}" ></script>
-        {% endfor %}
-    {% endif %}
+       {{ yml['header'] | safe }}
+       {% if yml['css']['item'] %}
+         {% for css in yml['css']['item'] %}
+         <link href="{{ css }}" rel="stylesheet">
+         {% endfor %}
+        {% endif %}
+        {% if yml['js']['head'] %}
+         {% for js in yml['js']['head'] %}
+         <script src="{{ js }}" ></script>
+         {% endfor %}
+        {% endif %}
 
-    <title>EnglishPal Study Room for {{username}}</title>
-</head>
-<body>
-     <p>取消勾选认识的单词</p>
-      <form method="post" action="/{{username}}/mark">
-       <input type="submit" name="add-btn" value="加入我的生词簿"/>
-       {% for x in lst %}
-          {% set word = x[0]%}
-        <p>
-            <font color="grey">{{loop.index}}</font>
-            :
-            <a href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' title={{word}}>{{word}}</a>
-            ({{x[1]}})
-            <input type="checkbox" name="marked" value="{{word}}" checked>
-        </p>
+       <title>EnglishPal Study Room for {{username}}</title>
+    </head>
+    <body>
+      <div class="container-fluid">
+          <p class="mt-md-3">
+               <input type="button" id="btn-cancel-selection" value="取消勾选" onclick="toggleCheckboxSelection(false)" />
+               <input type="button" id="btn-selection" value="全部勾选" onclick="toggleCheckboxSelection(true)" />
+          </p>
+          <form method="post" action="/{{username}}/mark">
+              <button type="submit" name="add-btn" class="btn btn-outline-primary btn-lg" onclick="clearSelectedWords()">加入我的生词簿</button>
+              {% for x in lst %}
+              {% set word = x[0]%}
+              <p>
+                    <font color="grey">{{loop.index}}</font>
+                    :
+                    <a href='http://youdao.com/w/eng/{{word}}/#keyfrom=dict2.index' title={{word}}>{{word}}</a>
+                    ({{x[1]}})
+                    <input type="checkbox" name="marked" value="{{word}}" checked>
+              </p>
 
-       {% endfor %}
-       </form>
-    {{ yml['footer'] | safe }}
-    {% if yml['js']['bottom'] %}
-        {% for js in yml['js']['bottom'] %}
-            <script src="{{ js }}" ></script>
-        {% endfor %}
-    {% endif %}
-</body>
+               {% endfor %}
+           </form>
+           {{ yml['footer'] | safe }}
+           {% if yml['js']['bottom'] %}
+            {% for js in yml['js']['bottom'] %}
+             <script src="{{ js }}" ></script>
+            {% endfor %}
+        {% endif %}
+      </div>
+    </body>
 </html>

app/test/test_next_article.py

@@ -1,85 +0,0 @@
-''' Contributed by Lin Junhong et al. 2023-06.'''
-
-from selenium import webdriver
-from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
-
-from selenium.webdriver.support.ui import WebDriverWait
-from selenium.webdriver.support import expected_conditions as EC
-from selenium.common.exceptions import UnexpectedAlertPresentException, NoAlertPresentException
-import random, time
-import string
-
-# 初始化webdriver
-# driver = webdriver.Remote('http://localhost:4444/wd/hub', DesiredCapabilities.CHROME)
-# driver.implicitly_wait(10)
-driver = webdriver.Chrome("C:\\Users\\12993\AppData\Local\Programs\Python\Python38\\chromedriver.exe")
-
-
-def test_next_article():
-    try:
-        driver.get("http://118.25.96.118:90")
-        assert 'English Pal -' in driver.page_source
-        # login
-        elem = driver.find_element_by_link_text('登录')
-        elem.click()
-
-        uname = 'abcdefg'
-        password = 'abcdefg'
-        elem = driver.find_element_by_id('username')
-        elem.send_keys(uname)
-
-        elem = driver.find_element_by_id('password')
-        elem.send_keys(password)
-        elem = driver.find_element_by_xpath('/html/body/div/button')  # 找到登录按钮
-        elem.click()
-
-        time.sleep(0.5)
-        assert 'EnglishPal Study Room for ' + uname in driver.title
-        for i in range(50):
-            time.sleep(0.1)
-            # 找到固定按钮
-            elem = driver.find_element_by_xpath('//*[@id="load_next_article"]')
-            elem.click()
-    except Exception as e:
-        print(e)
-
-
-def test_local_next_article():
-    try:
-        driver.get("http://127.0.0.1:5000")
-        assert 'English Pal -' in driver.page_source
-        # login
-        elem = driver.find_element_by_link_text('注册')
-        elem.click()
-
-        uname = 'abcdefg'
-        password = 'abcdefg'
-        elem = driver.find_element_by_id('username')
-        elem.send_keys(uname)
-
-        elem = driver.find_element_by_id('password')
-        elem.send_keys(password)
-
-        elem = driver.find_element_by_id('password2')
-        elem.send_keys(password)
-
-        time.sleep(0.5)
-
-        elem = driver.find_element_by_class_name('btn')  # 找到提交按钮
-        elem.click()
-        time.sleep(0.5)
-        try:
-            WebDriverWait(driver, 1).until(EC.alert_is_present())
-            driver.switch_to.alert.accept()
-        except (UnexpectedAlertPresentException, NoAlertPresentException):
-            pass
-
-        time.sleep(0.5)
-        assert 'EnglishPal Study Room for ' + uname in driver.title
-        for i in range(50):
-            time.sleep(0.1)
-            # 找到固定按钮
-            elem = driver.find_element_by_xpath('//*[@id="load_next_article"]')
-            elem.click()
-    except Exception as e:
-        print(e)

app/test/test_save_selected_words.py

@@ -0,0 +1,98 @@
+import random
+import string
+import time
+
+from selenium import webdriver
+from selenium.webdriver.support.wait import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+
+HOME_PAGE = "http://127.0.0.1:5000/"
+
+word = []
+uname = 'lanhui'
+password = 'l0ve1t'
+def has_punctuation(s):  #用于检查单词是否包含标点符号
+    return [c for c in s if c in string.punctuation] != []
+
+def login(driver):
+    driver.get(HOME_PAGE)
+    assert 'English Pal - Learn English smartly!' in driver.page_source
+    # 登录
+    login_elem = driver.find_element_by_link_text('登录')
+    login_elem.click()
+
+    username_input = driver.find_element_by_id('username')
+    username_input.send_keys(uname)
+
+    password_input = driver.find_element_by_id('password')
+    password_input.send_keys(password)
+
+    login_btn = driver.find_element_by_xpath('//button[text()="登录"]')  # 找到登录按钮
+    login_btn.click()
+
+    # 确保页面加载完
+    try:
+        WebDriverWait(driver, 10).until(
+            EC.title_is("EnglishPal Study Room for " + uname)  # 替换为实际的页面标题
+        )
+    except Exception as e:
+        print("页面加载失败:", e)
+        driver.quit()
+        exit()
+    assert 'EnglishPal Study Room for ' + uname in driver.title
+
+def test_save_selected_word():
+    global word
+    # 调用本地chromedriver
+    driver = webdriver.Chrome(executable_path="C:\Program Files\Google\Chrome\Application\chromedriver.exe")
+    try:
+        login(driver)
+        #点击单词添加到已选单词列表
+        # 获取文章内容
+        elem = driver.find_element_by_id('text-content')
+        essay_content = elem.text
+
+        #随机选择单词 长度不小于6个字符，并且不包含标点符号
+        elem = driver.find_element_by_id('selected-words')
+        word = random.choice(essay_content.split())
+        while 'font>' in word or 'br>' in word or 'p>' in word or len(word) < 6 or has_punctuation(word):
+            word = random.choice(essay_content.split())
+        print(type(word))  #str
+        elem.send_keys(word) #单词输入到输入框
+
+        # 检查单词是否已成功添加到已选列表
+        # 再次获取<textarea>中的文本内容，以确认单词已被输入
+        updated_textarea_content = elem.get_attribute('value')
+        # 检查<textarea>中的内容是否包含输入的单词
+        assert word == updated_textarea_content
+        # 检查是否保存到 localStorage
+        stored_words = driver.execute_script('return localStorage.getItem("selectedWords");')
+        assert word == stored_words
+        #检查退出登录、关闭web页面后是否保存已选单词
+        # 退出登录
+        elem = driver.find_element_by_link_text('退出')
+        elem.click()
+
+        # 关闭当前标签页
+        driver.execute_script("window.open('');window.close();")
+
+        # 等待一会儿，让浏览器有足够的时间关闭标签页
+        time.sleep(2)
+
+        # 重新打开一个新的标签页
+        driver.execute_script("window.open('');")
+        driver.switch_to.window(driver.window_handles[-1])  # 切换到新打开的标签页
+
+        login(driver)
+        elem = driver.find_element_by_id('selected-words')
+        textarea_content = elem.get_attribute('value')
+        print(f'word:{word}')
+        print(f'selected:{textarea_content}')
+        assert word == textarea_content
+    except Exception as e:
+        print("An error occurred:", e)
+    finally:
+        # 关闭浏览器
+        driver.quit()
+
+test_save_selected_word()

app/test/test_stress.py

@@ -0,0 +1,43 @@
+''' Contributed by Lin Junhong et al. 2023-06.'''
+
+import requests
+import multiprocessing
+import time
+
+def stress(username):
+    try:
+        data = {
+            'username': username,
+            'password': '123123'
+        }
+        headers = {
+            'User-Agent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36 Edg/114.0.1823.51'
+        }
+        session = requests.session()
+        response = session.post(url='http://127.0.0.1:5000/signup', data=data, headers=headers)
+        print('Sign up ', response.status_code)
+        time.sleep(0.5)
+        response = session.post(url='http://127.0.0.1:5000/login', data=data, headers=headers)
+        print('Sign in ', response.status_code)
+        time.sleep(0.5)
+        response = session.get(url=f'http://127.0.0.1:5000/{username}/userpage', headers=headers)
+        print('User page', response.status_code)
+        time.sleep(0.5)
+        print(session.cookies)
+        for i in range(5):
+            response = session.get(url=f'http://127.0.0.1:5000/get_next_article/{username}', headers=headers, cookies=session.cookies)
+            time.sleep(0.5)
+            print(f'Next page ({i}) [{username}]')
+            print(response.status_code)
+            print(response.json()['today_article']['article_title'])
+    except Exception as e:
+        print(e)
+
+
+if __name__ == '__main__':
+    username = 'Learner'
+    pool = multiprocessing.Pool(processes=10)
+    for i in range(10):
+        pool.apply_async(stress, (f'{username}{i}',))
+    pool.close()
+    pool.join()

app/user_service.py

@@ -15,6 +15,9 @@ from wordfreqCMD import sort_in_descending_order
 import pickle_idea
 import pickle_idea2
 
+import logging
+logging.basicConfig(filename='log.txt', format='%(asctime)s %(message)s', level=logging.DEBUG)
+
 # 初始化蓝图
 userService = Blueprint("user_bp", __name__)
 
@@ -32,7 +35,9 @@ def get_next_article(username):
         else:  # 当前不为“null”，直接 index+=1
             visited_articles["index"] += 1
         session["visited_articles"] = visited_articles
+        logging.debug('/get_next_article: start calling get_today_arcile()')
         visited_articles, today_article, result_of_generate_article = get_today_article(user_freq_record, session.get('visited_articles'))
+        logging.debug('/get_next_arcile: done.')
         data = {
             'visited_articles': visited_articles,
             'today_article': today_article,
@@ -129,7 +134,7 @@ def userpage(username):
     user_freq_record = path_prefix + 'static/frequency/' + 'frequency_%s.pickle' % (username)
 
     if request.method == 'POST':  # when we submit a form
-        content = escape(request.form['content'])
+        content = request.form['content']
         f = WordFreq(content)
         lst = f.get_freq()
         return render_template('userpage_post.html',username=username,lst = lst, yml=Yaml.yml)
@@ -176,7 +181,11 @@ def user_mark_word(username):
         for word in request.form.getlist('marked'):
             lst.append((word, [get_time()]))
         d = pickle_idea2.merge_frequency(lst, lst_history)
-        pickle_idea2.save_frequency_to_pickle(d, user_freq_record)
+        if len(lst_history) > 999:
+            flash('You have way too many words in your difficult-words book. Delete some first.')
+        else:
+            pickle_idea2.save_frequency_to_pickle(d, user_freq_record)
+            flash('Added %s.' % (', '.join(request.form.getlist('marked'))))
         return redirect(url_for('user_bp.userpage', username=username))
     else:
         return 'Under construction'

build.sh

@@ -2,10 +2,7 @@
 
 DEPLOYMENT_DIR=/home/lanhui/englishpal2/EnglishPal
 cd $DEPLOYMENT_DIR
-
-# Install dependencies
-
-pip3 install -r requirements.txt
+pwd
 
 # Stop service
 sudo docker stop EnglishPal
@@ -15,7 +12,7 @@ sudo docker rm EnglishPal
 sudo docker build -t englishpal .
 
 # Run the application
-sudo docker run --restart=always -d --name EnglishPal -p 90:80 -v ${DEPLOYMENT_DIR}/app/static/frequency:/app/static/frequency -v ${DEPLOYMENT_DIR}/app/static/:/app/static/ -t englishpal  # for permanently saving data
+sudo docker run --restart=always -d --name EnglishPal -p 90:80  -v ${DEPLOYMENT_DIR}/app/static/frequency:/app/static/frequency --mount type=volume,src=englishpal-db,target=/app/db -t englishpal # for permanently saving data
 
 # Save space.  Run it after sudo docker run
 sudo docker system prune -a -f

requirements.txt

@@ -4,5 +4,3 @@ PyYAML~=6.0
 pony==0.7.16
 snowballstemmer==2.2.0
 Werkzeug==2.2.2
-
-pytest~=8.1.1

test_vocabulary.py

@@ -1,94 +0,0 @@
-# Run this test script on the command line:
-#   pytest test_vocabulary.py
-#
-# Last modified by Mr Lan Hui on 2025-03-05
-
-from vocabulary import UserVocabularyLevel, ArticleVocabularyLevel
-
-
-def test_article_level_empty_content():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('')
-    assert article.level == 0
-
-def test_article_level_punctuation_only():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel(',')
-    assert article.level == 0
-
-def test_article_level_digit_only():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('1')
-    assert article.level == 0
-    
-def test_article_level_single_word():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('source')
-    assert 2 <= article.level <= 4
-
-def test_article_level_subset_vs_superset():
-    ''' Boundary case test '''
-    article1 = ArticleVocabularyLevel('source')
-    article2 = ArticleVocabularyLevel('open source')
-    assert article1.level < article2.level
-    
-def test_article_level_multiple_words():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('Producing Open Source Software - How to Run a Successful Free Software Project')
-    assert 3 <= article.level <= 5
-
-def test_article_level_short_paragraph():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('At parties, people no longer give me a blank stare when I tell them I work in open source software. "Oh, yes — like Linux?" they say. I nod eagerly in agreement. "Yes, exactly! That\'s what I do." It\'s nice not to be completely fringe anymore. In the past, the next question was usually fairly predictable: "How do you make money doing that?" To answer, I\'d summarize the economics of free software: that there are organizations in whose interest it is to have certain software exist, but that they don\'t need to sell copies, they just want to make sure the software is available and maintained, as a tool instead of as a rentable monopoly.')
-    assert 4 <= article.level <= 6
-
-def test_article_level_medium_paragraph():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('In considering the Origin of Species, it is quite conceivable that a naturalist, reflecting on the mutual affinities of organic beings, on their embryological relations, their geographical distribution, geological succession, and other such facts, might come to the conclusion that each species had not been independently created, but had descended, like varieties, from other species. Nevertheless, such a conclusion, even if well founded, would be unsatisfactory, until it could be shown how the innumerable species inhabiting this world have been modified, so as to acquire that perfection of structure and coadaptation which most justly excites our admiration. Naturalists continually refer to external conditions, such as climate, food, etc., as the only possible cause of variation. In one very limited sense, as we shall hereafter see, this may be true; but it is preposterous to attribute to mere external conditions, the structure, for instance, of the woodpecker, with its feet, tail, beak, and tongue, so admirably adapted to catch insects under the bark of trees. In the case of the misseltoe, which draws its nourishment from certain trees, which has seeds that must be transported by certain birds, and which has flowers with separate sexes absolutely requiring the agency of certain insects to bring pollen from one flower to the other, it is equally preposterous to account for the structure of this parasite, with its relations to several distinct organic beings, by the effects of external conditions, or of habit, or of the volition of the plant itself.')
-    assert 5 <= article.level <= 7
-    
-def test_article_level_long_paragraph():
-    ''' Boundary case test '''
-    article = ArticleVocabularyLevel('These several facts accord well with my theory. I believe in no fixed law of development, causing all the inhabitants of a country to change abruptly, or simultaneously, or to an equal degree. The process of modification must be extremely slow. The variability of each species is quite independent of that of all others. Whether such variability be taken advantage of by natural selection, and whether the variations be accumulated to a greater or lesser amount, thus causing a greater or lesser amount of modification in the varying species, depends on many complex contingencies,—on the variability being of a beneficial nature, on the power of intercrossing, on the rate of breeding, on the slowly changing physical conditions of the country, and more especially on the nature of the other inhabitants with which the varying species comes into competition. Hence it is by no means surprising that one species should retain the same identical form much longer than others; or, if changing, that it should change less. We see the same fact in geographical distribution; for instance, in the land-shells and coleopterous insects of Madeira having come to differ considerably from their nearest allies on the continent of Europe, whereas the marine shells and birds have remained unaltered. We can perhaps understand the apparently quicker rate of change in terrestrial and in more highly organised productions compared with marine and lower productions, by the more complex relations of the higher beings to their organic and inorganic conditions of life, as explained in a former chapter. When many of the inhabitants of a country have become modified and improved, we can understand, on the principle of competition, and on that of the many all-important relations of organism to organism, that any form which does not become in some degree modified and improved, will be liable to be exterminated. Hence we can see why all the species in the same region do at last, if we look to wide enough intervals of time, become modified; for those which do not change will become extinct.')
-    assert 6 <= article.level <= 8
-    
-def test_user_level_empty_dictionary():
-    ''' Boundary case test '''
-    user = UserVocabularyLevel({})
-    assert user.level == 0
-
-def test_user_level_one_simple_word():
-    ''' Boundary case test '''
-    user = UserVocabularyLevel({'simple':['202408050930']})
-    assert 0 < user.level <= 4
-    
-def test_user_level_invalid_word():
-    ''' Boundary case test '''
-    user = UserVocabularyLevel({'xyz':['202408050930']})
-    assert user.level == 0
- 
-def test_user_level_one_hard_word():
-    ''' Boundary case test '''
-    user = UserVocabularyLevel({'pasture':['202408050930']})
-    assert 5 <= user.level <= 8
- 
-def test_user_level_multiple_words():
-    ''' Boundary case test '''
-    user = UserVocabularyLevel(
-        {'sessile': ['202408050930'], 'putrid': ['202408050930'], 'prodigal': ['202408050930'], 'presumptuous': ['202408050930'], 'prehension': ['202408050930'], 'pied': ['202408050930'], 'pedunculated': ['202408050930'], 'pasture': ['202408050930'], 'parturition': ['202408050930'], 'ovigerous': ['202408050930'], 'ova': ['202408050930'], 'orifice': ['202408050930'], 'obliterate': ['202408050930'], 'niggard': ['202408050930'], 'neuter': ['202408050930'], 'locomotion': ['202408050930'], 'lineal': ['202408050930'], 'glottis': ['202408050930'], 'frivolous': ['202408050930'], 'frena': ['202408050930'], 'flotation': ['202408050930'], 'ductus': ['202408050930'], 'dorsal': ['202408050930'], 'dearth': ['202408050930'], 'crustacean': ['202408050930'], 'cornea': ['202408050930'], 'contrivance': ['202408050930'], 'collateral': ['202408050930'], 'cirriped': ['202408050930'], 'canon': ['202408050930'], 'branchiae': ['202408050930'], 'auditory': ['202408050930'], 'articulata': ['202408050930'], 'alimentary': ['202408050930'], 'adduce': ['202408050930'], 'aberration': ['202408050930']}        
-    )
-    assert 6 <= user.level <= 8
- 
-def test_user_level_consider_only_most_recent_words_difficult_words_most_recent():
-    ''' Consider only the most recent three words '''
-    user = UserVocabularyLevel(
-        {'pasture':['202408050930'], 'putrid': ['202408040000'], 'frivolous':['202408030000'], 'simple':['202408020000'], 'apple':['202408010000']}
-    )
-    assert 5 <= user.level <= 8
- 
-def test_user_level_consider_only_most_recent_words_easy_words_most_recent():
-    ''' Consider only the most recent three words '''
-    user = UserVocabularyLevel(
-        {'simple':['202408050930'], 'apple': ['202408040000'], 'happy':['202408030000'], 'pasture':['202408020000'], 'putrid':['202408010000'], 'dearth':['202407310000']}
-    )
-    assert 4 <= user.level <= 5