문채연 / 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="keywords" content="엘사, 안나, 크리스토프, 한스, 울라프, 스벤, 브루니">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
</head>
<body>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<h1 contenteditable data-heading="Frozen">
Frozen
</h1>
<div class="file-upload">
<div class="image-upload-wrap">
<input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
<div class="drag-text">
<h3>얼굴 사진을 업로드 하세요</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>
<div id="addThis" class="addthis_inline_share_toolbox_6lz1"></div>
<div class="pt-3 image-title-wrap">
<button type="button" onclick="removeUpload()" class="remove-image">Remove
<span class="image-title">Uploaded Image</span>
</button>
</div>
</div>
</div>
<div id="webcam-container"></div>
<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>
<footer class="footer pt-5 container d-flex justify-content-center">
</footer>
<svg class="svg-snowscene" xmlns="http://www.w3.org/2000/svg">
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
<circle class="snow" />
</svg>
<script>
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]);
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>
<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/wXBDodJuF/";
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";
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 resultMessage, resultExplain;
switch (prediction[0].className) {
case "엘사":
resultMessage = "엘사"
resultExplain = "당신은 얼음공주 엘사!"
break;
case "안나":
resultMessage = "안나"
resultExplain = "당신은 밝고 명랑한 안나!"
break;
case "크리스토프":
resultMessage = "크리스토프"
resultExplain = "당신은 코가 큰 크리스토프!"
break;
case "한스":
resultMessage = "한스"
resultExplain = "당신은 잘생겼지만 찌질한 한스!"
break;
case "울라프":
resultMessage = "울라프"
resultExplain = "당신은 최강 귀요미 울라프!"
break;
case "스벤":
resultMessage = "스벤"
resultExplain = "당신은 순록?!"
break;
case "브루니":
resultMessage = "브루니"
resultExplain = "당신은 귀엽고 미간이 넓은 브루니!"
break;
default:
resultMessage = "알수없음"
resultExplain = ""
}
var title = "<div class='" + prediction[0].className + "-frozen-title'>" + resultMessage + "</div>"
var explain = "<div class='frozen-explain pt-2'>" + resultExplain + "</div>"
$('.result-message').html(title + explain);
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 = "엘사"
break;
case "안나":
labelTitle = "안나"
break;
case "크리스토프":
labelTitle = "크리스토프"
break;
case "한스":
labelTitle = "한스"
break;
case "울라프":
labelTitle = "울라프"
break;
case "스벤":
labelTitle = "스벤"
break;
case "브루니":
labelTitle = "브루니"
break;
default:
labelTitle = "알수없음"
}
var label = "<div class='frozen-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;
console.log(prediction);
}
}
</script>
<script>
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
(function letItSnow() {
var snowflakes = document.querySelectorAll('.snow');
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.setAttribute('cx', getRandom(1, 100) + '%');
snowflake.setAttribute('cy', '-' + getRandom(1, 100));
snowflake.setAttribute('r', getRandom(1, 3));
}
})();
</script>
</body>
</html>
\ No newline at end of file
@charset "UTF-8";
/* FROZEN */
html,
body {
font-family: 'Jua', sans-serif;
}
/**/
body {
width: 100%;
height: 100%;
background: #177082;
background: -moz-linear-gradient(top, #177082 0%, #52c9e0 100%);
/* FF3.6+ */
background: -webkit-linear-gradient(top, #f0f9ff 0%, #52c9e0 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #177082 0%, #52c9e0 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #177082 0%, #52c9e0 100%);
/* IE10+ */
background: linear-gradient(to bottom, #177082 0%, #52c9e0 100%);
}
.svg-snowscene {
width: 100%;
}
.snow {
fill: #fff;
animation-name: snowing;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
.snow:nth-child(2n) {
animation-delay: 1.5s;
}
.snow:nth-child(3n) {
animation-delay: 2.3s;
animation-duration: 3.3s;
}
.snow:nth-child(4n) {
animation-delay: 0.8s;
animation-duration: 3.2s;
}
.snow:nth-child(5n) {
animation-delay: 2.8s;
}
@keyframes snowing {
0% {
fill-opacity: 1;
}
100% {
fill-opacity: 0;
transform: translateY(200px);
}
}
/**/
p {
color: white;
text-align: center;
}
h1 {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
-webkit-background-clip: text;
background-size: cover;
width: 100%;
text-align: center;
color: transparent;
font-weight: 900;
}
h1::before {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
width: 100%;
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 55%,
rgba(255, 255, 255, 0) 100%
);
-webkit-background-clip: text;
color: transparent;
mix-blend-mode: screen;
animation: shine 1s infinite;
background-size: 200%;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2),
-2px -2px 10px rgba(0, 0, 0, 0.2);
}
@keyframes shine {
0% {
background-position: -100%;
}
100% {
background-position: 100%;
}
} /* Not needed for demo */
@font-face {
font-family: 'frozen';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff');
}
h1 {
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-size: 8vw;
margin: 0;
font-family: 'frozen', serif;
font-weight: 700;
}
/* 이미지 업로드 창 */
.file-upload {
width: 500px;
margin: 10% auto;
padding-top: 5%;
padding-right: 15%;
padding-left: 15%;
padding-bottom: 10%;
border-radius: 10px;
border-style: hidden;
background-color: #53525f54;
}
.file-upload-content {
display: none;
text-align: center;
}
.file-upload-input {
position: absolute;
margin: 0;
padding: 15%;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
cursor: pointer;
}
.image-upload-wrap {
background-image: #cbd6df;
border: 1.5px solid #ffffff60;
border-radius: 10px;
position: relative;
}
.image-dropping,
.image-upload-wrap:hover {
background-color: #3f3d473d;
border: 1.5px solid #ffffff60;
}
.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: #37393d;
padding: 60px 0;
}
.file-upload-image {
max-height: 500px;
max-width: 500px;
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 0.2s ease;
outline: none;
text-transform: uppercase;
font-weight: 700;
}
.remove-image:hover {
background: #c13b2a;
color: #ffffff;
transition: all 0.2s ease;
cursor: pointer;
}
.remove-image:active {
border: 0;
transition: all 0.2s ease;
}
.navbar-light .navbar-brand {
line-height: 1.68;
text-align: left;
color: #35465d;
}
.navbar-light .navbar-toggler {
border-color: #ffffff;
}
.upload {
width: 20%;
}
.upload-text {
width: 58%;
font-size: 2rem;
line-height: 1.53;
text-align: center;
color: #35465d;
margin: 0 auto;
}
/* 막대 그래프 */
.bar-container {
height: 2.7rem;
}
.엘사-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(200, 158, 196, 0.3);
}
.엘사-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(200, 158, 196, 1);
}
.안나-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(255, 201, 82, 0.3);
}
.안나-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(255, 201, 82, 1);
}
.크리스토프-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(170, 205, 98, 0.3);
}
.크리스토프-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(170, 205, 98, 1);
}
.한스-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(106, 175, 230, 0.3);
}
.한스-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(106, 175, 230, 1);
}
.울라프-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(238, 119, 133, 0.3);
}
.울라프-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(238, 119, 133, 1);
}
.스벤-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(197, 198, 182, 0.3);
}
.스벤-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(197, 198, 182, 0.3);
}
.브루니-box {
position: relative;
top: 0;
left: 0;
height: 2rem;
border-radius: 10px;
width: 100%;
background-color: rgba(103, 213, 181, 0.3);
}
.브루니-bar {
position: relative;
top: -2rem;
left: 0;
height: 2rem;
border-radius: 10px;
background-color: rgba(103, 213, 181, 1);
}
.percent-text {
font-size: 1rem;
color: #ffffff;
}
.frozen-label {
width: 20%;
text-align: left;
height: 2rem;
font-size: 1.2rem;
}
#label-container {
width: 80%;
margin: 0 auto;
}
.result-message {
font-size: 3rem;
}
.frozen-explain {
font-size: 2rem;
}
.엘사-frozen-title {
color: #c89ec4;
}
.안나-frozen-title {
color: #ffc952;
}
.크리스토프-frozen-title {
color: #aacd62;
}
.한스-frozen-title {
color: #6aafe6;
}
.울라프-frozen-title {
color: #ee7785;
}
.스벤-frozen-title {
color: #c5c6b6;
}
.브루니-frozen-title {
color: #67d5b2;
}
\ No newline at end of file