-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
216 lines (211 loc) · 11.4 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!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">
<meta name="description" content="Use FaceSpace to be more aware of face touching and prevent the spread of virus.">
<meta name="author" content="Steven Guh, Cody Gagnon, and GIX members">
<!-- 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">
<!-- Custom CSS for this page -->
<link rel="stylesheet" href="index.css">
<!-- Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="shortcut icon" href="./assets/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">
<title>FaceSpace (beta)</title>
</head>
<body>
<div class="container">
<header class="jumbotron mt-4">
<h1 class="d-inline-block text-white">
<object class="face-icon align-bottom" type="image/svg+xml" data="./assets/facespace-logo.svg"></object>
FaceSpace</h1>
<span class="badge badge-secondary align-top">beta</span>
<p class="lead text-light">
To protect yourself during the outbreak of COVID-19, this webapp helps you keep your hands off your face using
your webcam.
</p>
<p class="lead">
<a href="./main.html" class="btn btn-primary btn-lg mx-2">Launch</a>
<a href="https://github.com/Global-Innovation-Exchange/FaceSpace" class="btn btn-dark btn-lg mx-2">
<svg class="feather pb-1">
<use href="./assets/feather-sprite.svg#github" />
</svg>
<span>View Source</span>
</a>
</p>
</header>
<section>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg">
<use href="./assets/feather-sprite.svg#user" />
</svg>
</div>
<div class="media-body">
<h2>How does it work?</h2>
<p>This webapp will issue a notification when it detects a hand is next to a face in the webcam feed.
Running the application in background will help you catch and increase awareness of unintentional face
touching.</p>
</div>
</div>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg">
<use href="./assets/feather-sprite.svg#shield" />
</svg>
</div>
<div class="media-body">
<h2>Privacy</h2>
<p>We take your privacy very seriously. All of the camera data stays <strong>local</strong> and never leaves
your computer.</p>
</div>
</div>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg">
<use href="./assets/feather-sprite.svg#watch" />
</svg>
</div>
<div class="media-body">
<h2>Apple Watch</h2>
<p>An Apple Watch app is currently in development that uses the built-in sensors (accelerometers and
gyroscope) to detect face touching so that you can increase your awareness when you are not in front of your
computer. The app is featured in <a
href="https://covidglobalhackathon.com/projects/facespace">#BuildforCOVID19 Global Online Hackathon</a>.
We are hard at work in developing a beta version of the app. Sign up <a rel="noopener noreferrer" target="_blank"
href="https://forms.gle/tsDPT5bQD9dDwtGR9">here<svg class="feather feather-sm align-text-bottom">
<use href="./assets/feather-sprite.svg#external-link" />
</svg></a> if you want be our beta tester.</p>
</div>
</div>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg">
<use href="./assets/feather-sprite.svg#life-buoy" />
</svg>
</div>
<div class="media-body">
<h2>Tips</h2>
<p>
<ul>
<li>We recommend using Google Chrome on desktop for the best experience.</li>
<li>Feel free to play with the frame timeout. This can improve speed but depends on your
machine's resources.</li>
<li>If you'd like desktop notifications, ensure they are active in your system's
Notification Center and turned on for your web browser.</li>
<li>Position yourself in the middle of your camera's view.</li>
<li>Roll your sleeves up or wear a short sleeve shirt to increase accuracy. The model
relies on recognizing the palm of your hand to determine it is such and can be thrown off by colors
other than skin.</li>
</ul>
</p>
</div>
</div>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg">
<use href="./assets/feather-sprite.svg#help-circle" />
</svg>
</div>
<div class="media-body">
<h2>FAQ</h2>
<h5>How does it work under the hood?</h5>
<p>We utilized Google's <a href="https://github.com/tensorflow/tfjs-models/tree/master/handpose">handpose</a>
and <a href="https://github.com/tensorflow/tfjs-models/tree/master/facemesh">facemesh</a> models to detect
when you're touching your face based on the
intersection of your hand and face. Feel free to checkout our <a
href="https://github.com/Global-Innovation-Exchange/FaceSpace">GitHub repository</a>.</p>
<h5>Why doesn't it recognize two hands?</h5>
<p>We are limited by the fact that the <a
href="https://github.com/tensorflow/tfjs-models/tree/master/handpose">handpose</a> model from Google can
only recognize one hand.</p>
<h5>Why does it notify me even when I didn't actually touch my face?</h5>
<p>Our goal is to make you aware of the unintentional face touches. It currently does
not distinguish between other behaviors that occur around your face, such as drinking, touching glasses,
putting in/taking out earbuds, or other activities with a close hand to face proximity. In addition, the
models can sometimes classify a hand or a face incorrectly.</p>
<h5>Why does it not notify me when I touched my face?</h5>
<p>If the page is recognizing the touch correctly, make sure your notification settings is on.</p>
<p>If the page is not recognizing the touch correctly, there can be a few contributors. Since the app is
relying on the camera, make sure your room has sufficient light and position yourself in the center of the
camera. Your touch might be too fast for the system to register.</p>
<h5>Why doesn't it recognize my face or hand?</h5>
<p>We are using the models trained by Google. It is possible that the data they used to train the models are
biased and not a truly representative of all our use cases, and for different groups.</p>
<h5>Why does it make my computer extremely slow?</h5>
<p>We are running two machine learning models in your browser, and that can consume quite some resources. Try
increasing the frame timeout to reduce resource usage.</p>
<h5>Does it work on mobile?</h5>
<p>Currently, we've only tested on desktop environment. Due to the limitation of background tab on mobile
browser, we are focusing our effort on desktop. Having said that, the basic recognition should still work
when the browser window in in foreground on mobile browsers.</p>
</div>
</div>
<div class="media mx-2">
<div class="mr-3 mt-2">
<svg class="feather feather-lg h-flip">
<use href="./assets/feather-sprite.svg#message-square" />
</svg>
</div>
<div class="media-body">
<h2>Feedback</h2>
<p>We'd like to hear about your experience of using the app. Tell us how we can improve, and what doesn't work
for you <a rel="noopener noreferrer" target="_blank" href="https://forms.gle/uvVfNQ1kUqueYpFJA">here<svg
class="feather feather-sm align-text-bottom">
<use href="./assets/feather-sprite.svg#external-link" />
</svg></a>.</p>
</div>
</div>
</section>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-2 col-md">
<img class="mb-2" src="./assets/favicon/favicon.ico" alt="" width="24" height="24">
<small class="text-muted">FaceSpace</small>
<small class="d-block mb-3 text-muted">© 2020</small>
</div>
<div class="col-10">
<h5>Developed at</h5>
<p><a href="https://gixnetwork.org">Global Innovation Exchange<img class="footer-logo"
src="assets/gix-logo.png"></img></a> in <a href="https://www.washington.edu">University
of Washington</a></p>
<h5>by</h5>
<p><a href="https://www.linkedin.com/in/stevenguh/">Steven Guh</a>, <a
href="https://www.linkedin.com/in/codyantoniogagnon/">Cody Gagnon</a>, <a
href="https://www.linkedin.com/in/kenneth-christofferson/">Ken Christofferson</a>, <a
href="https://www.linkedin.com/in/robin-yang/">Robin Yang</a>, <a
href="https://www.linkedin.com/in/kewang0/">Ke Wang</a>, <a
href="https://www.linkedin.com/in/wenbozhong/">Wenbo Zhong</a>, <a
href="https://www.linkedin.com/in/yiz5/">Justice (Yi) Zheng</a>, <a
href="https://www.linkedin.com/in/xuyu-chen-454077196/">Xuyu Chen</a>, and <a
href="mailto:[email protected]">Hao Liu</a></p>
<h5>with the help of</h5>
<p><a href="https://www.linkedin.com/in/sidhantgupta/">Sidhant Gupta</a>, <a
href="https://www.linkedin.com/in/john-raiti-ph-d-9086b15/">John Raiti</a>, <a
href="https://www.linkedin.com/in/yuntao-wang-8b52b427/">Yuntao Wang</a>, and <a
href="https://homes.cs.washington.edu/~shwetak/">Shwetak Patel</a></p>
<div class="row my-md-3 pt-md-3 border-top">
<div class="col text-muted">
<p>FaceSpace logo was created from a modified regular grin-beam icon from frontawesome with <a
href="https://fontawesome.com/license">license</a> and the Milky Way photo by Hristo Fidanov from <a
href="https://www.pexels.com/photo/milky-way-galaxy-during-nighttime-1252890/">Pexels</a>. The circle
on the regular grin beam icon was removed.</p>
<p>The header background was modified from Milky Way photo by Hristo Fidanov from <a
href="https://www.pexels.com/photo/milky-way-galaxy-during-nighttime-1252890/">Pexels</a>.</p>
<p><a href="https://feathericons.com">Feather</a> icons are used.</p>
</div>
</div>
</div>
</div>
</footer>
</div>
</main>
</div>
</body>
</html>