face-quiz/index.html at main · joonas-yoon/face-quiz · 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
<!DOCTYPE html>
<html>

<head>
  <title>Face Quiz</title>
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Face Quiz" />
  <meta property="og:image" content="./docs/og.png" />
  <meta property="og:description" content="Make your own face puzzle quiz from picture" />
  <meta property="og:site_name" content="Face Quiz" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <link rel="stylesheet" href="./assets/spinner.css" />
  <link rel="stylesheet" href="./assets/site.css" />
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
  <script src="https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/dist/face-api.min.js"></script>
  <script src="./assets/spinner.js"></script>
</head>

<body>
  <div id="background" class="background"></div>
  <div class="btn-container">
    <div id="btnUpload" class="btn btn-icon">
      <span class="material-symbols-outlined icon">
        add_photo_alternate
      </span>
      <div id="spinner" class="spinner"></div>
      <input type="file" name="file" id="upload_file" accept=".gif,.jpg,.jpeg,.png,.webp" />
    </div>
    <div id="btnView" class="btn btn-icon">
      <span class="material-symbols-outlined icon icon-view-on">
        visibility
      </span>
      <span class="material-symbols-outlined icon icon-view-off">
        visibility_off
      </span>
    </div>
  </div>
  <div class="canvas-container">
    <div class="input-container" id="inputContainer">
      <div id="faceContainer">
        <canvas class="uploaded"></canvas>
      </div>
    </div>
    <div class="output-container" id="outputContainer"></div>
  </div>
  <script src="./assets/site.js"></script>
</body>

</html>