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

update demos

Browse Source
This commit is contained in:
Leon Chen
2016-10-06 17:12:11 -04:00
parent 6a5cd57f7d
commit 7e181b8ed5
20 changed files with 4377 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
-4
View File
@@ -1,7 +1,3 @@
# bundles
dist/keras.js
demos/dist/bundle.js
# Node.js
node_modules/
npm-debug.log
demos/dist/bundle.js
Vendored
+480
View File
File diff suppressed because one or more lines are too long
demos/dist/bundle.min.js
Vendored
-3
View File
File diff suppressed because one or more lines are too long
demos/index.html
-35
View File
@@ -1,35 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Keras.js Demos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.grey-amber.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<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: 350px; max-width: 450px;">
<menu :current-view="currentView"></menu>
</div>
<div class="column is-9">
<component :is="currentView"></component>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.2.1/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
<script src="https://cdn.rawgit.com/posva/vue-mdl/v0.9.4/dist/vue-mdl.min.js"></script>
<script src="https://cdn.rawgit.com/blueimp/JavaScript-Load-Image/v2.6.2/js/load-image.all.min.js"></script>
<script src="/lib/weblas.js"></script>
<script src="/dist/keras.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
demos/src/mnist-cnn.js
+4 -2
View File
@@ -110,12 +110,14 @@ export const MnistCnn = Vue.extend({
}
},
created: function () {
ready: function () {
// initialize KerasJS model
this.model.initialize()
this.model.ready().then(() => {
this.modelLoading = false
this.getIntermediateResults()
this.$nextTick(function () {
this.getIntermediateResults()
})
})
},
demos/src/mnist-cnn.template.html
+2 -2
View File
@@ -6,7 +6,7 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="columns input-output">
<div class="columns input-output" v-if="!modelLoading">
<div class="column input-column">
<div class="input-container">
<div class="input-label">Draw any digit (0-9) here <span class="arrow">⤸</span></div>
@@ -46,7 +46,7 @@
</div>
</div>
</div>
<div class="layer-results-container">
<div class="layer-results-container" v-if="!modelLoading">
<div class="bg-line"></div>
<div
v-for="layerResult in layerResultImages"
demos/src/mnist-vae.js
+6 -7
View File
@@ -81,20 +81,19 @@ export const MnistVae = Vue.extend({
}
},
created: function () {
ready: function () {
// initialize KerasJS model
this.model.initialize()
this.model.ready().then(() => {
this.modelLoading = false
this.getIntermediateResults()
this.runModel()
this.$nextTick(function () {
this.drawPosition()
this.getIntermediateResults()
this.runModel()
})
})
},
ready: function () {
this.drawPosition()
},
methods: {
toggleGpu: function () {
demos/src/mnist-vae.template.html
+2 -2
View File
@@ -6,7 +6,7 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="columns input-output">
<div class="columns input-output" v-if="!modelLoading">
<div class="column input-column">
<div class="input-container">
<div class="input-label">Click around the latent space <span class="arrow">⤸</span></div>
@@ -46,7 +46,7 @@
</div>
</div>
</div>
<div class="layer-results-container">
<div class="layer-results-container" v-if="!modelLoading">
<div class="bg-line"></div>
<div
v-for="layerResult in layerResultImages"
demos/src/resnet50.css
+1
View File
@@ -17,6 +17,7 @@
flex-direction: row;
align-items: center;
justify-content: flex-start;
position: relative;
span {
margin: 0 10px;
demos/src/resnet50.js
+7 -3
View File
@@ -58,12 +58,14 @@ export const ResNet50 = Vue.extend({
}
},
created: function () {
ready: function () {
// initialize KerasJS model
this.model.initialize()
this.model.ready().then(() => {
this.modelLoading = false
//this.getIntermediateResults()
this.$nextTick(function () {
//this.getIntermediateResults()
})
})
},
@@ -98,7 +100,9 @@ export const ResNet50 = Vue.extend({
this.imageLoadingError = false
this.imageLoading = false
// model predict
this.runModel()
this.$nextTick(function () {
this.runModel()
})
}
},
{
demos/src/resnet50.template.html
+14 -6
View File
@@ -6,19 +6,27 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="input-container">
<div class="input-container" v-if="!modelLoading">
<div class="input-label">Enter an image URL or select from dropdown</div>
<div class="image-url">
<mdl-textfield floating-label="enter image url" :value.sync="imageURLInput" spellcheck="false"
<mdl-textfield
floating-label="enter image url"
:value.sync="imageURLInput"
spellcheck="false"
@change="imageURLInputChanged"
></mdl-textfield>
<span>or</span>
<mdl-select label="select image" id="image-url-select" :value.sync="imageURLSelect" :options="imageURLSelectList" style="width:200px;"
<mdl-select
label="select image"
id="image-url-select"
:value.sync="imageURLSelect"
:options="imageURLSelectList"
style="width:200px;"
@change="imageURLSelectChanged"
></mdl-select>
</div>
</div>
<div class="columns input-output">
<div class="columns input-output" v-if="!modelLoading">
<div class="column input-column">
<div class="loading-indicator">
<mdl-spinner v-if="imageLoading"></mdl-spinner>
@@ -29,14 +37,14 @@
</div>
</div>
<div class="column is-2 controls-column">
<mdl-switch :checked.sync="useGpu" @click="toggleGpu">Use GPU</mdl-switch>
<mdl-switch :checked.sync="useGpu" :disabled="modelLoading" @click="toggleGpu">Use GPU</mdl-switch>
</div>
<div class="column output-column">
<div class="output">
</div>
</div>
</div>
<!--<div class="layer-results-container">
<!--<div class="layer-results-container" v-if="!modelLoading">
<div
v-for="layerResult in layerResultImages"
class="layer-result"
demos/webpack.prod.config.js
+1 -1
View File
@@ -9,7 +9,7 @@ module.exports = {
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.min.js'
filename: 'bundle.js'
},
module: {
loaders: [
dist/keras.js
Vendored
+3819
View File
File diff suppressed because one or more lines are too long
dist/keras.min.js
Vendored
-17
View File
File diff suppressed because one or more lines are too long
index.html
+2 -2
View File
@@ -29,7 +29,7 @@
<script src="https://cdn.rawgit.com/posva/vue-mdl/v0.9.4/dist/vue-mdl.min.js"></script>
<script src="https://cdn.rawgit.com/blueimp/JavaScript-Load-Image/v2.6.2/js/load-image.all.min.js"></script>
<script src="lib/weblas.js"></script>
<script src="dist/keras.min.js"></script>
<script src="demos/dist/bundle.min.js"></script>
<script src="dist/keras.js"></script>
<script src="demos/dist/bundle.js"></script>
</body>
</html>
package.json
+1 -1
View File
@@ -8,7 +8,7 @@
"build": "npm run lint && webpack --config webpack.prod.config.js",
"watch:demos": "cd demos && webpack --watch --config webpack.dev.config.js",
"build:demos": "cd demos && webpack --config webpack.prod.config.js",
"server": "http-server . -p 3000"
"server": "http-server . -c-1 -p 3000"
},
"repository": {
"type": "git",
src/Model.js
+15 -4
View File
@@ -83,8 +83,10 @@ export default class Model {
// input tensors
this.inputTensors = {}
// Promise for when Model class is initialized
this._ready = this.initialize()
// flag while computations are being performed
this.isRunning = false
}
@@ -294,9 +296,13 @@ export default class Model {
const { layerClass, inbound, outbound } = this.modelDAG[node]
if (layerClass !== 'InputLayer') {
let currentLayer = this.modelLayersMap.get(node)
if (currentLayer.visited) {
return false
}
const inboundLayers = inbound.map(n => this.modelLayersMap.get(n))
while (!every(inboundLayers.map(layer => layer.hasResult))) {
yield
if (!every(inboundLayers.map(layer => layer.hasResult))) {
return false
}
if (layerClass === 'Merge') {
@@ -311,10 +317,13 @@ export default class Model {
currentLayer.result = currentLayer.call(new Tensor(prevLayerResult.tensor.data, prevLayerResult.tensor.shape, { gpu: this.gpu }))
}
currentLayer.hasResult = true
currentLayer.visited = true
}
yield * this.traverseDAG(outbound)
} else {
yield * nodes.map(node => this.traverseDAG([node]))
for (let node of nodes) {
yield * this.traverseDAG([node])
}
}
}
@@ -334,9 +343,10 @@ export default class Model {
throw new Error('predict() must take an object where the values are the flattened data as Float32Array.')
}
// reset hasResult flag in all layers
// reset hasResult and visited flags in all layers
for (let layer of this.modelLayersMap.values()) {
layer.hasResult = false
layer.visited = false
}
// load data to input tensors
@@ -345,6 +355,7 @@ export default class Model {
this.inputTensors[inputName] = new Tensor(inputData[inputName], inputLayer.shape, { gpu: this.gpu })
inputLayer.result = inputLayer.call(this.inputTensors[inputName])
inputLayer.hasResult = true
inputLayer.visited = true
})
// start traversing DAG at input
src/layers/convolutional/Convolution2D.js
+21
View File
@@ -197,12 +197,25 @@ export default class Convolution2D extends Layer {
x.tensor = x.tensor.transpose(1, 2, 0)
}
let startTime = performance.now()
this._calcOutputShape(x)
let endTime = performance.now()
console.log('_calcOutputShape', endTime - startTime)
startTime = performance.now()
this._padInput(x)
endTime = performance.now()
console.log('_padInput', endTime - startTime)
startTime = performance.now()
const imColsMat = this._im2col(x)
endTime = performance.now()
console.log('imColsMat', endTime - startTime)
startTime = performance.now()
const wRowsMat = this._w2row(x)
endTime = performance.now()
console.log('wRowsMat', endTime - startTime)
startTime = performance.now()
const nbFilter = this.kernelShape[0]
const outputRows = this.outputShape[0]
const outputCols = this.outputShape[1]
@@ -213,7 +226,10 @@ export default class Convolution2D extends Layer {
ops.assigns(matMul.tensor.pick(null, n), this.weights.b.tensor.get(n))
}
}
endTime = performance.now()
console.log('createMatMul', endTime - startTime)
startTime = performance.now()
if (x._useWeblas) {
const bias = this.bias
? this.weights.b.tensor.data
@@ -226,7 +242,10 @@ export default class Convolution2D extends Layer {
} else {
gemm(matMul.tensor, imColsMat.tensor, wRowsMat.tensor, 1, 1)
}
endTime = performance.now()
console.log('gemm', endTime - startTime)
startTime = performance.now()
let output = new Tensor([], this.outputShape)
let outputChannel = new Tensor([], [outputRows, outputCols])
for (let n = 0; n < nbFilter; n++) {
@@ -236,6 +255,8 @@ export default class Convolution2D extends Layer {
outputChannel.replaceTensorData(outputChannelData)
ops.assign(output.tensor.pick(null, null, n), outputChannel.tensor)
}
endTime = performance.now()
console.log('createOutput', endTime - startTime)
x.tensor = output.tensor
this.activation(x)
webpack.dev.config.js
+1 -1
View File
@@ -12,7 +12,7 @@ module.exports = {
library: 'KerasJS',
libraryTarget: 'umd'
},
devtool: 'cheap-module-eval-source-map',
devtool: 'eval-source-map',
module: {
loaders: [
{
webpack.prod.config.js
+1 -1
View File
@@ -8,7 +8,7 @@ module.exports = {
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'keras.min.js',
filename: 'keras.js',
library: 'KerasJS',
libraryTarget: 'umd'
},