forked from touretzkyds/FaceDemo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (103 loc) · 5.76 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
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<script defer src="dist/face-api.js"></script>
<script defer src="public/js/TinyYoloV2.js"></script>
<script defer src="public/js/components/ImageLibrary.js"></script>
<script defer src="public/js/components/SlideOut.js"></script>
<script defer src="public/js/components/Modal.js"></script>
<script defer src="public/js/components/CropModal.js"></script>
<script defer src="public/js/components/ImagePicker.js"></script>
<script defer src="public/js/modes/Mode.js"></script>
<script defer src="public/js/modes/ImageMode.js"></script>
<script defer src="public/js/modes/KernelMode.js"></script>
<script defer src="public/js/outputs/Output.js"></script>
<script defer src="public/js/outputs/ResultOutput.js"></script>
<script defer src="public/js/outputs/HorizontalLayerOutput.js"></script>
<script defer src="public/js/outputs/ConvolutionLayer1Output.js"></script>
<script defer src="public/js/outputs/KernelGridOutput.js"></script>
<script defer src="public/js/App.js"></script>
<script defer src="public/js/demo.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- image-picker.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.1/image-picker.min.js"
integrity="sha512-76tAVeQq8wkwtFWzKPU03XJGMF/mcLDeBgi9wIlRICXdkLNUYVBiOL3O/R9Bold+u0eN0OUftCcBTjFkchPyBg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/image-picker/0.3.1/image-picker.css"
integrity="sha512-SMXf5+HiyBHQjtjM3hqAZi0+H8KLyeOEA+gPBKqfOkgbuGTIsb0/sgT7jWQRsBt20TvnoUqM3cDbrIhv6gIiSg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Slider (compatible with Materialize)-->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.css" integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js" integrity="sha512-UOJe4paV6hYWBnS0c9GnIRH8PLm2nFK22uhfAvsTIqd3uwnWsVri1OPn5fJYdLtGY3wB11LGHJ4yPU1WFJeBYQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-->
<link rel="stylesheet" href="dist/nouislider.css"/>
<script src="dist/nouislider.js"></script>
<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.0-alpha.2/cropper.min.css"
integrity="sha512-6QxSiaKfNSQmmqwqpTNyhHErr+Bbm8u8HHSiinMEz0uimy9nu7lc/2NaXJiUJj2y4BApd5vgDjSHyLzC8nP6Ng=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.0-alpha.2/cropper.min.js"
integrity="sha512-IlZV3863HqEgMeFLVllRjbNOoh8uVj0kgx0aYxgt4rdBABTZCl/h5MfshHD9BrnVs6Rs9yNN7kUQpzhcLkNmHw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Keep this last -->
<link rel="stylesheet" href="public/styles.css">
<meta charset="utf-8">
</head>
<body id="body" class="center-content" style="background-color:#ffffff;">
<div class="center-content page-container">
<div class="progress" id="loader" style="margin-top: -10px;">
<div class="indeterminate"></div>
</div>
<table width=50%>
<tr>
<td valign="middle" width=700>
<!--
<a id="buttonLib" class="hoverable btn-floating btn-large waves-effect waves-light blue tooltipped" data-position="right"
data-tooltip="Image Selector" style="margin-bottom: 2px;"><i class="material-icons">photo_library</i></a>
-->
<font size="+5"><b>TinyYoloV2 Face Detection</b></font>
</td>
<td _style="display: none;">
<!-- TODO: implement kernel mode -->
<div class="input-field col s12" style="width: 250px;">
<select id="mode_control">
<option value="image_mode" selected>Image Investigation Mode</option>
<option value="kernel_mode">Kernel Investigation Mode</option>
</select>
</div>
</td>
<td valign="middle">
<font size=+3>•</font>
<sup>
<font size=+1><a href="resources/tutorial.html">Tutorial</a></font>
</sup>
<font size=+3>•</font>
<sup>
<font size=+1><a href="resources/experiments.html">Experiments</a></font>
</sup>
</td>
</tr>
</table>
<div>
<div id="mode-container" class="row side-by-side" style="margin-top: 0px; margin-bottom: 0px;"></div>
</div>
</div>
<p style="text-align: center; margin-top: -00px; margin-bottom: 0px;">Demo
by Jigar Makwana, Max Wolff, Benjamin Ratin, and David S. Touretzky.
<br>
Based on the face-api.js demo by Vincent Mühler at <a
href="https://github.com/justadudewhohacks/face-api.js/">GitHub <i class="fa fa-github"
style="color: #000; font-size: large;"></i></a>
<br>
Privacy notice: all input is processed in your browser; no images leave your computer.
</p>
</div>
</body>
</html>