mnist convnet demo updates including switch toggle for GPU

demos/src/mnist-cnn.css

@@ -1,9 +1,40 @@
+/* MDL overrides */
+
+.demo.mnist-cnn .mdl-switch__label {
+  font-size: 14px !important;
+  color: #69707a;
+}
+
+.demo.mnist-cnn .mdl-switch.is-checked .mdl-switch__thumb {
+  background: rgba(27, 188, 155, 0.6);
+}
+
+.demo.mnist-cnn .mdl-switch.is-checked .mdl-switch__track {
+  background: rgba(27, 188, 155, 0.3);
+}
+
+/*******************************************/
+
 .demo.mnist-cnn .column {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.demo.mnist-cnn .column.input-column {
+  justify-content: flex-end;
+}
+
+.demo.mnist-cnn .column.controls-column {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-top: 80px;
+}
+
+.demo.mnist-cnn .column.output-column {
+  justify-content: center;
+}
+
 .demo.mnist-cnn .input-container {
   display: inline-flex;
   flex-direction: column;

demos/src/mnist-cnn.js

@@ -11,7 +11,8 @@ const MODEL_CONFIG = {
     model: '/demos/data/mnist_cnn/mnist_cnn.json',
     weights: '/demos/data/mnist_cnn/mnist_cnn_weights.buf',
     metadata: '/demos/data/mnist_cnn/mnist_cnn_metadata.json'
-  }
+  },
+  gpu: false
 }
 
 const LAYER_DISPLAY_CONFIG = {
@@ -78,7 +79,7 @@ export const MnistCnn = Vue.extend({
       Loading...{{ loadingProgress }}%
     </div>
     <div class="columns input-output">
-      <div class="column">
+      <div class="column input-column">
         <div class="input-container">
           <div class="input-label">Draw any digit (0-9) here <span class="arrow">⤸</span></div>
           <div class="canvas-container">
@@ -100,7 +101,10 @@ export const MnistCnn = Vue.extend({
           </div>
         </div>
       </div>
-      <div class="column">
+      <div class="column is-2 controls-column">
+        <mdl-switch :checked.sync="useGpu" @click="toggleGpu">Use GPU</mdl-switch>
+      </div>
+      <div class="column output-column">
         <div class="output">
           <div class="output-class"
             v-bind:class="{ 'predicted': i === predictedClass }"
@@ -152,7 +156,8 @@ export const MnistCnn = Vue.extend({
       layerResultImages: [],
       layerDisplayConfig: LAYER_DISPLAY_CONFIG,
       drawing: false,
-      strokes: []
+      strokes: [],
+      useGpu: MODEL_CONFIG.gpu
     }
   },
 
@@ -321,6 +326,10 @@ export const MnistCnn = Vue.extend({
           ctxScaled.restore()
         })
       })
+    },
+
+    toggleGpu: function () {
+      this.model.gpu = !this.useGpu
     }
   }
 })