# Web Cheker Demo
#### 项目分为七个文件夹:
```Flask_template_FeiYing```、```Quill Editor```、```Tiptap Editor v0.0```、```Tiptap Editor v1.0```、```Simple Demo```、```Simple Flask Backend```、```README_IMGs```
#### 文件夹介绍
1. ```Quill Editor```
可以查看网页:[BeyondGrammar 插件](https://prowritingaid.com/en/App/BeyondGrammar)
ProWritingAid官方开源插件,集成到了Quill富文本编辑器,支持对于英文等语言的拼写纠错、语法纠错、风格转换,唯独不支持中文。UI同网站版本,修改官方API为本地Pycorrector后端API即可得到中文纠错版本。
目前因为后端功能不完善(无法提示错误类型【语法、拼写】、没有错误提示等),部分API返回值固定为了默认值。修改API后前端对于中文的纠错使用体验和官方版本一致,但是因为核心js文件是打包后的js文件(猜测源文件是ts代码,使用Webpack等工具打包之后可读性下降,且代码量超20000行),无法进行定制化修改,需要阅读或重构js代码。该核心js文件是文件夹中的``CORE_Feature_bundle.js``,该文件经过IDE重新格式化后得到较为可读的```CORE_Feature.js```,再经过[boompack](https://gitee.com/vvjiang/boompack)整理后得到更为可读的js文件```CORE_Feature_more_readable.js```(但仍然无法恢复源文件),可供之后进一步分析。
2. ```Tiptap Editor v0.0```
该项目是代码完全开源的Tiptap富文本编辑器插件,Tiptap是一个兼容性十分友好的无头富文本编辑器,至今仍在维护,而quiil已经停止维护。原项目接口使用 languagetool 的纠错API,经过修改后使得前端可以使用本地Pycorrector后端API,得到中文纠错版本。
这个项目实现了标注错误、修正错误以及忽略错误等核心功能(代码1000行左右)且都能追溯到相应实现。但是这只是一个极其雏形的版本——界面不美观,而且实际使用体验确实不如Quill Editor的插件。具体体现在:
1)只能一次性返回所有文本***(纠正:代码会按 500 个字符一个文本块对文本进行分割)***,如果用户一次性输入大量文本需要等待大量时间
2)不能本地缓存之前处理过的相同文本
3)忽略功能有Bug(v1.0版本已修复)
4)修正错误功能有很大延时,可能计算逻辑比较落后,导致计算量很大。实际查看HTML元素结构可以发现,这个项目在进行DOM元素替换的时候要明显慢于第一个项目,两个项目分别的实现原理以及效率差异的原因暂时未知。
前端的标注以及纠错涉及到DOM编程,这个项目揭示了一定的核心原理,可供进一步研究。同时可以和第一个项目进行对比学习,研究第二个使用体验不如第一个的原因,对我们的实际开发会有很大启发。
3. ```Simple Demo```
该项目是一个使用 ```Vue3 ```编写的简单的只有输入输出文本框的简单Demo
4. ```Simple Flask Backend```
1、2、3三个前端项目的后端,包括四个py文件,使用```Flask```后端 + ```Pycorrector```实现,只有一个检查语法错误的接口,用来测试前端功能。
py文件的后缀表明是哪个项目的后端,只要使用```Python```命令运行对应的文件即可。四个后端文件实现方式完全相同,只是在解析请求数据和生成返回数据以及控制台打印内容方面有差异。另外,如py文件后缀所示,```flask_pycorrector_quill_log.py```文件在控制台打印引入了```logoru```作为日志打印工具,```flask_pycorrector_quill_process.py```文件引入了```rich```的Process Bar来可视化后端运作。
此后端最多可以同时执行两次API请求,大型项目可能需要考虑多线程、多进程、高并发编程。
5. ```README_IMGs```
存储```README.md```中的图片
6. ```Flask_template_FeiYing```
复现飞鹰校正系统的后端渲染功能(仍需完善,只实现部分功能)
7. ```Tiptap Editor v1.0```
在```Tiptap Editor v0.0```的基础上,修复忽略功能,美化界面。
8. ```Flask API Demo```
采用Flask框架编写的后端API,目前没有前端,只能采用API测试软件发送模拟请求来使用。目前已实现的功能包括:登录、注册、查询成员信息、修改成员信息、删除成员
Todo:文件的上传以及下载API
#### 安装运行说明
1. ```Quill Editor```
在该文件夹目录运行```cnpm install```安装项目依赖,需要注意的是```node-sass```极难安装,可能需要安装Windows编译工具,如果报错参考网上教程。
运行```npm run start```启动项目
2. ```Tiptap Editor v0.0```
在该文件夹目录运行```cnpm install```安装项目依赖,本项目也需要安装```node-sass```,可能报错。同时尤其重要的一点是```node-sass```对版本的兼容性很敏感,需要保持```node```、```node-sass```和```sass-loader```的版本互相兼容。可以检查```package.json```文件中上述依赖的版本与电脑安装的```node```版本是否兼容
运行```npm run start``` 或 ```npm run serve```启动项目
3. ```Simple Demo```
在该文件夹目录运行```npm install```即可安装依赖
运行```npm run serve```启动项目
4. ```Simple Flask Backend```
前三个项目需要分别开启对应的后端才可以运行(使用```python```命令运行)
下述安装为python环境的安装配置:
需要安装```pycorrector```,参考```pycorrector```官网的配置安装
需要安装```flask```以及```flask_cors```
需要安装```loguru```(```pycorrector```已安装好)以及```rich```
5. ```Flask_template_FeiYing```
查看```/Flask_template_FeiYing```文件夹中具体说明
6. ```Tiptap Editor v1.0```
运行前端部分:
需要安装```node```版本```v16.20.0```
需要安装```cnpm```
在该文件夹目录运行```cnpm install```安装项目依赖
运行```npm run start``` 或 ```npm run serve```启动项目
运行后端部分:
查看第4条```Simple Flask Backend```的安装运行说明
7. ```Flask API Demo```
运行```pip install -r requirements.txt``` 安装 python 依赖
安装 ```Mysql```、```Redis``` 数据库,并修改 setting.py 的配置信息
运行 app.py
#### ```Quill Editor```插件的特性 以及 通过阅读源码需要学习和解决的技术问题
1. Quill只是一个承载文本和方便编辑的富文本编辑器,实质只是一个文本容器,要想实现对错误的高亮或者标注,必须要改变该容器内的HTML元素(添加新的元素或者修改样式),涉及HTML DOM(文档对象模型)编程知识。其中一个技术难点是如何拆分原HTML元素(无错误的句子)并将其组合成新的HTML元素(需要区分有错误的和无错误的文本,为不同的HTML元素)。
2. 调用纠错接口的时候会分割文本,分批次调用纠错接口,分割的方式还没有弄清楚。这对于实际的生产部署是有意义的,可以减少一次性调用的成本,而且在用户端方面不会有太大延时(陆续纠错而不是一次性返回全部结果)。
3. 可以实现检测修改,无需按下纠错按钮,可以实现实时纠错。没有修改的时候是不会调用纠错接口的,出现修改只会提交更改的文本,而不是全部的文本,即纠错是局部的,而不是全局的。
4. 对于错误存在缓存功能,即重复的错误文本不会引发接口调用,这样可以节约接口资源。
5. 该插件定义并实现了一个HTML元素模板```<pwa></pwa>```,所有的错误文本都是使用该元素标签包起来的。它的工作原理是
1. 检测到文本修改
2. 调用纠错接口,上传修改的文本
3. 纠错