-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
108 lines (99 loc) · 4.78 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Face Touch Monitor - get alerts when you touch your face</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"></script>
<!-- Load BodyPix -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<canvas></canvas>
<video id="myVid" autoplay playsinline></video>
<div id="content">
<h1>Face Touch Monitor</h1>
<h4>See how often you touch your face and learn to stop! </h4>
<p>
In addition to washing your hands often,
the <a href="https://www.cdc.gov/coronavirus/2019-ncov/prepare/prevention.html">CDC</a> recommends that you
avoid touching your eyes, nose, and mouth with unwashed hands. This can be hard to do without a reminder.
</p>
<p>
This page uses your webcam and computer vision to count when you touch your face.
Set beep alerts or get a browser notification when you do.
The reminders can you train yourself to stop accidental face touching.
Just keep this page running in the background as you use your computer.
</p>
<p>
Machine learning on your image is done 100% locally in your browser.
No information is shared externally.
</p>
<button id="start">Start monitoring</button>
<div id="usageNoteMain">
<h4>Usage notes</h4>
<p> This is a quick hack that we'll improve.
Keep this tab in the foreground for the best performance.
It has no depth perception, so a hand in front of your face will set it off.
This works best on Chrome and has been tested in the new Edge and Firefox.
I haven't been able to make it work with Safari yet.
It usually does not detect as well if you are very close to the camera.
It will not work well on slower devices or mobile.</p>
</div>
</div>
</div>
<div id="loader"></div>
<div id="dashboard">
<div id="dashboardContent">
<h3>Statistics</h3>
<p>Status: <span id="userMessage">Click to the left to activate your webcam.</span></p>
<div id="statsDiv" hidden>
<p>Face touches: <span id="touches"></span></p>
<p>Last touch: <span id="lastTouch"></span></p>
<p>Touch rate per hour: <span id="perHour"></span></p>
<p>FPS: <span id="fps"></span></p>
</div>
<h3>Controls</h3>
<div id="controls">
<label for="alertTimeOut">Time between alerts (s)</label>
<input type="text" size=4 id="alertTimeOut" name="alertTimeOut" value="5"><br>
<input type="checkbox" id="beepToggle" name="beepToggle" value="beepToggle" checked >
<label for="beepToggle">Beep on touch</label><br>
<input type="checkbox" id="notifyToggle" name="notifyToggle" value="notifyToggle" >
<label for="notifyToggle">Browser notification on touch</label><br>
<input type="checkbox" id="showMask" name="showMask" value="showMask">
<label for="showMask">Display the segmentation mask</label><br>
<input type="checkbox" id="showPoints" name="showPoints" value="showPoints">
<label for="showPoints">Display detection points</label><br>
<p>Trade off speed for accuracy:</p>
<button id="highSpeed" disabled>Faster</button>
<button id="normalSpeed" disabled>Normal</button>
<button id="lowerSpeed" disabled>More accurate</button>
<button id="lowSpeed" disabled>Most accurate</button>
<button id="reset">Exit / Restart</button>
<div id="usageNoteSide"></div>
</div>
</div>
</div>
<div id="credits">
<div id="creditContent">
<p>Brought to you by <a href="https://webrtcHacks.com">webrtcHacks</a>.
Powered by <a href="https://github.com/tensorflow/tfjs">tensorflow.js</a>.<br>
See the full source code on <a href="https://github.com/webrtchacks/facetouchmonitor">github</a>.
Read the post about <a href="https://webrtchacks">how it works</a>.
</p>
</div>
</div>
<script src="ui-helper.js"></script>
<script src="detect.js"></script>
<!-- If this is popular I will put more effort into it -->
<script src="/__/firebase/7.11.0/firebase-app.js"></script>
<script src="/__/firebase/7.11.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script>firebase.analytics();</script>
</body>
</html>