mirror of
https://github.com/wassname/keras-js.git
synced 2026-09-10 12:15:12 +08:00
update convolutional VAE demo
This commit is contained in:
Leon Chen
+1
-1
@@ -15,7 +15,7 @@
|
||||
<div id="github-corner-link"><a href="https://github.com/transcranial/keras-js"><svg height="36" width="36" class="github-logo" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div>
|
||||
<div id="app">
|
||||
<div class="columns">
|
||||
<div class="column is-3" style="min-width: 300px; max-width: 450px;">
|
||||
<div class="column is-3" style="min-width: 350px; max-width: 450px;">
|
||||
<menu></menu>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
|
||||
+25
-20
@@ -102,7 +102,7 @@ export const MnistVae = Vue.extend({
|
||||
<div class="column output-column">
|
||||
<div class="output">
|
||||
<canvas id="output-canvas-scaled" width="150" height="150"></canvas>
|
||||
<canvas id="output-canvas" width="27" height="27"></canvas>
|
||||
<canvas id="output-canvas" width="27" height="27" style="display:none;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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 () {
|
||||
|
||||
@@ -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)
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@
|
||||
<div id="github-corner-link"><a href="https://github.com/transcranial/keras-js"><svg height="36" width="36" class="github-logo" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div>
|
||||
<div id="app">
|
||||
<div class="columns">
|
||||
<div class="column is-3" style="min-width: 300px; max-width: 450px;">
|
||||
<div class="column is-3" style="min-width: 350px; max-width: 450px;">
|
||||
<menu></menu>
|
||||
</div>
|
||||
<div class="column is-9">
|
||||
|
||||
Reference in New Issue
Block a user