조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
bd6d2705 2 parents f3542b54 8c756350

test 질문 완성

Expand all
Inline Side-by-side
Showing 23 changed files with 1135 additions and 169 deletions
{
"python.pythonPath": "C:\\Users\\JOSUEYEON\\anaconda3\\envs\\py36\\python.exe"
}
\ No newline at end of file
Flask - python web framework
opencv Ȱ ̹ νĿ
\ No newline at end of file
from flask import Flask, render_template, request
from werkzeug.utils import secure_filename
import sys
import numpy as np
from sklearn.cluster import KMeans
import matplotlib.pyplot as plt
from itertools import compress
import cv2
from scipy.spatial import distance
import copy
import math
import operator
from colormath.color_objects import LabColor, sRGBColor, HSVColor
from colormath.color_conversions import convert_color
class DominantColors:
CLUSTERS = None
IMAGE = None
COLORS = None
LABELS = None
def __init__(self, image, clusters=3):
self.CLUSTERS = clusters
img = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
self.IMAGE = img.reshape((img.shape[0] * img.shape[1], 3))
kmeans = KMeans(n_clusters = self.CLUSTERS)
kmeans.fit(self.IMAGE)
self.COLORS = kmeans.cluster_centers_
self.LABELS = kmeans.labels_
def rgb_to_hex(self, rgb):
return '#%02x%02x%02x' % (int(rgb[0]), int(rgb[1]), int(rgb[2]))
# Return a list in order of color that appeared most often.
def getHistogram(self):
numLabels = np.arange(0, self.CLUSTERS+1)
(hist, _) = np.histogram(self.LABELS, bins=numLabels)
hist = hist.astype("float")
hist /= hist.sum()
colors = self.COLORS
colors = colors[(-hist).argsort()]
hist = hist[(-hist).argsort()]
for i in range(self.CLUSTERS):
colors[i] = colors[i].astype(int)
fil = [colors[i][2] < 250 and colors[i][0] > 10 for i in range(self.CLUSTERS)]
colors = list(compress(colors, fil))
return colors, hist
def plotHistogram(self):
colors, hist = self.getHistogram()
chart = np.zeros((50, 500, 3), np.uint8)
start = 0
for i in range(len(colors)):
end = start + hist[i] * 500
r, g, b = colors[i]
cv2.rectangle(chart, (int(start), 0), (int(end), 50), (r, g, b), -1)
start = end
plt.figure()
plt.axis("off")
plt.imshow(chart)
plt.show()
return colors
def is_warm(lab_b, a):
warm_b_std = [38.022000000000006, 0, 0]
cool_b_std = [17, 0, 0]
warm_dist = 0
cool_dist = 0
for i in range(1):
warm_dist += abs(lab_b[i] - warm_b_std[i]) * a[i]
cool_dist += abs(lab_b[i] - cool_b_std[i]) * a[i]
if(warm_dist <= cool_dist):
return 1
else:
return 0
def trimming(img):
x = 100
y = 100
w = 100
h = 100
img_trim = img[y:y+h, x:x+w]
return img_trim
def analysis(imgpath):
img = cv2.imread(imgpath)
h, w, c = img.shape
if((h > 500) and (w > 500)):
img = trimming(img)
face = [img, img,
img, img,
img, img]
temp = []
clusters = 4
for f in face:
dc = DominantColors(f, clusters)
face_part_color, _ = dc.getHistogram()
temp.append(np.array(face_part_color[0]))
cheek1 = np.mean([temp[0], temp[1]], axis=0)
cheek2 = np.mean([temp[2], temp[3]], axis=0)
cheek3 = np.mean([temp[4], temp[5]], axis=0)
Lab_b, hsv_s = [], []
color = [cheek1, cheek2, cheek3]
for i in range(3):
rgb = sRGBColor(color[i][0], color[i][1], color[i][2], is_upscaled=True)
lab = convert_color(rgb, LabColor, through_rgb_type=sRGBColor)
hsv = convert_color(rgb, HSVColor, through_rgb_type=sRGBColor)
Lab_b.append(float(format(lab.lab_b, ".2f")))
hsv_s.append(float(format(hsv.hsv_s, ".2f"))*100)
Lab_b[1] = 0
Lab_b[2] = 0
Lab_weight = [100, 0, 0]
if(is_warm(Lab_b, Lab_weight)):
tone = '웜톤(warm)'
else:
tone = '쿨톤(cool)'
# Print Result
return (tone)
app=Flask(__name__)
@app.route("/", methods=['GET','POST'])
def hello():
if request.method == 'GET':
return render_template('color-1.html')
elif request.method == 'POST':
f = request.files['img-path']
f.save('./uploads'+secure_filename(f.filename))
result = analysis('./uploads'+f.filename)
if(result == "쿨톤(cool)"):
return render_template('cool.html')
elif result == "웜톤(warm)":
return render_template('warm.html')
if __name__ == "__main__":
app.run()
\ No newline at end of file
certifi==2020.11.8
click==7.1.2
colormath==3.0.0
cycler==0.10.0
decorator==4.4.2
Flask==1.1.2
gunicorn==20.0.4
itsdangerous==1.1.0
Jinja2==2.11.2
joblib==0.17.0
kiwisolver==1.3.1
MarkupSafe==1.1.1
matplotlib==3.3.3
networkx==2.5
numpy==1.19.4
opencv-contrib-python==4.4.0.46
opencv-python==4.4.0.46
Pillow==8.0.1
pyparsing==2.4.7
python-dateutil==2.8.1
scikit-learn==0.23.2
scipy==1.5.4
six==1.15.0
sklearn==0.0
threadpoolctl==2.1.0
Werkzeug==1.0.1
wincertstore==0.2
.u-section-1 {
background-image: linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
url(../static/images/main.png);
background-position: 50% 50%;
}
.u-section-1 .u-sheet-1 {
min-height: 751px;
}
.u-section-1 .u-group-1 {
width: 730px;
min-height: 431px;
box-shadow: 0 0 40px 4px rgba(26,26,26,0.8);
margin: 160px auto 60px;
}
.u-section-1 .u-container-layout-1 {
padding: 30px;
}
.u-section-1 .u-text-1 {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
margin: 89px 0 0;
}
.u-section-1 .u-text-2 {
font-size: 4.5rem;
letter-spacing: 1px;
margin: 19px 0 0;
}
@media (max-width: 1199px) {
.u-section-1 .u-sheet-1 {
min-height: 619px;
}
}
@media (max-width: 991px) {
.u-section-1 .u-sheet-1 {
min-height: 474px;
}
.u-section-1 .u-group-1 {
width: 720px;
}
}
@media (max-width: 767px) {
.u-section-1 .u-sheet-1 {
min-height: 356px;
}
.u-section-1 .u-group-1 {
width: 540px;
}
.u-section-1 .u-text-2 {
font-size: 3.75rem;
}
}
@media (max-width: 575px) {
.u-section-1 .u-sheet-1 {
min-height: 224px;
}
.u-section-1 .u-group-1 {
min-height: 370px;
margin-top: 60px;
margin-right: initial;
margin-left: initial;
width: auto;
}
.u-section-1 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px;
}
.u-section-1 .u-text-2 {
font-size: 3rem;
}
}.u-section-2 {
background-image: linear-gradient(#be1cb9, black);
}
.u-section-2 .u-sheet-1 {
min-height: 146px;
}.u-section-3 .u-sheet-1 {
min-height: 975px;
}
.u-section-3 .u-text-1 {
margin: 143px auto 0;
}
.u-section-3 .u-text-2 {
margin: 51px auto 0 303px;
}
.u-section-3 .u-text-3 {
margin: 143px auto 0;
}
.u-section-3 .u-text-4 {
font-weight: 700;
font-size: 1.25rem;
margin: 53px 229px 60px 303px;
}
@media (max-width: 1199px) {
.u-section-3 .u-text-1 {
width: auto;
margin-top: 46px;
margin-left: 257px;
}
.u-section-3 .u-text-2 {
width: auto;
margin-top: 31px;
margin-left: 173px;
}
.u-section-3 .u-text-3 {
width: auto;
margin-top: 81px;
}
.u-section-3 .u-text-4 {
width: 412px;
margin-top: 52px;
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 991px) {
.u-section-3 .u-sheet-1 {
min-height: 838px;
}
.u-section-3 .u-text-1 {
margin-top: 52px;
margin-left: 197px;
}
.u-section-3 .u-text-2 {
margin-top: 45px;
margin-left: 96px;
}
.u-section-3 .u-text-3 {
margin-top: 96px;
}
.u-section-3 .u-text-4 {
width: auto;
margin-top: 45px;
margin-right: -96px;
margin-left: 96px;
}
}
@media (max-width: 767px) {
.u-section-3 .u-text-1 {
margin-left: auto;
}
.u-section-3 .u-text-2 {
margin-top: 36px;
margin-right: 0;
margin-left: auto;
}
.u-section-3 .u-text-3 {
margin-top: 87px;
}
.u-section-3 .u-text-4 {
margin-top: 36px;
margin-left: 0;
margin-right: 0;
width: 412px;
}
}
@media (max-width: 575px) {
.u-section-3 .u-sheet-1 {
min-height: 778px;
}
.u-section-3 .u-text-1 {
margin-top: 33px;
}
.u-section-3 .u-text-2 {
margin-top: 60px;
margin-left: 0;
}
.u-section-3 .u-text-3 {
margin-top: 94px;
}
.u-section-3 .u-text-4 {
margin-left: auto;
width: auto;
}
}
\ No newline at end of file
.u-section-1 {
background-image: none;
min-height: 878px;
}
.u-section-1 .u-shape-1 {
height: 65px;
background-image: none;
margin: 377px auto 0 0;
}
.u-section-1 .u-image-1 {
object-position: 100% 100%;
width: 787px;
height: 545px;
margin: -320px calc(((100% - 1140px) / 2) + 164px) 0 auto;
}
.u-section-1 .u-text-1 {
width: 476px;
text-decoration: underline !important;
font-size: 3rem;
font-weight: normal;
font-family: "Playfair Display", serif;
margin: 60px auto 0;
}
.u-section-1 .u-icon-1 {
height: 48px;
width: 48px;
background-image: none;
margin: 50px auto 0;
}
@media (max-width: 1199px) {
.u-section-1 .u-shape-1 {
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
margin-top: -313px;
margin-right: auto;
}
.u-section-1 .u-text-1 {
width: 525px;
margin-top: 34px;
}
.u-section-1 .u-icon-1 {
margin-top: 27px;
margin-bottom: 23px;
}
}
@media (max-width: 991px) {
.u-section-1 {
min-height: 832px;
}
.u-section-1 .u-image-1 {
width: 720px;
height: 499px;
margin-top: -330px;
}
.u-section-1 .u-text-1 {
margin-top: 10px;
}
.u-section-1 .u-icon-1 {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.u-section-1 {
min-height: 707px;
}
.u-section-1 .u-image-1 {
width: 540px;
height: 374px;
margin-top: -320px;
}
.u-section-1 .u-text-1 {
margin-top: 60px;
margin-left: 58px;
margin-right: 58px;
}
}
@media (max-width: 575px) {
.u-section-1 {
min-height: 795px;
}
.u-section-1 .u-shape-1 {
margin-top: 262px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
width: 340px;
height: 235px;
margin-top: -164px;
}
.u-section-1 .u-text-1 {
font-size: 2.25rem;
width: 340px;
margin-top: 46px;
margin-left: auto;
margin-right: auto;
}
.u-section-1 .u-icon-1 {
margin-top: 32px;
}
}.u-section-2 {
background-image: none;
}
.u-section-2 .u-sheet-1 {
min-height: 443px;
}
.u-section-2 .u-layout-wrap-1 {
margin-top: 60px;
margin-bottom: 0;
}
.u-section-2 .u-layout-cell-1 {
min-height: 383px;
}
.u-section-2 .u-container-layout-1 {
padding: 30px;
}
.u-section-2 .u-text-1 {
margin: 23px auto 0;
}
.u-section-2 .u-text-2 {
font-size: 1.25rem;
margin: 35px 198px 0 212px;
}
.u-section-2 .u-btn-1 {
border-style: none;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
font-size: 1.25rem;
margin: 61px auto 0;
}
@media (max-width: 1199px) {
.u-section-2 .u-sheet-1 {
min-height: 376px;
}
.u-section-2 .u-layout-wrap-1 {
position: relative;
}
.u-section-2 .u-layout-cell-1 {
min-height: 316px;
}
.u-section-2 .u-text-2 {
margin-left: 112px;
margin-right: 98px;
}
}
@media (max-width: 991px) {
.u-section-2 .u-sheet-1 {
min-height: 160px;
}
.u-section-2 .u-layout-cell-1 {
min-height: 100px;
}
.u-section-2 .u-text-2 {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 767px) {
.u-section-2 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px;
}
}
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
// 여기에 js와 css를 넣어야함! 다른곳에 쓰면 flask가 모름...
// html도 무조건 templates에 넣기
\ No newline at end of file
.u-section-1 {
background-image: none;
min-height: 878px;
}
.u-section-1 .u-shape-1 {
height: 65px;
background-image: none;
margin: 377px auto 0 0;
}
.u-section-1 .u-image-1 {
object-position: 100% 100%;
width: 787px;
height: 545px;
margin: -320px calc(((100% - 1140px) / 2) + 164px) 0 auto;
}
.u-section-1 .u-text-1 {
width: 476px;
text-decoration: underline !important;
font-size: 3rem;
font-weight: normal;
font-family: "Playfair Display", serif;
margin: 60px auto 0;
}
.u-section-1 .u-icon-1 {
height: 48px;
width: 48px;
background-image: none;
margin: 50px auto 0;
}
@media (max-width: 1199px) {
.u-section-1 .u-shape-1 {
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
margin-top: -313px;
margin-right: auto;
}
.u-section-1 .u-text-1 {
width: 525px;
margin-top: 34px;
}
.u-section-1 .u-icon-1 {
margin-top: 27px;
margin-bottom: 23px;
}
}
@media (max-width: 991px) {
.u-section-1 {
min-height: 832px;
}
.u-section-1 .u-image-1 {
width: 720px;
height: 499px;
margin-top: -330px;
}
.u-section-1 .u-text-1 {
margin-top: 10px;
}
.u-section-1 .u-icon-1 {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.u-section-1 {
min-height: 707px;
}
.u-section-1 .u-image-1 {
width: 540px;
height: 374px;
margin-top: -320px;
}
.u-section-1 .u-text-1 {
margin-top: 60px;
margin-left: 58px;
margin-right: 58px;
}
}
@media (max-width: 575px) {
.u-section-1 {
min-height: 795px;
}
.u-section-1 .u-shape-1 {
margin-top: 262px;
margin-right: initial;
margin-left: initial;
}
.u-section-1 .u-image-1 {
width: 340px;
height: 235px;
margin-top: -164px;
}
.u-section-1 .u-text-1 {
font-size: 2.25rem;
width: 340px;
margin-top: 46px;
margin-left: auto;
margin-right: auto;
}
.u-section-1 .u-icon-1 {
margin-top: 32px;
}
}.u-section-2 {
background-image: none;
}
.u-section-2 .u-sheet-1 {
min-height: 443px;
}
.u-section-2 .u-layout-wrap-1 {
margin-top: 60px;
margin-bottom: 0;
}
.u-section-2 .u-layout-cell-1 {
min-height: 383px;
}
.u-section-2 .u-container-layout-1 {
padding: 30px;
}
.u-section-2 .u-text-1 {
margin: 23px auto 0;
}
.u-section-2 .u-text-2 {
font-size: 1.25rem;
margin: 35px 198px 0 212px;
}
.u-section-2 .u-btn-1 {
border-style: none;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
font-size: 1.25rem;
margin: 61px auto 0;
}
@media (max-width: 1199px) {
.u-section-2 .u-sheet-1 {
min-height: 376px;
}
.u-section-2 .u-layout-wrap-1 {
position: relative;
}
.u-section-2 .u-layout-cell-1 {
min-height: 316px;
}
.u-section-2 .u-text-2 {
margin-left: 112px;
margin-right: 98px;
}
}
@media (max-width: 991px) {
.u-section-2 .u-sheet-1 {
min-height: 160px;
}
.u-section-2 .u-layout-cell-1 {
min-height: 100px;
}
.u-section-2 .u-text-2 {
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 767px) {
.u-section-2 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px;
}
}
\ No newline at end of file
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Cool tone">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>color 1</title>
<link rel="stylesheet" href="{{ url_for('static', filename='nicepage.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='color-1.css') }}" media="screen">
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}" defer=""></script>
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='nicepage.js') }}" defer=""></script>
<meta name="generator" content="Nicepage 3.0.9, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "",
"url": "{{ url_for('static', filename='index.html') }}",
"logo": "{{ url_for('static', filename='images/logo.png') }}"
}</script>
<meta property="og:title" content="color 1">
<meta property="og:type" content="website">
<meta name="theme-color" content="#478ac9">
<link rel="canonical" href="{{ url_for('static', filename='index.html') }}">
<meta property="og:url" content="{{ url_for('static', filename='index.html') }}">
</head>
<body class="u-body u-overlap u-palette-1-base"><header class="u-align-right u-clearfix u-header u-sticky" id="sec-dbe3"><div class="u-clearfix u-sheet u-valign-bottom-xl u-valign-top-md u-valign-top-sm u-valign-top-xs u-sheet-1">
<a href="https://find-your-color.ml/" class="u-image u-logo u-image-1" title="Personal Color">
<img src="{{ url_for('static', filename='images/logo.png') }}" class="u-logo-image u-logo-image-1" data-image-width="198.857">
</a>
</div></header>
<section class="u-clearfix u-image u-shading u-section-1" id="carousel_2ae0">
<style type='text/css'>
#carousel_2ae0
{
background-image: url("{{ url_for('static',filename = 'images/main.png')}}");
}
</style>
<div class="u-clearfix u-sheet u-valign-top-xs u-sheet-1">
<div class="u-align-center u-border-6 u-border-white u-container-style u-expanded-width-xs u-group u-opacity u-opacity-15 u-group-1">
<div class="u-container-layout u-container-layout-1">
<h6 class="u-custom-font u-text u-text-font u-text-1">TEST YOUR PERSONAL COLOR</h6>
<h1 class="u-custom-font u-font-playfair-display u-text u-title u-text-2"><b>Personal Color</b>
<br>with openCV test
</h1>
</div>
</div>
</div>
</section>
<section class="u-clearfix u-gradient u-section-2" id="sec-2a2c">
<div class="u-clearfix u-sheet u-sheet-1"></div>
</section>
<section class="u-black u-clearfix u-section-3" id="sec-b2d8">
<div class="u-clearfix u-sheet u-sheet-1">
<h1 class="u-align-center u-heading-font u-text u-text-default u-title u-text-1">openCV&nbsp;<br>이미지 분석
</h1>
<h5 class="u-align-center u-text u-text-default u-text-2">openCV를 이용하여 사용자 이미지로부터 평균 색상을 추출하고<br>분석하여 퍼스널 컬러를 알려줍니다.
</h5>
<h5 class="u-align-center u-text u-text-default u-text-3">이미지 업로드 시 유의사항</h5>
<ul class="u-align-left u-text u-text-4">
<li>왼쪽 피부 사진만 올려주세요</li>
<li>최대한 사진 안에 피부색만 나오도록 해주세요</li>
<li>조명의 영향을 줄이기 위해 최대한 자연조명 밑에서 찍어주세요</li>
</ul>
</div>
</section>
<form action="" method="post" enctype="multipart/form-data">
<input type="file", name="img-path">
<button type='submit'>Start Test</button>
</form>
<footer class="u-align-left u-black u-clearfix u-footer u-footer" id="sec-ed9b"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<blockquote class="u-align-center u-text u-text-default u-text-1">2020-2 Opensource Programming<br>Lee Su Bin &amp; Jo Sue Yeon
</blockquote>
</div></footer>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>이미지 업로드</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/colorcs.css') }}">
</head>
<body>
<p>image upload with opencv</p>
<div class="container">
<form class="form">
<div class="file-upload-wrapper" data-text="Select your file!">
<input name="file-upload-field" type="file" class="file-upload-field" value="">
</div>
</form>
</div>
</div>
<form action="" method="post" enctype="multipart/form-data">
<input type="file", name="img-path">
<button type='submit'>Start Test</button>
</form>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Cool tone">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>cool</title>
<link rel="stylesheet" href="{{ url_for('static', filename='nicepage.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='cool.css') }}" media="screen">
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}" defer=""></script>
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='nicepage.js') }}" defer=""></script>
<meta name="generator" content="Nicepage 3.0.9, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "",
"url": "{{ url_for('static', filename='index.html') }}",
"logo": "{{ url_for('static', filename='images/logo.png') }}"
}</script>
<meta property="og:title" content="cool">
<meta property="og:type" content="website">
<meta name="theme-color" content="#478ac9">
<link rel="canonical" href="{{ url_for('static', filename='index.html') }}">
<meta property="og:url" content="{{ url_for('static', filename='index.html') }}">
</head>
<body class="u-body u-overlap u-palette-1-base"><header class="u-align-right u-clearfix u-header u-sticky" id="sec-dbe3"><div class="u-clearfix u-sheet u-valign-bottom-xl u-valign-top-md u-valign-top-sm u-valign-top-xs u-sheet-1">
<a href="https://find-your-color.ml/" class="u-image u-logo u-image-1" title="Personal Color">
<img src="{{ url_for('static', filename='images/logo.png') }}" class="u-logo-image u-logo-image-1" data-image-width="198.857">
</a>
</div></header>
<section class="u-align-center u-black u-clearfix u-section-1" id="carousel_fef6">
<div class="u-expanded-width u-shape u-shape-rectangle u-white u-shape-1"></div>
<img class="u-border-2 u-border-grey-75 u-expand-resize u-image u-image-1" src="{{ url_for('static', filename='images/joshua-coleman-iNrBHgUBDSg-unsplash.jpg') }}">
<h1 class="u-custom-font u-font-playfair-display u-text u-text-1">Cool tone</h1><span class="u-icon u-icon-circle u-text-palette-1-base u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 491.996 491.996" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-c128"></use></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 491.996 491.996" x="0px" y="0px" id="svg-c128" style="enable-background:new 0 0 491.996 491.996;"><g><g><path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848 L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128 c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084 c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224 C491.996,136.902,489.204,130.046,484.132,124.986z"></path>
</g>
</g></svg></span>
</section>
<section class="u-black u-clearfix u-section-2" id="sec-e83d">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-clearfix u-expanded-width u-layout-wrap u-layout-wrap-1">
<div class="u-layout">
<div class="u-layout-row">
<div class="u-container-style u-layout-cell u-size-60 u-layout-cell-1">
<div class="u-container-layout u-container-layout-1">
<h1 class="u-align-center u-text u-text-default u-text-1">퍼스널 컬러: 쿨톤</h1>
<p class="u-align-center u-text u-text-2">openCV 이미지 분석 결과 당신은 쿨톤입니다.<br>
<br>
</p>
<a href="https://find-your-color.ml/" class="u-btn u-button-style u-hover-palette-1-dark-1 u-palette-1-base u-btn-1">다시 하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="u-align-left u-black u-clearfix u-footer u-footer" id="sec-ed9b"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<blockquote class="u-align-center u-text u-text-default u-text-1">2020-2 Opensource Programming<br>Lee Su Bin &amp; Jo Sue Yeon
</blockquote>
</div></footer>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Cool tone">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>cool</title>
<link rel="stylesheet" href="{{ url_for('static', filename='nicepage.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='cool.css') }}" media="screen">
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}" defer=""></script>
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='nicepage.js') }}" defer=""></script>
<meta name="generator" content="Nicepage 3.0.9, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "",
"url": "{{ url_for('static', filename='index.html') }}",
"logo": "{{ url_for('static', filename='images/logo.png') }}"
}</script>
<meta property="og:title" content="cool">
<meta property="og:type" content="website">
<meta name="theme-color" content="#478ac9">
<link rel="canonical" href="{{ url_for('static', filename='index.html') }}">
<meta property="og:url" content="{{ url_for('static', filename='index.html') }}">
</head>
<body data-home-page="{{ url_for('static', filename='color-1.html') }}" data-home-page-title="color" class="u-body u-overlap u-palette-1-base"><header class="u-align-right u-clearfix u-header u-sticky" id="sec-dbe3"><div class="u-clearfix u-sheet u-valign-bottom-xl u-valign-top-md u-valign-top-sm u-valign-top-xs u-sheet-1">
<a href="https://find-your-color.ml/" class="u-image u-logo u-image-1" title="Personal Color">
<img src="{{ url_for('static', filename='images/logo.png') }}" class="u-logo-image u-logo-image-1" data-image-width="198.857">
</a>
</div></header>
<section class="u-align-center u-black u-clearfix u-section-1" id="carousel_fef6">
<div class="u-expanded-width u-shape u-shape-rectangle u-white u-shape-1"></div>
<img class="u-border-2 u-border-grey-75 u-expand-resize u-image u-image-1" src="{{ url_for('static', filename='images/joshua-coleman-iNrBHgUBDSg-unsplash.jpg') }}">
<h1 class="u-custom-font u-font-playfair-display u-text u-text-1">Cool tone</h1><span class="u-icon u-icon-circle u-text-palette-1-base u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 491.996 491.996" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-c128"></use></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 491.996 491.996" x="0px" y="0px" id="svg-c128" style="enable-background:new 0 0 491.996 491.996;"><g><g><path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848 L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128 c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084 c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224 C491.996,136.902,489.204,130.046,484.132,124.986z"></path>
</g>
</g></svg></span>
</section>
<section class="u-black u-clearfix u-section-2" id="sec-e83d">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-clearfix u-expanded-width u-layout-wrap u-layout-wrap-1">
<div class="u-layout">
<div class="u-layout-row">
<div class="u-container-style u-layout-cell u-size-60 u-layout-cell-1">
<div class="u-container-layout u-container-layout-1">
<h1 class="u-align-center u-text u-text-default u-text-1">퍼스널 컬러: 쿨톤</h1>
<p class="u-align-center u-text u-text-2">openCV 이미지 분석 결과 당신은 쿨톤입니다.<br>
<br>
</p>
<a href="https://find-your-color.ml/" class="u-btn u-button-style u-hover-palette-1-dark-1 u-palette-1-base u-btn-1">다시 하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="u-align-left u-black u-clearfix u-footer u-footer" id="sec-ed9b"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<blockquote class="u-align-center u-text u-text-default u-text-1">2020-2 Opensource Programming<br>Lee Su Bin &amp; Jo Sue Yeon
</blockquote>
</div></footer>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="Cool tone">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>warm</title>
<link rel="stylesheet" href="{{ url_for('static', filename='nicepage.css') }}" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='warm.css') }}" media="screen">
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}" defer=""></script>
<script class="u-script" type="text/javascript" src="{{ url_for('static', filename='nicepage.js') }}" defer=""></script>
<meta name="generator" content="Nicepage 3.0.9, nicepage.com">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "",
"url": "{{ url_for('static', filename='index.html') }}",
"logo": "{{ url_for('static', filename='images/logo.png') }}"
}</script>
<meta property="og:title" content="warm">
<meta property="og:type" content="website">
<meta name="theme-color" content="#478ac9">
<link rel="canonical" href="{{ url_for('static', filename='index.html') }}">
<meta property="og:url" content="{{ url_for('static', filename='index.html') }}">
</head>
<body class="u-body u-overlap u-palette-1-base"><header class="u-align-right u-clearfix u-header u-sticky" id="sec-dbe3"><div class="u-clearfix u-sheet u-valign-bottom-xl u-valign-top-md u-valign-top-sm u-valign-top-xs u-sheet-1">
<a href="https://find-your-color.ml/" class="u-image u-logo u-image-1" title="Personal Color">
<img src="{{ url_for('static', filename='images/logo.png') }}" class="u-logo-image u-logo-image-1" data-image-width="198.857">
</a>
</div></header>
<section class="u-align-center u-black u-clearfix u-section-1" id="carousel_fef6">
<div class="u-expanded-width u-shape u-shape-rectangle u-white u-shape-1"></div>
<img class="u-border-2 u-border-grey-75 u-expand-resize u-image u-image-1" src="{{ url_for('static', filename='images/hamed-daram--5fbmfaInwg-unsplash.jpg') }}">
<h1 class="u-custom-font u-font-playfair-display u-text u-text-1">warm tone</h1><span class="u-icon u-icon-circle u-text-palette-1-base u-icon-1"><svg class="u-svg-link" preserveAspectRatio="xMidYMin slice" viewBox="0 0 491.996 491.996" style=""><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-c128"></use></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" class="u-svg-content" viewBox="0 0 491.996 491.996" x="0px" y="0px" id="svg-c128" style="enable-background:new 0 0 491.996 491.996;"><g><g><path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848 L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128 c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084 c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224 C491.996,136.902,489.204,130.046,484.132,124.986z"></path>
</g>
</g></svg></span>
</section>
<section class="u-black u-clearfix u-section-2" id="sec-e83d">
<div class="u-clearfix u-sheet u-sheet-1">
<div class="u-clearfix u-expanded-width u-layout-wrap u-layout-wrap-1">
<div class="u-layout">
<div class="u-layout-row">
<div class="u-container-style u-layout-cell u-size-60 u-layout-cell-1">
<div class="u-container-layout u-container-layout-1">
<h1 class="u-align-center u-text u-text-default u-text-1">퍼스널 컬러: 웜톤</h1>
<p class="u-align-center u-text u-text-2">openCV 이미지 분석 결과 당신은 웜톤입니다.<br>
<br>
</p>
<a href="https://find-your-color.ml/" class="u-btn u-button-style u-hover-palette-1-dark-1 u-palette-1-base u-btn-1">다시 하기</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="u-align-left u-black u-clearfix u-footer u-footer" id="sec-ed9b"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<blockquote class="u-align-center u-text u-text-default u-text-1">2020-2 Opensource Programming<br>Lee Su Bin &amp; Jo Sue Yeon
</blockquote>
</div></footer>
</body>
</html>
\ No newline at end of file
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.image-upload-wrap').hide();
$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show();
$('.image-title').html(input.files[0].name);
};
reader.readAsDataURL(input.files[0]);
} else {
removeUpload();
}
}
function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide();
$('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
$('.image-upload-wrap').addClass('image-dropping');
});
$('.image-upload-wrap').bind('dragleave', function () {
$('.image-upload-wrap').removeClass('image-dropping');
});
body {
font-family: sans-serif;
background-color: #eeeeee;
}
.file-upload {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
padding: 20px;
}
.file-upload-btn {
width: 100%;
margin: 0;
color: #fff;
background: #008b8b;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #000000;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}
.file-upload-btn:hover {
background: #1AA059;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}
.file-upload-btn:active {
border: 0;
transition: all .2s ease;
}
.file-upload-content {
display: none;
text-align: center;
}
.file-upload-input {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
cursor: pointer;
}
.image-upload-wrap {
margin-top: 20px;
border: 4px dashed #696969;
position: relative;
}
.image-dropping,
.image-upload-wrap:hover {
background-color: #dcdcdc;
border: 4px dashed #ffffff;
}
.image-title-wrap {
padding: 0 15px 15px 15px;
color: #222;
}
.drag-text {
text-align: center;
}
.drag-text h3 {
font-weight: 100;
text-transform: uppercase;
color: #000000;
padding: 60px 0;
}
.file-upload-image {
max-height: 200px;
max-width: 200px;
margin: auto;
padding: 20px;
}
.remove-image {
width: 200px;
margin: 0;
color: #fff;
background: #cd4535;
border: none;
padding: 10px;
border-radius: 4px;
border-bottom: 4px solid #b02818;
transition: all .2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}
.remove-image:hover {
background: #c13b2a;
color: #ffffff;
transition: all .2s ease;
cursor: pointer;
}
.remove-image:active {
border: 0;
transition: all .2s ease;
}
<link rel= "stylesheet" type="text/css" href="css.css">
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<h2><center><br><strong>이미지 업로드</strong></center></h2>
<div class="file-upload">
<button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button>
<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<h3>UPLOAD</h3>
</div>
</div>
<div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button>
</div>
</div>
</div>
<h5><center>Copyright (c) 2020 by Aaron Vanston</center></h5>
\ No newline at end of file