인공지능 부자상 테스트 2.0

나는 얼마나 많은 자산을 모을 수 있을까?

얼굴 이미지를 올려놓거나
클릭 후 업로드하세요!

이미지를 별도 저장하거나 다른 용도로 사용하지 않습니다.

글자가 크고 진할수록 이미지와 관련 있는 기업입니다.

웹사이트 제작에 적용된 소스코드

인공지능 부자얼굴 테스트 제작에 적용된 HTML, CSS, 자바스크립트 소스코드 일부를 아래에서 확인할 수 있습니다.
TensorFlow, Face-api, BootStrap, jQuery, jqCloud 등 라이브러리는 CDN으로 연결하거나 로컬에 설치해야 합니다.

HTML

<main class="main">
    <h1 class="title">인공지능 부자얼굴 테스트 2.0</h1>
    <h2 class="subtitle">나는 얼마나 많은 자산을 모을 수 있을까?</h2>
    <div id="resultID" class="container file-upload">
        <div class="image-upload-wrap">
            <input class="file-upload-input" style="z-index:1" type='file' id="img-input" accept="image/*" aria-label="이미지 파일 입력">
            <div class="drag-text">
                <img src="assets\file_upload_black_24dp.svg" class="mt-5 pt-5 upload" width="15%" height="15%" alt="Upload Face Image">
                <div class="mb-5 pb-5 pt-3 upload-text" style="font-size:2rem">얼굴 이미지를 올려놓거나<br>클릭 후 업로드하세요!</div>
            </div>
        </div>
        <p class="text-center mt-3" style="color:red; font-size:1.5rem">이미지를 별도 저장하거나 다른 용도로 사용하지 않습니다.</p>
        <div class="file-upload-content text-center">
            <div class="detect-face" aria-label="draw detecting square"></div>
            <img class="file-upload-image" id="face-image" src="#" alt="Face image">
            <div class="count_num" id="label-container" style="display:none">
                <div id="analysis">
                    <p class="spinner-border text-info" role="status"></p>
                    <p>인공지능이 부자상 이미지 분석중...</p>
                </div>
                <div id="nothing-face" style="display:none">
                    <p style="color:red">이미지에서 얼굴을 찾을 수 없습니다.</p>
                    <p>얼굴이 있는 이미지를 사용하여 테스트 하세요!</p>
                    <button type="button" onclick=removeUpload() class="btn btn-warning remove-image">다른 사진 적용하기</button>
                </div>
                <div id="toomuch-face" style="display:none">
                    <p style="color:red">이미지에서 <span id="faces-qty"></span>명의 얼굴이 확인 되었습니다.</p>
                    <p>한 명의 얼굴 이미지를 사용하여 테스트 하세요!</p>
                    <button type="button" onclick=removeUpload() class="btn btn-warning remove-image">다른 사진 적용하기</button>
                </div>
            </div>
            <div class="image-title-wrap">
                <div class="progress_wrap"></div>
                <div class="ai_comment"></div>
                <div class="wordCloud-title">글자가 크고 진할수록 이미지와 관련 있는 기업입니다.</div>
                <div id="wordCloud" class="wordCloud mt-2 mb-4"></div>
                <button type="button" id="lucky-number" class="btn btn-primary remove-image">행운의 번호 확인</button>
                <button type="button" id="remove-upload" class="btn btn-warning remove-image">다른 사진 적용하기</button>
                <div class="lotto-wrapper"></div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-lg btn-primary show-none" aria-label="back-to-top button" id="btn-back-to-top">
        <i class="bi bi-triangle-fill" role="img" aria-label="back to top"></i>
    </button>
</main>
<template id="lotto-ball-template">
    <div class="lotto-ball">
        <div class="number"></div>
    </div>
</template>
<template id="progress-template">
    <div class="progress-label"></div>
    <div class="progress">
        <div id="progress" class="progress-bar bg-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        </div>
    </div>
</template>

CSS

