Skip to content

차의 외관을 분석하여 어떤 차종인지 알려주는 웹서비스

Notifications You must be signed in to change notification settings

Whatcar/What-Car

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

왓카

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

기술 스택

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

About

차의 외관을 분석하여 어떤 차종인지 알려주는 웹서비스

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published