IGE MOJI?

AI가 얼굴 표정을 분석하여 선택한 이모지 템플릿에 맞는 표정을 사진에 붙여넣어주는 서비스

Main Flow

• Main Feature : 원하는 이모지 템플릿 선택, 사용자가 업로드한 이미지속 사람의 표정을 AI가 분석하여 결과로 도출
• Additional Feature : 원하는 이모지 템플릿을 생성 및 삭제 (다른 사용자들과의 공유)

Features

• Main Page

• Login

• Emoji Select & Use

• Emoji Create

• Top3 Ranking

System Architecture

• Frontend tech

  • MUI : 인터랙티브 컴포넌트 기반의 React UI라이브러리

    • 높은 수준의 UI를 빠르고 효율적으로 개발할 수 있는 UI 도구

    • 리액트와 높은 호환성과 높은 수준의 퀄리티를 제공
      
      

  • Redux : Javascript application들의 state(상태)를 관리할 수 있는 라이브러리(저장소)

    • 손쉬운 state 관리

    • 편리한 웹사이트 상태 확인

• Backend tech

  • RabbitMQ : AMQP(Advanced Message Queuing Protocol)를 따르는 오픈소스 메세지 브로커

    • 유연한 라우팅 규칙 적용 가능
    • 메시지 전송 타이밍 제어(메시지 만료 또는 메시지 지연 제어)
    • 단순하게 소비자 기능 구현 가능

  • Celery : 분산 메시지 전달을 기반으로 동작하는 비동기 작업 큐(Asynchronous Task/Job Queue) - 최적화 설정(RabbitMQ, librabbitmq 등)을 통해 비약적인 작업처리 제공 - 확장성이 매우 뛰어나 거의 모든 부분을 커스텀하여 사용 가능( serializer, compression schemes, logging, schedulers, consumers, producers 등)

  • Mainserver(Django) 와 AI-server(Flask) 의 분리

    • MainServer(Django) : 하나의 프로젝트 내에 다수의 앱을 운영할 수 있는 ‘분할’의 특징이 있으며, 자체 ORM을 제공
    • AI-Server(Flask) : 무게가 가벼운 프레임워크
    • 각각의 프레임워크의 장점을 상황에 알맞게 사용

Tech Stack

Dev-Ops
Frontend
Backend
DB
AI
Monitoring
Others

Backend API

users api

• api/v1/users/

  • GET : 아이디 중복 확인
  • POST : 회원가입

• api/v1/users/auth

  • POST : 로그인

• api/v1/users/mypage/{case}

  • GET : 마이페이지 데이터 조회
    
    

    case1 : 내가 했던 이모지
    case2 : 내가 만든 이모지

faces api

• /api/v1/faces/tasks/

  • POST : 사용자가 업로드한 사진 분석 비동기 처리

• /api/v1/faces/tasks/{task_id}

  • GET : task id 로 분석 완료 여부 확인 및 front 에서 polling

• /api/v1/faces/ranking

  • GET : Emoji 랭킹 조회

emojis api

• /api/v1/emojis/

  • POST : 사용자의 이모지 추가
  • GET : id 에 맞는 emoji 정보 조회

• /api/v1/emojis/pages/{page_number}

  • GET : 메인 화면에 표시되는 emoji 데이터, 페이지네이션 적용

AI

• OpenCV

• 얼굴과 감정 인식을 위하여 파이썬 패키지의 FER라이브러리 및 딥러닝과 OpenCV 기능을 결합하여 이미지에서 인식 기능을 수행

• Haar Cascade classifier 또는 MTCNN(Multi-task Cascaded Convolutional Networks)을 사용하여 감정에 할당된 값의 배열 획득

• 이를 통한 dominant한 감정 데이터를 별도로 추출, 표정에 맞는 이모지를 불러옴

• Rembg 라이브러리

image segmentation(이미지 분리) 과정을 통해 가시성을 높여준다.

Dataset

JWT

• used_library

  • djangorestframework-jwt

• JWT_Settings.py

  • set JWT’s default_settings

    

• Bcrypt : 데이터베이스에 유저의 정보를 저장할 때, 비밀번호와 같이 암호화가 필요한 데이터를 쉽게 다룰 수 있도록 해주는 password hashing 라이브러리이다.

• Redux : redux 를 활용하여 access-token 을 보관

Monitoring

Prometheus

• api 요청과 그 결과에 대한 Metric 데이터를 Prometheus 을 통해 수집
• 해당 노드의 Metric data

Grafana

• Prometheus 로 수집한 데이터를 Grafana 를 통해 시각화 한다.

#Members of Team-E

이름	개발분야	소개페이지
이정우	Front-end, Back-end, Devops	https://github.com/RayLee-Kor
박경은	Front-end, Devops	https://github.com/devGEP
정예린	Front-end	https://github.com/Jungyell
김대희	Back-end	https://github.com/Dan2er
박소윤	Back-end, Devops	https://github.com/velyvelylovely
조현진	AI	https://github.com/chojinie/