valueable/gec

GEC(Grammatical Error Correction) Website

GEC

Django文档

Vue.js文档

@vue/cli文档

项目结构参考文章

Element UI文档

GECToR 文档

关于前端

• 前端使用@vue/cli构建，主要代码为.vue格式。其中，src文件夹下的App.vue文件为前端文件的入口，其它文件则通过在该文件中使用组件的方式进行导入；
• 我们所需编写的大部分代码都位于./frontend/src/components中，我们将会采用模块化的方案，将一个页面拆分为多个部分，在不同文件中进行编写，通过组件进行耦合；
• 我们通过在main.js中设置路由参数区分不同的页面，并在App.vue中访问该参数，从而得知我们应该渲染哪一个页面。这需要使用vue-router库，所以请在frontend目录下执行yarn add vue-router命令；
• 在每一个页面中，我们都会使用大量组件来拼接页面，通过在调用组件时传递参数，实现在同一个组件显示不同的值的效果。组件之间的调用请参照组件基础；
• 此外，还需要注意的一点是，在<template></template>标签内，只能有一个元素，因此需要先写一个<div></div>，然后再在里面实现具体的HTML代码；
• 为了界面的美观性，我们使用Element UI作为统一的UI框架，即提供UI的样式，如按钮、输入框、文本框等。Element UI的文档于上方给出；
• 在一个.vue文件中，我们需要实现的是：
  • 使用HTML实现基础的布局；
  • 使用axios来调用后端接口获取数据（后端接口目前未完成）；
  • 通过Vue.js来绑定数据，并响应按钮与数据变化；

关于gector

• 使用allennlp框架和tranformers提供的预训练模型接口

环境

项目

• Mysql
• Python 3.7
• pip (记得换源)
  • Django 3.0.6
  • pymysql
  • markdown
• nodejs (>=10)
• npm (可能能用yarn完全替代)
  • @vue/cli (用于搭建环境，运行可能不需要)
• yarn (用于安装依赖和编译前端代码)(记得换源)

GECToR

cd gector
pip install -r requirements.txt

运行步骤

前端

在frontend目录下运行(只需要运行一次)：

yarn install

然后运行（每次编译前端代码时）：

yarn build

后端

在项目根目录运行

python manage.py runserver

Tips

• 如果提示django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.的话，可以到报错目录下更改源码，将报错源码删掉即可；或者更新自己的mysql和pymysql。
• Django中启用了自带的数据库管理界面，其路径为http://[hostname]/admin，用户名super，密码superuser。
• 由于前端采用了vue.js，所以前端每次更改后要重新编译才能生效，编译命令为yarn build，需要在frontend目录下执行。

项目目录结构

.
├── GEC              //项目的Django配置文件
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── settings.py     //项目设置
│   ├── urls.py         //路由
│   └── wsgi.py
├── gec_backend
│   ├── __init__.py
│   ├── __pycache__
│   ├─— controller
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── frontend            //前端部分，为一个vue.js项目
│   ├── README.md
│   ├── babel.config.js
│   ├── dist            //编译生成的前端代码
│   ├── node_modules    //nodejs的package
│   ├── vue.config.js   //vuejs项目的配置
│   ├── package.json
│   ├── public
│   ├── src             //实际的代码
│   └── yarn.lock
├── gector
│  ├─ data               //词表等数据
│  │  └─ output_vocabulary
│  ├─ gector            //模型训练及推理部分
│  ├─ utils      
│  ├─ predict.py        
│  ├─ train.py          
├── manage.py
└── readme.md