start ResNet50 ImageNet demo

demos/notebooks/resnet50.ipynb

@@ -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
+}

demos/src/resnet50.css

@@ -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;
+        }
+      }
+    }
+  }
+}

demos/src/resnet50.js

@@ -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()
+        })
+      })
+    }
+  }
+})