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

for demos, toggle gpu by default when webgl is detected

Browse Source
This commit is contained in:
Leon Chen
2016-10-06 23:30:45 -04:00
parent 9ee1a8c52b
commit d5063b4062
8 changed files with 88 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/src/index.js
+18 -3
View File
@@ -1,4 +1,4 @@
/* global Vue, VueMdl */
/* global Vue, VueMdl, WebGLRenderingContext */
import './index.css'
@@ -18,8 +18,23 @@ Vue.use(VueMdl.default)
const app = new Vue({
el: '#app',
data: {
currentView: 'home'
data: function () {
return {
currentView: 'home',
hasWebgl: true
}
},
created: function () {
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
// Report the result.
if (gl && gl instanceof WebGLRenderingContext) {
this.hasWebgl = true
} else {
this.hasWebgl = false
}
}
})
demos/src/mnist-cnn.js
+16 -17
View File
@@ -5,23 +5,20 @@ import debounce from 'lodash/debounce'
import range from 'lodash/range'
import * as utils from './utils'
const MODEL_CONFIG = {
filepaths: {
model: '/demos/data/mnist_cnn/mnist_cnn.json',
weights: '/demos/data/mnist_cnn/mnist_cnn_weights.buf',
metadata: '/demos/data/mnist_cnn/mnist_cnn_metadata.json'
},
gpu: false
const MODEL_FILEPATHS_DEV = {
model: '/demos/data/mnist_cnn/mnist_cnn.json',
weights: '/demos/data/mnist_cnn/mnist_cnn_weights.buf',
metadata: '/demos/data/mnist_cnn/mnist_cnn_metadata.json'
}
if (process.env.NODE_ENV === 'production') {
Object.assign(MODEL_CONFIG, {
filepaths: {
model: 'demos/data/mnist_cnn/mnist_cnn.json',
weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_cnn/mnist_cnn_weights.buf',
metadata: 'demos/data/mnist_cnn/mnist_cnn_metadata.json'
}
})
const MODEL_FILEPATHS_PROD = {
model: 'demos/data/mnist_cnn/mnist_cnn.json',
weights: 'https://transcranial.github.io/keras-js-demos-data/mnist_cnn/mnist_cnn_weights.buf',
metadata: 'demos/data/mnist_cnn/mnist_cnn_metadata.json'
}
const MODEL_CONFIG = {
filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
}
const LAYER_DISPLAY_CONFIG = {
@@ -81,11 +78,13 @@ const LAYER_DISPLAY_CONFIG = {
*
*/
export const MnistCnn = Vue.extend({
props: ['hasWebgl'],
template: require('raw!./mnist-cnn.template.html'),
data: function () {
return {
model: new KerasJS.Model(MODEL_CONFIG),
model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
modelLoading: true,
input: new Float32Array(784),
output: new Float32Array(10),
@@ -94,7 +93,7 @@ export const MnistCnn = Vue.extend({
layerDisplayConfig: LAYER_DISPLAY_CONFIG,
drawing: false,
strokes: [],
useGpu: MODEL_CONFIG.gpu
useGpu: this.hasWebgl
}
},
demos/src/mnist-cnn.template.html
+5 -1
View File
@@ -30,7 +30,11 @@
</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 || !hasWebgl"
@click="toggleGpu"
>Use GPU</mdl-switch>
</div>
<div class="column output-column">
<div class="output">
demos/src/mnist-vae.js
+16 -17
View File
@@ -3,23 +3,20 @@ import './mnist-vae.css'
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
const MODEL_FILEPATHS_DEV = {
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'
}
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 MODEL_FILEPATHS_PROD = {
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 MODEL_CONFIG = {
filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
}
const LAYER_DISPLAY_CONFIG = {
@@ -59,11 +56,13 @@ const LAYER_DISPLAY_CONFIG = {
*
*/
export const MnistVae = Vue.extend({
props: ['hasWebgl'],
template: require('raw!./mnist-vae.template.html'),
data: function () {
return {
model: new KerasJS.Model(MODEL_CONFIG),
model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
modelLoading: true,
output: new Float32Array(27 * 27),
crosshairsActivated: false,
@@ -71,7 +70,7 @@ export const MnistVae = Vue.extend({
position: [60, 20],
layerResultImages: [],
layerDisplayConfig: LAYER_DISPLAY_CONFIG,
useGpu: MODEL_CONFIG.gpu
useGpu: this.hasWebgl
}
},
demos/src/mnist-vae.template.html
+5 -1
View File
@@ -33,7 +33,11 @@
</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 || !hasWebgl"
@click="toggleGpu"
>Use GPU</mdl-switch>
<div class="coordinates">
<div class="coordinates-x">x: {{ inputCoordinates[0] < 0 ? inputCoordinates[0].toFixed(2) : inputCoordinates[0].toFixed(3) }}</div>
<div class="coordinates-y">y: {{ inputCoordinates[1] < 0 ? inputCoordinates[1].toFixed(2) : inputCoordinates[1].toFixed(3) }}</div>
demos/src/resnet50.js
+22 -21
View File
@@ -5,25 +5,27 @@ import ndarray from 'ndarray'
import ops from 'ndarray-ops'
import * as utils from './utils'
const MODEL_CONFIG = {
filepaths: {
model: '/demos/data/resnet50/resnet50.json',
weights: '/demos/data/resnet50/resnet50_weights.buf',
metadata: '/demos/data/resnet50/resnet50_metadata.json'
},
gpu: false
const MODEL_FILEPATHS_DEV = {
model: '/demos/data/resnet50/resnet50.json',
weights: '/demos/data/resnet50/resnet50_weights.buf',
metadata: '/demos/data/resnet50/resnet50_metadata.json'
}
if (process.env.NODE_ENV === 'production') {
Object.assign(MODEL_CONFIG, {
filepaths: {
model: 'demos/data/resnet50/resnet50.json',
weights: 'https://transcranial.github.io/keras-js-demos-data/resnet50/resnet50_weights.buf',
metadata: 'demos/data/resnet50/resnet50_metadata.json'
}
})
const MODEL_FILEPATHS_PROD = {
model: 'demos/data/resnet50/resnet50.json',
weights: 'https://transcranial.github.io/keras-js-demos-data/resnet50/resnet50_weights.buf',
metadata: 'demos/data/resnet50/resnet50_metadata.json'
}
const MODEL_CONFIG = {
filepaths: (process.env.NODE_ENV === 'production') ? MODEL_FILEPATHS_PROD : MODEL_FILEPATHS_DEV
}
const IMAGE_URL_LIST = [
{ name: 'cat', value: 'http://i.imgur.com/CzXTtJV.jpg' },
{ name: 'dog', value: 'URL2' }
]
const LAYER_DISPLAY_CONFIG = {
}
@@ -33,24 +35,23 @@ const LAYER_DISPLAY_CONFIG = {
*
*/
export const ResNet50 = Vue.extend({
props: ['hasWebgl'],
template: require('raw!./resnet50.template.html'),
data: function () {
return {
model: new KerasJS.Model(MODEL_CONFIG),
model: new KerasJS.Model(Object.assign({ gpu: this.hasWebgl }, MODEL_CONFIG)),
modelLoading: true,
imageURLInput: null,
imageURLSelect: null,
imageURLSelectList: [
{ name: 'cat', value: 'http://i.imgur.com/CzXTtJV.jpg' },
{ name: 'dog', value: 'URL2' }
],
imageURLSelectList: IMAGE_URL_LIST,
imageLoading: false,
imageLoadingError: false,
output: new Float32Array(1000),
layerResultImages: [],
layerDisplayConfig: LAYER_DISPLAY_CONFIG,
useGpu: MODEL_CONFIG.gpu
useGpu: this.hasWebgl
}
},
demos/src/resnet50.template.html
+5 -1
View File
@@ -37,7 +37,11 @@
</div>
</div>
<div class="column is-2 controls-column">
<mdl-switch :checked.sync="useGpu" :disabled="modelLoading" @click="toggleGpu">Use GPU</mdl-switch>
<mdl-switch
:checked.sync="useGpu"
:disabled="modelLoading || !hasWebgl"
@click="toggleGpu"
>Use GPU</mdl-switch>
</div>
<div class="column output-column">
<div class="output">
index.html
+1 -1
View File
@@ -19,7 +19,7 @@
<menu :current-view="currentView"></menu>
</div>
<div class="column is-9">
<component :is="currentView"></component>
<component :is="currentView" :has-webgl="hasWebgl"></component>
</div>
</div>
</div>