Skip to content

Latest commit

 

History

History
152 lines (99 loc) · 8.25 KB

README.md

File metadata and controls

152 lines (99 loc) · 8.25 KB
Raw

왓카

  • 차알못(차에 대해 잘 알지 못하는 사람들)이 원하는 차를 쉽고 빠르게 찾을 수 있는 서비스를 제공

기술 스택

Javascript React MUI styled-components Python Flask MariaDB Amazon AWS Amazon S3 Tensorflow Keras OpenCV NGINX Gunicorn

1. 프로젝트 소개

목표

차에 대해 잘 알지 못하는 사람들이 원하는 차를 쉽고 빠르게 찾을 수 있는 서비스를 제공한다.

  • 사용자가 가지고 있는 이미지를 이용해 차를 찾을 수 있다.
  • 차량의 상세 스펙을 보여주며, 댓글 기능으로 해당 차량에 대한 리뷰를 쓸 수 있다.
  • 기능을 조건으로 선택해 차를 찾을 수 있다.
  • 간단한 게임을 통해 사용자가 어떤 이미지의 자동차를 선호하는지 알 수 있다.
  • 간단한 게임을 통해 사용자의 이미지와 맞는 자동차 브랜드를 알 수 있다.
  • 공유 기능을 통해 주변인들에게 사용자가 관심있는 차량을 알려주고, 서비스를 홍보할 수 있다.

기획 의도

이 차 뭔가요?

차종 인식과 관련된 연구와 논문은 많다. 그러나, 관련 서비스를 제공하는 사이트는 없다. 차 전문가가 아닌 이상 일반인이 사진 속 차량의 이름을 알려면 커뮤니티에 글을 올려 물어보는 방법 밖에 없다.

→ 사진만 찍어서 올리면 쉽게 차 모델을 알 수 있는 서비스는 없을까?

🙋왓카의 페르소나, 이머선(29세, 개발자)씨의 고민

  • 이제 막 취업한 사회초년생
  • 회사가 제주도라서 최근 거주지를 이사했다
  • 차.알.못이지만 최근 면허를 땄다
  • 출퇴근을 위해 차를 구매할 예정이다
  • 길을 다니며 마음의 드는 디자인의 자동차를 발견하면 사진을 찍어 놓는다
  • sns에 사진 올리는 것을 좋아하기 때문에 이왕이면 디자인이 멋진 차량을 구매하고 싶다
  • 최근 길가다 마음에 드는 디자인의 자동차를 발견했는데, 검색 방법을 몰라 포기했다
  • 다나오는 사이트에서 자동차를 검색해보려 했지만, 조건이 너무 많고 용어가 어렵다

→ 이머선씨와 같은 차.알.못을 위한 자동차 검색 서비스, 🚙 왓카 탄생!

2. 프로젝트 목표

  • 사용자가 가지고 있는 이미지를 이용해 차를 찾을 수 있다.
  • 차량의 상세 스펙을 보여주며, 댓글 기능으로 해당 차량에 대한 리뷰를 쓸 수 있다.
  • 기능을 조건으로 선택해 차를 찾을 수 있다.
  • 간단한 게임을 통해 사용자가 어떤 이미지의 자동차를 선호하는지 알 수 있다.
  • 간단한 게임을 통해 사용자의 이미지와 맞는 자동차 브랜드를 알 수 있다.
  • 공유 기능을 통해 주변인들에게 사용자가 관심있는 차량을 알려주고, 서비스를 홍보할 수 있다.
  • 사용자들이 업로드한 사진을 모아놓아 커뮤니티의 기능을 수행할 수 있다.

3. 프로젝트 기능 설명

메인 페이지

ezgif com-gif-maker-8

이미지 검색 결과 페이지

ezgif com-gif-maker-9

검색 페이지

ezgif com-gif-maker-7

차량 상세 페이지

ezgif com-gif-maker-11

갤러리

1231232123136

팀 소개 페이지

4. 프로젝트 구성도

5. 프로젝트 팀원 역할 분담

이름 역할 담당 부분
김나현 프론트엔드, 서기 1. UI/UX 디자인 및 개발
2. 검색/검색 결과 페이지 구현
3. 스크럼 작성 및 이슈 관리
김민지 백엔드 1. DB 설계 및 관리
2. Web Crawling 및 전처리
3. AWS S3 연동 및 관리
4. API 설계 및 구현
5. API 문서화
김재현 프론트엔드 1. 카카오 및 URL 공유 기능 개발
2. Disqus 기능개발
백승욱 👑팀장, 인공지능, 백엔드 1. Web Crawling
2. 데이터 전처리
3. 이미지 Segmentation 따는 것 구현
4. MVC구조 조정
이정규 인공지능, 백엔드 1. 인공지능 모델 설계
2. 데이터 전처리
3. 인공지능 연동
4. 서버 배포
최연주 프론트엔드, 인공지능 1. 메인 페이지 구현
2. 네비게이션 바(반응형) 구현
3. 결과 페이지 레이아웃 구현
4. MBTI/이상형 월드컵/404/갤러리/팀 소개 페이지 구현

6. 실행 방법

  • Frontend
cd frontend

# .env.example 파일 참고 후 .env 파일에 환경변수 설정 필요

yarn 또는 yarn install
yarn start
  • Backend

model download (Resnet-152)

pip3 install -r requirements.txt

python app.py

7. 버전

  • 1.0.0

Reference

Centernet
https://tfhub.dev/tensorflow/centernet/hourglass_512x512/1

Resnet-152
https://github.com/foamliu/Car-Recognition

Data processing repo
https://kdt-gitlab.elice.io/002-part3-cnn/team4/car_data