├── .sass-cache
    └── dfb75029b1b274becc234864d60aac6863f66853
    │   └── app.scssc
├── LICENSE
├── README.md
├── assets
    └── images
    │   ├── angry.gif
    │   ├── excited.gif
    │   ├── laugh.gif
    │   ├── out.gif
    │   ├── out.jpg
    │   ├── sad.gif
    │   └── sleep.gif
├── css
    ├── .sass-cache
    │   └── 9dce37a5f19e744b6951c74e0f32627ac8f87dd5
    │   │   └── app.scssc
    ├── app.css
    ├── app.css.map
    └── app.scss
├── index.html
└── js
    └── app.js


/.sass-cache/dfb75029b1b274becc234864d60aac6863f66853/app.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/.sass-cache/dfb75029b1b274becc234864d60aac6863f66853/app.scssc


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Gogul Ilango
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Emotion Recognizer
 2 | Recognize your emotion using two deep neural networks and webcam live in Google Chrome.
 3 | 
 4 | Tools used
 5 | * TensorFlow.js
 6 | * HTML5
 7 | * CSS3
 8 | * Sass
 9 | 
10 | <div align="center">
11 |   <a href="https://www.youtube.com/watch?v=WBi_PZ66z5E&feature=youtu.be"><img src="https://github.com/Gogul09/emotion-recognizer/blob/master/assets/images/out.jpg" alt="Demo"></a>
12 | </div>
13 | 
14 | Technical Details
15 | * Extractor Deep Neural Network - State of the art MobileNet
16 | * Classifier Deep Neural Network - DenseNet
17 | * HyperParameters can be tuned via User Interface.
18 | 
19 | Emotion Animations taken from - https://dribbble.com/shots/2589640-Emotion-Animations-gif


--------------------------------------------------------------------------------
/assets/images/angry.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/angry.gif


--------------------------------------------------------------------------------
/assets/images/excited.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/excited.gif


--------------------------------------------------------------------------------
/assets/images/laugh.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/laugh.gif


--------------------------------------------------------------------------------
/assets/images/out.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/out.gif


--------------------------------------------------------------------------------
/assets/images/out.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/out.jpg


--------------------------------------------------------------------------------
/assets/images/sad.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/sad.gif


--------------------------------------------------------------------------------
/assets/images/sleep.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/assets/images/sleep.gif


--------------------------------------------------------------------------------
/css/.sass-cache/9dce37a5f19e744b6951c74e0f32627ac8f87dd5/app.scssc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Gogul09/emotion-recognizer/cd7ee52c027693c39f2406b328bd95c971b040d5/css/.sass-cache/9dce37a5f19e744b6951c74e0f32627ac8f87dd5/app.scssc