body {
    font-family: 'Jua', sans-serif;
    background-color: #ffffff;
}
.file-upload {
    background-color: #fdf2f2;
    width: 100%;
    margin: 0 auto;
    padding: 5% 0;
    border-radius: 10px;
    border: solid 1.5px #fdf2f2;
}
.file-upload-btn {
    width: 1000%;
    margin: 0;
    color: #fff;
    background: #1FB264;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #15824B;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}
.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 {
    width: 60%;
    margin: 0 auto;
    border: 2.5px dashed #0e58b9;
    position: relative;
    object-fit: contain;
    border-radius: 10px;
    background-color: rgba( 255, 255, 255, 1 );
}
.image-dropping, .image-upload-wrap:hover {
    background-color: rgb(250, 255, 176, 1);
    border: 2.5px dashed #0e58b9;
}
.image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
    text-align: center;
    display:auto !important;
}
.drag-text {
    text-align: center;
}
.drag-text h3 {
    width: 60%;
    font-weight: 100;
    text-transform: uppercase;
    font-family: 'Jua', sans-serif;
    font-size: 2rem;
    line-height: 1.53;
    text-align: center;
    color : #0050b8;
    margin: 0 auto;
}
.file-upload-image {
    max-height: 60%;
    max-width: 60%;
    margin: auto;
    padding: 10px;
}
.detect-face {
    position: absolute;
    left:50%;
    transform: translate(-50%, 0%);
    max-height: 60%;
    max-width: 60%;
    margin: auto;
    padding: 10px;
}
.remove-image {
    width: 200px;
    font-family: 'Jua', sans-serif;
    font-size: 1.5rem;
    margin: 0.7rem;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 2rem;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 400;
}
nav {
    background-color: rgba(157, 213, 253);
}
.remove-image:hover {
    color: #383838;
    transition: all .2s ease;
    cursor: pointer;
}
.remove-image:active {
    border: 0;
    transition: all .2s ease;
}
.nav-distance {
    padding : 2% 8%;
}
.navbar-light .navbar-brand {
    font-family: 'Jua', sans-serif;
    line-height: 1.5;
    text-align: left;
    color: #35465d;
}
.navbar-light .navbar-toggler {
    border-width: 2px;
}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.section {
    margin-top: 5%;
    margin-bottom: 5%;
}
.title {
    font-family: 'Jua', sans-serif;
    font-size: 3rem;
    line-height: 1.67;
    text-align: center;
    color: #35465d
}
.subtitle {
    font-family: 'Jua', sans-serif;
    font-size: 2.5rem;
    line-height: 1.53;
    text-align: center;
    color: #35465d
}
.kakao-link > a > img{
    position: relative;
    width: 60px;  
    height:60px;
}
@media screen and (max-width: 600px) {
    html {
    font-size: 10px;
    }
    .container-fluid {
    font-size: 1.5rem;
    }
    .navbar-brand {
    font-size: 2.25rem;
    }
    .kakao-link > a > img{
    position: relative;
    width: 48px;  
    height:48px;
    }
}
.naver-blog-link {
    font-family: 'Jua', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    margin-right: 1.5rem;
    text-align: end;
    text-decoration: none;
}
.naver-blog-link:hover {
    font-family: 'Jua', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    margin-right: 1.5rem;
    text-align: end;
    color : #374af7;
    text-decoration: underline;
}
.naver-blog-icon {
    width : 4%;
}
.upload {
    width: 15%;
    object-fit: contain;
}
.count_num {
    font-family: 'Jua', sans-serif;
    color: #05a81a;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 2%;
    font-size: 2.5rem;
    font-weight: bold;
}
.count_num_result {
    color: #a80536;
    min-width: 5%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1%;
    font-size: 3rem;
    font-weight: bold;
}
.progress {
    font-family: 'Jua', sans-serif;
    width: 70%;
    height : 2.75rem;
    margin: auto;
    margin-bottom: 1.5rem;
    font-size:1.63rem;
    background-color: none;
}
.progress-label {
    font-family: 'Jua', sans-serif;
    width: 70%;
    height : 2rem;
    margin: auto;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    text-align: left;
}
.ai_comment {
    text-align: left;
    justify-content: space-between;
    font-family: 'Jua', sans-serif;
    color: #4a0185;
    width: 90%;
    margin: auto;
    margin-top: 2.5rem;
    padding: 1%;
    font-size: 1.75rem;
}
.wordCloud-title, .share-title {
    font-size: 2rem;
    margin-top: 2.5rem;
    color:red;
}
.wordCloud {
    margin:auto;
    width:80%;
    height:300px;
}
#manual, #source-code {
    margin: 3rem 3rem;
    padding: 0 3rem;
}
#manual p, #source-code p{
    font-size: 1.5rem;
}
.footer {
    font-family: 'Jua', sans-serif;
    text-align: center;
    width: 100%;
    margin: auto;
    padding: 5%;
    font-size: 1.5rem;
}
.footer > div > a, .footer > div> div > a{
    text-decoration: none;
}
.footer-bottom{
    background-color: #ffffff;
    width: 100%;
    margin: 0 auto;
    padding: 1% 0;
    border-radius: 10px;
    font-size: 1.25rem;
}
.lotto-wrapper { 
    font-family: 'Jua', sans-serif;
    font-weight: bold;
    text-align: center;
    margin: 2rem;
}
.lotto-wrapper > p {
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: 2.5rem;
    color:red;
}
.lotto-wrapper > .lotto-ball { 
    font-size: 2.25rem;
    width: 5rem;
    height: 5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position:relative;
}
.lotto-ball {
    margin-right: 3px;
    margin-bottom: 3px;
}

