한국어 | English
본 프로젝트는 'Handshaker' 사업의 일부 프로토타입 제작을 위해 진행되었습니다.
💡 해당 페이지 링크: QUIZMAKER
- 학습지 이미지 데이터에서 문항정보를 추출해 데이터베이스에 저장 후 해당 내용을 사용자의 브라우저에서 접속 가능하도록하는 플랫폼
1️⃣ 학습 문제의 이미지를 업로드 방식으로 등록한다.
2️⃣ 학습지 이미지 데이터에서 딥러닝을 이용하여 문항정보를 추출한다.
▶ 결과
| 분류 | 기술 |
|---|---|
| 개발환경 |    |
| Frontend |      |
| Backend |      |
| DB |  |
| Deep learning |    |
| Etc |       |
| Name | Port | Description |
|---|---|---|
| Nginx | 80 | 가벼움과 높은 성능을 목표로 하는 웹서버로 서버로서의 역할과 프록시로서의 역할을 수행합니다. |
| React(on Nginx) | 80, 3000 | 학습 문제의 이미지를 업로드 방식으로 등록하면, 해당 문제의 문항내용, 보기, 선지를 분류하여 텍스트 및 이미지로 저장할 수 있는 UI를 제공합니다. |
| Flask + Gunicorn | 8000, 5000 | QUIZRIX의 서버. 모든 행동의 중심에 위치하여 웹서버, Cloud Storage, DB 간의 소통을 담당합니다. |
| Mongo DB | 27017 | Database |
| Grafana | 3001 | cAdvisor, Prometheus, NodeExporter를 통해 전달받은 시간별 매트릭 데이터를 시각화하여 대시보드로 제공해줍니다. |
| cAdvisor | 8080 | 사용중인 도커 컨테이너의 리소스 사용량을 측정하여 시계열 매트릭 데이터화합니다. |
| Prometheus | 9090 | cAdvisor, node exporter의 시계열 매트릭 데이터를 수집하여 시스템 모니터링 및 경고합니다. |
| Node Exporter | 9100 | 서버의 cpu, 메모리, 디스크, 네트워크 사용량등 호스트 관련 매트릭 데이터를 수집하여 api로 노출시킵니다. |
-
Model 1
-
Model 2
📦Mandoo
┣ 📂alertmanager
┃ ┗ 📜config.yml // alert manager config file
┣ 📂backend
┃ ┣ 📂models // YOLO v5
┃ ┃ ┣ 📂hub
┃ ┣ 📂utils // YOLO v5
┃ ┃ ┣ 📂aws
┃ ┃ ┣ 📂flask_rest_api
┃ ┃ ┣ 📂google_app_engine
┃ ┃ ┣ 📂wandb_logging
┃ ┣ 📜Dockerfile // flask_app container included in docker-compose.yml
┃ ┣ 📜README.md
┃ ┣ 📜app.py // Flask server
┃ ┣ 📜choice5_bestweight.pt // Pretrained Pytorch weights (answer to 5 choices)
┃ ┣ 📜detection.py // Detect input image
┃ ┣ 📜development.py // Jwt key, algorithm for development
┃ ┣ 📜kakaoOcr.py // extract text
┃ ┣ 📜modelv2.0.pt // Pretrained Pytorch weights (image to question/content/answer)
┃ ┗ 📜requirements.txt
┣ 📂frontend
┃ ┣ 📂node_modules
┃ ┣ 📂public
┃ ┣ 📂src
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂Modals // image select modal
┃ ┃ ┃ ┃ ┣ 📜Modal.css
┃ ┃ ┃ ┃ ┗ 📜Modal.js
┃ ┃ ┃ ┣ 📜BlankTop.js // Margin between components
┃ ┃ ┃ ┣ 📜Button.js // Button component
┃ ┃ ┃ ┣ 📜Header.css
┃ ┃ ┃ ┣ 📜Header.js // Page Header
┃ ┃ ┃ ┣ 📜logo.PNG // Project Logo
┃ ┃ ┃ ┣ 📜Search.js // Table Search Function
┃ ┃ ┃ ┣ 📜Table.js // Main Page Table
┃ ┃ ┃ ┗ 📜TableCell.js // Tabel Cell hover
┃ ┃ ┣ 📂pages
┃ ┃ ┃ ┣ 📜imgIcon.png // Modal Icon
┃ ┃ ┃ ┣ 📜Loader.js // Loading Page
┃ ┃ ┃ ┣ 📜Login.js // Login Page
┃ ┃ ┃ ┣ 📜loginLogo.PNG // Project Logo
┃ ┃ ┃ ┣ 📜MainPage.js // MainPage
┃ ┃ ┃ ┣ 📜noLogin.PNG // noLogin Page
┃ ┃ ┃ ┗ 📜Signup.js // Signup Page
┃ ┃ ┃ ┣ 📜App.js // pages components manage
┃ ┃ ┃ ┣ 📜config.js
┃ ┃ ┣ 📜index.css
┃ ┃ ┗ 📜index.js
┃ ┣ 📜Dockerfile // react container included in docker-compose.yml
┃ ┗ 📜README.md
┣ 📂grafana
┃ ┣ 📂provisioning
┃ ┃ ┣ 📂dashboards
┃ ┃ ┃ ┣ 📜dashboard.yml // dashboard provider config file
┃ ┃ ┃ ┣ 📜Docker Prometheus Monitoring.json // monitoring general information
┃ ┃ ┃ ┗ 📜FlaskApp_Monitoring.json // monitoring Flask Application API
┃ ┃ ┗ 📂datasources
┃ ┃ ┃ ┗ 📜datasource.yml // admin config file
┃ ┗ 📜config.monitoring
┣ 📂nginx
┃ ┗ 📜nginx.conf // nginx default config file
┣ 📂prometheus
┃ ┣ 📜alert.rules // alert.rule config file
┃ ┗ 📜prometheus.yml // prometheus config file
┣ 📜.gitignore
┣ 📜docker-compose.yml // multi container application(Dockerfile) build file
┣ 📜LICENSE
┣ 📜README.md
┗ 📜README_en.md
-
Clone Repository
git clone https://github.com/2021-Team-E/Mandoo.git
-
package.json
{ ... "proxy": "http://<ip>:<server_port>", ... } -
config.js
export const USER_SERVER = "http://<ip>:<server_port>";
-
app.py
mongo = MongoClient('mongo_db', 27017)
-
requirements.txt
Dockerfile에서 따로 설치하는 라이브러리를 주석처리합니다.# requirements.txt ... # tesseract-ocr # pytesseract … -
s3.py <— Make new file name 's3.py' in ./Backend
AWS_ACCESS_KEY = <AWS ACCESS KEY> AWS_SECRET_KEY = <AWS SECRET KEY> BUCKET_NAME = <AWS S3 bucket name> APPKEY = <Kakao API>
docker-compose up —-build- master : 제품으로 출시될 수 있는 브랜치
- develop : 다음 출시 버전을 개발하는 브랜치
- feature : 기능을 개발하는 브랜치
- release : 이번 출시 버전을 준비하는 브랜치
- hotfix : 출시 버전에서 발생한 버그를 수정 하는 브랜치
- 새로운 기능 개발을 위한
feature브랜치를 생성할 때 브랜치 이름은 다음과 같은 규칙으로 생성합니다. feature브랜치는 마지막develop브랜치로부터 생성합니다.- 꼭 브랜치를 생성하기 전에
develop브랜치를pull받습니다.
- feature-user (사용자 관련 기능을 구현하는 feature branch)
커밋 메세지를 작성할 때는 다음과 같은 규칙으로 일관성 있게 작성합니다.
기본적으로 커밋 메세지는 아래와 같이 제목 / 본문 / 꼬리말로 구성합니다.
type : subject
body
- feat : 새로운 기능 추가
- fix : 버그 수정, 기능 수정
- docs : 문서 수정
- refactor : 코드 리팩토링 (변수명 수정 등)
- test : 테스트 코드, 리팩토링 테스트 코드 추가
- style : 코드 스타일 변경, 코드 자체 변경이 없는 경우, 주석 추가
- remove : 파일 또는 코드, 리소스 제거
- resource : 이미지 리소스, prefab 등의 코드와 상관없는 리소스 추가
- 제목은 50자를 넘기지 않고, 대문자로 작성하고 마침표를 붙이지 않습니다.
- 과거시제를 사용하지 않고 명령어로 작성합니다.
예시
feat : Add translation to missing strings
feat : Disable publishing
feat : Sort list context menu
feat : Resize minimize/delete handle icons so they take up the entire topbar
fix : Fix typo in cleanup.sh file- 선택사항이기 때문에 모든 커밋에 본문내용을 작성할 필요는 없습니다.
- 부연설명이 필요하거나 커밋의 이유를 설명할 경우 작성합니다.
- 제목과 구분되기 위해 한칸을 띄워 작성합니다.
- 각 줄은 72자를 넘기지 않습니다.
- 본문은 꼭 영어로 작성할 필요는 없습니다.
원격 저장소에 Pull Request하기 전 프로젝트의 히스토리를 다듬습니다.
rebase 를 시행하기 전 원격저장소에서 develop 브랜치를 pull 받아 원격 저장소에 그동안 반영된 커밋을 가져옵니다.
git checkout develop
git pullgit rebase develop feature/feature1💡 주의
이미 원격 저장소에 push한 커밋은 절대 rebase하면 안됩니다.
Rebase는 기존의 커밋을 그대로 사용하는 것이 아니라 내용은 같지만 다른 커밋을 새로 만듭니다.
| 이름 | 개발분야 | 담당 | 소개페이지 |
|---|---|---|---|
| 🦦최윤재 | Front-end, Back-end, Deep learning | Web development,API Design, Data Engineering | 개인 리포로 이동 |
| 🐥이채림 | Front-end, Devops | Web development, Docker | 개인 리포로 이동 |
| 🦩박신영 | Front-end, Deep learning | Web development, Algorithm | 개인 리포로 이동 |
| 🐹이하영 | Back-end, Deep learning | API Design, Data Engineering | 개인 리포로 이동 |
| 🦉Ryan Lee | Deep learning | Algorithm | 개인 리포로 이동 |
| 🐢박근우 | Devops | Cloud, Docker, Data Monitoring | 개인 리포로 이동 |