update ResNet50 demo

demos/src/resnet50.css

@@ -143,8 +143,9 @@
       .layer {
         display: inline-block;
         background: white;
+        border: 2px solid white;
         border-radius: 5px;
-        padding: 4px 12px 2px;
+        padding: 2px 10px 0px;
 
         .layer-class-name {
           color: $color-1;
@@ -158,6 +159,10 @@
           font-weight: bold;
         }
       }
+
+      .layer.has-result {
+        border-color: $color-1;
+      }
     }
 
     .architecture-connections {

demos/src/resnet50.js

@@ -73,6 +73,7 @@ export const ResNet50 = Vue.extend({
       return rows
     },
     layersWithResults: function () {
+      // store as computed property for reactivity
       return this.model.layersWithResults
     },
     outputClasses: function () {

demos/src/resnet50.template.html

@@ -7,7 +7,6 @@
     Loading...{{ loadingProgress }}%
   </div>
   <div class="input-container" v-if="!modelLoading">
-    {{ layersWithResults }}
     <div class="input-label">Enter a valid image URL or select an image from the dropdown:</div>
     <div class="image-url">
       <mdl-textfield
@@ -68,6 +67,7 @@
         <div
           v-if="layer.className"
           class="layer"
+          :class="{ 'has-result': layersWithResults.includes(layer.name) }"
           :id="layer.name"
         >
           <div class="layer-class-name">{{ layer.className }}</div>