[Zoodiac]

http://ec2-3-38-109-64.ap-northeast-2.compute.amazonaws.com/

사용자의 얼굴 이미지를 분석해 닮은 십이지신을 알려주는 서비스

System Architecture

Features

• Main Feature: 사용자가 업로드한 이미지를 AI가 분석해 닮은 동물 정보를 제공
• Additional Feature: 운세 제공

Main	Login
비회원, 회원을 선택하여 진행할 수 있습니다	회원로그인을 선택한 페이지입니다.

Signup	Upload the Image
회원가입 페이지 입니다.	사진을 업로드 하시면 AI가 사진을 분석합니다.

The results of Zoodiac	Fortune page
AI가 분석한 상위 3개의 결과를 그림과 함께 보여줍니다.	참여한 유저들의 그림과 함께 선택했던 단어의 유사도를 기준으로 순위를 매겨 보여줍니다.

Mypage	Ranking page
로그인한 계정들로 분석한 결과를 전부 확인 할 수 있습니다.	참여한 유저들의 분석 결과를 유사도를 기준으로 순위를 매겨 보여줍니다.

URL

• / 　　　　　 → Startpage
• /Signinpage → Login page
• /Signuppage →Signuppage
• /Mainpage → upload your image
• /Resultpage → show your result
• /Rankpage → show rank
• /Intropage → tell the fortune

Backend API

AI, Dataset

• DataSet : crawling at Google with Selenium, OpenCV
• Training Teachable Machine with Google

Tech Stack

Frontend	Backend	AI	DevOps	Etc

Initialization

• clone the repository

$ git clone https://github.com/sungnam-team-b/docker.git
$ git submodule foreach git pull origin main
$ git submodule update
delete docker-compoes.yaml at backend folder
$ cd docker

1) Docker

• docker compose build and up

$ cd zoodiac
$ docker-compose up --build

2) Local execution

$ cd zoodiac/frontend
$ npm start
$ cd ../backend/backend
$  python manage.py runserver

JWT

• used_library

  • djangorestframework-jwt

• JWT_Settings.py

  • set JWT’s default_settings

    

• JWT on frontEND

  • restore tokens by using redux
  • if we need some user data, we don’t need to make connection with backend by opening JWT payload, we can get user data

• JWT on backEND

  • after we identify user by check login data, give authorization by using JWT
  • by using refresh_token, we enhanced our security level

Monitoring

Prometheus

• exporter가 매트릭을 수집하고 HTTP 통신을 통해 metric data를 가져갈 수 있게 /metrics 라는 HTTP 엔드포인트를 제공한다. 그러면 Prometheus server가 이 exporter의 엔드포인트에 HTTP GET 요청을 이용하여 metric data를 pull 한다.
• 해당 노드의 metric data

Grafana

• Prometheus의 시각화 도구가 부족하여 이를 직접 사용하지는 않고 대게 Grafana라는 Data Visualization tool을 이용하여 시각화하고 있다.

Requests / Request Latency / Responses / Response Status

#Members of Team-B

이름	개발분야	소개페이지
김준형	Front-end,AI	https://github.com/junhyeongkim2
이정우	Back-end,DevOps	https://github.com/RayLee-Kor
이지윤	Front-end,DevOps	https://github.com/EASYhz
정윤호	Back-end, AI	https://github.com/yunhobb
한지원	Back-end	https://github.com/jiwon83