Skip to content

This is a project of THU Software Engineering course owned by team abstract, which is about data annotation.

Notifications You must be signed in to change notification settings

Raincleared-Song/ABSAnno-frontend

Repository files navigation

absanno

a web application for the release, management and completion of data annotation tasks

下载项目

先进行配置:

git config --global user.name "中文姓名"

git config --global user.email "学号@secoder.net"

然后进行下载:

git clone https://gitlab.secoder.net/abstract/ABSanno-frontend.git

访问后端数据

只有 master 分支中的版本会进行部署!

建议大家模仿小作业写一个 API 对象,不要将 url 和请求方式写死在代码里。

后端 url 都是以 https://absanno-abstract.app.secoder.net/absanno/ 开头,但是,配置文件中已经设置了代理,大家在访问时可以不可以使用完整的 url(因为 ajax 不允许进行跨域访问),而是输入相对于 /backend 的 url。例如,大家请求 https://absanno-abstract.app.secoder.net/absanno/data 的数据时,需要使用:/backend/data。代理配置已经修改过,大家严格遵守后端定义的 url 来,访问 backend 的子目录时,一般不能加斜杠(因为后端配置里也是没有斜杠的)

# nginx/frontend.conf
location / {
}

location /backend/ {
    proxy_pass https://absanno-abstract.app.secoder.net/absanno/;
}

本地测试(nginx 使用)

Windows 环境:
  1. 在前端项目的目录下,运行 npm installnpm run build,生成 dist 文件夹
  2. 下载安装 nginx,地址:https://nginx.org/download/nginx-1.18.0.zip
  3. 打开后解压到一个不含中文的路径下,修改 conf/nginx.conf 文件
  4. 找到配置文件中的 server 字段,把原本的配置注释掉,修改为:
server {
    listen 80;
    server_name  localhost;
    root  你的项目目录\dist;
    server_name_in_redirect off;

    location / {
    }

    location /backend/ {
        proxy_pass https://absanno-abstract.app.secoder.net/absanno/;
    }
}
  1. 双击 nginx.exe,即可运行代理服务器,127.0.0.1:80 就是前端页面的入口 url
  2. 如果要中止服务器,需要在命令行/powershell 中 cd 到 nginx 所在目录下,输入 ./nginx -s stop 命令
Mac 环境
  1. 执行上述第 1 步
  2. 安装 nginx:brew install nginx
  3. 修改 /usr/local/etc/nginx/nginx.conf 配置文件,方法同上,可能需要管理员权限(加 sudo)
  4. 运行:sudo nginx
  5. 停止:sudo nginx -s stop

更新远程代码

git push

前端的使用

以templates为根目录打开整个项目。

  • Project setup
npm install
  • Compiles and hot-reloads for development
npm run serve
  • Compiles and minifies for production
npm run build
  • Lints and fixes files
npm run lint

第一阶段

  • 前端

    • 人员:ljj,xyq,zyz
    • 说明:实现正常页面逻辑跳转,将后端数据正确显示到屏幕,不需要美化/优化,功能、布局大致正确即可;第二阶段再参照模版实现美化
  • 后端

    • 人员:scy,wjw
  • 主要任务

    • 正确登陆&注册

      • 前端制作窗口
      • 前端设置cookie(?)
      • 后端进行加密/解密算法
      • 后端核对是否正确登陆,或者注册新用户的信息
      • 后端配备相应个人数据库,储存个人信息
    • 网站规则

      • 前端撰写网站规则1.0,说明vip的注册&积分规则etc
    • 导航栏

      • 前端实现页面跳转逻辑
    • 题目广场

      • 题组广场,题目暂定仿照百度平台,一组题一组题地显示,或者按照tag分类,一类一类展示
      • 后端设计数据库,每次调用接口提供固定数量(如20个)的json array
      • 前端解析json,展示的题目+分类+积分准则,点击对应的题目可以跳转
    • 个人页面

      • 后端提供对应数据,包括头像,信用积分,历史记录等
      • 前端设计页面,展示这些信息,注意历史记录可能需要局部翻页,每次翻页从后端请求
    • 管理员页面

      • 这个比较麻烦,初始版本别要了
    • 发题页面

      • 先只支持判断题,可以判断图片/文字是否满足某个标签
      • 前端提供图片/文字类型的选择,上传图片会弹出本地上传文件的框
      • 前端支持用户输入标签名,tag名等
      • 后端接受前端数据,加入数据库
      • 后端扣除用户的金币值
    • 做题页面(先只支持判断题)

      • 先只支持判断题,可以判断图片/文字是否满足某个标签
      • 可以考虑所有题放到一个页面中(类似于问卷),或者每次展示1题,点击next翻页
      • 前端传递题组编号,向后端发送请求
      • 后端根据前端的请求发送题目数据,将题组顺序打乱发送,同时混入部分已知答案的同种题目
      • 前端设计两种题目的展示页面模版
      • 前端解析后段传递的数据,填入模版
      • 后端接收前端收集的答题数据,放入数据库,更新用户信誉积分及金币值

后端

  • 用户信息的管理(一类,包括需求方的题库和信息管理,标注者的信息管理,各种属性)

  • 用户注册、登陆是否成功

  • 题目分发算法

  • 用户完成标注后,答案的整合方法

  • 检查算法/信誉程度(做题时间/抽查题目)

  • 题目和结果的导出接口

  • 用户画像(用于题目分发,用户可以选择)

  • 主要数据库

    • 用户信息数据库
    • 大任务数据库(对应广场)
    • 每个用户两个小数据库(只记录id)

前端

  • 登录&注册界面
  • 广场/列表页面(显示已发布任务)
  • 网站规则页面
  • 个人主页
    • 个人画像/头像/信誉积分/金币/历史做题记录
  • 标注者做题页面
  • 需求方界面/发题页面
    • 任务管理界面(可以进入任务配置模块、任务分发模块、发布任务、查看已申请的标注者数量、导出)
    • 任务配置模块(包括题目的上传)
    • 任务分发模块(可以看到申请答题的用户列表,进行分发)
    • 验收模块(对每道题按质量评分)
  • 管理员界面
    • 用户名单列表
  • 导航栏(点击头像可以退出)

隐藏玩法

  • 登陆奖励/观看广告奖励
  • 新手任务/教学标注演示
  • 用户信誉给答案加权
  • 信封通信
  • 题目发布批量上传
  • 收集数据集,给奖励(比如可以上传对应标签的图片,放入公开数据集里)
  • 题目发布支持预览
  • 支持上传者给定几个样本或标准答案,用于检测做题者的认真程度

About

This is a project of THU Software Engineering course owned by team abstract, which is about data annotation.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages