forked from Global-Innovation-Exchange/FaceSpace
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
137 lines (131 loc) · 7.05 KB
/
main.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<!-- FACEMESH PLOTTING SCRIPTS -->
<!-- Load three.js -->
<script src="https://cdn.jsdelivr.net/npm/three@0.106.2/build/three.min.js"></script>
<!-- Use the version in the handpose until the fix in https://github.com/PAIR-code/scatter-gl/pull/26 in released -->
<script src="https://storage.googleapis.com/learnjs-data/handtrack_staging/scatter-gl.js"></script>
<title>☺️ - FaceSpace</title>
</head>
<body>
<div class="container d-flex flex-column justify-content-center h-100" id="loading-animation">
<div class="row justify-content-center align-self-center">
<div class="spinner-border" role="status"></div>
<span class="sr-only">Loading...</span>
</div>
<div class="row justify-content-center align-self-center">
<div class="p-2"><br><strong>Now loading models into your browser to run locally. This can take upwards of
30 seconds or longer.<br><br></strong></div>
</div>
<div class="row justify-content-center align-self-center">
<div class="p-2"><strong>We take your privacy very seriously and want you to know that none of your hand or
face data ever leaves your browser. These models run completely locally within your browser window.
All code is open source and can be viewed on <a
href="https://github.com/Global-Innovation-Exchange/FaceSpace">GitHub</a>.<br><br></strong>
</div>
</div>
<div class="row justify-content-center align-self-center">
<div class="p-2"><strong>Did you know?</strong><br>
🤭 People often touch their eyes, nose, and mouth without realizing it, introducing germs into their
bodies.<br>
🌚 Mark Rober, a YouTube science superstar, says: “The ultimate defense against catching a virus is just
don’t touch your face… your eyes, nose, and mouth are like the single weak spot on the Death Star when
it comes to viruses.”<br>
🖐 Germs from unwashed hands can be transferred to other objects, such as door knobs, tables, or toys,
and then transferred to another person’s hands.<br>
</div><br>
</div>
<div class="row justify-content-center align-self-center">
<div class="p-2"><strong>Not working? Ensure the following:</strong><br>
✔️ Camera access is allowed for this site.<br>
✔️ Desktop Notifications are allowed for this site.<br>
✔️ Notifications are active in your system's Notification Center.<br>
✔️ Notifications are turned on for your browser in your system's Notification Center<br>
✔️ For the best experience use Google Chrome.<br><br>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center" id="title">
<div class="jumbotron">
<h1>👨 Don't Touch Your Face 👩</h1>
</div>
<div class="alert alert-danger" id="face-touch-alert">
<strong>🤦♂️ You're touching your face! 🤦♀️</strong>
</div>
<div class="card border-primary" id="notification-request">
<div class="card-body border-primary">
<p class="card-text text-primary">Do you wish to receive notification when you touch your
face</p>
<button type="button" class="btn btn-primary" id="notification-request-yes-btn">Yes</button>
<button type="button" class="btn btn-danger" id="notification-request-no-btn">No</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-center">
<h1 id="totalCount"> 0 </h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="text-center">
<p id="timesTouchedText">times touched</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="d-flex justify-content-center">
<div id="detector-container"></div>
</div>
</div>
</div>
<div class="row">
<div class="p-2">
<strong><br>We take your privacy very seriously and want you to know that none of your hand or face data
ever leaves your browser. These models run completely locally within your browser window. All code
is open source and can be viewed on <a
href="https://github.com/Global-Innovation-Exchange/FaceSpace">GitHub</a>.<br><br></strong>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<footer class="text-center" id="footer">
<p><strong>Credits</strong></p>
<p>Students and friends of <a rel="noopener noreferrer" target="_blank" href="https://gixnetwork.org/"
target='_blank'>University of Washington's GIX Program</a>, including:</p>
<p>[Steven Guh, Cody Gagnon, Ke Wang, Wenbo Zhong] - Developers & Execution <br>Ken Christofferson, Robin Yang,
Justice (Yi) Zheng, Xuyu Chen, and Hao Liu<br></p>
<p><strong>Special thanks for the guidance and mentorship from</strong></p>
<p>Sidhant Gupta, John Raiti, Yuntao Wang, Shwetak Patel</p>
</footer>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="main.js"></script>
</html>