조수연

Merge branch 'test1' into 'master'

readme 수정



See merge request !23
# Find your Personal Color
## 요약
자가진단 설문와 openCV를 활용한 퍼스널 컬러 찾아주는 React 기반의 웹 서비스
## 1)요약
🌈자가진단 설문과 openCV를 활용한 퍼스널 컬러 찾아주는 웹 서비스🌈
## 상세
### 1. 서비스
기존에 있는 퍼스널 컬러 진단 서비스는 대부분 사용자 이미지를 분석하고 퍼스널 컬러를 찾아주거나, 자가진단 설문을 통해 퍼스널 컬러를 알려주는 두 형태 중 한가지 형태로 진행되는 경우가 많았습니다. 저희는 두가지 서비스 모두를 구현하여 사용자들이 좀 더 정확한 퍼스널 컬러를 확인할 수 있도록 했습니다.
## 2)상세
### 타 서비스와의 차별성❕
### 2. front
첫째, 기존에 있는 퍼스널 컬러 진단 서비스는 대부분 사용자 이미지를 분석하고 퍼스널 컬러를 찾아주거나, 자가진단 설문을 통해 퍼스널 컬러를 알려주는 두 형태 중 한가지 형태로 진행되는 경우가 많았습니다. 저희는 두가지 서비스 모두를 구현하여 사용자들이 좀 더 정확한 퍼스널 컬러를 확인할 수 있도록 했습니다.
### 3. back
둘째, 기존에 있는 이미지 분석 서비스는 잘못된 이미지로 학습된 결과물인 경우가 많았습니다. 보다 정확한 결과를 위하여 인위적으로 바뀐 사진이나 필터 등이 들어간 얼굴 이미지가 아닌 색상을 기준으로 학습시켰습니다.
셋째, 기존에 있는 자가진단 서비스에는 여성 위주의 언어 선택 및 질문이 대부분이었습니다. 이를 보완하여 최대한 남녀 모두 적용될 수 있는 언어를 선택했습니다. 뿐만 아니라 질문의 양을 늘려서 정확도를 높이고자 했습니다.
# 전체 서비스
// 전체 서비스 동작 이미지//
### 메인 화면
<img src="personal\img\main_web.png" width="60%" height="60%">
### 이미지 분석
<img src="algorithm\color_data\main_image.png" width="60%" height="60%">
이미지 분석 서비스의 메인 화면입니다.
### 자가진단
<img src="front\src\main.png" width="60%" height="60%">
자가진단 서비스의 메인 화면입니다.
<img src="front\src\question.png" width="60%" height="60%">
질문 화면입니다.
# 알고리즘
# 이미지 분석의 알고리즘
💻마더 프로젝트에서 가져온 알고리즘을 수정 및 개선하였습니다.💻
유저 이미지의 피부 사진을 가져와 평균 색깔을 추출합니다. 이를 토대로 이미지 RGB 값을 Lab 색 공간을 변환합니다. Lab b 값(푸른색의 정도)을 웜톤, 쿨톤의 스탠다드 값과의 거리를 계산하여 웜톤과 쿨톤을 구별합니다.
......@@ -24,6 +40,28 @@
또한, 원본 알고리즘은 웜톤과 쿨톤의 스탠다드 값을 연예인들의 이미지를 학습시켜 평균치를 구했는데, 본래 이미지를 통해서 확인하는 퍼스널 컬러는 조명, 화이트 밸런스, 화장 여부 등에 의해 영향을 많이 받기 때문에 이 부분을 수정하였습니다. 퍼스널 컬러 대표 색 이미지들의 Lab b값을 training시켜, 그 평균치를 스탠다드 값으로 업데이트 하였습니다.
# 빌드 방법
<<<<<<< HEAD
**clone:**
```
git clone http://khuhub.khu.ac.kr/2019102231/Find_your_own_personal_color.git
```
**이미지 분석 웹 빌드:**
```
git clone cd flask pip install opencv-python, sklearn, matplotlib, colormath python application.py
```
**자가진단 웹 빌드:**
```
cd front
npm install
npm start
```
=======
### 이미지 분석 웹 빌드
이미지 분석 웹 빌드
git clone
......@@ -31,8 +69,9 @@
pip install opencv-python, sklearn, matplotlib, colormath
python application.py
>>>>>>> upstream/master
# 사용 방법
## http://www.find-your-color.ml
# LICENSE
마더 프로젝트 https://github.com/starbucksdolcelatte/ShowMeTheColor.git
\ No newline at end of file
마더 프로젝트: https://github.com/starbucksdolcelatte/ShowMeTheColor.git
\ No newline at end of file
......
No preview for this file type
import React, { useEffect,useState } from 'react'; //리액트 불러오기
import React, { useState } from 'react'; //리액트 불러오기
import console from 'react-console'; //리액트 콘솔_크롬으로 실행
import './test.css?v=1.0';//test.css 불러오기
......
No preview for this file type