--------------------------------------------------------------------------------
/css/app.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   padding: 0;
  3 |   margin: 0;
  4 |   font-family: "Nunito", sans-serif;
  5 |   overflow: hidden; }
  6 | 
  7 | .container {
  8 |   width: 100%;
  9 |   height: auto; }
 10 | 
 11 | img {
 12 |   max-width: 100%;
 13 |   display: block;
 14 |   margin: 0 auto; }
 15 | 
 16 | select {
 17 |   padding: 5px;
 18 |   font-family: Nunito;
 19 |   border-radius: 5px; }
 20 | 
 21 | label {
 22 |   margin: 0.7em 0; }
 23 | 
 24 | footer {
 25 |   text-align: center;
 26 |   position: fixed;
 27 |   bottom: 0;
 28 |   left: 0;
 29 |   width: 100%;
 30 |   height: 40px;
 31 |   background-color: black; }
 32 |   footer p {
 33 |     color: white;
 34 |     margin: 0px !important;
 35 |     font-size: 13px;
 36 |     padding-top: 10px; }
 37 |   footer a {
 38 |     text-decoration: none; }
 39 |   footer a:hover {
 40 |     text-decoration: underline; }
 41 | 
 42 | .mobile-tablet-warning {
 43 |   display: none;
 44 |   background-color: #1a1c22;
 45 |   height: 90vh;
 46 |   width: 100%;
 47 |   padding: 30px; }
 48 |   .mobile-tablet-warning h3 {
 49 |     text-align: center;
 50 |     font-size: 40px;
 51 |     color: #db4437;
 52 |     margin: 0px;
 53 |     padding: 50px 20px; }
 54 |   .mobile-tablet-warning p {
 55 |     font-size: 14px;
 56 |     color: white; }
 57 | 
 58 | .emotion-container {
 59 |   height: 100vh;
 60 |   background-color: #252525;
 61 |   margin: 0px;
 62 |   padding-left: 20px;
 63 |   padding-right: 20px;
 64 |   padding-bottom: 20px; }
 65 |   @media screen and (max-width: 640px) {
 66 |     .emotion-container {
 67 |       height: 100%;
 68 |       padding: 0px;
 69 |       margin-bottom: 40px; } }
 70 | 
 71 | .emotion-header {
 72 |   width: 100%;
 73 |   text-align: center;
 74 |   border-top-right-radius: 20px;
 75 |   border-top-left-radius: 20px;
 76 |   background-color: #252525;
 77 |   padding-top: 20px; }
 78 |   @media screen and (max-width: 640px) {
 79 |     .emotion-header {
 80 |       border-top-right-radius: 0px;
 81 |       border-top-left-radius: 0px; } }
 82 |   .emotion-header h3 {
 83 |     margin: 0px;
 84 |     padding: 0px;
 85 |     font-size: 25px;
 86 |     color: #d3131c;
 87 |     font-family: "Poppins"; }
 88 |     @media screen and (max-width: 640px) {
 89 |       .emotion-header h3 {
 90 |         font-size: 20px; } }
 91 |   .emotion-header p {
 92 |     margin: 0px !important;
 93 |     margin-bottom: 0px !important;
 94 |     color: lightgrey;
 95 |     font-size: 13px; }
 96 | 
 97 | .emotion-wrapper {
 98 |   background-color: #252525;
 99 |   padding: 20px;
100 |   width: 100%;
101 |   height: 80%;
102 |   border-bottom-left-radius: 20px;
103 |   border-bottom-right-radius: 20px;
104 |   display: flex;
105 |   flex-wrap: wrap; }
106 |   @media screen and (max-width: 640px) {
107 |     .emotion-wrapper {
108 |       display: block;
109 |       border-bottom-left-radius: 0px;
110 |       border-bottom-right-radius: 0px; } }
111 | 
112 | .emotion-flex {
113 |   flex: 1;
114 |   width: 100%;
115 |   height: 100%;
116 |   background-color: #252525; }
117 | 
118 | .emotion-player {
119 |   padding: 20px 0px;
120 |   border-right: 1px solid #252933; }
121 |   @media screen and (max-width: 640px) {
122 |     .emotion-player {
123 |       border-bottom: 1px solid #252933;
124 |       border-right: 0px; } }
125 | 
126 | .emotion-controller {
127 |   display: flex;
128 |   flex-direction: column; }
129 | 
130 | .emotion-tuner {
131 |   display: flex;
132 |   width: 100%;
133 |   text-align: center;
134 |   flex: 1; }
135 |   @media screen and (max-width: 640px) {
136 |     .emotion-tuner {
137 |       flex-wrap: wrap;
138 |       padding: 5%; } }
139 |   .emotion-tuner .emotion-dropdown {
140 |     flex: 1;
141 |     display: table;
142 |     height: 100%; }
143 |     .emotion-tuner .emotion-dropdown .emotion-dropdown-cell {
144 |       vertical-align: middle;
145 |       display: table-cell; }
146 |   .emotion-tuner select {
147 |     display: inline-block;
148 |     background-color: #181818;
149 |     border: 0px;
150 |     color: lightgrey;
151 |     border-bottom: 1px solid #424242;
152 |     margin-top: 0px; }
153 |     @media screen and (max-width: 640px) {
154 |       .emotion-tuner select {
155 |         font-size: 10px; } }
156 |   .emotion-tuner label {
157 |     display: block;
158 |     color: lightgrey;
159 |     font-size: 13px;
160 |     font-family: "Nunito", sans-serif; }
161 |     @media screen and (max-width: 640px) {
162 |       .emotion-tuner label {
163 |         font-size: 10px; } }
164 | 
165 | .emotion-acquire {
166 |   display: flex;
167 |   flex-wrap: wrap;
168 |   text-align: center;
169 |   justify-content: center;
170 |   width: 100%;
171 |   flex: 1; }
172 |   .emotion-acquire .emotion-acquire-outer {
173 |     padding: 10px 0px;
174 |     background-color: #181818;
175 |     box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
176 |     border-radius: 3px;
177 |     margin: 0 20px;
178 |     flex: 1;
179 |     width: 150px;
180 |     height: 140px; }
181 |     @media screen and (max-width: 640px) {
182 |       .emotion-acquire .emotion-acquire-outer {
183 |         width: 100px;
184 |         height: 120px;
185 |         margin: 10px;
186 |         flex: none; } }
187 |   .emotion-acquire .emotion-acquire-inner {
188 |     width: 100%;
189 |     height: 100px;
190 |     border-radius: 3px;
191 |     position: relative;
192 |     cursor: pointer; }
193 |     @media screen and (max-width: 640px) {
194 |       .emotion-acquire .emotion-acquire-inner {
195 |         height: 85px; } }
196 |     .emotion-acquire .emotion-acquire-inner p {
197 |       margin: 0px;
198 |       margin-bottom: 0px !important;
199 |       font-size: 15px;
200 |       color: lightgrey;
201 |       text-align: center;
202 |       padding: 3px;
203 |       position: absolute;
204 |       bottom: 0px;
205 |       width: 100%; }
206 |     .emotion-acquire .emotion-acquire-inner .emotion-acquire-cam img {
207 |       border: 0px !important; }
208 |   .emotion-acquire p {
209 |     margin: 0px;
210 |     margin-bottom: 0px !important;
211 |     font-size: 10px;
212 |     color: #d4141d;
213 |     text-align: center;
214 |     padding: 3px;
215 |     width: 100%; }
216 | 
217 | .emotion-buttons {
218 |   display: flex;
219 |   flex-wrap: wrap;
220 |   text-align: center;
221 |   justify-content: center;
222 |   width: 100%;
223 |   flex: 1; }
224 |   @media screen and (max-width: 640px) {
225 |     .emotion-buttons {
226 |       display: block; } }
227 |   .emotion-buttons button {
228 |     width: 80px;
229 |     height: 80px;
230 |     border-radius: 50%;
231 |     border: 5px double #b9171e;
232 |     box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.2);
233 |     padding: 10px;
234 |     background-color: #d4141d;
235 |     color: white;
236 |     font-size: 15px;
237 |     font-family: Roboto;
238 |     font-weight: bold;
239 |     margin: 0 20px;
240 |     cursor: pointer;
241 |     transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
242 |     @media screen and (max-width: 640px) {
243 |       .emotion-buttons button {
244 |         width: 60px;
245 |         height: 60px;
246 |         padding: 10px;
247 |         font-size: 12px;
248 |         margin: 0 10px; } }
249 |   .emotion-buttons button:focus {
250 |     outline: none; }
251 |   .emotion-buttons button:hover {
252 |     transform: scale(1.3); }
253 | 
254 | .emotion-kit {
255 |   display: flex;
256 |   flex-wrap: wrap;
257 |   justify-content: center;
258 |   height: 45%; }
259 |   @media screen and (max-width: 640px) {
260 |     .emotion-kit {
261 |       padding-top: 0px; } }
262 |   .emotion-kit .emotion-kit-comps {
263 |     position: relative;
264 |     width: 80px;
265 |     height: 80px;
266 |     background-color: #ffffff;
267 |     border-radius: 10px;
268 |     border: 6px solid #ffffff;
269 |     margin: 10px;
270 |     cursor: pointer;
271 |     transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
272 |     box-shadow: 4px 6px 6px rgba(0, 0, 0, 0.4); }
273 |     @media screen and (max-width: 640px) {
274 |       .emotion-kit .emotion-kit-comps {
275 |         width: 60px;
276 |         height: 60px; } }
277 |     .emotion-kit .emotion-kit-comps audio {
278 |       width: 120px;
279 |       height: 85px; }
280 |       @media screen and (max-width: 640px) {
281 |         .emotion-kit .emotion-kit-comps audio {
282 |           width: 70px;
283 |           height: 25px; } }
284 |     .emotion-kit .emotion-kit-comps p {
285 |       margin: 0px;
286 |       margin-bottom: 0px !important;
287 |       font-size: 16px;
288 |       color: #333;
289 |       text-align: center;
290 |       padding: 40px 0px;
291 |       width: 100%;
292 |       font-weight: bold; }
293 |       @media screen and (max-width: 640px) {
294 |         .emotion-kit .emotion-kit-comps p {
295 |           padding: 12px 0px; } }
296 |   .emotion-kit .emotion-kit-comps:hover {
297 |     transform: scale(1.1); }
298 | 
299 | .emotion-kit-comps p::selection {
300 |   color: #333;
301 |   background: transparent; }
302 | 
303 | .emotion-live-cam {
304 |   width: 100%;
305 |   height: 55%; }
306 |   .emotion-live-cam div {
307 |     width: 250px;
308 |     height: 250px;
309 |     background-color: #181818;
310 |     border-radius: 10px;
311 |     margin: 0px auto;
312 |     box-shadow: 6px 8px 8px rgba(0, 0, 0, 0.55);
313 |     overflow: hidden; }
314 |     @media screen and (max-width: 640px) {
315 |       .emotion-live-cam div {
316 |         width: 180px;
317 |         height: 180px;
318 |         margin-top: 10px; } }
319 |   .emotion-live-cam video {
320 |     width: 250px;
321 |     height: 250px; }
322 |     @media screen and (max-width: 640px) {
323 |       .emotion-live-cam video {
324 |         width: 180px;
325 |         height: 180px; } }
326 | 
327 | .emotion-loss {
328 |   color: #e13527;
329 |   font-size: 15px;
330 |   margin-bottom: 0px !important;
331 |   margin: 0px !important;
332 |   padding: 0px 20px !important;
333 |   display: flex;
334 |   position: relative;
335 |   bottom: 25px;
336 |   width: 100%;
337 |   text-align: center;
338 |   font-weight: bold;
339 |   justify-content: center; }
340 | 
341 | /*# sourceMappingURL=app.css.map */
342 | 


--------------------------------------------------------------------------------
/css/app.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["app.scss"],
5 | "names": [],
6 | "file": "app.css"
7 | }
8 | 


--------------------------------------------------------------------------------
/css/app.scss:
--------------------------------------------------------------------------------
  1 | // mobile media query
  2 | @mixin mobile {
  3 |   @media screen and (max-width: 640px) {
  4 |     @content;
  5 |   }
  6 | }
  7 | 
  8 | // tablet media query
  9 | @mixin tablet {
 10 |   @media (min-width: 768px) and (max-width: 1024px) {
 11 |     @content;
 12 |   }
 13 | }
 14 | 
 15 | // fonts
 16 | $font_header : 'Nunito', sans-serif;
 17 | $font_body   : 'Nunito', sans-serif;
 18 | 
 19 | body {
 20 |   padding: 0;
 21 |   margin: 0;
 22 |   font-family: $font_body;
 23 |   overflow: hidden;
 24 | }
 25 | 
 26 | .container {
 27 |   width: 100%;
 28 |   height: auto;
 29 | }
 30 | 
 31 | img {
 32 | 	max-width: 100%;
 33 |     display: block;
 34 |     margin: 0 auto;
 35 | }
 36 | 
 37 | select {
 38 | 	padding: 5px;
 39 |     font-family: Nunito;
 40 |     border-radius: 5px;
 41 | }
 42 | 
 43 | label {
 44 | 	margin: 0.7em 0;
 45 | }
 46 | 
 47 | footer {
 48 | 	text-align: center;
 49 | 	position: fixed;
 50 | 	bottom: 0;
 51 | 	left: 0;
 52 | 	width: 100%;
 53 | 	height: 40px;
 54 | 	background-color: black;
 55 | 
 56 | 	p {
 57 | 		color: white;
 58 | 		margin: 0px !important;
 59 | 		font-size: 13px;
 60 | 		padding-top: 10px;
 61 | 	}
 62 | 	a {
 63 | 		text-decoration: none;
 64 | 	}
 65 | 	a:hover {
 66 | 		text-decoration: underline;
 67 | 	}
 68 | }
 69 | 
 70 | .mobile-tablet-warning {
 71 | 	display: none;
 72 | 	background-color: #1a1c22;
 73 | 	height: 90vh;
 74 | 	width: 100%;
 75 | 	padding: 30px;
 76 | 
 77 | 	h3 {
 78 | 		text-align: center;
 79 | 	    font-size: 40px;
 80 | 	    color: #db4437;
 81 | 	    margin: 0px;
 82 | 	    padding: 50px 20px
 83 | 	}
 84 | 	p {
 85 | 		font-size: 14px;
 86 |     	color: white;
 87 | 	}
 88 | }
 89 | 
 90 | .emotion-container {
 91 | 	height: 100vh;
 92 | 	background-color: #252525;
 93 | 	margin: 0px;
 94 | 	padding-left: 20px;
 95 | 	padding-right: 20px;
 96 | 	padding-bottom: 20px;
 97 | 	@include mobile {
 98 | 		height: 100%;
 99 | 		padding: 0px;
100 | 		margin-bottom: 40px;
101 | 	}
102 | }
103 | 
104 | .emotion-header {
105 | 	width: 100%;
106 | 	text-align: center;
107 | 	border-top-right-radius: 20px;
108 | 	border-top-left-radius: 20px;
109 | 	background-color: #252525;
110 | 	padding-top: 20px;
111 | 	@include mobile {
112 | 		border-top-right-radius: 0px;
113 | 		border-top-left-radius: 0px;
114 | 	}
115 |     h3 {
116 |     	margin: 0px;
117 |     	padding: 0px;
118 |     	font-size: 25px;
119 |     	color: #d3131c;
120 |     	font-family: "Poppins";
121 |     	@include mobile {
122 |     		font-size: 20px;
123 |     	}
124 |     }
125 |     p {
126 |     	margin: 0px !important;
127 |     	margin-bottom: 0px !important;
128 |     	color: lightgrey;
129 |     	font-size: 13px;
130 |     }
131 | }
132 | 
133 | .emotion-wrapper {
134 | 	background-color: #252525;
135 | 	padding: 20px;
136 | 	width: 100%;
137 | 	height: 80%;
138 | 	border-bottom-left-radius: 20px;
139 | 	border-bottom-right-radius: 20px;
140 | 	display: flex;
141 | 	flex-wrap: wrap;
142 | 	@include mobile {
143 | 		display: block;
144 | 		border-bottom-left-radius: 0px;
145 | 		border-bottom-right-radius: 0px;
146 | 	}
147 | }
148 | 
149 | .emotion-flex {
150 | 	flex: 1;
151 | 	width: 100%;
152 | 	height: 100%;
153 | 	background-color: #252525;
154 | }
155 | 
156 | .emotion-player {
157 | 	padding: 20px 0px;
158 | 	border-right: 1px solid #252933;
159 | 	@include mobile {
160 | 		border-bottom: 1px solid #252933;
161 | 		border-right: 0px;
162 | 	}
163 | }
164 | 
165 | .emotion-controller {
166 | 	display: flex;
167 | 	flex-direction: column;
168 | }
169 | 
170 | .emotion-tuner {
171 | 	display: flex;
172 | 	width: 100%;
173 | 	text-align: center;
174 | 	flex: 1;
175 | 
176 | 	@include mobile {
177 | 		flex-wrap: wrap;
178 |     	padding: 5%;
179 | 	}
180 | 
181 | 	.emotion-dropdown {
182 | 		flex: 1;
183 | 		display: table;
184 | 		height: 100%;
185 | 		.emotion-dropdown-cell {
186 | 			vertical-align: middle;
187 | 			display: table-cell;
188 | 		}
189 | 	}
190 | 	select {
191 | 		display: inline-block;
192 | 	    background-color: #181818;
193 | 	    border: 0px;
194 | 	    color: lightgrey;
195 | 	    border-bottom: 1px solid #424242;
196 | 	    margin-top: 0px;
197 | 	    @include mobile {
198 | 			font-size: 10px;
199 | 		}
200 | 	}
201 | 	label {
202 | 		display: block;
203 | 		color: lightgrey;
204 | 		font-size: 13px;
205 | 		font-family: $font_body;
206 | 		@include mobile {
207 | 			font-size: 10px;
208 | 		}
209 | 	}
210 | }
211 | 
212 | .emotion-acquire {
213 | 	display: flex;
214 | 	flex-wrap: wrap;
215 | 	text-align: center;
216 | 	justify-content: center;
217 | 	width: 100%;
218 | 	flex: 1;
219 | 
220 | 	.emotion-acquire-outer {
221 | 		padding: 10px 0px;
222 | 		background-color: #181818;
223 |     	box-shadow: 5px 5px 8px rgba(0,0,0,0.5);
224 | 		border-radius: 3px;
225 | 		margin: 0 20px;
226 | 		flex: 1;
227 | 		width: 150px;
228 | 		height: 140px;
229 | 		@include mobile {
230 | 			width: 100px;
231 | 			height: 120px;
232 | 			margin: 10px;
233 | 			flex: none;
234 | 		}
235 | 	}
236 | 	.emotion-acquire-inner {
237 | 		width: 100%;
238 | 		height: 100px;
239 | 		border-radius: 3px;
240 | 		position: relative;
241 | 		cursor: pointer;
242 | 		@include mobile {
243 | 			height: 85px;
244 | 		}
245 | 
246 | 		p {
247 | 			margin: 0px;
248 | 		    margin-bottom: 0px !important;
249 | 		    font-size: 15px;
250 | 		    color: lightgrey;
251 | 		    text-align: center;
252 | 		    padding: 3px;
253 | 		    position: absolute;
254 | 		    bottom: 0px;
255 | 		    width: 100%;
256 | 		}
257 | 
258 | 		.emotion-acquire-cam img {
259 | 			border: 0px !important;
260 | 		}
261 | 	}
262 | 	p {
263 | 		margin: 0px;
264 | 	    margin-bottom: 0px !important;
265 | 	    font-size: 10px;
266 | 	    color: #d4141d;
267 | 	    text-align: center;
268 | 	    padding: 3px;
269 | 	    width: 100%;
270 | 	}
271 | }
272 | 
273 | .emotion-buttons {
274 | 	display: flex;
275 | 	flex-wrap: wrap;
276 | 	text-align: center;
277 | 	justify-content: center;
278 | 	width: 100%;
279 | 	flex: 1;
280 | 
281 | 	@include mobile {
282 | 		display: block;
283 | 	}
284 | 
285 | 	button {
286 | 		width: 80px;
287 | 	    height: 80px;
288 | 	    border-radius: 50%;
289 | 	    border: 5px double #b9171e;
290 |     	box-shadow: 4px 6px 6px rgba(0,0,0,0.2);
291 |     	padding: 10px;
292 |     	background-color: #d4141d;
293 | 	    color: white;
294 | 	    font-size: 15px;
295 | 	    font-family: Roboto;
296 | 	    font-weight: bold;
297 | 	    margin: 0 20px;
298 | 	    cursor: pointer;
299 |     	transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
300 | 	    @include mobile {
301 | 	    	width: 60px;
302 | 	    	height: 60px;
303 | 	    	padding: 10px;
304 | 	    	font-size: 12px;
305 | 	    	margin: 0 10px;
306 | 	    }
307 | 	}
308 | 	button:focus {
309 | 		outline: none;
310 | 	}
311 | 	button:hover {
312 | 		transform: scale(1.3);
313 | 	}
314 | 
315 | }
316 | 
317 | .emotion-kit {
318 | 	display: flex;
319 | 	flex-wrap: wrap;
320 | 	justify-content: center;
321 | 	height: 45%;
322 | 	@include mobile {
323 | 		padding-top: 0px;
324 | 	}
325 | 
326 | 	.emotion-kit-comps {
327 | 		position: relative;
328 | 		width: 80px;
329 | 	    height: 80px;
330 | 	    background-color: #ffffff;
331 | 	    border-radius: 10px;
332 | 	    border: 6px solid #ffffff;
333 | 	    margin: 10px;
334 | 	    cursor: pointer;
335 | 	    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
336 | 	    box-shadow: 4px 6px 6px rgba(0,0,0,0.4);
337 | 	    @include mobile {
338 | 	    	width: 60px;
339 | 	    	height: 60px;
340 | 	    }
341 | 
342 | 	    audio {
343 | 	    	width: 120px;
344 |     		height: 85px;
345 |     		@include mobile {
346 | 		    	width: 70px;
347 | 		    	height: 25px;
348 | 	    	}
349 | 	    }
350 | 
351 | 	    p {
352 | 	    	margin: 0px;
353 | 		    margin-bottom: 0px !important;
354 | 		    font-size: 16px;
355 | 		    color: #333;
356 | 		    text-align: center;
357 | 		    padding: 40px 0px;
358 | 		    width: 100%;
359 | 		    font-weight: bold;
360 | 		    @include mobile {
361 | 		    	padding: 12px 0px;
362 | 		    }
363 | 	    }
364 | 	}
365 | 	.emotion-kit-comps:hover {
366 | 		transform: scale(1.1);
367 | 	}
368 | }
369 | 
370 | .emotion-kit-comps p::selection {
371 |   color: #333;
372 |   background: transparent;
373 | }
374 | 
375 | .emotion-live-cam {
376 | 	width: 100%;
377 | 	height: 55%;
378 | 
379 | 	div {
380 | 		width: 250px;
381 | 		height: 250px;
382 | 		background-color: #181818;
383 | 		border-radius: 10px;
384 | 		margin: 0px auto;
385 | 		box-shadow: 6px 8px 8px rgba(0, 0, 0, 0.55);
386 | 		overflow: hidden;
387 | 		@include mobile {
388 | 			width: 180px;
389 | 			height: 180px;
390 | 			margin-top: 10px;
391 | 		}
392 | 	}
393 | 
394 | 	video {
395 | 		width: 250px;
396 | 		height: 250px;
397 | 		@include mobile {
398 | 			width: 180px;
399 | 			height: 180px;
400 | 		}
401 | 	}
402 | }
403 | 
404 | .emotion-loss {
405 | 	color: #e13527;
406 |     font-size: 15px;
407 |     margin-bottom: 0px !important;
408 |     margin: 0px !important;
409 |     padding: 0px 20px !important;
410 |     display: flex;
411 |     position: relative;
412 |     bottom: 25px;
413 |     width: 100%;
414 |     text-align: center;
415 |     font-weight: bold;
416 |     justify-content: center;
417 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Digit Recognizer using TensorFlow.js Demo</title>
  5 | 	
  6 | 	<link href="https://fonts.googleapis.com/css?family=Nunito|Roboto|Poppins" rel="stylesheet">
  7 | 	<link rel="stylesheet" type="text/css" href="css/app.css">
  8 | </head>
  9 | <body>
 10 | 	<div class="container">
 11 | 		<div id="mobile-tablet-warning" class="mobile-tablet-warning">
 12 | 			<h3>Oops!</h3>
 13 | 			<p>This demo is highly experimental in mobile and tablet devices. If you are still crazy in trying out this demo, I suggest you to use a laptop or a desktop. Thanks for your understanding! You're cute 😊</p>
 14 | 			<a href="https://www.youtube.com/watch?v=WBi_PZ66z5E&feature=youtu.be" target="_blank">YouTube Video Link</a>
 15 | 		</div>
 16 | 
 17 | 		<div class="emotion-container" id="emotion-container">
 18 | 			<header class="emotion-header">
 19 | 				<h3>Emotion Recognizer</h3>
 20 | 				<p>Made with TensorFlow.js ❤️</p>
 21 | 			</header>
 22 | 			<div class="emotion-wrapper">
 23 | 				<div class="emotion-player emotion-flex">  
 24 | 					<div class="emotion-kit">
 25 | 						<div id="emotion-laugh"  class="emotion-kit-comps">
 26 | 							<img id="emoticon-laugh" src="assets/images/laugh.gif" />
 27 | 						</div>
 28 | 						<div id="emotion-excited" class="emotion-kit-comps">
 29 | 							<img id="emoticon-excited" src="assets/images/excited.gif" />
 30 | 						</div>
 31 | 						<div id="emotion-sad" class="emotion-kit-comps">
 32 | 							<img id="emoticon-sad" src="assets/images/sad.gif" />
 33 | 						</div>
 34 | 						<div id="emotion-angry" class="emotion-kit-comps">
 35 | 							<img id="emoticon-angry" src="assets/images/angry.gif" />
 36 | 						</div>
 37 | 						<div id="emotion-sleep" class="emotion-kit-comps">
 38 | 							<img id="emoticon-sleep" src="assets/images/sleep.gif" />
 39 | 						</div>
 40 | 					</div>
 41 | 					<div class="emotion-live-cam">
 42 | 						<div>
 43 | 							<video id="main-stream-video" width="200px" height="200px" ></video>
 44 | 						</div>
 45 | 					</div>
 46 | 				</div>
 47 | 				<!--- Controller starts here -->
 48 | 				<div class="emotion-controller emotion-flex" id="emotion-controller">
 49 | 					<!--- Tuner starts here -->
 50 | 					<div class="emotion-tuner" id="emotion-tuner">
 51 | 						<!--- Learning Rate starts here -->
 52 | 						<div class="emotion-dropdown">
 53 | 							<label>Learning Rate</label>
 54 | 							<select id="emotion-learning-rate">
 55 | 								<option>0.00001</option>
 56 | 								<option selected>0.0001</option>
 57 | 								<option>0.001</option>
 58 | 								<option>0.003</option>
 59 | 							</select>
 60 | 						</div>
 61 | 						<!--- Learning Rate ends here -->
 62 | 						<!--- Batch Size starts here -->
 63 | 						<div class="emotion-dropdown">
 64 | 							<label>Batch Size</label>
 65 | 							<select id="emotion-batch-size">
 66 | 								<option>0.05</option>
 67 | 								<option selected>0.4</option>
 68 | 								<option>0.1</option>
 69 | 								<option>1</option>
 70 | 							</select>
 71 | 						</div>
 72 | 						<!--- Batch Size ends here -->
 73 | 						<!--- Epochs starts here -->
 74 | 						<div class="emotion-dropdown">
 75 | 							<label>Epochs</label>
 76 | 							<select id="emotion-epochs">
 77 | 								<option>10</option>
 78 | 								<option selected>20</option>
 79 | 								<option>40</option>
 80 | 							</select>
 81 | 						</div>
 82 | 						<!--- Epochs ends here -->
 83 | 						<!--- Hidden Units starts here -->
 84 | 						<div class="emotion-dropdown">
 85 | 							<label>Hidden Units</label>
 86 | 							<select id="emotion-hidden-units">
 87 | 								<option>10</option>
 88 | 								<option selected>100</option>
 89 | 								<option>200</option>
 90 | 							</select>
 91 | 						</div>
 92 | 						<!--- Hidden Units ends here -->
 93 | 					</div>
 94 | 					<!--- Tuner ends here -->
 95 | 					<!--- Buttons starts here -->
 96 | 					<div class="emotion-buttons">
 97 | 						<button onclick="startWebcam()">Start</button>
 98 | 						<button onclick="train()">Train</button>
 99 | 						<button onclick="predictPlay()">Play</button>
100 | 						<button onclick="stopWebcam()">Stop</button>
101 | 					</div>
102 | 					<!--- Buttons ends here -->
103 | 					<!--- User acquire starts here -->
104 | 					<div class="emotion-acquire">
105 | 						<div class="emotion-acquire-outer">
106 | 							<div class="emotion-acquire-inner" id="sample-laugh" onclick="captureSample(this.id, 0)">
107 | 								<div class="emotion-acquire-cam">
108 | 									<img id="image-laugh" />
109 | 								</div>
110 | 								<p>Add 🤣</p>
111 | 							</div>
112 | 							<p id="count-laugh">0 samples</p>
113 | 						</div>
114 | 						<div class="emotion-acquire-outer">
115 | 							<div class="emotion-acquire-inner" id="sample-excited" onclick="captureSample(this.id, 1)">
116 | 								<div class="emotion-acquire-cam">
117 | 									<img id="image-excited" />
118 | 								</div>
119 | 								<p>Add 😲</p>
120 | 							</div>
121 | 							<p id="count-excited">0 samples</p>
122 | 						</div>
123 | 						<div class="emotion-acquire-outer">
124 | 							<div class="emotion-acquire-inner" id="sample-sad" onclick="captureSample(this.id, 2)">
125 | 								<div class="emotion-acquire-cam">
126 | 									<img id="image-sad" />
127 | 								</div>
128 | 								<p>Add 😰</p>
129 | 							</div>
130 | 							<p id="count-sad">0 samples</p>
131 | 						</div>
132 | 						<div class="emotion-acquire-outer">
133 | 							<div class="emotion-acquire-inner" id="sample-angry" onclick="captureSample(this.id, 3)">
134 | 								<div class="emotion-acquire-cam">
135 | 									<img id="image-angry" />
136 | 								</div>
137 | 								<p>Add 😡</p>
138 | 							</div>
139 | 							<p id="count-angry">0 samples</p>
140 | 						</div>
141 | 						<div class="emotion-acquire-outer">
142 | 							<div class="emotion-acquire-inner" id="sample-sleep" onclick="captureSample(this.id, 4)">
143 | 								<div class="emotion-acquire-cam">
144 | 									<img id="image-sleep" />
145 | 								</div>
146 | 								<p>Add 😴</p>
147 | 							</div>
148 | 							<p id="count-sleep">0 samples</p>
149 | 						</div>
150 | 					</div>
151 | 					<!--- User acquire ends here -->
152 | 				</div>
153 | 				<!--- Controller ends here -->
154 | 			</div>
155 | 		</div>
156 | 	</div>
157 | 	
158 | 	<script src="https://unpkg.com/@tensorflow/tfjs"></script>
159 | 	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
160 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
161 | 	<script type="text/javascript" src="js/app.js"></script>
162 | </body>
163 | </html>


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | //------------------
  2 | // GLOBAL VARIABLES
  3 | //------------------
  4 | let localStream;
  5 | var isMobileOrTablet = false;
  6 | var isWebcamOn = 0;
  7 | var modelName = "mobilenet";
  8 | var NUM_CLASSES = 5;
  9 | var predictCount = 0;
 10 | var predictMax = 1000;
 11 | 
 12 | let extractor;
 13 | let classifier;
 14 | let xs;
 15 | let ys;
 16 | 
 17 | var SAMPLE_BOX = {
 18 | 	0: 0,
 19 | 	1: 0,
 20 | 	2: 0,
 21 | 	3: 0,
 22 | 	4: 0
 23 | }
 24 | 
 25 | var CLASS_MAP = {
 26 | 	0: "emoticon-laugh",
 27 | 	1: "emoticon-excited",
 28 | 	2: "emoticon-sad",
 29 | 	3: "emoticon-angry",
 30 | 	4: "emoticon-sleep"
 31 | }
 32 | 
 33 | //-----------------------------
 34 | // disable support for mobile 
 35 | // and tablet
 36 | //-----------------------------
 37 | function mobileAndTabletcheck() {
 38 |   var check = false;
 39 |   (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
 40 |   isMobileOrTablet = check;
 41 | };
 42 | 
 43 | window.onload = function() {
 44 | 	mobileAndTabletcheck();
 45 | 	if (isMobileOrTablet) {
 46 | 		document.getElementById("emotion-container").style.display = "none";
 47 | 		document.getElementById("mobile-tablet-warning").style.display = "block";
 48 | 	} else {
 49 | 		loadExtractor();
 50 | 	}
 51 | }
 52 | 
 53 | //-----------------------
 54 | // start webcam capture
 55 | //-----------------------
 56 | function startWebcam() {
 57 | 	predictCount = 0;
 58 | 	var video = document.getElementById('main-stream-video');
 59 | 	vendorUrl = window.URL || window.webkitURL;
 60 | 
 61 | 	navigator.getMedia = navigator.getUserMedia ||
 62 | 						 navigator.webkitGetUserMedia ||
 63 | 						 navigator.mozGetUserMedia ||
 64 | 						 navigator.msGetUserMedia;
 65 | 
 66 | 	// capture video from webcam
 67 | 	navigator.getMedia({
 68 | 		video: true,
 69 | 		audio: false
 70 | 	}, function(stream) {
 71 | 		localStream = stream;
 72 | 		video.srcObject = stream;
 73 | 		video.play();
 74 | 		isWebcamOn = 1;
 75 | 	}, function(error) {
 76 | 		alert("Something wrong with webcam!");
 77 | 		isWebcamOn = 0;
 78 | 	});
 79 | 
 80 | }
 81 | 
 82 | //---------------------
 83 | // stop webcam capture
 84 | //---------------------
 85 | function stopWebcam() {
 86 | 	localStream.getVideoTracks()[0].stop();
 87 | 	isWebcamOn = 0;
 88 | 	predictCount = predictMax + 1;
 89 | }
 90 | 
 91 | //------------------------------
 92 | // capture webcam stream and 
 93 | // assign it to a canvas object
 94 | //------------------------------
 95 | function captureWebcam() {
 96 | 	var video = document.getElementById("main-stream-video");
 97 | 
 98 | 	var canvas    = document.createElement("canvas");
 99 | 	var context   = canvas.getContext('2d');
100 | 	canvas.width  = video.width;
101 | 	canvas.height = video.height;
102 | 
103 | 	context.drawImage(video, 0, 0, video.width, video.height);
104 | 	tensor_image = preprocessImage(canvas);
105 | 
106 | 	var canvasObj = {
107 |     	canvasElement: canvas,
108 |     	canvasTensor : tensor_image
109 |   	};
110 | 
111 | 	return canvasObj;
112 | }
113 | 
114 | //---------------------------------
115 | // take snapshot for each category
116 | //---------------------------------
117 | function captureSample(id, label) {
118 | 	if (isWebcamOn == 1) {
119 | 		
120 | 		canvasObj = captureWebcam();
121 | 		canvas = canvasObj["canvasElement"];
122 | 		tensor_image = canvasObj["canvasTensor"];
123 | 
124 | 		var img_id = id.replace("sample", "image");
125 | 		var img    = document.getElementById(img_id);
126 | 		img.src    = canvas.toDataURL();
127 | 
128 | 		// add the sample to the training tensor
129 | 		addSampleToTensor(extractor.predict(tensor_image), label);
130 | 
131 | 		SAMPLE_BOX[label] += 1;
132 | 		document.getElementById(id.replace("sample", "count")).innerHTML = SAMPLE_BOX[label] + " samples";
133 | 
134 | 	} else {
135 | 		alert("Please turn on the webcam first!")
136 | 	}
137 | }
138 | 
139 | //------------------------------------
140 | // preprocess the image from webcam
141 | // to be mobilenet friendly
142 | //------------------------------------
143 | function preprocessImage(img) {
144 | 	const tensor        = tf.browser.fromPixels(img)
145 | 						  .resizeNearestNeighbor([224, 224]);
146 | 	const croppedTensor = cropImage(tensor);
147 | 	const batchedTensor = croppedTensor.expandDims(0);
148 | 	
149 | 	return batchedTensor.toFloat().div(tf.scalar(127)).sub(tf.scalar(1));
150 | }
151 | 
152 | //------------------------------------
153 | // crop the image from the webcam
154 | // region of interest: center portion
155 | //------------------------------------
156 | function cropImage(img) {
157 | 	const size = Math.min(img.shape[0], img.shape[1]);
158 | 	const centerHeight = img.shape[0] / 2;
159 | 	const beginHeight = centerHeight - (size / 2);
160 | 	const centerWidth = img.shape[1] / 2;
161 | 	const beginWidth = centerWidth - (size / 2);
162 | 	return img.slice([beginHeight, beginWidth, 0], [size, size, 3]);
163 | }
164 | 
165 | //------------------------------------
166 | // hold each sample as a tensor that
167 | // has 4 dimensions
168 | //------------------------------------
169 | function addSampleToTensor(sample, label) {
170 | 	const y = tf.tidy(
171 | 		() => tf.oneHot(tf.tensor1d([label]).toInt(), NUM_CLASSES));
172 | 	if(xs == null) {
173 | 		xs = tf.keep(sample);
174 | 		ys = tf.keep(y);
175 | 	} else {
176 | 		const oldX = xs;
177 | 		xs = tf.keep(oldX.concat(sample, 0));
178 | 		const oldY = ys;
179 | 		ys = tf.keep(oldY.concat(y, 0));
180 | 		oldX.dispose();
181 | 		oldY.dispose();
182 | 		y.dispose();
183 | 	}
184 | }
185 | 
186 | //------------------------------------
187 | // train the classifier with the 
188 | // obtained tensors from the user
189 | //------------------------------------
190 | async function train() {
191 | 	var selectLearningRate = document.getElementById("emotion-learning-rate");
192 | 	const learningRate     = selectLearningRate.options[selectLearningRate.selectedIndex].value;
193 | 
194 | 	var selectBatchSize    = document.getElementById("emotion-batch-size");
195 | 	const batchSizeFrac    = selectBatchSize.options[selectBatchSize.selectedIndex].value;
196 | 
197 | 	var selectEpochs       = document.getElementById("emotion-epochs");
198 | 	const epochs           = selectEpochs.options[selectEpochs.selectedIndex].value;
199 | 
200 | 	var selectHiddenUnits  = document.getElementById("emotion-hidden-units");
201 | 	const hiddenUnits      = selectHiddenUnits.options[selectHiddenUnits.selectedIndex].value;
202 | 
203 | 	if(xs == null) {
204 | 		alert("Please add some samples before training!");
205 | 	} else {
206 | 		classifier = tf.sequential({
207 | 			layers: [
208 | 				tf.layers.flatten({inputShape: [7, 7, 256]}),
209 | 				tf.layers.dense({
210 | 					units: parseInt(hiddenUnits),
211 | 					activation: "relu",
212 | 					kernelInitializer: "varianceScaling",
213 | 					useBias: true
214 | 				}),
215 | 				tf.layers.dense({
216 | 					units: parseInt(NUM_CLASSES),
217 | 					kernelInitializer: "varianceScaling",
218 | 					useBias: false,
219 | 					activation: "softmax"
220 | 				})
221 | 			]
222 | 		});
223 | 		const optimizer = tf.train.adam(learningRate);
224 | 		classifier.compile({optimizer: optimizer, loss: "categoricalCrossentropy"});
225 | 
226 | 		const batchSize = Math.floor(xs.shape[0] * parseFloat(batchSizeFrac));
227 | 		if(!(batchSize > 0)) {
228 | 			alert("Please choose a non-zero fraction for batchSize!");
229 | 		}
230 | 		
231 | 		// create loss visualization
232 | 		var lossTextEle = document.getElementById("emotion-loss");
233 | 		if (typeof(lossTextEle) != 'undefined' && lossTextEle != null) {
234 | 			lossTextEle.innerHTML = "";
235 | 		} else {
236 | 			var lossText = document.createElement("P");
237 | 			lossText.setAttribute("id", "emotion-loss");
238 | 			lossText.classList.add('emotion-loss');
239 | 			document.getElementById("emotion-controller").insertBefore(lossText, document.getElementById("emotion-controller").children[1]);
240 | 			var lossTextEle = document.getElementById("emotion-loss");
241 | 		}
242 | 
243 | 		classifier.fit(xs, ys, {
244 | 			batchSize,
245 | 			epochs: parseInt(epochs),
246 | 			callbacks: {
247 | 				onBatchEnd: async (batch, logs) => {
248 | 					lossTextEle.innerHTML = "Loss: " + logs.loss.toFixed(5);
249 | 					await tf.nextFrame();
250 | 				}
251 | 			}
252 | 		});
253 | 	}
254 | }
255 | 
256 | 
257 | //-------------------------------------
258 | // load mobilenet model from Google
259 | // and return a model that has the
260 | // internal activations from a 
261 | // specific feature layer in mobilenet
262 | //-------------------------------------
263 | async function loadExtractor() {
264 | 	// load mobilenet from Google
265 | 	const mobilenet = await tf.loadLayersModel("https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json");
266 | 
267 | 	// return the mobilenet model with 
268 | 	// internal activations from "conv_pw_13_relu" layer
269 | 	const feature_layer = mobilenet.getLayer("conv_pw_13_relu");
270 | 
271 | 	// return mobilenet model with feature activations from specific layer
272 | 	extractor = tf.model({inputs: mobilenet.inputs, outputs: feature_layer.output});
273 | }
274 | 
275 | //------------------------------
276 | // Predict what the user plays
277 | //------------------------------
278 | var isPredicting = false;
279 | async function predictPlay() {
280 | 	isPredicting = true;
281 | 	while (isPredicting) {
282 | 		const predictedClass = tf.tidy(() => {
283 | 			canvasObj = captureWebcam();
284 | 			canvas = canvasObj["canvasElement"];
285 | 			const img = canvasObj["canvasTensor"];
286 | 			const features = extractor.predict(img);
287 | 			const predictions = classifier.predict(features);
288 | 			return predictions.as1D().argMax();
289 | 		});
290 | 
291 | 		const classId = (await predictedClass.data())[0];
292 | 		predictedClass.dispose();
293 | 		highlightTile(classId);
294 | 
295 | 		await tf.nextFrame();
296 | 	}
297 | }
298 | 
299 | //------------------------------------------
300 | // highlight the emoticon corresponding to
301 | // user's emotion
302 | //------------------------------------------
303 | function highlightTile(classId) {
304 | 	var tile_play    = document.getElementById(CLASS_MAP[classId].replace("emoticon", "emotion"));	
305 | 
306 | 	var tile_plays = document.getElementsByClassName("emotion-kit-comps");
307 | 	for (var i = 0; i < tile_plays.length; i++) {
308 | 		tile_plays[i].style.borderColor     = "#e9e9e9";
309 | 		tile_plays[i].style.backgroundColor = "#ffffff";
310 | 		tile_plays[i].style.transform       = "scale(1.0)";
311 | 	}
312 | 
313 | 	tile_play.style.borderColor     = "#e88139";
314 | 	tile_play.style.backgroundColor = "#ff9c56";
315 | 	tile_play.style.transform       = "scale(1.1)";
316 | }


--------------------------------------------------------------------------------