skinTree : 협업필터링과 머신러닝을 활용한 성분 맞춤형 화장품 추천 서비스

이화여자대학교 컴퓨터공학전공 캡스톤디자인프로젝트 : 2023-9 ~ 2024-5

스킨트리는 기존에 잘 맞았던 화장품을 입력하면 자동으로 개인 성분리스트를 생성하고, 당신의 성분프렌즈를 찾아 화장품을 추천해주는 서비스입니다.

🔧 팀원 소개

정다희	안민영	임수화

@da2mon	@minzer01	@aihamster
프론트엔드	백엔드	머신러닝

배포 주소

웹 페이지 주소 : http://EC2_퍼블릭_IP_주소:3000

테스트 계정 : [email protected]

로컬 주소 : http://127.0.0.1:3000/

프로젝트 소개

스킨트리는 두 가지 화장품 추천 기능을 제공합니다.

성분프렌즈 (유사 사용자 기반) 추천
에디터 (제품 성분 기반) 추천

How to build

AWS Server Requirements

EC2 : Ubuntu server 24.04 LTS

Installation

$ git clone https://github.com/Team-hwaE/Capston_hwa_E.git
$ cd Capston_hwa_E

Backend

$ pip3 install flask 
$ pip3 install pymysql
$ pip3 install numpy pandas matplotlib scikit-learn

1. mysql workbench에서 connection을 셋업한다 (Address 127.0.0.1/3000)
2. mysql_table.zip의 table 파일을 import해서 로컬에 데이터베이스를 세팅한다.

Frontend

$ python3 application.py

Stacks 🐈

Environment

Development

Database

Machine Learning

Communication

Collect data

Incidecoder
대한화장품협회 성분사전

Schema: The schema includes tables for users, Projects, userIngredients and product.
Data Tables :
- user - userID, email, productID, fitness
- userIngredients - userID, ingredientsList
- product - ProductID, productName, productIngredients, categoryID, productCategory, translated_productName

화면 구성 📺

메인 페이지	화장품 입력페이지

화장품 입력 팝업	카테고리 선택

성분프렌즈 추천 결과	성분프렌즈 조회

성분프렌즈 화장품 조회	에디터 추천 화면

재추천화면

기능 흐름도

주요 기능 📦

⭐️ 성분프렌즈 (유사 사용자 기반) 추천

메모리 기반 협업필터링 방식
성분 프렌즈가 매칭되면 해당 프렌즈의 화장품을 추천

⭐️ 에디터 (제품 성분 기반) 추천

K평균 클러스터링 모델 활용
성분 벡터화 후 2차원 축소한 피처공간
유저 성분리스트와의 최소 유클리드 거리에 위치하는 성분 유사 제품 추천

서브 기능 📦

⭐️ 기존 화장품 입력

사용자가 입력한 화장품을 user table 에서 조회
입력 팝업창에서 화장품 이름을 검색하면 적합/부적합 여부를 선택하여 등록함
추가/삭제 기능
추가/삭제가 일어나면 성분리스트가 업데이트됨

@application.route("/insert_product", methods=["POST"])
@application.route("/delete_product/<int:product_id>")
def update_user_ingredient():

⭐️ 성분 프렌즈 화장품 조회

성분프렌즈 추천 결과 화면이 출력된 경우, 3명의 성분 프렌즈가 검색됨을 의미
해당 프렌즈들이 입력한 화장품 목록을 조회하는 기능

@application.route('/Select_friend')
@application.route('/View_friend/<int:userID>')

아키텍쳐

디렉토리 구조

├── README.md : 리드미 파일
│
├── static/ : 백엔드
│   ├── font/ : 폰트
│   │   └── 롯데마트드림폰트.ttf 
│   │ 
│   ├── image/ : 이미지 저장 폴더
│   │   ├── bichon03.png : 성분프렌즈 프로필 이미지
│   │   ├── frenh03.png : 성분프렌즈 프로필 이미지
│   └────── welsh02.png : 성분프렌즈 프로필 이미지
│   
│
├── templates/ : 프론트엔드 화면
│   ├── home.html : 메인 화면
│   ├── index.html : 하단바
│   ├── Insert_product.html : 화장품 입력화면
│   ├── Recommend.html : 성분프렌즈 추천화면
│   ├── Recommend2.html : 에디터 추천화면
│   ├── Restart.html : 재시작 요청 화면
│   ├── Select_category.html : 카테고리 선택화면
│   ├── Select_friend.html : 성분프렌즈 조회화면
│   └── View_friend.html : 성분프렌즈 화장품 조회화면
│   
├── application.py : flask 어플리케이션 구현
├── database.py : mysql 연결정보, 조회 기능
├── clustering.ipnyb : 에디터 추천 기능 - 화장품 성분 기준 군집화 모델 생성 및 인덱스 추출 코드
│
├── product.csv : 화장품 이름/성분/카테고리 데이터
├── kms_model.pkl : 화장품 성분 군집 모델
├── new_X_data_fin.csv : 화장품 성분 벡터 데이터
└── mysql_table.zip : mysql table import 파일

