forked from Peechiz/FaceX
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
313 lines (283 loc) · 12.1 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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html lang="en" ng-app="faceX">
<head>
<meta charset="UTF-8">
<title>MemeMoji</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/site.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul ng-hide="nav" class="nav navbar-nav">
<li class="pull-left">
<a href="/">
<img class="supersmall" src="graphics/little-white-brain.svg">
</a>
</li>
<li class="logonav med">MemeMoji</li>
</ul>
</div>
</nav>
<div ng-show="nav">
<main>
<h1 class="logo big text-center">MemeMoji</h1>
<img src="img/brain.svg" class="logo-big img-responsive center-block">
</main>
</div>
<!-- ******************* -->
<!-- INITIAL NAV BUTTONS -->
<!-- ******************* -->
<div ng-init="nav=true" ng-show="nav">
<div class="bc">
<div ng-init="useURL=false" ng-click="useURL=true; nav=false">
<img class="navbutton" src="img/url_button.svg">
<p>URL</p>
</div>
<div ng-init="useWebCam=false" ng-click="useWebCam=true; nav=false">
<img class="navbutton" src="img/webcam_button.svg">
<p>WEBCAM</p>
</div>
<div ng-init="useUpload=false" ng-click="useUpload=true; nav=false">
<img class="navbutton" src="img/upload_button.svg">
<p>UPLOAD</p>
</div>
</div>
</div>
<!-- ********** -->
<!-- USE UPLOAD -->
<!-- ********** -->
<div ng-if="useUpload" ng-controller="useUpload as p">
<main ng-show="waiting">
<h1 ng-show="waiting" class="text-center blue">Loading Results...</h1>
<img ng-show="waiting" class="logo-big img-responsive center-block" src="graphics/brain2.gif">
</main>
<main class="display full-height" ng-hide="waiting">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<form ng-submit="p.submit()">
<div class="form-group">
<label>
Choose Photo: <img id="preview" class="preview">
</label>
<input class="form-control" type="file" onChange="previewFile()" accept=".png, .jpg, .jpeg" id="getImage">
</div>
<div class="form-group">
<input class="btn btn-default" type="submit">
</div>
<div class="form-group" ng-show="p.invalid">
<p class="text-danger">Please choose a JPG or PNG</p>
</div>
</form>
</div>
</div>
</main>
</div>
<!-- ******* -->
<!-- USE URL -->
<!-- ******* -->
<div ng-if="useURL" ng-controller="useURL as u">
<main>
<h1 ng-show="waiting" class="text-center blue">Loading Results...</h1>
<img ng-show="waiting" class="logo-big img-responsive center-block" src="graphics/brain2.gif">
<div class="display full-height" ng-hide="waiting">
<form class="col-md-4" name="sendURL" ng-submit="u.submit()">
<div class="form-group" ng-class="{'has-error': sendURL.url.$invalid && !sendURL.url.$pristine, 'has-success': sendURL.url.$valid}">
<label class="control-label" for="url">Image URL: </label>
<input class="form-control" type="url" id="url" name="url" ng-model="u.url" required>
<div ng-messages="sendURL.url.$error" ng-show="sendURL.url.$touched">
<p class="help-block" ng-message="required">Please enter an image URL</p>
<p class="help-block" ng-message="url">Please enter a valid URL</p>
</div>
</div>
<input class="btn" ng-class="{'btn-default': sendURL.url.$pristine, 'btn-danger': !sendURL.url.$valid && !sendURL.url.$pristine, 'btn-success': sendURL.url.$valid}" type="submit">
</form>
</div>
</main>
</div>
<!-- ******* -->
<!-- WEBCAM -->
<!-- ******* -->
<div ng-if="useWebCam" ng-controller="useWebCam as w">
<main>
<video ng-show="w.showVideo" id="video" class="center-block vid" autoplay></video>
<h1 ng-show="waiting" class="text-center blue">Loading Results...</h1>
<img ng-show="waiting" class="logo-big img-responsive center-block" src="graphics/brain2.gif">
<canvas class="center-block vid" ng-show="w.showCanvas"></canvas>
</main>
<div class="bc">
<div ng-show="w.showVideo" ng-click="w.snapPhoto()">
<img class="navbutton" src="graphics/webcam_button.svg">
<p>Snap Photo</p>
</div>
<div ng-show="w.showCanvas" ng-click="w.submit()">
<img class="navbutton" src="graphics/predict_button.svg" alt="">
<p>Predict!</p>
</div>
<div ng-show="w.showCanvas" ng-click="w.retake()">
<img class="navbutton" src="graphics/retake_button.svg">
<p>Retake Photo</p>
</div>
</div>
</div>
<!-- ******* -->
<!-- RESULTS -->
<!-- ******* -->
<div ng-init="results_received=false"
ng-if="results_received"
ng-controller="results as res">
<div class="vert result">
<div class="rel og" id="imgcontainer" ng-hide="res.hideImg">
<img class="abs" crossorigin="anonymous" ng-src="{{original}}" id="og">
</div>
<canvas class="og" id="canvas" ng-hide="res.hideCanvas"></canvas>
</div>
<div class="bc">
<div>
<img src="graphics/download_button.svg" class="navbutton" ng-click="res.save()" >
<p>DOWNLOAD</p>
</div>
<div>
<a href="/">
<img src="graphics/retake_button.svg" class="navbutton">
</a>
<p>MEME AGAIN</p>
</div>
</div>
<div class="container">
<div ng-if="res.nofaces">
<div class="bc">
<a href="/">
<img class="navbutton" src="graphics/retake_button.svg">
</a>
</div>
<div class="well display">
<h1>Whoops! Emoji Brain didn't detect any faces. 😭</h1>
</div>
</div>
<div ng-repeat="face in results.faces">
<div class="well display">
<div>
<img class="tn" ng-src="{{face.thumbnail}}">
</div>
<div ng-repeat="result in face.prediction">
<p><img class="emoji" ng-class="{'bigger': res.isBiggest(face.index,result)}" ng-src="{{result.emotion | emoji }}" alt=""></p>
<p class="text-center">{{result.percent | percent }}%</p>
</div>
<div ng-if="!res.submitted[face.index]">
<p>Looks correct?</p>
<p class="correct text-center"><a ng-click="res.confirm(face)">👍</a> <a ng-click="res.getFeedback(face)">👎</a></p>
</div>
<div ng-if="res.submitted[face.index]">
<p class="text-success">Thanks!</p>
</div>
</div>
<!-- SUBMIT FEEDBACK -->
<div class="well clearfix" ng-if="res.feedback[face.index]">
<div class="col-md-4">
<img ng-src="{{face.thumbnail}}">
</div>
<form class="col-md-4" ng-submit="res.submitFeedback(face)">
<div class="form-group">
<label>Please choose the most correct emotion: </label>
<select ng-model="res.emote[face.index]" class="form-control" required>
<option></option>
<option value="angry">😡 Angry</option>
<option value="fear">😨 Fear</option>
<option value="happy">😀 Happy</option>
<option value="sad">😢 Sad</option>
<option value="surprise">😮 Suprise</option>
<option value="neutral">😐 Neutral</option>
</select>
</div>
<input class="btn btn-default" type="submit">
</form>
</div>
</div>
</div>
</div>
<!-- ******* -->
<!-- FOOTER -->
<!-- ******* -->
<footer>
<div class="container">
<div class="col-md-5">
<div class="row">
<div class="col-md-5">
<a href="https://github.com/JostineHo/Mememoji">
<img class="avatar" src="graphics/little-white-brain.svg" alt="">
</a>
</div>
<div class="col-md-7">
<p><strong>Mememoji</strong> is an interactive emotion recognition system that detects emotions based on facial expressions. The core of the app is a deep convolutional neural network that predicts the compositions of the emotions expressed by users. We hope you enjoy the special features we designed and give feedback to help us further train the algorithm.
</p>
<p>For the technology used behind the application, please visit: <a href="https://github.com/JostineHo/Mememoji">github.com/JostineHo/Mememoji</a>.</p>
</div>
<div class="col-md-5">
<a href="http://www.galvanize.com/courses/data-science">
<img class="avatar" src="graphics/g-school.svg" alt="">
</a>
</div>
<div class="col-md-7">
<p><strong>Galvanize</strong> gives you the tools, techniques, and fundamental concepts needed to make an impact as a data scientist. In just 12 weeks, you'll apply problem-solving and creative thinking to real-world data sets, gaining experience across the data science stack: data munging, exploration, modeling, validation, visualization, and communication.</p>
<p><a href="http://www.galvanize.com/courses/data-science">Galvanize.com/data-science</a></p>
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-1">
<div class="row">
<div class="col-md-5">
<a href="#">
<img class="avatar profile" src="https://avatars3.githubusercontent.com/u/16370085?v=3&s=460" alt="">
</a>
</div>
<div class="col-md-7">
<row>
<div class="col-md-6">
<img class="link" src="graphics/linkedin.svg">
<a href="https://www.linkedin.com/in/jostinefho">LinkedIn</a>
</div>
<div class="col-md-6">
<img class="link" src="graphics/github.svg">
<a href="https://github.com/JostineHo">GitHub</a>
</div>
</row>
<p><strong>Jostine</strong> is a data scientist who loves building intelligent applications and exploring the exciting possibilities of true AI. She is interested in computer vision and automation that creates innovative solutions to real-world problems. She holds a masters degree in Petroleum & Geosystems Engineering at The University of Texas at Austin.</p>
</div>
</div>
<div class="row">
<!-- <hr> -->
<br>
</div>
<div class="row">
<div class="col-md-5">
<a href="http://mrpeech.com">
<img class="avatar profile" src="https://avatars1.githubusercontent.com/u/6421349?v=3&s=460" alt="">
</a>
</div>
<div class="col-md-7">
<row>
<div class="col-md-6">
<img class="link" src="graphics/linkedin.svg">
<a href="www.linkedin.com/in/chris-impicciche">LinkedIn</a>
</div>
<div class="col-md-6">
<img class="link" src="graphics/github.svg">
<a href="https://github.com/Peechiz">GitHub</a>
</div>
</row>
<p>
<strong>Chris Impicciche</strong> is a Full-Stack Web Developer 💻 living in Austin, TX 🌮. When he's not making webapps, chances are he's either gaming 🎮🎲 with his friends, making something tasty in the kitchen 🍪🍛, or out watching Roller Derby 💀🔥.
</p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</body>
</html>