wassname/keras-js
1
0
Fork 0
mirror of https://github.com/wassname/keras-js.git synced 2026-09-10 12:15:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

start mnist VAE demo

Browse Source
This commit is contained in:
Leon Chen
2016-10-05 02:09:29 -04:00
parent b00a2cb091
commit 0d764bd7f8
7 changed files with 331 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/src/index.css
+16
View File
@@ -60,3 +60,19 @@ body {
background: rgba(255, 255, 255, 0.5);
border-radius: 10px;
}
/****************************************************************/
/* MDL overrides */
.demo .mdl-switch__label {
font-size: 14px !important;
color: #69707a;
}
.demo .mdl-switch.is-checked .mdl-switch__thumb {
background: rgba(27, 188, 155, 0.6);
}
.demo .mdl-switch.is-checked .mdl-switch__track {
background: rgba(27, 188, 155, 0.3);
}
demos/src/index.js
+6 -1
View File
@@ -5,10 +5,12 @@ import './index.css'
import { Menu } from './menu'
import { Home } from './home'
import { MnistCnn } from './mnist-cnn'
import { MnistVae } from './mnist-vae'
Vue.component('menu', Menu)
Vue.component('home', Home)
Vue.component('mnist-cnn', MnistCnn)
Vue.component('mnist-vae', MnistVae)
Vue.use(VueMdl.default)
@@ -22,7 +24,10 @@ const app = new Vue({
// Simple routing
function matchRoute () {
const routes = ['mnist-cnn']
const routes = [
'mnist-cnn',
'mnist-vae'
]
const { hash } = window.location
const route = hash.substr(2)
demos/src/menu.js
+1
View File
@@ -12,6 +12,7 @@ export const Menu = Vue.extend({
<ul class="menu-list">
<li><a href="#/">Home</a></li>
<li><a href="#/mnist-cnn">Basic Convnet - MNIST</a></li>
<li><a href="#/mnist-vae">Convolutional VAE - MNIST</a></li>
</ul>
<p class="menu-label">
Links
demos/src/mnist-cnn.css
-17
View File
@@ -1,20 +1,3 @@
/* 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;
demos/src/mnist-cnn.js
+1 -1
View File
@@ -84,7 +84,7 @@ const LAYER_DISPLAY_CONFIG = {
export const MnistCnn = Vue.extend({
template: `
<div class="demo mnist-cnn">
<div class="title">Basic Convnet - MNIST</div>
<div class="title">Basic Convnet for MNIST</div>
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
demos/src/mnist-vae.css
+58
View File
@@ -0,0 +1,58 @@
.demo.mnist-vae .column {
display: flex;
align-items: center;
justify-content: center;
}
.demo.mnist-vae .column.input-column {
justify-content: flex-end;
}
.demo.mnist-vae .column.controls-column {
align-items: flex-start;
justify-content: flex-start;
padding-top: 80px;
}
.demo.mnist-vae .column.output-column {
justify-content: center;
}
.demo.mnist-vae .input-container {
display: inline-flex;
flex-direction: column;
margin: 20px;
position: relative;
}
.demo.mnist-vae .input-label {
font-family: 'Nothing You Could Do', cursive;
font-size: 18px;
color: #69707a;
text-align: right;
}
.demo.mnist-vae .input-label span.arrow {
font-size: 36px;
color: #CCCCCC;
position: absolute;
right: -32px;
top: 8px;
}
.demo.mnist-vae .canvas-container {
display: inline-flex;
justify-content: flex-end;
margin: 10px 0;
}
.demo.mnist-vae .canvas-container canvas {
background: white;
border: 15px solid rgba(27, 188, 155, 0.3);
transition: border-color 0.2s ease-in;
}
.demo.mnist-vae .canvas-container canvas:hover {
border-color: rgba(27, 188, 155, 0.6);
cursor: crosshair;
}
demos/src/mnist-vae.js
+249
View File
@@ -0,0 +1,249 @@
/* global Vue */
import './mnist-vae.css'
import debounce from 'lodash/debounce'
import * as utils from './utils'
const MODEL_CONFIG = {
filepaths: {
model: '/demos/data/mnist_vae/mnist_vae.json',
weights: '/demos/data/mnist_vae/mnist_vae_weights.buf',
metadata: '/demos/data/mnist_vae/mnist_vae_metadata.json'
},
gpu: false
}
if (process.env.NODE_ENV === 'production') {
Object.assign(MODEL_CONFIG, {
filepaths: {
model: 'demos/data/mnist_vae/mnist_vae.json',
weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_vae/mnist_vae_weights.buf',
metadata: 'demos/data/mnist_vae/mnist_vae_metadata.json'
}
})
}
const LAYER_DISPLAY_CONFIG = {
'dense_10': {
heading: 'ReLU activation, output dimensions = 128',
scalingFactor: 2
},
'dense_11': {
heading: 'ReLU activation, output dimensions = 25088 (64 x 14 x 14)',
scalingFactor: 2
},
'deconvolution2d_10': {
heading: '64 3x3 filters, border mode same, 1x1 strides, ReLU activation',
scalingFactor: 2
},
'deconvolution2d_11': {
heading: '64 3x3 filters, border mode same, 1x1 strides, ReLU activation',
scalingFactor: 2
},
'deconvolution2d_12': {
heading: '64 2x2 filters, border mode valid, 2x2 strides, ReLU activation',
scalingFactor: 2
},
'convolution2d_8': {
heading: '1 2x2 filters, border mode valid, 1x1 strides, sigmoid activation',
scalingFactor: 2
}
}
/**
*
* VUE COMPONENT
*
*/
export const MnistVae = Vue.extend({
template: `
<div class="demo mnist-vae">
<div class="title">Convolutional Variational Autoencoder, trained on MNIST</div>
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="columns input-output">
<div class="column input-column">
<div class="input-container">
<div class="input-label">Move around the latent space <span class="arrow">⤸</span></div>
<div class="canvas-container">
<canvas
id="input-canvas" width="200" height="200"
@mouseenter="activateCrosshairs"
@mouseleave="deactivateCrosshairs"
@mousemove="drawCrosshairs"
@click="selectCoordinate"
@touchend="selectCoordinate"
></canvas>
</div>
</div>
</div>
<div class="column controls-column">
<mdl-switch :checked.sync="useGpu" @click="toggleGpu">Use GPU</mdl-switch>
</div>
</div>
<div class="layer-results-container">
<div class="bg-line"></div>
<div
v-for="layerResult in layerResultImages"
class="layer-result"
>
<div class="layer-result-heading">
<span class="layer-class">{{ layerResult.layerClass }}</span>
<span> {{ layerDisplayConfig[layerResult.name].heading }}</span>
</div>
<div class="layer-result-canvas-container">
<canvas v-for="image in layerResult.images"
id="intermediate-result-{{ $parent.$index }}-{{ $index }}"
width="{{ image.width }}"
height="{{ image.height }}"
style="display:none;"
></canvas>
<canvas v-for="image in layerResult.images"
id="intermediate-result-{{ $parent.$index }}-{{ $index }}-scaled"
width="{{ layerDisplayConfig[layerResult.name].scalingFactor * image.width }}"
height="{{ layerDisplayConfig[layerResult.name].scalingFactor * image.height }}"
></canvas>
</div>
</div>
</div>
</div>
`,
data: function () {
return {
model: new KerasJS.Model(MODEL_CONFIG),
modelLoading: true,
input: new Float32Array(2),
output: new Float32Array(27 * 27),
crosshairsActivated: false,
coordinates: [0, 0],
layerResultImages: [],
layerDisplayConfig: LAYER_DISPLAY_CONFIG,
useGpu: MODEL_CONFIG.gpu
}
},
computed: {
loadingProgress: function () {
return this.model.getLoadingProgress()
}
},
created: function () {
// initialize KerasJS model
this.model.initialize()
this.model.ready().then(() => {
this.modelLoading = false
this.getIntermediateResults()
})
},
methods: {
activateCrosshairs: function (e) {
this.crosshairsActivated = true
},
deactivateCrosshairs: function (e) {
this.crosshairsActivated = false
},
drawCrosshairs: function (e) {
if (!this.crosshairsActivated) return
const [x, y] = this.getEventCanvasCoordinates(e)
const ctx = document.getElementById('input-canvas').getContext('2d')
ctx.clearRect(0, 0, 200, 200)
ctx.strokeStyle = '#1BBC9B'
ctx.beginPath()
ctx.moveTo(x, 0)
ctx.lineTo(x, 200)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(0, y)
ctx.lineTo(200, y)
ctx.stroke()
},
getEventCanvasCoordinates: function (e) {
const borderSize = 15
let { clientX, clientY } = e
// for touch event
if (e.touches && e.touches.length) {
clientX = e.touches[0].clientX
clientY = e.touches[0].clientY
}
const canvas = document.getElementById('input-canvas')
const { left, top } = canvas.getBoundingClientRect()
const [x, y] = [clientX - left - borderSize, clientY - top - borderSize]
return [x, y]
},
selectCoordinate: function (e) {
},
getIntermediateResults: function () {
let results = []
for (let [name, layer] of this.model.modelLayersMap.entries()) {
if (name === 'input') continue
const layerClass = layer.layerClass || ''
let images = []
if (layer.result && layer.result.tensor.shape.length === 3) {
images = utils.unroll3Dtensor(layer.result.tensor)
} else if (layer.result && layer.result.tensor.shape.length === 2) {
images = [utils.image2Dtensor(layer.result.tensor)]
} else if (layer.result && layer.result.tensor.shape.length === 1) {
images = [utils.image1Dtensor(layer.result.tensor)]
}
results.push({
name,
layerClass,
images
})
}
this.layerResultImages = results
setTimeout(() => {
this.showIntermediateResults()
}, 0)
},
showIntermediateResults: function () {
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')
ctx.putImageData(image, 0, 0)
let 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)
ctxScaled.drawImage(document.getElementById(`intermediate-result-${layerNum}-${imageNum}`), 0, 0)
ctxScaled.restore()
})
})
},
clearIntermediateResults: function () {
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')
ctxScaled.save()
ctxScaled.scale(scalingFactor, scalingFactor)
ctxScaled.clearRect(0, 0, ctxScaled.canvas.width, ctxScaled.canvas.height)
ctxScaled.restore()
})
})
},
toggleGpu: function () {
this.model.gpu = !this.useGpu
}
}
})