How to Install

1. AWS EC2 생성

aws를 검색해서 홈페이지에 들어갑니다. 홈페이지에 들어가서 우측 상단에 있는 콘솔에 로그인을 눌러 로그인을 합니다. 로그인 후 콘솔 홈에서 EC2에 들어갑니다. EC2 페이지에서 인스턴스 시작 버튼을 누릅니다.

(1) 인스턴스 이름 설정, AMI 선택

이름을 설정해주고, AMI는 Ubuntu를 선택합니다. Ubuntu 중에도 많은 종류가 있지만, 무료로 이용할 것이라면 프리 티어 사용 가능을 선택해야 합니다. 프리 티어로 사용 가능한 Ubuntu Server 24.04 LTS를 선택합니다. 인스턴스 유형도 프리 티어 사용 가능한 t2.micro를 선택합니다.

(2) 키 페어 등록

키 페어가 없다면 생성해서 키 페어를 등록합니다. 생성한 키 페어는 인스턴스에 접속할 때마다 사용해야 하기에 위치와 비밀번호를 기억해 두어야 합니다. 인스턴스 이름 설정, AMI 선택 그리고 키페어 등록을 완료한 뒤 인스턴스 시작 버튼을 누르면 AWS EC2를 생성하게 됩니다.

2. 인스턴스 연결

(1) 접속할 주소 확인

인스턴스 연결 페이지에 들어가서 하단에 있는 ‘예’ 링크를 복사하면 키페어 부분만 따옴표 처리로 되어있는데, 그 부분에 방금 전 생성한 키 페어 주소를 복사해서 링크를 수정해 넣으면 됩니다.

(2) 터미널에서 접속

터미널에서 ssh 명령문을 통해 AWS ubuntu server에 접속합니다.

3. Ubuntu에 mySQL 설치+workbench와 연결

먼저 Ubuntu에 mySQL을 설치합니다.

(1) 시스템 패키지 목록 업데이트

인스턴스에 접속한 상태로 시스템 패키지 목록을 업데이트합니다. sudo apt update (다음 명령문을 통해 시스템 패키지 목록을 업데이트할 수 있습니다. )

(2) MySQL 서버 설치, 설정

MySQL 서버 패키지를 설치합니다.

sudo apt install mysql-server -y

(다음 명령문을 통해 MySQL 서버 패키지를 설치할 수 있습니다.) 설치를 완료한 후에는 외부에서 mySQL에 접근 가능하도록 설정해야 합니다. 터미널에서 MySQL 설정 파일을 엽니다. 이때 SSH로 연결된 상태에서 진행해야 합니다.

~$ cd /etc/mysql/mysql.conf.d
$ sudo vi mysqld.cnf

터미널에서 해당 명령어를 입력하고 기존 bind-address가 127.0.0.1로 되어 있는 부분을 0.0.0.0으로 바꿔줍니다.

‘i’를 눌러 입력 모드로 진입하고, [mysqld] 섹션 아래에 bind-address = 0.0.0.0으로 수정해둡니다. 입력이 끝난 뒤에는 ‘ESC’를 눌러 명령 모드로 돌아간 뒤 ‘:wq’를 입력하고 엔터 키를 눌러 파일을 저장하고 종료합니다.

(3) MySQL에서 사용할 계정 생성

mysql -u root -p

을 통해 mySQL에 접속해 사용할 계정을 생성해 보겠습니다.

create user ‘계정이름’@’localhost’ identified by ‘비밀번호’;
grant all privileges on *.* to '계정이름'@'localhost' with grant option;
flush privileges;

계정을 생성하고 권한을 부여합니다.

(4) 인스턴스 보안 설정

다시 aws에 돌아가서 인스턴스 보안 페이지로 갑니다. 인바운드 규칙 편집 버튼을 눌러 3306 포트로 접근이 가능하도록 합니다.

규칙 추가 버튼을 누르고, MySQL/Aurora 3306 0.0.0.0/0를 선택하고, 규칙 저장 버튼을 누릅니다.

(5) Workbench 설정

workbench를 열고 연결할 connection에서 Edit connection을 선택해주면 Manage Server Connections 창이 뜹니다.

Connection Name: 원하는 이름으로 정해줍니다.
• Connection Method: Standard TCP/IP over SSH로 설정해줍니다.
• SSH Hostname: 인스턴스의 퍼블릭 IPv4 DNS를 입력해주면 됩니다.
( AWS에서 EC2>인스턴스>인스턴스 ID 누르면 인스턴스 요약 나오는데 거기에 퍼블릭 IPv4 DNS 있습니다.)
• SSH Username: ubuntu를 입력해줍니다.
• SSH Key File: 인스턴스 생성할 때 만들었던 키 체인 파일 넣어주면 됩니다.
• MySQL Hostname: 0.0.0.0 입력해줍니다.
• MySQL Server Port: 3306 입력해줍니다.
• Username: 아까 mySQL에서 생성한 계정의 '계정이름'을 넣어줍니다.
• password: Store in Keychain을 누르고 설정한 '비밀번호'를 입력합니다. 입력하고 ok 버튼을 누른 뒤에 Test Connection 버튼을 누릅니다. 연결에 성공하면 창에 Successfully made the MySQL connection이 뜹니다.

