diff --git a/demos/src/mnist-vae.template.html b/demos/src/mnist-vae.template.html
index 0341f21..1f5ea17 100644
--- a/demos/src/mnist-vae.template.html
+++ b/demos/src/mnist-vae.template.html
@@ -37,7 +37,7 @@
:checked.sync="useGpu"
:disabled="modelLoading || !hasWebgl"
@click="toggleGpu"
- >Use GPU
+ >use GPU
x: {{ inputCoordinates[0] < 0 ? inputCoordinates[0].toFixed(2) : inputCoordinates[0].toFixed(3) }}
y: {{ inputCoordinates[1] < 0 ? inputCoordinates[1].toFixed(2) : inputCoordinates[1].toFixed(3) }}
diff --git a/demos/src/resnet50.css b/demos/src/resnet50.css
index bccb629..449cccc 100644
--- a/demos/src/resnet50.css
+++ b/demos/src/resnet50.css
@@ -1,167 +1,200 @@
@import './_variables.css';
.demo.resnet50 {
- .input-container {
- margin: 20px;
+ .top-container {
+ margin: 10px;
position: relative;
- user-select: none;
+ display: flex;
- .input-label {
- font-family: $font-3;
- font-size: 16px;
- color: $color-2;
- text-align: left;
- }
-
- .image-url {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- position: relative;
-
- span {
- margin: 0 10px;
+ .input-container {
+ .input-label {
font-family: $font-3;
font-size: 16px;
color: $color-2;
- }
- }
- }
-
- .column {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .column.input-column {
- justify-content: flex-end;
-
- .loading-indicator {
- display: flex;
- flex-direction: column;
- align-self: flex-start;
-
- .mdl-spinner {
- margin: 20px;
- align-self: center;
+ text-align: left;
+ user-select: none;
+ cursor: default;
}
- .error {
- color: $color-err;
- font-size: 14px;
- font-family: $font-1;
- margin: 20px;
- }
- }
-
- .canvas-container {
- display: inline-flex;
- justify-content: flex-end;
-
- canvas {
- background: white;
- }
- }
- }
-
- .column.controls-column {
- align-items: flex-start;
- justify-content: flex-start;
- padding-top: 20px;
- }
-
- .column.output-column {
- justify-content: flex-start;
-
- .output {
- height: 160px;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
-
- .output-class {
+ .image-url {
display: flex;
flex-direction: row;
align-items: center;
- justify-content: center;
- padding: 6px 0;
+ justify-content: flex-start;
+ position: relative;
- .output-label {
- text-align: right;
- width: 200px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- font-family: $font-2;
- font-size: 18px;
- color: $color-2;
- padding: 0 6px;
- border-right: 2px solid $color-1-lighter;
- }
-
- .output-bar {
- height: 8px;
- transition: width 0.2s ease-out;
- }
-
- .output-value {
- text-align: left;
- margin-left: 5px;
- font-family: $font-2;
- font-size: 14px;
+ span {
+ margin: 0 10px;
+ font-family: $font-3;
+ font-size: 16px;
color: $color-2;
}
}
+ }
- .output-class.predicted {
- .output-label {
- color: $color-1;
- border-left-color: $color-1;
+ .controls {
+ width: 250px;
+ margin-left: 40px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ & > .mdl-switch {
+ margin-bottom: 5px;
+
+ .mdl-switch__label {
+ font-size: 12px !important;
+ }
+ }
+ }
+ }
+
+ .columns.input-output {
+ max-width: 800px;
+ margin: 0 auto;
+
+ .column {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .column.input-column {
+ position: relative;
+
+ .loading-indicator {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: flex-start;
+
+ .mdl-spinner {
+ margin: 20px;
+ align-self: center;
}
- .output-value {
- color: $color-1;
+ .error {
+ color: $color-err;
+ font-size: 14px;
+ font-family: $font-1;
+ margin: 20px;
+ }
+ }
+
+ .canvas-container {
+ display: inline-flex;
+ justify-content: flex-end;
+
+ canvas {
+ background: white;
+ }
+ }
+ }
+
+ .column.output-column {
+ .output {
+ width: 370px;
+ height: 160px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+
+ .output-class {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 6px 0;
+
+ .output-label {
+ text-align: right;
+ width: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-family: $font-2;
+ font-size: 18px;
+ color: $color-2;
+ padding: 0 6px;
+ border-right: 2px solid $color-1-lighter;
+ }
+
+ .output-bar {
+ height: 8px;
+ transition: width 0.2s ease-out;
+ }
+
+ .output-value {
+ text-align: left;
+ margin-left: 5px;
+ font-family: $font-2;
+ font-size: 14px;
+ color: $color-2;
+ }
+ }
+
+ .output-class.predicted {
+ .output-label {
+ color: $color-1;
+ border-left-color: $color-1;
+ }
+
+ .output-value {
+ color: $color-1;
+ }
}
}
}
}
.architecture-container {
- max-width: 800px;
+ width: 800px;
margin: 0 auto;
position: relative;
.layers-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
margin-bottom: 5px;
position: relative;
z-index: 1;
- .layer {
- display: inline-block;
- background: white;
- border: 2px solid white;
- border-radius: 5px;
- padding: 2px 10px 0px;
+ .layer-column {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
- .layer-class-name {
- color: $color-1;
- font-size: 14px;
- font-weight: bold;
+ .layer {
+ display: inline-block;
+ background: white;
+ border: 2px solid white;
+ border-radius: 5px;
+ padding: 2px 10px 0px;
+
+ .layer-class-name {
+ color: $color-1;
+ font-size: 14px;
+ font-weight: bold;
+ }
+
+ .layer-details {
+ color: #999999;
+ font-size: 12px;
+ font-weight: bold;
+ }
}
- .layer-details {
- color: #999999;
- font-size: 12px;
- font-weight: bold;
+ .layer.has-result {
+ border-color: $color-1;
}
}
-
- .layer.has-result {
- border-color: $color-1;
- }
}
.architecture-connections {
diff --git a/demos/src/resnet50.js b/demos/src/resnet50.js
index 3188e7c..06f29da 100644
--- a/demos/src/resnet50.js
+++ b/demos/src/resnet50.js
@@ -34,7 +34,7 @@ export const ResNet50 = Vue.extend({
data: function () {
return {
- model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
+ model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl, layerCallPauses: true }, MODEL_CONFIG)),
modelLoading: true,
modelRunning: false,
imageURLInput: null,
@@ -46,7 +46,8 @@ export const ResNet50 = Vue.extend({
architectureDiagram: ARCHITECTURE_DIAGRAM,
architectureConnections: ARCHITECTURE_CONNECTIONS,
architectureDiagramPaths: [],
- useGpu: this.hasWebgl
+ useGpu: this.hasWebgl,
+ showComputationFlow: true
}
},
@@ -73,7 +74,7 @@ export const ResNet50 = Vue.extend({
if (!this.output) {
let empty = []
for (let i = 0; i < 5; i++) {
- empty.push({ name: '.', probability: 0 })
+ empty.push({ name: '-', probability: 0 })
}
return empty
}
@@ -122,6 +123,10 @@ export const ResNet50 = Vue.extend({
this.model.toggleGpu(!this.useGpu)
},
+ toggleComputationFlow: function () {
+ this.model.layerCallPauses = !this.showComputationFlow
+ },
+
imageURLInputChanged: function (e) {
this.imageURLSelect = null
this.loadImageToCanvas(this.imageURLInput)
diff --git a/demos/src/resnet50.template.html b/demos/src/resnet50.template.html
index 747f793..2ac56df 100644
--- a/demos/src/resnet50.template.html
+++ b/demos/src/resnet50.template.html
@@ -6,24 +6,38 @@
Loading...{{ loadingProgress }}%
-