MailChecker: A Jupyter Notebook repository from Peviroy

Mail Cheker

About The Project

基于 SMS Spam 邮箱分类课题所制作的集 Web 与 AIsolution 于一体的项目

所使用的前端框架为 Vue，位于 frontend 目录之中，所使用的后端框架为 Flask，文件为 app.py，接洽模型的业务定义在 backend 之中

example website: Mailchecker

Developing

1.目录架设

项目分成两部分，上半部为 web 部分，下半部为解题算法部分。之所以没有将下半部份算作 backend 的一部分是因为如此的分隔能体现二元性。

.
├── backend
│   └── ...
├── dist      ——front build for backend
│   └── ...
├── frontend
│   └── ...
├─---------------------------------------
├── data
│   └── ...
├── dataset
│   └── ...
├── checkpoints
│   └── ...
├── models
│   └── ...
├── utils
│   └── ...
├── display
│   └── ...
├── README.md
├── requirements.txt
├── run.py   --starter of flask | entry of project
├── main.py  --train model
└── test
    └── ...

2.Prerequisites

For web-frontend development

yarn

Sea for https://yarn.bootcss.com/

vue-cli

yarn global add @vue/cli

For solution development

python3 env
- scipy>=1.4.1
- joblib>=0.16.0
- Flask_Cors>=3.0.9
- matplotlib>=3.2.1
- pandas>=1.0.3
- nltk>=3.5
- torchvision>=0.7.0
- Flask>=1.1.2
- numpy>=1.16.4
- torch>=1.6.0
- ipython>=7.18.1
- scikit_learn>=0.23.2

3.Installation

Clone the repo

git clone https://https://github.com/Peviroy/MailChecker.git
cd MailChcker

Install python package

pip install -r requirements.txt

Install python package

cd frontend
yarn

4. Start

Web part:

虽然采用的是静态网页，但在开发过程中利用 flask-cors 能做到前后端的实时交互。同时开启前后端服务即可。

Flask：

FLASK_APP=app.py flask run

Vue end:

cd frontend
yarn run serve

此时浏览器进入localhost:8080便应当能够正常在生产环境下调试。

Build test: 使用yarn run build生成 dist 目录，此时单独启动 flask 便是最终的 web 效果
For development mode, run step1, and step2, visit website via localhost:8080;
For production mode, change VUE_APP_BASEURL in g.env.production

Solution part:

针对于邮箱分类，我们设计了朴素贝叶斯分类器、BiLSTM-Attention 分类器以及 LSTM 生成器共计三种模型。模型位于 model 文件夹之中，根目录下的 main.py 负责了后两者的训练以及预测等开发环境所需的功能

Deploy

Gunicorn Gunicorn 为一个轻量级高性能的 Web 服务。之所以不选择 flask 直接用于生产环境的原因在于 flask 毕竟主要是作为一个框架而存在，虽然有服务端配备，但并不出彩。而 Gunicorn 采用纯 python 构造，能够快速通过 pip 安装

pip install gunicorn

Nginx Nginx 在此处起到的作用为处理高并发情况，并且进行反向代理

server {
    listen <监听的端口>;

    server_name <监听的域名>;

    access_log  /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;

    location / {
        proxy_pass         http://127.0.0.1:5000/ ; # 中转向的url
        proxy_redirect     off;

        proxy_set_header   Host             $http_host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;

    }

    location /media  {
        alias /usr/share/nginx/html/media;
    }

    location /static  {
        alias /usr/share/nginx/html/static;
    }
}

Contributing

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request