+
diff --git a/demos/src/_variables.css b/demos/src/_variables.css
index 29f3208..4360544 100644
--- a/demos/src/_variables.css
+++ b/demos/src/_variables.css
@@ -1,7 +1,6 @@
$color-1: #1BBC9B;
$color-2: #69707a;
$color-3: #393E46;
-$color-4: #E87E04;
$font-1: 'Fira Sans', sans-serif;
$font-2: 'Inconsolata', sans-serif;
diff --git a/demos/src/mnist-cnn.js b/demos/src/mnist-cnn.js
index f314fc5..d56f396 100644
--- a/demos/src/mnist-cnn.js
+++ b/demos/src/mnist-cnn.js
@@ -317,9 +317,9 @@ export const MnistCnn = Vue.extend({
this.layerResultImages.forEach((result, layerNum) => {
const scalingFactor = this.layerDisplayConfig[result.name].scalingFactor
result.images.forEach((image, imageNum) => {
- let ctx = document.getElementById(`intermediate-result-${layerNum}-${imageNum}`).getContext('2d')
+ const ctx = document.getElementById(`intermediate-result-${layerNum}-${imageNum}`).getContext('2d')
ctx.putImageData(image, 0, 0)
- let ctxScaled = document.getElementById(`intermediate-result-${layerNum}-${imageNum}-scaled`).getContext('2d')
+ const ctxScaled = document.getElementById(`intermediate-result-${layerNum}-${imageNum}-scaled`).getContext('2d')
ctxScaled.save()
ctxScaled.scale(scalingFactor, scalingFactor)
ctxScaled.clearRect(0, 0, ctxScaled.canvas.width, ctxScaled.canvas.height)
@@ -333,7 +333,7 @@ export const MnistCnn = Vue.extend({
this.layerResultImages.forEach((result, layerNum) => {
const scalingFactor = this.layerDisplayConfig[result.name].scalingFactor
result.images.forEach((image, imageNum) => {
- let ctxScaled = document.getElementById(`intermediate-result-${layerNum}-${imageNum}-scaled`).getContext('2d')
+ const ctxScaled = document.getElementById(`intermediate-result-${layerNum}-${imageNum}-scaled`).getContext('2d')
ctxScaled.save()
ctxScaled.scale(scalingFactor, scalingFactor)
ctxScaled.clearRect(0, 0, ctxScaled.canvas.width, ctxScaled.canvas.height)
diff --git a/demos/src/mnist-vae.js b/demos/src/mnist-vae.js
index 4843b85..836eccc 100644
--- a/demos/src/mnist-vae.js
+++ b/demos/src/mnist-vae.js
@@ -102,7 +102,7 @@ export const MnistVae = Vue.extend({
@@ -140,8 +140,8 @@ export const MnistVae = Vue.extend({
modelLoading: true,
output: new Float32Array(27 * 27),
crosshairsActivated: false,
- inputCoordinates: [0, 0],
- position: [100, 100],
+ inputCoordinates: [-0.6, -1.2],
+ position: [60, 20],
layerResultImages: [],
layerDisplayConfig: LAYER_DISPLAY_CONFIG,
useGpu: MODEL_CONFIG.gpu
@@ -160,6 +160,7 @@ export const MnistVae = Vue.extend({
this.model.ready().then(() => {
this.modelLoading = false
this.getIntermediateResults()
+ this.runModel()
})
},
@@ -205,7 +206,7 @@ export const MnistVae = Vue.extend({
drawPosition: function () {
const ctx = document.getElementById('input-canvas').getContext('2d')
ctx.clearRect(0, 0, 200, 200)
- ctx.fillStyle = '#E87E04'
+ ctx.fillStyle = '#674172'
ctx.beginPath()
ctx.arc(...this.position, 5, 0, Math.PI * 2, true)
ctx.closePath()
@@ -232,28 +233,32 @@ export const MnistVae = Vue.extend({
this.position = [x, y]
this.inputCoordinates = [x * 3 / 200 - 1.5, y * 3 / 200 - 1.5]
this.draw(e)
- const inputData = {
- 'input_4': new Float32Array(this.inputCoordinates)
- }
- const outputData = this.model.predict(inputData)
- this.output = outputData['convolution2d_8']
- this.drawOutput()
- this.getIntermediateResults()
+ this.runModel()
}
},
+ runModel: function () {
+ const inputData = {
+ 'input_4': new Float32Array(this.inputCoordinates)
+ }
+ const outputData = this.model.predict(inputData)
+ this.output = outputData['convolution2d_8']
+ this.drawOutput()
+ this.getIntermediateResults()
+ },
+
drawOutput: function () {
const ctx = document.getElementById('output-canvas').getContext('2d')
- ctx.putImageData(utils.image2Darray(this.output, 27, 27), 0, 0)
+ const image = utils.image2Darray(this.output, 27, 27, [27, 188, 155])
+ ctx.putImageData(image, 0, 0)
- // scaled up
- // const ctxScaled = document.getElementById('output-canvas-scaled').getContext('2d')
- // ctxScaled.save()
- // ctxScaled.scale(28 / ctxCenterCrop.canvas.width, 28 / ctxCenterCrop.canvas.height)
- // ctxScaled.clearRect(0, 0, ctxCenterCrop.canvas.width, ctxCenterCrop.canvas.height)
- // ctxScaled.drawImage(document.getElementById('output-canvas-centercrop'), 0, 0)
- // const imageDataScaled = ctxScaled.getImageData(0, 0, ctxScaled.canvas.width, ctxScaled.canvas.height)
- // ctxScaled.restore()
+ // scale up
+ const ctxScaled = document.getElementById('output-canvas-scaled').getContext('2d')
+ ctxScaled.save()
+ ctxScaled.scale(150 / 27, 150 / 27)
+ ctxScaled.clearRect(0, 0, ctxScaled.canvas.width, ctxScaled.canvas.height)
+ ctxScaled.drawImage(document.getElementById('output-canvas'), 0, 0)
+ ctxScaled.restore()
},
getIntermediateResults: function () {
diff --git a/demos/src/utils/index.js b/demos/src/utils/index.js
index d297ef7..b48d314 100644
--- a/demos/src/utils/index.js
+++ b/demos/src/utils/index.js
@@ -138,10 +138,13 @@ export function image2Dtensor (tensor) {
* Takes in a TypedArray with size = width * height
* and creates image data
*/
-export function image2Darray (arr, width, height) {
+export function image2Darray (arr, width, height, rgb = [0, 0, 0]) {
const size = width * height * 4
let imageData = new Uint8ClampedArray(size)
for (let i = 0; i < size; i += 4) {
+ imageData[i] = rgb[0]
+ imageData[i + 1] = rgb[1]
+ imageData[i + 2] = rgb[2]
imageData[i + 3] = 255 * arr[i / 4]
}
return new ImageData(imageData, width, height)
diff --git a/index.html b/index.html
index 8752a27..1f34ef8 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@