DoodleDoodle: 사용자의 그림을 AI가 맞추고 분석해주는 서비스

www.drawingdoodle.com

Go to medium.com article!

본 서비스는 사용자가 단어를 보고 그림을 그리면 사용자가 그린 그림을 AI 모델을 통해 무엇을 그렸는지 유추하고,
그 결과를 퍼센트로 변환하여 사용자가 그린 그림이 제시어와 얼마나 유사한지 알려주는 서비스 입니다.

System Architecture

Features

• Main Feature: 사용자가 그린 그림이 서비스에서 제시한 단어와 얼마나 유사한지 AI가 분석한 결과를 제공
• Additional Feature: 사용자가 그린 그림을 보고 AI가 추측한 결과 + 카카오톡을 통해 결과 및 사진 공유

PC Page

Main	Information
서비스에 참여하는 인원수를 설정한 후, start 버튼을 눌러 시작합니다.	이 프로젝트와 팀원 깃허브링크, 참고한 웹사이트 링크, 서비스 참여 방법을 제공합니다.

Choose a word to draw	Draw the word on canvas
랜덤으로 생성되는 단어 중에 그리고 싶은 단어를 고릅니다.	앞서 선택했던 단어에 맞게 그림을 그립니다

The results of one doodle	The results of several doodles
AI가 선택했던 단어와 얼마나 유사하다고 예측했는지, 그리고 이 그림을 보고 유사하다고 생각한 상위5개 결과를 유저의 그림과 함께 보여줍니다.	참여한 유저들의 그림과 함께 선택했던 단어의 유사도를 기준으로 순위를 매겨 보여줍니다.

Kakao Talk sharing 자랑하기(PC), 공유 아이콘(모바일)을 누르면 이렇게 AI가 분석한 결과와 함께, 그렸던 그림을 공유할 수 있습니다!

Mobile Page

URL

• / → Home page (set user number)
• /about → Information page
• /random → select word to draw
• /gamepage → draw your doodle!
• /resultone → result page for single user
• /resultmany → result page for multi users

Backend API

AI Dataset

• DataSet : Google의 Quick Draw
• Training Code in Colab

Google Colaboratory

Tech Stack

Frontend	Backend	AI	DevOps	Etc

Initialization

• clone the repository

$ git clone https://github.com/ALLBACK-2022/DoodleDoodle.git
$ cd DoodleDoodle

1) Docker

• docker compose build and up

$ cd DoodleDoodle
$ docker-compose up --build

2) Local execution

$ cd DoodleDoodle/frontend
$ npm start
$ cd ../backend
$ flask run

Directory Structure (프론트, 백엔드, AI)

frontend
├─build
├─dist
├─node_modules
├─public
└─src
    ├─assets
    │  ├─fonts
    │  └─icons
    ├─components
    └─pages

nginx
├─Dockerfile
└─nginx.conf

backend
├─temp
├─app.py
├─connection.py
├─manage.py
└─models.py

ai
├─ai-model
├─app.py
├─connection.py
├─manage.py
└─consumer.py

Team ‘ALLBACK’

Design : 김하린, 홍다연

Frontend : 김하린, 정훈희, 홍다연, 김승진

Backend : 정윤호, 김승진, 한지원, 김하린

AI : 한지원, 정훈희, 김승진

DevOps : 김승진, 한지원, 정윤호