mirror of
https://github.com/wassname/keras-js.git
synced 2026-10-30 13:20:13 +08:00
start ResNet50 ImageNet demo
This commit is contained in:
Leon Chen committed
1 parent
16311b1358
commit
5cf643499d
6 files changed
+347
No files matched your search
@@ -0,0 +1 @@
|
||||
{"keras_version": "1.1.0", "class_name": "Model", "config": {"layers": [{"name": "input_1", "class_name": "InputLayer", "config": {"sparse": false, "batch_input_shape": [null, 224, 224, 3], "input_dtype": "float32", "name": "input_1"}, "inbound_nodes": []}, {"name": "zeropadding2d_1", "class_name": "ZeroPadding2D", "config": {"padding": [3, 3], "name": "zeropadding2d_1", "trainable": true}, "inbound_nodes": [[["input_1", 0, 0]]]}, {"name": "conv1", "class_name": "Convolution2D", "config": {"b_constraint": null, "activity_regularizer": null, "b_regularizer": null, "dim_ordering": "tf", "border_mode": "valid", "W_constraint": null, "nb_filter": 64, "trainable": true, "activation": "linear", "init": "glorot_uniform", "name": "conv1", "nb_col": 7, "W_regularizer": null, "subsample": [2, 2], "bias": true, "nb_row": 7}, "inbound_nodes": [[["zeropadding2d_1", 0, 0]]]}, {"name": "bn_conv1", "class_name": "BatchNormalization", "config": {"name": "bn_conv1", "axis": 3, "gamma_regularizer": null, "beta_regularizer": null, "momentum": 0.99, "epsilon": 1e-05, "trainable": true, "mode": 0}, "inbound_nodes": [[["conv1", 0, 0]]]}, {"name": "activation_1", "class_name": "Activation", "config": {"name": "activation_1", "trainable": true, "activation": "relu"}, "inbound_nodes": [[["bn_conv1", 0, 0]]]}, {"name": "maxpooling2d_1", "class_name": "MaxPooling2D", "config": {"pool_size": [3, 3], "name": "maxpooling2d_1", "strides": [2, 2], "dim_ordering": "tf", "border_mode": "valid", "trainable": true}, "inbound_nodes": [[["activation_1", 0, 0]]]}, {"name": "res2a_branch2a", "class_name": "Convolution2D", "config": {"b_constraint": null, "activity_regularizer": null, "b_regularizer": null, "dim_ordering": "tf", "border_mode": "valid", "W_constraint": null, "nb_filter": 64, "trainable": true, "activation": "linear", "init": "glorot_uniform", "name": "res2a_branch2a", "nb_col": 1, "W_regularizer": null, "subsample": [1, 1], "bias": true, "nb_row": 1}, "inbound_nodes": [[["maxpooling2d_1", 0, 0]]]}, {"name": "bn2a_branch2a", "class_name": "BatchNormalization", "config": {"name": "bn2a_branch2a", "axis": 3, "gamma_regularizer": null, "beta_regularizer": null, "momentum": 0.99, "epsilon": 1e-05, "trainable": true, "mode": 0}, "inbound_nodes": [[["res2a_branch2a", 0, 0]]]}, {"name": "activation_2", "class_name": "Activation", "config": {"name": "activation_2", "trainable": true, "activation": "relu"}, "inbound_nodes": [[["bn2a_branch2a", 0, 0]]]}, {"name": "res2a_branch2b", "class_name": "Convolution2D", "config": {"b_constraint": null, "activity_regularizer": null, "b_regularizer": null, "dim_ordering": "tf", "border_mode": "same", "W_constraint": null, "nb_filter": 64, "trainable": true, "activation": "linear", "init": "glorot_uniform", "name": "res2a_branch2b", "nb_col": 3, "W_regularizer": null, "subsample": [1, 1], "bias": true, "nb_row": 3}, "inbound_nodes": [[["activation_2", 0, 0]]]}, {"name": "bn2a_branch2b", "class_name": "BatchNormalization", "config": {"name": "bn2a_branch2b", "axis": 3, "gamma_regularizer": null, "beta_regularizer": null, "momentum": 0.99, "epsilon": 1e-05, "trainable": true, "mode": 0}, "inbound_nodes": [[["res2a_branch2b", 0, 0]]]}, {"name": "activation_3", "class_name": "Activation", "config": {"name": "activation_3", "trainable": true, "activation": "relu"}, "inbound_nodes": [[["bn2a_branch2b", 0, 0]]]}, {"name": "res2a_branch2c", "class_name": "Convolution2D", "config": {"b_constraint": null, "activity_regularizer": null, "b_regularizer": null, "dim_ordering": "tf", "border_mode": "valid", "W_constraint": null, "nb_filter": 256, "trainable": true, "activation": "linear", "init": "glorot_uniform", "name": "res2a_branch2c", "nb_col": 1, "W_regularizer": null, "subsample": [1, 1], "bias": true, "nb_row": 1}, "inbound_nodes": [[["activation_3", 0, 0]]]}, {"name": "res2a_branch1", "class_name": "Convolution2D", "config": {"b_constraint": null, "activity_regularizer": null, "b_regularizer": null, "dim_ordering": "tf", "border_mode": "valid", "W_constraint": null, "nb_filter": 256, "trainable": true, "activation": "linear", "init": "glorot_uniform", "name": "res2a_branch1", "nb_col": 1, "W_regularizer": null, "subsample": [1, 1], "bias": true, "nb_row": 1}, "inbound_nodes": [[["maxpooling2d_1", 0, 0]]]}, {"name": "bn2a_branch2c", "class_name": "BatchNormalization", "config": {"name": "bn2a_branch2c", "axis": 3, "gamma_regularizer": null, "beta_regularizer": null, "momentum": 0.99, "epsilon": 1e-05, "trainable": true, "mode": 0}, "inbound_nodes": [[["res2a_branch2c", 0, 0]]]}, {"name": "bn2a_branch1", "class_name": "BatchNormalization", "config": {"name": "bn2a_branch1", "axis": 3, "gamma_regularizer": null, "beta_regularizer": null, "momentum": 0.99, "epsilon": 1e-05, "trainable": true, "mode": 0}, "inbound_nodes": [[["res2a_branch1", 0, 0]]]}, {"name": "merge_1", "class_name": "Merge", "config": {"mode_type": "raw", "name": "merge_1", "concat_axis": -1, "output_shape_type": "raw", "dot_axes": -1, "output_shLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
[{"layer_name": "conv1", "weight_name": "conv1_W:0", "type": "float32", "shape": [7, 7, 3, 64], "length": 9408, "offset": 0}, {"layer_name": "conv1", "weight_name": "conv1_b:0", "type": "float32", "shape": [64], "length": 64, "offset": 37632}, {"layer_name": "bn_conv1", "weight_name": "bn_conv1_gamma:0", "type": "float32", "shape": [64], "length": 64, "offset": 37888}, {"layer_name": "bn_conv1", "weight_name": "bn_conv1_beta:0", "type": "float32", "shape": [64], "length": 64, "offset": 38144}, {"layer_name": "bn_conv1", "weight_name": "bn_conv1_running_mean:0", "type": "float32", "shape": [64], "length": 64, "offset": 38400}, {"layer_name": "bn_conv1", "weight_name": "bn_conv1_running_std:0", "type": "float32", "shape": [64], "length": 64, "offset": 38656}, {"layer_name": "res2a_branch2a", "weight_name": "res2a_branch2a_W:0", "type": "float32", "shape": [1, 1, 64, 64], "length": 4096, "offset": 38912}, {"layer_name": "res2a_branch2a", "weight_name": "res2a_branch2a_b:0", "type": "float32", "shape": [64], "length": 64, "offset": 55296}, {"layer_name": "bn2a_branch2a", "weight_name": "bn2a_branch2a_gamma:0", "type": "float32", "shape": [64], "length": 64, "offset": 55552}, {"layer_name": "bn2a_branch2a", "weight_name": "bn2a_branch2a_beta:0", "type": "float32", "shape": [64], "length": 64, "offset": 55808}, {"layer_name": "bn2a_branch2a", "weight_name": "bn2a_branch2a_running_mean:0", "type": "float32", "shape": [64], "length": 64, "offset": 56064}, {"layer_name": "bn2a_branch2a", "weight_name": "bn2a_branch2a_running_std:0", "type": "float32", "shape": [64], "length": 64, "offset": 56320}, {"layer_name": "res2a_branch2b", "weight_name": "res2a_branch2b_W:0", "type": "float32", "shape": [3, 3, 64, 64], "length": 36864, "offset": 56576}, {"layer_name": "res2a_branch2b", "weight_name": "res2a_branch2b_b:0", "type": "float32", "shape": [64], "length": 64, "offset": 204032}, {"layer_name": "bn2a_branch2b", "weight_name": "bn2a_branch2b_gamma:0", "type": "float32", "shape": [64], "length": 64, "offset": 204288}, {"layer_name": "bn2a_branch2b", "weight_name": "bn2a_branch2b_beta:0", "type": "float32", "shape": [64], "length": 64, "offset": 204544}, {"layer_name": "bn2a_branch2b", "weight_name": "bn2a_branch2b_running_mean:0", "type": "float32", "shape": [64], "length": 64, "offset": 204800}, {"layer_name": "bn2a_branch2b", "weight_name": "bn2a_branch2b_running_std:0", "type": "float32", "shape": [64], "length": 64, "offset": 205056}, {"layer_name": "res2a_branch2c", "weight_name": "res2a_branch2c_W:0", "type": "float32", "shape": [1, 1, 64, 256], "length": 16384, "offset": 205312}, {"layer_name": "res2a_branch2c", "weight_name": "res2a_branch2c_b:0", "type": "float32", "shape": [256], "length": 256, "offset": 270848}, {"layer_name": "res2a_branch1", "weight_name": "res2a_branch1_W:0", "type": "float32", "shape": [1, 1, 64, 256], "length": 16384, "offset": 271872}, {"layer_name": "res2a_branch1", "weight_name": "res2a_branch1_b:0", "type": "float32", "shape": [256], "length": 256, "offset": 337408}, {"layer_name": "bn2a_branch2c", "weight_name": "bn2a_branch2c_gamma:0", "type": "float32", "shape": [256], "length": 256, "offset": 338432}, {"layer_name": "bn2a_branch2c", "weight_name": "bn2a_branch2c_beta:0", "type": "float32", "shape": [256], "length": 256, "offset": 339456}, {"layer_name": "bn2a_branch2c", "weight_name": "bn2a_branch2c_running_mean:0", "type": "float32", "shape": [256], "length": 256, "offset": 340480}, {"layer_name": "bn2a_branch2c", "weight_name": "bn2a_branch2c_running_std:0", "type": "float32", "shape": [256], "length": 256, "offset": 341504}, {"layer_name": "bn2a_branch1", "weight_name": "bn2a_branch1_gamma:0", "type": "float32", "shape": [256], "length": 256, "offset": 342528}, {"layer_name": "bn2a_branch1", "weight_name": "bn2a_branch1_beta:0", "type": "float32", "shape": [256], "length": 256, "offset": 343552}, {"layer_name": "bn2a_branch1", "weight_name": "bn2a_branch1_running_mean:0", "type": "float32", "shape": [256], "length": 256, "offset": 344576}, {"layer_name": "bn2a_branch1", "weight_name": "bn2a_branch1_running_std:0", "type": "float32", "shape": [256], "length": 256, "offset": 345600}, {"layer_name": "res2b_branch2a", "weight_name": "res2b_branch2a_W:0", "type": "float32", "shape": [1, 1, 256, 64], "length": 16384, "offset": 346624}, {"layer_name": "res2b_branch2a", "weight_name": "res2b_branch2a_b:0", "type": "float32", "shape": [64], "length": 64, "offset": 412160}, {"layer_name": "bn2b_branch2a", "weight_name": "bn2b_branch2a_gamma:0", "type": "float32", "shape": [64], "length": 64, "offset": 412416}, {"layer_name": "bn2b_branch2a", "weight_name": "bn2b_branch2a_beta:0", "type": "float32", "shape": [64], "length": 64, "offset": 412672}, {"layer_name": "bn2b_branch2a", "weight_name": "bn2b_branch2a_running_mean:0", "type": "float32", "shape": [64], "length": 64, "offset": 412928}, {"layer_name": "bn2b_branch2a", "weight_name": "bn2b_branch2a_running_std:0", "type": "float32", "Line truncated
|
||||
Binary file not shown.
@@ -0,0 +1,111 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# 50-layer Residual Network - ImageNet\n",
|
||||
"\n",
|
||||
"see **https://github.com/fchollet/keras/blob/master/keras/applications/resnet50.py**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 1,
|
||||
"metadata": {
|
||||
"collapsed": true
|
||||
},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"WEIGHTS_FILEPATH = 'resnet50.hdf5'\n",
|
||||
"MODEL_ARCH_FILEPATH = 'resnet50.json'"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stderr",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Using TensorFlow backend.\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"from keras.applications import resnet50, imagenet_utils"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"metadata": {
|
||||
"collapsed": false
|
||||
},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Downloading data from https://github.com/fchollet/deep-learning-models/releases/download/v0.2/resnet50_weights_tf_dim_ordering_tf_kernels.h5\n",
|
||||
"102768640/102853048 [============================>.] - ETA: 0s"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"input_shape = (224, 224, 3)\n",
|
||||
"\n",
|
||||
"model = resnet50.ResNet50(include_top=True, weights='imagenet')"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 4,
|
||||
"metadata": {
|
||||
"collapsed": true
|
||||
},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"model.save_weights(WEIGHTS_FILEPATH)\n",
|
||||
"\n",
|
||||
"with open(MODEL_ARCH_FILEPATH, 'w') as f:\n",
|
||||
" f.write(model.to_json())"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"metadata": {
|
||||
"collapsed": true
|
||||
},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"anaconda-cloud": {},
|
||||
"kernelspec": {
|
||||
"display_name": "Python 3",
|
||||
"language": "python",
|
||||
"name": "python3"
|
||||
},
|
||||
"language_info": {
|
||||
"codemirror_mode": {
|
||||
"name": "ipython",
|
||||
"version": 3
|
||||
},
|
||||
"file_extension": ".py",
|
||||
"mimetype": "text/x-python",
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.5.2"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 1
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
@import './_variables.css';
|
||||
|
||||
.demo.resnet50 {
|
||||
.input-container {
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
|
||||
.input-label {
|
||||
font-family: $font-3;
|
||||
font-size: 16px;
|
||||
color: $color-2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.image-url {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
span {
|
||||
margin: 0 10px;
|
||||
font-family: $font-3;
|
||||
font-size: 16px;
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.column.input-column {
|
||||
justify-content: flex-end;
|
||||
|
||||
.canvas-container {
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
canvas {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column.controls-column {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.column.output-column {
|
||||
justify-content: center;
|
||||
|
||||
.output {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layer-results-container {
|
||||
position: relative;
|
||||
|
||||
.layer-result {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 30px 20px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
overflow-x: auto;
|
||||
|
||||
.layer-result-heading {
|
||||
font-size: 1rem;
|
||||
color: #999999;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
|
||||
span.layer-class {
|
||||
color: $color-1;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-result-canvas-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
background: white;
|
||||
|
||||
canvas {
|
||||
border: 1px solid lightgray;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
/* global Vue */
|
||||
import './resnet50.css'
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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 LAYER_DISPLAY_CONFIG = {
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* VUE COMPONENT
|
||||
*
|
||||
*/
|
||||
export const ResNet50 = Vue.extend({
|
||||
template: require('raw!./resnet50.template.html'),
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
model: new KerasJS.Model(MODEL_CONFIG),
|
||||
modelLoading: true,
|
||||
imageURL: '',
|
||||
imageURLSelectList: [
|
||||
{ name: 'cat', value: 'URL1' },
|
||||
{ name: 'dog', value: 'URL2' }
|
||||
],
|
||||
input: new Float32Array(224 * 224 * 3),
|
||||
output: new Float32Array(1000),
|
||||
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: {
|
||||
|
||||
toggleGpu: function () {
|
||||
this.model.gpu = !this.useGpu
|
||||
},
|
||||
|
||||
getIntermediateResults: function () {
|
||||
let results = []
|
||||
for (let [name, layer] of this.model.modelLayersMap.entries()) {
|
||||
const layerClass = layer.layerClass || ''
|
||||
if (layerClass === 'InputLayer') continue
|
||||
|
||||
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()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in new issue
Block a user