Skip to content

Commit

Permalink
update demos to work with changes in visualizations api
Browse files Browse the repository at this point in the history
  • Loading branch information
@transcranial
transcranial committed Nov 27, 2017
1 parent e173070 commit 9d37d68
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 30 deletions.
42 changes: 28 additions & 14 deletions demos/src/components/models/InceptionV3.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@
>(hover over image to view)</div>
</v-flex>
<v-flex sm6 md4 class="canvas-container">
<canvas id="input-canvas" width="299" height="299"
<canvas id="input-canvas" :width="imageSize" :height="imageSize"
v-on:mouseenter="showVis = true"
v-on:mouseleave="showVis = false"
></canvas>
<transition name="fade">
<div v-show="showVis">
<canvas id="visualization-canvas" width="299" height="299"
<canvas id="visualization-canvas" :width="imageSize" :height="imageSize"
:style="{ opacity: colormapSelect === 'transparency' ? 1 : colormapAlpha }"
></canvas>
</div>
Expand Down Expand Up @@ -119,6 +119,7 @@
import loadImage from 'blueimp-load-image'
import ndarray from 'ndarray'
import ops from 'ndarray-ops'
import resample from 'ndarray-resample'
import _ from 'lodash'
import * as utils from '../../utils'
import { IMAGE_URLS } from '../../data/sample-image-urls'
Expand All @@ -135,7 +136,7 @@ export default {
// store module on component instance as non-reactive object
this.model = new KerasJS.Model({
filepath: process.env.NODE_ENV === 'production' ? MODEL_FILEPATH_PROD : MODEL_FILEPATH_DEV,
gpu: this.hasWebGL,
gpu: false && this.hasWebGL,
visualizations: ['CAM']
})
},
Expand All @@ -155,6 +156,7 @@ export default {
data() {
return {
useGPU: this.hasWebGL,
imageSize: 299,
modelLoading: true,
modelRunning: false,
inferenceTime: null,
Expand Down Expand Up @@ -216,11 +218,11 @@ export default {
if (newVal === 'None') {
this.showVis = false
} else {
this.updateVis()
this.updateVis(this.outputClasses[0].index)
}
},
colormapSelect() {
this.updateVis()
this.updateVis(this.outputClasses[0].index)
}
},
Expand Down Expand Up @@ -288,7 +290,14 @@ export default {
})
}
},
{ maxWidth: 299, maxHeight: 299, cover: true, crop: true, canvas: true, crossOrigin: 'Anonymous' }
{
maxWidth: this.imageSize,
maxHeight: this.imageSize,
cover: true,
crop: true,
canvas: true,
crossOrigin: 'Anonymous'
}
)
},
runModel() {
Expand All @@ -314,26 +323,31 @@ export default {
this.output = outputData['predictions']
this.finishedLayerNames = this.model.finishedLayerNames
this.modelRunning = false
this.updateVis()
this.updateVis(this.outputClasses[0].index)
})
},
updateVis() {
updateVis(index) {
if (!this.output || !this.model.visMap.has(this.visualizationSelect)) return
const vis = this.model.visMap.get(this.visualizationSelect)
const height = vis.height
const width = vis.width
const imageDataArr = ndarray(new Uint8ClampedArray(height * width * 4), [height, width, 4])
const height = this.imageSize
const width = this.imageSize
const visDataArr = ndarray(vis.data, vis.shape)
const visClassDataArr = ndarray(new Float32Array(vis.shape[0] * vis.shape[1]), [vis.shape[0], vis.shape[1]])
ops.assign(visClassDataArr, visDataArr.pick(null, null, index))
const visClassDataArrResized = ndarray(new Float32Array(height * width), [height, width])
resample(visClassDataArrResized, visClassDataArr)
const imageDataArr = ndarray(new Uint8ClampedArray(height * width * 4), [height, width, 4])
if (this.colormapSelect === 'transparency') {
const alpha = ndarray(new Float32Array(vis.data), [height, width])
const alpha = visClassDataArrResized
ops.mulseq(alpha, -255)
ops.addseq(alpha, 255)
ops.assign(imageDataArr.pick(null, null, 3), alpha)
} else {
const colormap = this.colormapSelect
for (let i = 0, len = vis.data.length; i < len; i++) {
const rgb = colormap(vis.data[i]).rgb()
for (let i = 0, len = visClassDataArrResized.data.length; i < len; i++) {
const rgb = colormap(visClassDataArrResized.data[i]).rgb()
imageDataArr.data[4 * i] = rgb[0]
imageDataArr.data[4 * i + 1] = rgb[1]
imageDataArr.data[4 * i + 2] = rgb[2]
Expand Down
14 changes: 11 additions & 3 deletions demos/src/components/models/Resnet50.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,13 @@
>(hover over image to view)</div>
</v-flex>
<v-flex sm5 md3 class="canvas-container">
<canvas id="input-canvas" width="224" height="224"
<canvas id="input-canvas" :width="imageSize" :height="imageSize"
v-on:mouseenter="showVis = true"
v-on:mouseleave="showVis = false"
></canvas>
<transition name="fade">
<div v-show="showVis">
<canvas id="visualization-canvas" width="224" height="224"
<canvas id="visualization-canvas" :width="imageSize" :height="imageSize"
:style="{ opacity: colormapSelect === 'transparency' ? 1 : colormapAlpha }"
></canvas>
</div>
Expand Down Expand Up @@ -155,6 +155,7 @@ export default {
data() {
return {
useGPU: this.hasWebGL,
imageSize: 224,
modelLoading: true,
modelRunning: false,
inferenceTime: null,
Expand Down Expand Up @@ -285,7 +286,14 @@ export default {
})
}
},
{ maxWidth: 224, maxHeight: 224, cover: true, crop: true, canvas: true, crossOrigin: 'Anonymous' }
{
maxWidth: this.imageSize,
maxHeight: this.imageSize,
cover: true,
crop: true,
canvas: true,
crossOrigin: 'Anonymous'
}
)
},
runModel() {
Expand Down
33 changes: 24 additions & 9 deletions demos/src/components/models/SqueezenetV1.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,17 @@
>(hover over image to view)</div>
</v-flex>
<v-flex sm5 md3 class="canvas-container">
<canvas id="input-canvas" width="227" height="227"
<canvas id="input-canvas"
:width="imageSize"
:height="imageSize"
v-on:mouseenter="showVis = true"
v-on:mouseleave="showVis = false"
></canvas>
<transition name="fade">
<div v-show="showVis">
<canvas id="visualization-canvas" width="227" height="227"
<canvas id="visualization-canvas"
:width="imageSize"
:height="imageSize"
:style="{ opacity: colormapSelect === 'transparency' ? 1 : colormapAlpha }"
></canvas>
</div>
Expand Down Expand Up @@ -119,6 +123,7 @@
import loadImage from 'blueimp-load-image'
import ndarray from 'ndarray'
import ops from 'ndarray-ops'
import resample from 'ndarray-resample'
import _ from 'lodash'
import * as utils from '../../utils'
import { IMAGE_URLS } from '../../data/sample-image-urls'
Expand Down Expand Up @@ -155,6 +160,7 @@ export default {
data() {
return {
useGPU: this.hasWebGL,
imageSize: 227,
modelLoading: true,
modelRunning: false,
inferenceTime: null,
Expand Down Expand Up @@ -283,7 +289,14 @@ export default {
})
}
},
{ maxWidth: 227, maxHeight: 227, cover: true, crop: true, canvas: true, crossOrigin: 'Anonymous' }
{
maxWidth: this.imageSize,
maxHeight: this.imageSize,
cover: true,
crop: true,
canvas: true,
crossOrigin: 'Anonymous'
}
)
},
runModel() {
Expand Down Expand Up @@ -315,19 +328,21 @@ export default {
if (!this.output || !this.model.visMap.has(this.visualizationSelect)) return
const vis = this.model.visMap.get(this.visualizationSelect)
const height = vis.height
const width = vis.width
const imageDataArr = ndarray(new Uint8ClampedArray(height * width * 4), [height, width, 4])
const height = this.imageSize
const width = this.imageSize
const visDataArr = ndarray(new Float32Array(height * width), [height, width])
resample(visDataArr, ndarray(vis.data, vis.shape))
const imageDataArr = ndarray(new Uint8ClampedArray(height * width * 4), [height, width, 4])
if (this.colormapSelect === 'transparency') {
const alpha = ndarray(new Float32Array(vis.data), [height, width])
const alpha = visDataArr
ops.mulseq(alpha, -255)
ops.addseq(alpha, 255)
ops.assign(imageDataArr.pick(null, null, 3), alpha)
} else {
const colormap = this.colormapSelect
for (let i = 0, len = vis.data.length; i < len; i++) {
const rgb = colormap(vis.data[i]).rgb()
for (let i = 0, len = visDataArr.data.length; i < len; i++) {
const rgb = colormap(visDataArr.data[i]).rgb()
imageDataArr.data[4 * i] = rgb[0]
imageDataArr.data[4 * i + 1] = rgb[1]
imageDataArr.data[4 * i + 2] = rgb[2]
Expand Down
7 changes: 6 additions & 1 deletion demos/src/utils/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,12 @@ export function imagenetClassesTopK(classProbabilities, k = 5) {

const topK = _.take(sorted, k).map(probIndex => {
const iClass = imagenetClasses[probIndex[1]]
return { id: iClass[0], name: iClass[1].replace(/_/, ' '), probability: probIndex[0] }
return {
id: iClass[0],
index: parseInt(probIndex[1], 10),
name: iClass[1].replace(/_/, ' '),
probability: probIndex[0]
}
})
return topK
}
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,19 +67,19 @@
"blueimp-load-image": "^2.17.1",
"chroma-js": "^1.3.4",
"css-loader": "^0.28.7",
"eslint": "^4.11.0",
"eslint": "^4.12.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^4.0.1",
"http-server": "^0.10.0",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-loader": "^2.0.9",
"style-loader": "^0.19.0",
"vue": "^2.5.8",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.8",
"vuetify": "^0.17.2",
"vuetify": "^0.17.3",
"webpack": "^3.8.1"
}
}

0 comments on commit 9d37d68

Please sign in to comment.