-
-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.html
80 lines (76 loc) · 5.17 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Face Mask</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel='stylesheet' type='text/css' media='screen' href='https://cdn.jsdelivr.net/npm/webcam-easy@1.0.5/demo/style/webcam-demo.css'>
<link rel='stylesheet' type='text/css' media='screen' href='style/face-mask.css'>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-core@2.4.0/dist/tf-core.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-converter@2.4.0/dist/tf-converter.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-backend-webgl@2.4.0/dist/tf-backend-webgl.js"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-backend-cpu@2.4.0/dist/tf-backend-cpu.min.js"></script>
<script src="https://unpkg.com/@tensorflow-models/face-landmarks-detection@0.0.1/dist/face-landmarks-detection.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/webcam-easy@1.1.0/dist/webcam-easy.min.js"></script>
<script type="text/javascript" src="js/webcam-ui-lib.js"></script>
</head>
<body>
<main id="face-mask-app">
<div class="form-control webcam-start" id="webcam-control">
<label class="form-switch">
<input type="checkbox" id="webcam-switch">
<i></i>
<span id="webcam-caption">Click to Start Camera</span>
</label>
</div>
<div id="image-container">
<img id="faces" src="images/Donal_Thrump_White_House.jpg">
<div id="canvas"></div>
<div class="loading d-none">
Loading Model
<div class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</div>
<div class="form-control" id="button-control">
<button id="mask-btn" class="btn btn-primary">Put Mask On!</button>
</div>
<div id="mask-slider">
<img id="arrowLeft" src="images/arrow-left.png">
<div id="mask-list">
<ul>
<li class="selected-mask"><img src="images/half-mask-0.png" data-mask-type="half" data-scale-width="1.2" data-scale-height="1.2" data-scale-height="1.2" data-top-adj="0.05" data-left-adj="0.02"></li>
<li><img src="images/half-mask-1.png" data-mask-type="half" data-scale-width="1.2" data-scale-height="1.2" data-scale="1.2" data-top-adj="0.1" data-left-adj="0"></li>
<li><img src="images/half-mask-2.png" data-mask-type="half" data-scale-width="1.1" data-scale-height="1.1" data-top-adj="0.15" data-left-adj="0"></li>
<li><img src="images/half-mask-3.png" data-mask-type="half" data-scale-width="1.2" data-scale-height="1.2" data-top-adj="0.1" data-left-adj="0"></li>
<li><img src="images/half-mask-5.png" data-mask-type="half" data-scale-width="1.2" data-scale-height="1.2" data-top-adj="0.2" data-left-adj="0"></li>
<li><img src="images/half-mask-6.png" data-mask-type="half" data-scale-width="1.2" data-scale-height="1.2" data-top-adj="0.1" data-left-adj="0"></li>
<li><img src="images/full-mask-1.png" class="full-mask" data-mask-type="full" data-scale-width="1.4" data-scale-height="1.4" data-top-adj="0" data-left-adj="0"></li>
<li><img src="images/full-mask-2.png" class="full-mask" data-mask-type="full" data-scale-width="1.1" data-scale-height="1.1" data-top-adj="0" data-left-adj="0"></li>
<li><img src="images/full-mask-3.png" class="full-mask" data-mask-type="full" data-scale-width="2.0" data-scale-height="1.6" data-top-adj="0" data-left-adj="0"></li>
<li><img src="images/full-mask-4.png" class="full-mask" data-mask-type="full" data-scale-width="1.1" data-scale-height="1.3" data-top-adj="0.1" data-left-adj="0"></li>
</ul>
</div>
<img id="arrowRight" src="images/arrow-right.png">
</div>
</div>
<div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
Fail to start camera, please allow permision to access camera. <br/>
If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
<button id="closeError" class="btn btn-primary ml-3">OK</button>
</div>
<div class="md-modal md-effect-12">
<div id="app-panel" class="app-panel md-content row p-0 m-0">
<div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
<video id="webcam" autoplay playsinline></video>
</div>
</div>
</div>
<div class="md-overlay"></div>
</main>
<script src='js/face-mask.js'></script>
</body>
</html>