Skip to content

Latest commit

 

History

History
104 lines (88 loc) · 3.65 KB

README.md

File metadata and controls

104 lines (88 loc) · 3.65 KB

치즈네컷

2024 멋쟁이사자처럼 중앙 해커톤 얼굴피자 팀
2024.07.11 ~

주요 모듈

  • Django (웹서버)
  • Pillow (이미지 처리)
  • qrcode (QR코드 생성)
  • pywin32 (프린터 제어) (단, window 환경에서만 실행됨)

코드 흐름

클라이언트

  1. 사진 유형 선택 Home.jsx
  • 표정 챌린지 네컷 (목표 표정이 인식되면 사진이 찍힘)
  • 내맘대로 표정 네컷 (현재 표정을 실시간 인식해서 텍스트로 표시)
  1. 프린트 매수 선택 PaymentPage.jsx
  • 프린트 할 매수를 두 장 단위로 선택
  1. 사진 촬영
    3.1. 표정 챌린지 ShootPage_1.jsx
  • 우리의 메인 기능인 표정 인식 기능이 들어 있는 페이지
  • face-api.js를 사용해 현재 표정을 인식 (useEmotionDetection.js에서 api 관리)
    • 0.25초 간격으로 표정 인식
    • 인식된 감정들 중 max 값을 찾아 maxExpression과 확률 confidence를 반환

3.2. 지내표 (지금 내 표정은?) ShootPage_2.jsx

  • 현재 자신의 표정을 인식해 보여주는 서비스
  • 여러명의 표정이 인식될 경우, 그 중 가장 maxValue 값이 큰 표정을 출력함
  • 즉, 여러 표정 중 가장 크게 지은 표정이 인식
  1. 사진 선택 SelectionPage.jsx
  • 8컷의 사진 중 4장 선택
  • 프레임 변경
  • 프린트하기 버튼을 누름과 동시에 django 서버에 사진 저장
  1. 프린트 페이지 PrintPage.jsx
  • 프린트 중이라는 안내 문구 띄우기
  • timer가 0이 되면 다시 메인 페이지 Home.jsx로 이동

클라이언트-서버

  1. react에서 django로 사진 전송
  • 사진을 image 형식으로 post
  1. QRcode 생성
  • db에 photo가 저장되면서 동시에 qrcode 생성 views.py
    • qrcode 생성 코드는 utils.py로 분리해서 관리함
  • 로컬 react에서 사진을 찍고, django 서버로 전송, django 서버는 네컷 사진을 다운받을 수 있는 배포된 react랑 다시 연결
  • url의 id 파라미터는 인코딩 한 값으로 저장
    • 처음에는 urllib.parse의 quote 함수를 사용하려고 했으나, id가 숫자밖에 없어 다른 문자로 바뀌지 않음
    • 그래서 base64 암호화 방식을 택함.
    • base64 인코딩은 url에서 기존의 존재하는 특수기호도 포함돼서 인코딩 되므로 사전에 그런 문자를 제거해줘야 함. urlsafe_b64encode 사용
  1. 네컷 사진에 qrcode 출력
  • react에서 qr_code를 get 해서 불러옴
  • 해당 qrcode를 찍으면 사진을 다운받을 수 있는 링크로 연결
  1. 프린터기 (views.py에서 관리)
  • react에서 django로 post로 받은 파일을 임시 저장, 프린터로 전송 print_file
  • 프린터 정보를 가져와 image file을 프린터의 해상도에 맞게 조정 후 출력 print_image
    • 프린터기 연동 hDC.StartDoc() hDC.StartPage
  1. 사진 다운로드
  • django 서버에서 photo를 get 해오기
  • 사진 다운로드 기능 제공

프론트 세팅

설치 필요한 라이브러리 

npm i
npm install react-router-dom
npm install styled-components

백엔드 세팅

  1. 가상환경 생성
python -m venv venv
source venv/Scripts/activate
  1. 필요 모듈 설치
    2.1. 모듈 install
pip install django
pip install djangorestframework
pip install Pillow
pip install qrcode
pip install django-cors-headers
pip install django-environ
pip install pywin32

2.2. 의존성 모듈 설치

pip install -r requirements.txt
  1. 실행
python manage.py makemigrations
python manage.py migrate
python manage.py runserver