Webcam demo style (tensorflow#40)

* implementing updated webcam demo UI style

* Making loading message visible

* changing status hide from visibility:hidden to display:none

* Implementing glow controls

Author: jimbojw

webcam-transfer-learning/index.html

@@ -32,14 +32,15 @@
   <!-- Top -->
   <div id="pacman-container">
     <div id="logo">
-      <div id="status">Loading mobilenet...</div>
       <div id="logo-l">
         <div id="logo-b">
         </div>
       </div>
     </div>
   </div>
 
+  <div id="status">Loading mobilenet...</div>
+
   <div class="controller-panels" id="controller" style="display:none">
 
     <div class="panel training-panel">
@@ -154,9 +155,7 @@
         </div><!-- ./panel-cell -->
 
       </div><!-- /.panel-row -->
-
       <div class="panel-row panel-row-middle">
-
         <div class="panel-cell panel-cell-left">
           <div class="thumb-box">
             <div class="thumb-box-outer">

webcam-transfer-learning/styles.css

@@ -49,10 +49,18 @@ header b {
   font-weight: 400;
 }
 
+/** Loading message. */
+#status {
+  color: #f8f8f8;
+  font-weight: 300;
+  margin: 12px 0;
+  text-align: center;
+}
+
 /* Rules for the pacman game. */
 #pacman-container {
   background: black;
-  padding: 25px 0;
+  padding: 25px 0 40px;
 }
 #logo {
   background: url('https://storage.googleapis.com/tfjs-examples/assets/webcam-transfer-learning/bck.png');
@@ -66,6 +74,8 @@ header b {
 #logo #pcm-c {
   border-top: none;
   margin: 0 auto;
+  position: relative;
+  top: 20px;
 }
 #logo-l {
   background: #990;
@@ -282,6 +292,13 @@ header b {
   display: inline-block;
   padding: 9px;
   position: relative;
+  transition: box-shadow 0.3s;
+}
+[data-active="up"] .panel-row-top .thumb-box-outer,
+[data-active="down"] .panel-row-bottom .thumb-box-outer,
+[data-active="left"] .panel-cell-left .thumb-box-outer,
+[data-active="right"] .panel-cell-right .thumb-box-outer {
+  box-shadow: 0 0 4px 4px #ffaa00;
 }
 .thumb-box-inner {
   border: 1px solid #585858;

webcam-transfer-learning/ui.js

@@ -17,12 +17,11 @@
 import * as tf from '@tensorflow/tfjs';
 
 const CONTROLS = ['up', 'down', 'left', 'right'];
-const CONTROL_LABELS = ['↑', '↓', '←', '→'];
 const CONTROL_CODES = [38, 40, 37, 39];
 
 export function init() {
   document.getElementById('controller').style.display = '';
-  statusElement.style.visibility = 'hidden';
+  statusElement.style.display = 'none';
 }
 
 // Set hyper params from UI values.
@@ -45,7 +44,7 @@ export function startPacman() {
 
 export function predictClass(classId) {
   google.pacman.keyPressed(CONTROL_CODES[classId]);
-  status(CONTROL_LABELS[classId]);
+  document.body.setAttribute('data-active', CONTROLS[classId]);
 }
 
 export function isPredicting() {
@@ -55,10 +54,6 @@ export function donePredicting() {
   statusElement.style.visibility = 'hidden';
 }
 
-export function status(msg) {
-  statusElement.innerText = msg;
-}
-
 export let addExampleHandler;
 export function setExampleHandler(handler) {
   addExampleHandler = handler;
@@ -80,9 +75,11 @@ async function handler(label) {
   const total = document.getElementById(className + '-total');
   while (mouseDown) {
     addExampleHandler(label);
+    document.body.setAttribute('data-active', CONTROLS[label]);
     total.innerText = totals[label]++;
     await tf.nextFrame();
   }
+  document.body.removeAttribute('data-active');
 }
 
 upButton.addEventListener('mousedown', () => handler(0));