swf/index.html at master · llama-ste/swf · GitHub

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
<!DOCTYPE html>
<html lang="ko">

<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" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://llama-ste.github.io/swf/" />
    <meta property="og:title" content="스트릿 우먼 파이터 닮은꼴" />
    <meta property="og:image" content="https://llama-ste.github.io/swf/image/swf-logo.png" />
    <meta property="og:description" content="당신의 스우파 리더 닮은꼴을 찾아드립니다">
    <meta property="og:site_name" content="스우파 닮은꼴" />
    <meta property="og:locale" content="ko_KR" />
    <meta property="og:image:width" content="800" />
    <meta property="og:image:height" content="420" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="스트릿 우먼 파이터 닮은꼴" />
    <meta name="twitter:description" content="당신의 리더는 누구인가요?" />
    <meta name="twitter:image" content="https://llama-ste.github.io/swf/image/swf-logo.png" />
    <meta name="subject" content="스트릿 우먼 파이터 닮은꼴 찾기" />
    <meta name="description"
        content="당신의 스트릿 우먼 파이터 닮은꼴을 찾아드립니다! 스우파 각 팀의 리더들의 사진 데이터로 학습한 인공지능이 나의 얼굴과 닮은 리더를 찾아드립니다." />
    <meta name="keywords"
        content="스우파, 스우파 닮은꼴, 연예인 얼굴상 테스트, 나와 닮은 멤버, 닮은꼴, 닮은꼴 테스트, 닮은꼴 찾기, 관상, 관상테스트, 테스트, 찾기, 얼굴 찾기, 닮은 얼굴, 훅, 프라우드먼, ygx, 원트, 웨이비, 코카앤버터, 라치카, 홀리뱅, hook, wayb, want, holybang, prowdmon, cocanbutter, lachica" />
    <meta name="author" content="llama" />
    <title>스우파 닮은꼴</title>
    <link rel="icon" href="./image/favicon.ico" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script defer src="./javascript/main.js"></script>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-618b953465a9767e"></script>
    <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 async src="https://www.googletagmanager.com/gtag/js?id=G-XFMDGQ3RW2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-XFMDGQ3RW2');
    </script>
</head>

<body>

    <div class="container d-flex start flex-column align-items-center justify-content-center vh-100 overflow-hidden">
        <div class="start-title-wrapper d-flex flex-column align-items-center mb-4">
            <h1 class="main-title">스트릿 우먼 파이터 닮은꼴</h1>
            <h4 class="sub-title mb-0">당신의 리더는 누구인가요?</h5>
        </div>
        <div class="start-image-wrapper mb-4">
            <div class="image-wrapper d-flex align-items-center justify-content-center">
                <label class="d-flex flex-column align-items-center justify-content-center image-label"
                    for="image-input">
                    이미지를 넣어주세요.
                    <i class="bi bi-download input-icon"></i>
                </label>
                <input class="image-input d-none" type="file" accept="image/*">
                <img class="d-none image-preview" id="preview" src="#" alt="">
            </div>
        </div>
        <div class="start-button-wrapper">
            <button class="btn disabled start-btn">
                얼굴인식 시작하기
            </button>
            <div class="hit-counter w-100 d-flex justify-content-center pt-2">
                <div class="hit-counter-text text-center">
                    <div class="spinner-border spinner-border-sm text-warning" role="status">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container d-none flex-column justify-content-center align-items-center loading vh-100 overflow-hidden">
        <img class="loading-img" src="./image/llama.gif" width="100">
        <small class="loading-text text-warning">닮은꼴을 찾고있어요!<small />
    </div>

    <div class="container d-none result vh-100 flex-column align-items-center justify-content-center overflow-hidden">
        <div class="d-flex w-100 mb-4 align-items-center justify-content-between">
            <img class="leader" src="#" alt="">
            <div class="heart mb-2"></div>
            <div class="result-preview"></div>
        </div>
        <div class="d-flex w-100 mb-4 justify-content-between">
            <div class="w-50 result-message">
            </div>
            <div class="w-50 user-message">
            </div>
        </div>
        <div class="d-flex w-100 mb-4">
            <div class="d-flex flex-column justify-content-around w-100" id="label-container">
            </div>
        </div>
        <div class="addthis_inline_share_toolbox_70jr share mb-4"></div>
        <div class="">
            <button class="btn restart-btn">다른 사진으로 재시도</button>
        </div>
    </div>
</body>

</html>