문채연 / OSS_termproject

Go to a project
Toggle navigation Toggle navigation pinning
MoonChaeyeon
f5b9128d 1 parent 4d2c14e7

frozen face

Inline Side-by-side
Showing 2 changed files with 641 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <link rel="stylesheet" href="style.css">
6 + <meta charset="utf-8">
7 + <meta name="keywords" content="엘사, 안나, 크리스토프, 한스, 울라프, 스벤, 브루니">
8 + <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
9 +</head>
10 +
11 +<body>
12 + <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
13 + <h1 contenteditable data-heading="Frozen">
14 + Frozen
15 + </h1>
16 + <div class="file-upload">
17 + <div class="image-upload-wrap">
18 + <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
19 + <div class="drag-text">
20 + <h3>얼굴 사진을 업로드 하세요</h3>
21 + </div>
22 + </div>
23 + <div class="file-upload-content">
24 + <img class="file-upload-image" id="face-image" src="#" alt="your image" />
25 + <div id="loading" class="animated bounce">
26 + <div class="spinner-border" role="status">
27 + <span class="sr-only">Loading...</span>
28 + </div>
29 + <p class="text-center">AI가 당신과 닮은 캐릭터를 분석중입니다.</p>
30 + </div>
31 + <p class="result-message"></p>
32 + <div id="label-container" class="d-flex flex-column justify-content-around"></div>
33 + <div id="addThis" class="addthis_inline_share_toolbox_6lz1"></div>
34 + <div class="pt-3 image-title-wrap">
35 + <button type="button" onclick="removeUpload()" class="remove-image">Remove
36 + <span class="image-title">Uploaded Image</span>
37 + </button>
38 + </div>
39 + </div>
40 + </div>
41 + <div id="webcam-container"></div>
42 + <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
43 + <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
44 + <footer class="footer pt-5 container d-flex justify-content-center">
45 + </footer>
46 + <svg class="svg-snowscene" xmlns="http://www.w3.org/2000/svg">
47 + <circle class="snow" />
48 + <circle class="snow" />
49 + <circle class="snow" />
50 + <circle class="snow" />
51 + <circle class="snow" />
52 + <circle class="snow" />
53 + <circle class="snow" />
54 + <circle class="snow" />
55 + <circle class="snow" />
56 + <circle class="snow" />
57 + <circle class="snow" />
58 + <circle class="snow" />
59 + <circle class="snow" />
60 + <circle class="snow" />
61 + <circle class="snow" />
62 + <circle class="snow" />
63 + <circle class="snow" />
64 + <circle class="snow" />
65 + <circle class="snow" />
66 + <circle class="snow" />
67 + <circle class="snow" />
68 + <circle class="snow" />
69 + <circle class="snow" />
70 + <circle class="snow" />
71 + <circle class="snow" />
72 + <circle class="snow" />
73 + <circle class="snow" />
74 + <circle class="snow" />
75 + <circle class="snow" />
76 + <circle class="snow" />
77 + <circle class="snow" />
78 + <circle class="snow" />
79 + <circle class="snow" />
80 + <circle class="snow" />
81 + <circle class="snow" />
82 + <circle class="snow" />
83 + <circle class="snow" />
84 + <circle class="snow" />
85 + <circle class="snow" />
86 + <circle class="snow" />
87 + <circle class="snow" />
88 + <circle class="snow" />
89 + <circle class="snow" />
90 + <circle class="snow" />
91 + <circle class="snow" />
92 + <circle class="snow" />
93 + <circle class="snow" />
94 + <circle class="snow" />
95 + <circle class="snow" />
96 + <circle class="snow" />
97 + <circle class="snow" />
98 + <circle class="snow" />
99 + <circle class="snow" />
100 + <circle class="snow" />
101 + <circle class="snow" />
102 + <circle class="snow" />
103 + <circle class="snow" />
104 + <circle class="snow" />
105 + <circle class="snow" />
106 + <circle class="snow" />
107 + </svg>
108 + <script>
109 + function readURL(input) {
110 + if (input.files && input.files[0]) {
111 + var reader = new FileReader();
112 + reader.onload = function(e) {
113 + $('.image-upload-wrap').hide();
114 + $('.file-upload-image').attr('src', e.target.result);
115 + $('.file-upload-content').show();
116 + $('.image-title').html(input.files[0].name);
117 + };
118 + reader.readAsDataURL(input.files[0]);
119 + init().then(function() {
120 + predict();
121 + $('#loading').hide();
122 + });
123 + } else {
124 + removeUpload();
125 + }
126 + }
127 +
128 + function removeUpload() {
129 + $('.file-upload-input').replaceWith($('.file-upload-input').clone());
130 + $('.file-upload-content').hide();
131 + $('.image-upload-wrap').show();
132 + }
133 + $('.image-upload-wrap').bind('dragover', function() {
134 + $('.image-upload-wrap').addClass('image-dropping');
135 + });
136 + $('.image-upload-wrap').bind('dragleave', function() {
137 + $('.image-upload-wrap').removeClass('image-dropping');
138 + });
139 + </script>
140 + <script type="text/javascript">
141 + // More API functions here:
142 + // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
143 + // the link to your model provided by Teachable Machine export panel
144 + const URL = "https://teachablemachine.withgoogle.com/models/wXBDodJuF/";
145 + let model, webcam, labelContainer, maxPredictions;
146 + // Load the image model and setup the webcam
147 + async function init() {
148 + const modelURL = URL + "model.json";
149 + const metadataURL = URL + "metadata.json";
150 + model = await tmImage.load(modelURL, metadataURL);
151 + maxPredictions = model.getTotalClasses();
152 + labelContainer = document.getElementById("label-container");
153 + for (let i = 0; i < maxPredictions; i++) {
154 + var element = document.createElement("div")
155 + element.classList.add("d-flex");
156 + labelContainer.appendChild(element);
157 + }
158 + }
159 + // run the webcam image through the image model
160 + async function predict() {
161 + var image = document.getElementById("face-image")
162 + const prediction = await model.predict(image, false);
163 + prediction.sort((a, b) => parseFloat(b.probability) - parseFloat(a.probability));
164 + var resultMessage, resultExplain;
165 + switch (prediction[0].className) {
166 + case "엘사":
167 + resultMessage = "엘사"
168 + resultExplain = "당신은 얼음공주 엘사!"
169 + break;
170 + case "안나":
171 + resultMessage = "안나"
172 + resultExplain = "당신은 밝고 명랑한 안나!"
173 + break;
174 + case "크리스토프":
175 + resultMessage = "크리스토프"
176 + resultExplain = "당신은 코가 큰 크리스토프!"
177 + break;
178 + case "한스":
179 + resultMessage = "한스"
180 + resultExplain = "당신은 잘생겼지만 찌질한 한스!"
181 + break;
182 + case "울라프":
183 + resultMessage = "울라프"
184 + resultExplain = "당신은 최강 귀요미 울라프!"
185 + break;
186 + case "스벤":
187 + resultMessage = "스벤"
188 + resultExplain = "당신은 순록?!"
189 + break;
190 + case "브루니":
191 + resultMessage = "브루니"
192 + resultExplain = "당신은 귀엽고 미간이 넓은 브루니!"
193 + break;
194 + default:
195 + resultMessage = "알수없음"
196 + resultExplain = ""
197 + }
198 + var title = "<div class='" + prediction[0].className + "-frozen-title'>" + resultMessage + "</div>"
199 + var explain = "<div class='frozen-explain pt-2'>" + resultExplain + "</div>"
200 + $('.result-message').html(title + explain);
201 + var barWidth;
202 + for (let i = 0; i < maxPredictions; i++) {
203 + if (prediction[i].probability.toFixed(2) > 0.1) {
204 + barWidth = Math.round(prediction[i].probability.toFixed(2) * 100) + "%";
205 + } else if (prediction[i].probability.toFixed(2) >= 0.01) {
206 + barWidth = "4%"
207 + } else {
208 + barWidth = "2%"
209 + }
210 + var labelTitle;
211 + switch (prediction[i].className) {
212 + case "엘사":
213 + labelTitle = "엘사"
214 + break;
215 + case "안나":
216 + labelTitle = "안나"
217 + break;
218 + case "크리스토프":
219 + labelTitle = "크리스토프"
220 + break;
221 + case "한스":
222 + labelTitle = "한스"
223 + break;
224 + case "울라프":
225 + labelTitle = "울라프"
226 + break;
227 + case "스벤":
228 + labelTitle = "스벤"
229 + break;
230 + case "브루니":
231 + labelTitle = "브루니"
232 + break;
233 + default:
234 + labelTitle = "알수없음"
235 + }
236 + var label = "<div class='frozen-label d-flex align-items-center'>" + labelTitle + "</div>"
237 + 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>"
238 + labelContainer.childNodes[i].innerHTML = label + bar;
239 + console.log(prediction);
240 + }
241 + }
242 + </script>
243 + <script>
244 + function getRandom(min, max) {
245 + return Math.random() * (max - min) + min;
246 + }
247 + (function letItSnow() {
248 + var snowflakes = document.querySelectorAll('.snow');
249 + for (var i = 0; i < snowflakes.length; i++) {
250 + var snowflake = snowflakes[i];
251 + snowflake.setAttribute('cx', getRandom(1, 100) + '%');
252 + snowflake.setAttribute('cy', '-' + getRandom(1, 100));
253 + snowflake.setAttribute('r', getRandom(1, 3));
254 + }
255 + })();
256 + </script>
257 +</body>
258 +
259 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +@charset "UTF-8";
2 +/* FROZEN */
3 +html,
4 +body {
5 + font-family: 'Jua', sans-serif;
6 +}
7 +/**/
8 + body {
9 + width: 100%;
10 + height: 100%;
11 + background: #177082;
12 + background: -moz-linear-gradient(top, #177082 0%, #52c9e0 100%);
13 + /* FF3.6+ */
14 + background: -webkit-linear-gradient(top, #f0f9ff 0%, #52c9e0 100%);
15 + /* Chrome10+,Safari5.1+ */
16 + background: -o-linear-gradient(top, #177082 0%, #52c9e0 100%);
17 + /* Opera 11.10+ */
18 + background: -ms-linear-gradient(top, #177082 0%, #52c9e0 100%);
19 + /* IE10+ */
20 + background: linear-gradient(to bottom, #177082 0%, #52c9e0 100%);
21 +}
22 + .svg-snowscene {
23 + width: 100%;
24 +}
25 + .snow {
26 + fill: #fff;
27 + animation-name: snowing;
28 + animation-duration: 3s;
29 + animation-iteration-count: infinite;
30 + animation-timing-function: ease-out;
31 +}
32 + .snow:nth-child(2n) {
33 + animation-delay: 1.5s;
34 +}
35 + .snow:nth-child(3n) {
36 + animation-delay: 2.3s;
37 + animation-duration: 3.3s;
38 +}
39 + .snow:nth-child(4n) {
40 + animation-delay: 0.8s;
41 + animation-duration: 3.2s;
42 +}
43 + .snow:nth-child(5n) {
44 + animation-delay: 2.8s;
45 +}
46 + @keyframes snowing {
47 + 0% {
48 + fill-opacity: 1;
49 + }
50 + 100% {
51 + fill-opacity: 0;
52 + transform: translateY(200px);
53 + }
54 +}
55 +
56 +/**/
57 +p {
58 + color: white;
59 + text-align: center;
60 +}
61 +h1 {
62 + background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
63 + -webkit-background-clip: text;
64 + background-size: cover;
65 + width: 100%;
66 + text-align: center;
67 + color: transparent;
68 + font-weight: 900;
69 +}
70 +h1::before {
71 + content: attr(data-heading);
72 + position: absolute;
73 + left: 0;
74 + top: 0;
75 + width: 100%;
76 + background: linear-gradient(
77 + 45deg,
78 + rgba(255, 255, 255, 0) 45%,
79 + rgba(255, 255, 255, 0.8) 50%,
80 + rgba(255, 255, 255, 0) 55%,
81 + rgba(255, 255, 255, 0) 100%
82 + );
83 + -webkit-background-clip: text;
84 + color: transparent;
85 + mix-blend-mode: screen;
86 + animation: shine 1s infinite;
87 + background-size: 200%;
88 + text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2),
89 + -2px -2px 10px rgba(0, 0, 0, 0.2);
90 +}
91 +@keyframes shine {
92 + 0% {
93 + background-position: -100%;
94 + }
95 + 100% {
96 + background-position: 100%;
97 + }
98 +} /* Not needed for demo */
99 +@font-face {
100 + font-family: 'frozen';
101 + src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
102 +}
103 +h1 {
104 + top: 10%;
105 + left: 50%;
106 + transform: translate(-50%, -50%);
107 + position: absolute;
108 + font-size: 8vw;
109 + margin: 0;
110 + font-family: 'frozen', serif;
111 + font-weight: 700;
112 +}
113 +
114 +/* 이미지 업로드 창 */
115 +.file-upload {
116 + width: 500px;
117 + margin: 10% auto;
118 + padding-top: 5%;
119 + padding-right: 15%;
120 + padding-left: 15%;
121 + padding-bottom: 10%;
122 + border-radius: 10px;
123 + border-style: hidden;
124 + background-color: #53525f54;
125 +}
126 +.file-upload-content {
127 + display: none;
128 + text-align: center;
129 +}
130 +.file-upload-input {
131 + position: absolute;
132 + margin: 0;
133 + padding: 15%;
134 + width: 100%;
135 + height: 100%;
136 + outline: none;
137 + opacity: 0;
138 + cursor: pointer;
139 +}
140 +.image-upload-wrap {
141 + background-image: #cbd6df;
142 + border: 1.5px solid #ffffff60;
143 + border-radius: 10px;
144 + position: relative;
145 +}
146 +.image-dropping,
147 +.image-upload-wrap:hover {
148 + background-color: #3f3d473d;
149 + border: 1.5px solid #ffffff60;
150 +}
151 +.image-title-wrap {
152 + padding: 0 15px 15px 15px;
153 + color: #222;
154 +}
155 +.drag-text {
156 + text-align: center;
157 +}
158 +.drag-text h3 {
159 + font-weight: 100;
160 + text-transform: uppercase;
161 + color: #37393d;
162 + padding: 60px 0;
163 +}
164 +.file-upload-image {
165 + max-height: 500px;
166 + max-width: 500px;
167 + margin: auto;
168 + padding: 20px;
169 +}
170 +.remove-image {
171 + width: 200px;
172 + margin: 0;
173 + color: #fff;
174 + background: #cd4535;
175 + border: none;
176 + padding: 10px;
177 + border-radius: 4px;
178 + border-bottom: 4px solid #b02818;
179 + transition: all 0.2s ease;
180 + outline: none;
181 + text-transform: uppercase;
182 + font-weight: 700;
183 +}
184 +.remove-image:hover {
185 + background: #c13b2a;
186 + color: #ffffff;
187 + transition: all 0.2s ease;
188 + cursor: pointer;
189 +}
190 +.remove-image:active {
191 + border: 0;
192 + transition: all 0.2s ease;
193 +}
194 +
195 +.navbar-light .navbar-brand {
196 + line-height: 1.68;
197 + text-align: left;
198 + color: #35465d;
199 +}
200 +
201 +.navbar-light .navbar-toggler {
202 + border-color: #ffffff;
203 +}
204 +
205 +.upload {
206 + width: 20%;
207 +}
208 +
209 +.upload-text {
210 + width: 58%;
211 + font-size: 2rem;
212 + line-height: 1.53;
213 + text-align: center;
214 + color: #35465d;
215 + margin: 0 auto;
216 +}
217 +
218 +/* 막대 그래프 */
219 +.bar-container {
220 + height: 2.7rem;
221 +}
222 +
223 +.엘사-box {
224 + position: relative;
225 + top: 0;
226 + left: 0;
227 + height: 2rem;
228 + border-radius: 10px;
229 + width: 100%;
230 + background-color: rgba(200, 158, 196, 0.3);
231 +}
232 +.엘사-bar {
233 + position: relative;
234 + top: -2rem;
235 + left: 0;
236 + height: 2rem;
237 + border-radius: 10px;
238 + background-color: rgba(200, 158, 196, 1);
239 +}
240 +.안나-box {
241 + position: relative;
242 + top: 0;
243 + left: 0;
244 + height: 2rem;
245 + border-radius: 10px;
246 + width: 100%;
247 + background-color: rgba(255, 201, 82, 0.3);
248 +}
249 +.안나-bar {
250 + position: relative;
251 + top: -2rem;
252 + left: 0;
253 + height: 2rem;
254 + border-radius: 10px;
255 + background-color: rgba(255, 201, 82, 1);
256 +}
257 +.크리스토프-box {
258 + position: relative;
259 + top: 0;
260 + left: 0;
261 + height: 2rem;
262 + border-radius: 10px;
263 + width: 100%;
264 + background-color: rgba(170, 205, 98, 0.3);
265 +}
266 +.크리스토프-bar {
267 + position: relative;
268 + top: -2rem;
269 + left: 0;
270 + height: 2rem;
271 + border-radius: 10px;
272 + background-color: rgba(170, 205, 98, 1);
273 +}
274 +.한스-box {
275 + position: relative;
276 + top: 0;
277 + left: 0;
278 + height: 2rem;
279 + border-radius: 10px;
280 + width: 100%;
281 + background-color: rgba(106, 175, 230, 0.3);
282 +}
283 +.한스-bar {
284 + position: relative;
285 + top: -2rem;
286 + left: 0;
287 + height: 2rem;
288 + border-radius: 10px;
289 + background-color: rgba(106, 175, 230, 1);
290 +}
291 +.울라프-box {
292 + position: relative;
293 + top: 0;
294 + left: 0;
295 + height: 2rem;
296 + border-radius: 10px;
297 + width: 100%;
298 + background-color: rgba(238, 119, 133, 0.3);
299 +}
300 +.울라프-bar {
301 + position: relative;
302 + top: -2rem;
303 + left: 0;
304 + height: 2rem;
305 + border-radius: 10px;
306 + background-color: rgba(238, 119, 133, 1);
307 +}
308 +.스벤-box {
309 + position: relative;
310 + top: 0;
311 + left: 0;
312 + height: 2rem;
313 + border-radius: 10px;
314 + width: 100%;
315 + background-color: rgba(197, 198, 182, 0.3);
316 +}
317 +.스벤-bar {
318 + position: relative;
319 + top: -2rem;
320 + left: 0;
321 + height: 2rem;
322 + border-radius: 10px;
323 + background-color: rgba(197, 198, 182, 0.3);
324 +}
325 +.브루니-box {
326 + position: relative;
327 + top: 0;
328 + left: 0;
329 + height: 2rem;
330 + border-radius: 10px;
331 + width: 100%;
332 + background-color: rgba(103, 213, 181, 0.3);
333 +}
334 +.브루니-bar {
335 + position: relative;
336 + top: -2rem;
337 + left: 0;
338 + height: 2rem;
339 + border-radius: 10px;
340 + background-color: rgba(103, 213, 181, 1);
341 +}
342 +.percent-text {
343 + font-size: 1rem;
344 + color: #ffffff;
345 +}
346 +.frozen-label {
347 + width: 20%;
348 + text-align: left;
349 + height: 2rem;
350 + font-size: 1.2rem;
351 +}
352 +#label-container {
353 + width: 80%;
354 + margin: 0 auto;
355 +}
356 +.result-message {
357 + font-size: 3rem;
358 +}
359 +.frozen-explain {
360 + font-size: 2rem;
361 +}
362 +.엘사-frozen-title {
363 + color: #c89ec4;
364 +}
365 +.안나-frozen-title {
366 + color: #ffc952;
367 +}
368 +.크리스토프-frozen-title {
369 + color: #aacd62;
370 +}
371 +.한스-frozen-title {
372 + color: #6aafe6;
373 +}
374 +.울라프-frozen-title {
375 + color: #ee7785;
376 +}
377 +.스벤-frozen-title {
378 + color: #c5c6b6;
379 +}
380 +.브루니-frozen-title {
381 + color: #67d5b2;
382 +}
...\ No newline at end of file ...\ No newline at end of file