4. 소스코드 설치

먼저 깃주소에서 전체 프로젝트를 다운로드 후 압축해제합니다. 하단 파일의 압축도 해제해야합니다.

(1) Mysql 테이블 및 데이터 설치

이전 단계에서 생성한 connection에 접속 후

Workbench에서 데이터를 삽입하기 위해 데이터베이스를 생성합니다.

CREATE DATABASE ‘db이름’;

MySQL workbench를 열고 Server에서 Data Import 버튼을 누릅니다. 삽입할 데이터 mysql_table.zip을 압축해제한 폴더를 선택한 뒤 Start Import 버튼을 누르면 다운 받은 데이터를 삽입할 수 있습니다.

(2) AWS EC2에 소스코드 설치

다운로드한 파일 중 clustering.ipynb, mysql_table.zip, product.csv를 제외하고 모두 ec2에 업로드합니다.

scp -i /경로/키파일.pem /로컬/파일/경로 ubuntu@EC2_퍼블릭_IP_주소:/home/ubuntu/원하는/원격/경로

다음 명령어를 통해 원하는 파일을 업로드할 수 있습니다. 다운로드한 파일 전체를 폴더로 묶어 폴더 전체를 ec2에 업로드하면 서버에서 실행시킬 때도 간단하게 파일을 찾을 수 있습니다.
파일을 업로드한 뒤 서버에서도 파일을 실행시키는 데에 필요한 라이브러리를 설치합니다.

flask를 설치하기 위해

pip3 install flask

pymysql을 설치하기 위해

pip3 install pymysql

mysql.connector를 설치하기 위해

pip3 install mysql-connector-python

python을 설치하기 위해

pip3 install python

다음의 명령어를 통해 필요한 라이브러리를 모두 설치합니다.

5. 서버 접속

먼저 aws 웹페이지에서 생성한 ec2 인스턴스를 실행시켜야 합니다. 인스턴스 페이지에서 생성한 인스턴스를 선택하고 실행 시작 버튼을 누릅니다. 인스턴스를 실행시키면 퍼블릭 IPv4 DNS가 나옵니다.

scp -i /경로/키파일.pem /로컬/파일/경로 ubuntu@EC2_퍼블릭_IP_주소

를 터미널에 입력하면 생성한 서버에 접속할 수 있습니다.

6. 실행

서버에 접속한 상태에서 업로드한 파일의 application을 실행합니다.

cd /home/ubuntu/파일 경로
python3 application.py

를 터미널에 입력하면 application을 실행시킬 수 있습니다.

웹페이지에서 접속하고 싶다면 인스턴스를 실행시키면서 설정된 퍼블릭 IPv2 DNS로 접속하면 됩니다.

주소는

http://EC2_퍼블릭_IP_주소:3000

입니다.

Description of Sample Data

demo 사용자 선택 제품 : loccitane-immortelle-precious-cream, summecosmetics-s-cell-c-antiage-double-action-cream
유사 사용자 1 선택 제품 : loccitane-immortelle-precious-cream, summecosmetics-s-cell-c-antiage-double-action-cream, ponds-nourishing-moisturizing-cream
유사 사용자 2 선택 제품 : loccitane-immortelle-precious-cream, summecosmetics-s-cell-c-antiage-double-action-cream, senka-aqua-bright-glow-gel-cream
유사 사용자 3 선택 제품 : loccitane-immortelle-precious-cream, summecosmetics-s-cell-c-antiage-double-action-cream, natura-bisse-inhibit-tensolift-neck-cream

How to Test

웹 서버 접속 : http://127.0.0.1:3000 or http://ec2-3-80-183-199.compute-1.amazonaws.com:3000 주소 입력
데모 계정 접속 : '[email protected]' 입력
사용자의 화장품 입력/삭제 : ex) 겔랑 슈퍼 아쿠아 세럼 라이트
카테고리 선택 : 스킨케어/선케어/클렌징/마스크팩
추천 결과 조회

Name		Name	Last commit message	Last commit date
Latest commit History 30 Commits
__pycache__		__pycache__
static		static
templates		templates
.DS_Store		.DS_Store
.gitignore		.gitignore
README.md		README.md
application.py		application.py
clustering.ipynb		clustering.ipynb
database.py		database.py
kms_model.pkl		kms_model.pkl
mysql_table.zip		mysql_table.zip
new_X_data_fin.csv.zip		new_X_data_fin.csv.zip
product.csv		product.csv

Team-hwaE/Capston_hwa_E

Folders and files

Latest commit

History

Repository files navigation