/* ball color */
.lotto-wrapper > .lotto-ball:nth-child(1){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(255,126,126,1) 15%,
    rgba(255,0,0,1) 50%, rgba(124,0,0,1) 70%, rgba(255,0,0,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(2){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(255,191,130,1) 15%,
    rgba(255,125,0,1) 50%, rgba(121,59,0,1) 70%, rgba(255,125,0,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(3){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(253,255,126,1) 15%,
    rgba(252,255,0,1) 50%, rgba(117,119,0,1) 70%, rgba(252,255,0,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(4){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(145,255,128,1) 15%, rgba(34,255,0,1) 50%, rgba(15,115,0,1) 70%, rgba(34,255,0,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(5){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(131,232,254,1) 15%, rgba(0,209,255,1) 50%, rgba(0,100,122,1) 70%, rgba(0,209,255,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(6){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(127,140,255,1) 15%, rgba(0,26,255,1) 50%, rgba(0,12,121,1) 70%, rgba(0,26,255,1) 100%);
}
.lotto-wrapper > .lotto-ball:nth-child(7){
    background: rgb(255,255,255);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(201,134,255,1) 15%, rgba(142,0,255,1) 50%, rgba(65,0,117,1) 70%, rgba(142,0,255,1) 100%);
}

#btn-back-to-top {
    position: fixed;
    border-radius: 50% !important;
    bottom: 1rem;
    right: 1rem;
}

.show-none{
    display:none;
}

.appear {
    animation: fade-in 0.5s;
    animation-fill-mode: forwards;
    display: block;
}

.disappear {
    animation: fade-out 0.5s;
    animation-fill-mode: forwards;
}

.card-img-overlay {
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: calc(0.25rem - 1px);
    z-index: 0;
}

textarea{
    background-color: rgba(255,255,240,1) !important;
    font-family: arial;
    font-size: 1.25rem;
}

JavaScript

const URL = "https://teachablemachine.withgoogle.com/models/bzwOCY62c/"; //구글 티처블 머신으로 생성한 모델에 연결

let model, labelContainer, maxPredictions;

const company_Name = { //모델 생성에 적용된 회사명 - 워드 클라우드에 출력
    A: ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7'],
    B: ['b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7'],
    C: ['c1', 'c2', 'c3', 'c4', 'c5', 'c6', 'c7', 'c8'],
    D: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11'],
    E: ['e1', 'e2', 'e3', 'e4', 'e5', 'e6'],
    F: ['f1', 'f2', 'f3', 'f4', 'f5', 'f6', 'f7'],
    G: ['g1', 'g2', 'g3', 'g4', 'g5', 'g6', 'g7', 'g8', 'g9'],
    H: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8']
};

const ai_Comments = { //모델별 코멘트
    A: 'comments-a',
    B: 'comments-b',
    C: 'comments-c',
    D: 'comments-d',
    E: 'comments-e',
    F: 'comments-f',
    G: 'comments-g',
    H: 'comments-h'
};

const bar_char = { //프로그래스 바에 적용될 모델명
    A: 'model-a',
    B: 'model-b',
    C: 'model-c',
    D: 'model-d',
    E: 'model-e',
    F: 'model-f',
    G: 'model-g',
    H: 'model-h'
}

// Load the image model
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++) { // and class labels
        labelContainer.appendChild(document.createElement("div"));
    }
}

$('.image-upload-wrap').bind('dragover', function () {
    $('.image-upload-wrap').addClass('image-dropping');
});

$('.image-upload-wrap').bind('dragleave', function () {
    $('.image-upload-wrap').removeClass('image-dropping');
});

// run the webcam image through the image model
async function predict() {
    let words = [];

    const RICH_VOLUME = { A: 100, B: 90, C: 80, D: 70, E: 60, F: 50, G: 40, H: 10 }; //모델별 자산 규모
    // predict can take in an image, video or canvas html element
    let image = document.getElementById("face-image")
    const prediction = await model.predict(image, false);
    prediction.sort((a, b) => parseFloat(b.probability) - parseFloat(a.probability));

    let sum = 0;
    for (let i = 0; i < 1; i++) {
        sum += prediction[i].probability * RICH_VOLUME[prediction[i].className];
    }

    let weight = [  //워드 클라우드에 적용될 가중치별 폰트 사이즈
        [15, 14, 13],
        [12, 12, 12],
        [12, 11, 11],
        [11, 10, 10],
        [10, 10, 10],
        [9, 9, 9]
    ];

    words = selectCompany();
    const ai_Comment = ai_Comments[prediction[0].className];

    //select Company
    function selectCompany() {
        let endNum = sum.toString().slice(-7, -1);
        const changeArrayOrder = function (list, moveValue) {
            while (moveValue > 0 || moveValue % list.length > 0) {
                let tmp = list.pop();
                list.unshift(tmp);
                moveValue--;
            }
            return list;
        };

        names = [];
        for (let i = 0; i < 6; i++) {
            let list = changeArrayOrder(company_Name[prediction[i].className], Number(endNum[i]));
            for (let j = 0; j < 3; j++) {
                names.push({ 'text': list[j], 'weight': weight[i][j], 'link': '' });
            }
        }
        return names;
    };

    //output animation
    $({ val: 0 }).animate({ val: sum }, {
        duration: 2500,
        step: function () {
            let num = numberWithCommas(Math.floor(this.val));
            let str = `<p>당신이 이룰 수 있는 예상<br>자산은 <span class="count_num_result">${num}</span>입니다!</p>`;
            $(".count_num").html(str);
        },

        complete: function () {
            let count = 0;
            getBarItem();

            function getBarItem() {
                while (prediction[count].probability * 100 > 1) {
                    let getPredictionItem = prediction[count];
                    getProgressBar(getPredictionItem);
                    count++;
                    getBarItem();
                }
            };

            function getProgressBar(getPredictionItem) {
                let template = document.querySelector("#progress-template");
                let label = template.content.children[0];
                let bar = template.content.children[1];

                let cloneLabel = document.importNode(label, true);
                let cloneBar = document.importNode(bar, true);
                let progressWrapDiv = document.querySelector(".progress_wrap");
                let probability = parseInt(getPredictionItem.probability * 100);
                let textTransparency = Math.max(0.9 - (count * 0.16), 0.2);

                cloneLabel.textContent = bar_char[getPredictionItem.className];
                cloneLabel.style.color = `rgba(0, 0, 0, ${textTransparency})`;

                cloneBar.querySelector("#progress").style.width = `${probability}%`;
                cloneBar.querySelector("#progress").textContent = `${probability}%`;
                if (count == 0) cloneBar.querySelector("#progress").className =
                    'progress-bar progress-bar-striped progress-bar-animated'

                progressWrapDiv.appendChild(cloneLabel);
                progressWrapDiv.appendChild(cloneBar);
            }

            $('.image-title-wrap').show();
            $(".ai_comment").text(ai_Comment);
            $('.wordCloud').jQCloud(words, { autoResize: true });
        }
    });
}

function numberWithCommas(x) {
    let countCho = ""
    if (Math.floor(x / 10000)) countCho = `${(Math.floor(x / 10000))}조`;
    x = x % 10000;
    return `${countCho} ${x}억원`;
}

const input = document.querySelector('.file-upload-input')
input.addEventListener('change', async () => {
    readURL();
})

async function readURL() {
    if (input.files && input.files[0]) {
        document.getElementById("label-container").style.display = "block";
        var reader = new FileReader();
        reader.onload = async function (e) {
            document.querySelector('.image-upload-wrap').style.display = "none";
            // $('.file-upload-image').attr('src', e.target.result);
            document.querySelector('.file-upload-image').setAttribute('src',e.target.result);
            document.querySelector('.file-upload-content').style.display = "block";
            document.querySelector('.image-title-wrap').style.display = "none";
            await faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
            await faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
            await faceapi.nets.ssdMobilenetv1.loadFromUri('./models')
            const imageUpload = document.getElementById('face-image');
            const faces = await faceapi.detectAllFaces(imageUpload)
                .withFaceLandmarks()
                .withFaceDescriptors()
            const container = document.querySelector('.detect-face')

            const canvas = faceapi.createCanvasFromMedia(imageUpload)
            container.append(canvas)
            const displaySize = { width: imageUpload.width, height: imageUpload.height }
            faceapi.matchDimensions(canvas, displaySize)
            if (faces.length < 1) {
                document.querySelector('#analysis').style.display = "none";
                document.querySelector('#nothing-face').style.display = "block";
                return
            } else if (faces.length > 1) {
                document.querySelector('#analysis').style.display = "none";
                document.querySelector('#toomuch-face').style.display = "block";
                document.querySelector('#faces-qty').textContent = faces.length;
                drawDetectionSquare(canvas, faces, displaySize)
                return
            } else {
                init().then(() => {
                    drawDetectionSquare(canvas, faces, displaySize)
                    predict();
                });
            }
        };

        reader.readAsDataURL(input.files[0]);
    } else {
        removeUpload();
    }
}

function drawDetectionSquare(canvas, faces, displaySize){
    const resizedDetections = faceapi.resizeResults(faces, displaySize)
    let count = 1;
    resizedDetections.forEach(detection => {
        const box = detection.detection.box
        const drawBox = new faceapi.draw.DrawBox(box, { label: `F-${count}` })
        drawBox.draw(canvas)
        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
        count++
    }) 
}

function removeUpload() {
    location.reload();
}

document.querySelector('#lucky-number').addEventListener('click',() => { luckyNumber() })
document.querySelector('#remove-upload').addEventListener('click',() => { removeUpload() })

function luckyNumber() {
    const lottoNumbers = getNumberData();
    let template = document.querySelector("#lotto-ball-template");
    let lottoBallDiv = template.content.children[0];
    let lottoWrapperDiv = document.querySelector(".lotto-wrapper");
    lottoWrapperDiv.innerHTML = "";
    lottoWrapperDiv.innerHTML = `<p class="mb-4" style="color:red">행운의 번호(${lottoNumbers.length}개)를 이미지에서 추출!</p>`;

    let count = 0;
    getBall();

    //recur function(chart)
    function getBall() {
        setTimeout(() => {
            if (count >= lottoNumbers.length) return;
            let cloneDiv = document.importNode(lottoBallDiv, true);
            cloneDiv.querySelector(".number").textContent = lottoNumbers[count];
            lottoWrapperDiv.appendChild(cloneDiv);
            count++;
            getBall();

        }, 700);
    }
}

function getNumberData() {
    let numberData = [];
    let canvas = document.createElement("canvas");
    let image = document.getElementById("face-image");
    canvas.width = image.width;
    canvas.height = image.height;
    ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    let count = 0;
    for (let i = 1; i < 11; i++) {
        const x = Math.round(i * 0.1 * canvas.width);
        for (let j = 1; j < 11; j++) {
            const y = Math.round(j * 0.1 * canvas.height);
            const data = ctx.getImageData(x, y, canvas.width, canvas.height).data;
            numberData[count] = (data[0] + data[1] + data[2]) % 45 + 1;
            count++;
        }
    }

    const uniqueNumberData = numberData.filter((val, idx) => {
        return numberData.indexOf(val) === idx;
    });

    const getNumberData = uniqueNumberData.slice(-7, -1).sort(function (a, b) {
        return a - b;
    });

    return getNumberData;
}

//Get the button
let btnBackToTop = document.getElementById('btn-back-to-top');

// When the user scrolls down 150px from the top of the document, show the button
window.onscroll = function () {
    scrollFunction();
};
btnBackToTop.addEventListener('click', backToTop);
function scrollFunction() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        btnBackToTop.classList.remove('disappear');
        btnBackToTop.classList.add('appear');
    } else {
        if (btnBackToTop.classList.contains('appear')) {
            btnBackToTop.classList.add('disappear');
            setTimeout(function () { btnBackToTop.classList.remove('appear') }, 701);
        }
    }
}

function backToTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

// copy to clipboard
const clipboardIcons = document.querySelectorAll('.clipboard-copy')
clipboardIcons.forEach(element => {
    element.onclick = (e) => {
        let content = document.getElementById('content-' + e.target.id).textContent;
        navigator.clipboard.writeText(content)
            .then(() => {
                document.getElementById(e.target.id).style.display = 'none';
                document.getElementById(e.target.id + '-copied').style.display = 'inline-block';

                setTimeout(() => { 
                    document.getElementById(e.target.id + '-copied').style.display = 'none';
                    document.getElementById(e.target.id).style.display = 'inline-block';
                }, 3000);
            })
            .catch(err => {
                document.getElementById(e.target.id + '-failed').style.display = 'block';
            })
    }
});

부자상 테스트 사용법

얼굴이 포함된 이미지 파일(JPG, JPEG, PNG 등등)을 업로드하면 인공지능 부자얼굴 테스트를 진행하게 되며, 대체로 7초 이내(대략 10초 소요)에 결과를 확인할 수 있습니다.
업로드된 이미지에 얼굴이 포함되지 않았거나, 2명 이상의 얼굴이 확인되면 "테스트를 진행할 수 없음"을 알리는 문구가 출력됩니다. 가능한 크고 선명하며 정면에서 촬영된 이미지를 선호합니다.
부자얼굴 테스트가 진행된 이미지에는 안면 윤곽을 포함한 눈, 코, 입 등 얼굴 특징점 요소에 별도의 마킹이 표시될 수 있습니다.
테스트 후 나타나는 모든 결과는 미리 학습된 티처블 머신에 기반하며 인공지능 모델은 다수의 국내 기업 대표 이미지 데이터와 공개된 자산 데이터를 참고하여 학습되었습니다.
워드 클라우드에서 크고 선명한 글자로 출력되는 기업명 또는 회사명일수록 테스트 이미지와 관련성이 높을 수 있습니다.
행운의 번호는 해당 이미지 특정 좌표의 색상 값(RGB)을 기준으로 추출합니다. 행운의 번호는 재미로 확인하는 것 이상의 의미는 전혀 없음을 알려드립니다.
이 웹사이트에서 제공하는 테스트를 위해 업로드된 이미지와 테스트 결과는 다른 목적을 위해서 별도 저장하거나 재사용하지 않습니다.
이 웹사이트의 안면 인식 및 분석은 face-api.js 라이브러리와 구글 티처블 머신을 사용하였고, 조코딩 유튜브 영상을 참고하여 자바스크립트로 만들었습니다.

인공지능 부자상 테스트 2.0

나는 얼마나 많은 자산을 모을 수 있을까?

웹사이트 제작에 적용된 소스코드

index.html

style.css

app.js

부자상 테스트 사용법