-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
277 lines (249 loc) · 16 KB
/
index.html
File metadata and controls
277 lines (249 loc) · 16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-6220716c0037e89e"></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>BTS Face</title>
</head>
<body>
<nav class="p-3 container navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="https://sameface.netlify.app/">BTS상 테스트</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">BTS상 테스트
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</nav>
<section class="section">
<h1 class="title">BTS상 테스트</h1>
<h2 class="subtitle">얼굴로 보는 인공지능 BTS상 테스트</h2>
<h2 class="sr-only">나는 어떤 멤버와 닮았을까? 나의 BTS상 찾기를 해보세요!</h2>
<h3 class="sr-only">BTS 사진 데이터로 학습한 인공지능이 나의 얼굴로 동물상과 특징을 찾아드립니다.</h3>
<h4 class="sr-only">본 서비스는 Google의 인공지능 teachable machine 2.0을 활용하였습니다.</h4>
<p class="sr-only">얼굴로 보는 인공지능 BTS상 테스트, 나와 닮은 BTS 멤버를 찾아보세요!
회원가입도 필요없이 화면에서 바로 확인해보세요! 사진 데이터는 그 어디에도 전송되지 않습니다.</p>
</section>
<!-- <section class="youtube pb-3" id="yotube-mid-link">
<div class="container mt-3 youtube-cover d-flex flex-row-reverse align-items-center">
<img src="image/youtube-copy.jpg" alt="youtube-icon" class="youtube-icon">
<a href="https://www.youtube.com/channel/UCQNE2JmbasNYbjGAcuBiRRg" class="youtube-link">By 조코딩 유튜브 채널</a>
</div>
</section> -->
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="mt-3 container file-upload">
<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<img src="image/upload.svg" class="mt-5 pt-5 upload">
<h3 class="mb-5 pb-5 pt-4 upload-text">얼굴 사진을 올려놓거나 눌러서 업로드하세요!</h3>
</div>
</div>
<div class="file-upload-content">
<img class="file-upload-image" id="face-image" src="#" alt="your image" />
<div id="loading" class="animated bounce">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<p class="text-center">AI가 당신의 얼굴을 분석중입니다.</p>
</div>
<p class="result-message"></p>
<div id="label-container" class="d-flex flex-column justify-content-around"></div>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_inline_share_toolbox"></div>
<div class="pt-3 image-title-wrap">
<button type="button p-2" class="try-again-btn" onclick="window.location.reload();">
<span class="try-again-text">다른 사진으로 재시도</span>
</button>
</div>
</div>
</div>
<div class="ad_baners">
<ins class="kakao_ad_area" style="display:none;" data-ad-unit="DAN-V1Bus3xcEEZo6W8f" data-ad-width="320"
data-ad-height="100"></ins>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
</div>
<div class="ad_baners2">
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({ "id": 563882, "trackingCode": "AF4350952", "subId": null, "template": "carousel", "width": "640", "height": "140" });
</script>
</div>
<footer class="footer pt-5 container d-flex justify-content-center">
<div>
<p>© Hayan 2022. All Rights Reserved. </p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = "https://teachablemachine.withgoogle.com/models/TC1j4uRmo/";
let model, webcam, labelContainer, maxPredictions;
// Load the image model and setup the webcam
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// or files from your local hard drive
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) {
var element = document.createElement("div")
element.classList.add("d-flex");
labelContainer.appendChild(element);
}
}
// run the webcam image through the image model
async function predict() {
var image = document.getElementById("face-image")
const prediction = await model.predict(image, false);
prediction.sort((a, b) => parseFloat(b.probability) - parseFloat(a.probability));
var resultTitle, resultExplain, resultCeleb;
switch (prediction[0].className) {
case "진":
resultTitle = "진(Jin)"
resultExplain = "전세계 셀럽 5000명 중 선정, 미술적으로 황금비율을 가진 성형하지 않은 자연적인 얼굴이라는 평가, 어릴때 사진부터 비율이 완벽했다고"
resultCeleb = "네티즌이 뽑은 가장 편안한 보컬스타일과 음색을 가진 아티스트 1위"
break;
case "제이홉":
resultTitle = "제이홉(J Hope)"
resultExplain = "눈이 쭉 뻗어있음에도 매섭지 않고, 오히려 부드럽고 선한 인상을 준다. 눈 앞뒤꼬리가 깊고 날카롭게 내려앉아 있으며, 약간 게슴츠레한 느낌이 있는데 그것이 제이홉만의 분위기를 잡아준다. 자세히 보면, 제이홉은 선이 부드러운 인상을 지니고 있는데 이목구비가 화려하다기보다는 곱게 흘러내리는 청순한 이미지이다. 높고 부드러운 곡선의 콧대가 고운 옆선을 이룬다."
resultCeleb = "밝고 쾌활한 성격과 이미지 덕에 따뜻한 계열 색상의 염색이 잘 받는 듯"
break;
case "슈가":
resultTitle = "슈가(Suga)"
resultExplain = "직설적인 랩 가사와 강렬한 랩 스타일과는 상반되게 동글동글하고 귀여운 느낌의 외모이다.물만두. 하지만 최근들어 다이어트를 비롯한 외모변화로 차도남의 정석을 보여주고있다. 그렇기에 얼굴만 보고 '얘는 당연히 보컬이겠지' 했다가 후에 래퍼임을 알고 깜짝 놀라는 경우도 많다"
resultCeleb = "워낙 피부가 하얗고 깨끗한 탓에 어떤 색의 헤어든 다 소화해내서 팬들 사이에선 퍼스널 컬러 파괴자라고 불리기도 한다."
break;
case "정국":
resultTitle = "정국(Jungkook)"
resultExplain = "확신의 토끼상으로 사슴 눈망울을 빼다 박은듯한 초롱초롱한 큰 눈이 비주얼의 핵심이다. 때문에 정국의 눈을 보면 별이나 보석을 박은 것 같다는 소리도 팬들 사이에서 자주 나온다"
resultCeleb = "세계에서 가장 잘생긴 남자 1위 by 글로벌 투표사이트 KingChoice"
break;
case "뷔":
resultTitle = "뷔(V)"
resultExplain = "굉장히 뚜렷한 이목구비의 소유자. 사방으로 트여있는 큰 눈과 오똑 솟은 높은 코가 대표적 특징. 특유의 높은 콧대로 인하여 옆모습이 조화롭고 얼굴라인도 중성적인 느낌이 나서 아름답다."
resultCeleb = "지금까지 수십 개의 세계 최고 미남 타이틀을 거머쥔 명실상부한 K-POP 대표 비주얼"
break;
case "지민":
resultTitle = "지민(Jimin)"
resultExplain = "무대에서는 섹시하고 카리스마 넘치며 아우라 있는 외모가 돋보이는 반면 무대 밖에서는 귀엽고 사랑스러운 눈웃음이 매력적이며 대표적인 동안 페이스이다."
resultCeleb = "머리가 작고 매우 긴 다리의 소유자로 신체비율이 좋은 점도 매력 포인트"
break;
case "RM":
resultTitle = "RM"
resultExplain = "무쌍에 가로로 눈이 긴편이며, 웃을때 반달눈이 되는 특징을 지니고 있다. 한쪽 볼에 보조개가 깊게 들어가서 선한 느낌도 준다. 또 한 피부가 좋고 잡티가 없어 고화질 화면에서도 빛을 발한다."
resultCeleb = "화면상에는 날카로운 느낌과 차가운 인상을 주지만 실물을 본 팬 및 팬 아닌 사람들도 멋있다는 후기가 지배적이다."
break;
default:
resultTitle = "알수없음"
resultExplain = ""
resultCeleb = ""
}
var title = "<div class='" + prediction[0].className + "-title'>" + resultTitle + "</div>"
var explain = "<div class='animal-explain pt-2'>" + resultExplain + "</div>"
var celeb = "<div class='" + prediction[0].className + "-celeb pt-2 pb-2'>" + resultCeleb + "</div>"
$('.result-message').html(title + explain + celeb);
var barWidth;
for (let i = 0; i < maxPredictions; i++) {
if (prediction[i].probability.toFixed(2) > 0.1) {
barWidth = Math.round(prediction[i].probability.toFixed(2) * 100) + "%";
} else if (prediction[i].probability.toFixed(2) >= 0.01) {
barWidth = "4%"
} else {
barWidth = "2%"
}
var labelTitle;
switch (prediction[i].className) {
case "진":
labelTitle = "진(Jin)"
break;
case "제이홉":
labelTitle = "제이홉(J Hope)"
break;
case "슈가":
labelTitle = "슈가(Suga)"
break;
case "정국":
labelTitle = "정국(Jungkook)"
break;
case "뷔":
labelTitle = "뷔(V)"
break;
case "지민":
labelTitle = "지민(Jimin)"
break;
case "RM":
labelTitle = "RM"
break;
default:
labelTitle = "알수없음"
}
var label = "<div class='animal-label d-flex align-items-center'>" + labelTitle + "</div>"
var bar = "<div class='bar-container position-relative container'><div class='" + prediction[i].className + "-box'></div><div class='d-flex justify-content-center align-items-center " + prediction[i].className + "-bar' style='width: " + barWidth + "'><span class='d-block percent-text'>" + Math.round(prediction[i].probability.toFixed(2) * 100) + "%</span></div></div>"
labelContainer.childNodes[i].innerHTML = label + bar;
}
}
</script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.image-upload-wrap').hide();
$('#loading').show();
$('.file-upload-image').attr('src', e.target.result);
$('.file-upload-content').show();
$('.image-title').html(input.files[0].name);
};
reader.readAsDataURL(input.files[0]);
init().then(function () {
predict();
$('#loading').hide();
});
} 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');
});
</script>
</body>
<!-- Copyright (c) 2020 by Aaron Vanston (https://codepen.io/aaronvanston/pen/yNYOXR)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
</html>