From 4b546dc56c75780baf37fecb1067e290ff0abf94 Mon Sep 17 00:00:00 2001 From: Leon Chen Date: Thu, 6 Oct 2016 03:03:12 -0400 Subject: [PATCH] split demo vue templates into separate files --- .gitattributes | 1 - demos/base.css | 2 +- demos/index.html | 2 +- demos/src/_variables.css | 2 + demos/src/home.js | 8 +--- demos/src/home.template.html | 3 ++ demos/src/index.css | 60 +++++++++++++++++++++++-- demos/src/index.js | 5 ++- demos/src/menu.css | 13 ++++-- demos/src/menu.js | 35 +-------------- demos/src/menu.template.html | 30 +++++++++++++ demos/src/mnist-cnn.css | 8 ++-- demos/src/mnist-cnn.js | 75 +------------------------------ demos/src/mnist-cnn.template.html | 74 ++++++++++++++++++++++++++++++ demos/src/mnist-vae.css | 4 +- demos/src/mnist-vae.js | 75 +------------------------------ demos/src/mnist-vae.template.html | 74 ++++++++++++++++++++++++++++++ demos/src/resnet50.template.html | 55 +++++++++++++++++++++++ package.json | 1 + 19 files changed, 321 insertions(+), 206 deletions(-) create mode 100644 demos/src/home.template.html create mode 100644 demos/src/menu.template.html create mode 100644 demos/src/mnist-cnn.template.html create mode 100644 demos/src/mnist-vae.template.html create mode 100644 demos/src/resnet50.template.html diff --git a/.gitattributes b/.gitattributes index b55ef28..ead5b02 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,2 +1 @@ *.buf filter=lfs diff=lfs merge=lfs -text -notebooks/* linguist-documentation diff --git a/demos/base.css b/demos/base.css index b3f78b2..3382d31 100644 --- a/demos/base.css +++ b/demos/base.css @@ -15,7 +15,7 @@ body { } #github-corner-link:hover { - background-color: rgba(27, 188, 155, 0.7); + background-color: rgba(27, 188, 155, 0.6); } #github-corner-link .github-logo { diff --git a/demos/index.html b/demos/index.html index a4d3f8e..b56417b 100644 --- a/demos/index.html +++ b/demos/index.html @@ -16,7 +16,7 @@
- +
diff --git a/demos/src/_variables.css b/demos/src/_variables.css index 4360544..0c4b68a 100644 --- a/demos/src/_variables.css +++ b/demos/src/_variables.css @@ -1,4 +1,6 @@ $color-1: #1BBC9B; +$color-1-light: rgba(27, 188, 155, 0.6); +$color-1-lighter: rgba(27, 188, 155, 0.3); $color-2: #69707a; $color-3: #393E46; diff --git a/demos/src/home.js b/demos/src/home.js index a66f94c..f671b2f 100644 --- a/demos/src/home.js +++ b/demos/src/home.js @@ -1,12 +1,6 @@ /* global Vue */ - import './home.css' export const Home = Vue.extend({ - template: ` -
-
Home
-
- ` - + template: require('raw!./home.template.html') }) diff --git a/demos/src/home.template.html b/demos/src/home.template.html new file mode 100644 index 0000000..7af4b01 --- /dev/null +++ b/demos/src/home.template.html @@ -0,0 +1,3 @@ +
+
Home
+
diff --git a/demos/src/index.css b/demos/src/index.css index 334db6e..171e900 100644 --- a/demos/src/index.css +++ b/demos/src/index.css @@ -13,10 +13,14 @@ body { .title { width: 100%; - color: $color-1; display: flex; flex-direction: row; align-items: center; + + span { + color: $color-1; + margin-right: 20px; + } } .subtitle { @@ -50,11 +54,59 @@ body { .mdl-switch.is-checked { .mdl-switch__thumb { - background: rgba(27, 188, 155, 0.6); + background: $color-1-light; + + } + .mdl-switch__track { + background: $color-1-lighter; + } + } + + .mdl-textfield { + .mdl-textfield__input { + border-bottom-color: $color-1-light; + font-family: $font-2; + font-size: 16px;; } - .mdl-switch__track { - background: rgba(27, 188, 155, 0.3); + .mdl-textfield__label { + font-family: $font-2; + color: $color-1-light; + } + + .mdl-icon-toggle__label { + color: $color-1-light; + } + } + + .mdl-textfield.is-focused { + .mdl-textfield__input { + border-color: $color-1; + } + + .mdl-textfield__label { + color: $color-1; + + &::after { + background-color: $color-1; + } + } + + .mdl-icon-toggle__label { + color: $color-1; + } + } + + .mdl-menu { + .mdl-menu__item { + font-family: $font-2; + font-size: 16px;; + color: $color-2; + + &:hover { + background-color: $color-1-light; + color: white; + } } } } diff --git a/demos/src/index.js b/demos/src/index.js index 26e02e9..449bf1b 100644 --- a/demos/src/index.js +++ b/demos/src/index.js @@ -6,11 +6,13 @@ import { Menu } from './menu' import { Home } from './home' import { MnistCnn } from './mnist-cnn' import { MnistVae } from './mnist-vae' +import { ResNet50 } from './resnet50' Vue.component('menu', Menu) Vue.component('home', Home) Vue.component('mnist-cnn', MnistCnn) Vue.component('mnist-vae', MnistVae) +Vue.component('resnet50', ResNet50) Vue.use(VueMdl.default) @@ -26,7 +28,8 @@ const app = new Vue({ function matchRoute () { const routes = [ 'mnist-cnn', - 'mnist-vae' + 'mnist-vae', + 'resnet50' ] const { hash } = window.location diff --git a/demos/src/menu.css b/demos/src/menu.css index eb05dd8..1bc5fea 100644 --- a/demos/src/menu.css +++ b/demos/src/menu.css @@ -5,7 +5,7 @@ margin: 20px; background: white; border-radius: 10px; - box-shadow: 6px 6px #CCCCCC; + box-shadow: 5px 5px #CCCCCC; h1 { color: #CCCCCC; @@ -16,6 +16,11 @@ .menu-list { li { color: $color-2; + border-left: 2px solid white; + } + + li.active { + border-left: 2px solid $color-1; } a { @@ -44,14 +49,14 @@ } a { - color: #AAAAAA; + color: $color-1; padding: 0; display: inline-flex; background-color: none; transition: color 0.2s ease-in; - &hover { - color: $color-1; + &:hover { + color: $color-1-light; background: none; } } diff --git a/demos/src/menu.js b/demos/src/menu.js index 54fc9a6..eaef4e2 100644 --- a/demos/src/menu.js +++ b/demos/src/menu.js @@ -1,38 +1,7 @@ /* global Vue */ - import './menu.css' export const Menu = Vue.extend({ - template: ` - - ` - + props: ['currentView'], + template: require('raw!./menu.template.html') }) diff --git a/demos/src/menu.template.html b/demos/src/menu.template.html new file mode 100644 index 0000000..9b9451e --- /dev/null +++ b/demos/src/menu.template.html @@ -0,0 +1,30 @@ + diff --git a/demos/src/mnist-cnn.css b/demos/src/mnist-cnn.css index e57d32b..ce7ce73 100644 --- a/demos/src/mnist-cnn.css +++ b/demos/src/mnist-cnn.css @@ -34,11 +34,11 @@ display: inline-flex; justify-content: flex-end; margin: 10px 0; - border: 15px solid rgba(27, 188, 155, 0.3); + border: 15px solid $color-1-lighter; transition: border-color 0.2s ease-in; &:hover { - border-color: rgba(27, 188, 155, 0.6); + border-color: $color-1-light; } canvas { @@ -58,7 +58,7 @@ transition: color 0.2s ease-in; &:hover { - color: rgba(27, 188, 155, 0.3); + color: $color-1-lighter; cursor: pointer; } } @@ -87,7 +87,7 @@ align-items: center; justify-content: center; padding: 0 6px; - border-bottom: 2px solid rgba(27, 188, 155, 0.3); + border-bottom: 2px solid $color-1-lighter; .output-label { font-family: 'Inconsolata', sans-serif; diff --git a/demos/src/mnist-cnn.js b/demos/src/mnist-cnn.js index d56f396..e51b844 100644 --- a/demos/src/mnist-cnn.js +++ b/demos/src/mnist-cnn.js @@ -1,5 +1,4 @@ /* global Vue */ - import './mnist-cnn.css' import debounce from 'lodash/debounce' @@ -82,79 +81,7 @@ const LAYER_DISPLAY_CONFIG = { * */ export const MnistCnn = Vue.extend({ - template: ` -
-
Basic Convnet for MNIST
-
- Loading...{{ loadingProgress }}% -
-
-
-
-
Draw any digit (0-9) here ⤸
-
- - - -
-
- clearCLEAR -
-
-
-
- Use GPU -
-
-
-
-
{{ i }}
-
-
-
-
-
-
-
-
-
- {{ layerResult.layerClass }} - {{ layerDisplayConfig[layerResult.name].heading }} -
-
- - -
-
-
-
- `, + template: require('raw!./mnist-cnn.template.html'), data: function () { return { diff --git a/demos/src/mnist-cnn.template.html b/demos/src/mnist-cnn.template.html new file mode 100644 index 0000000..c55864a --- /dev/null +++ b/demos/src/mnist-cnn.template.html @@ -0,0 +1,74 @@ +
+
+ Basic Convnet for MNIST + +
+
+ Loading...{{ loadingProgress }}% +
+
+
+
+
Draw any digit (0-9) here ⤸
+
+ + + +
+
+ clearCLEAR +
+
+
+
+ Use GPU +
+
+
+
+
{{ i }}
+
+
+
+
+
+
+
+
+
+ {{ layerResult.layerClass }} + {{ layerDisplayConfig[layerResult.name].heading }} +
+
+ + +
+
+
+
diff --git a/demos/src/mnist-vae.css b/demos/src/mnist-vae.css index 1d3b015..df17dfe 100644 --- a/demos/src/mnist-vae.css +++ b/demos/src/mnist-vae.css @@ -35,11 +35,11 @@ display: inline-flex; justify-content: flex-end; margin: 10px 0; - border: 15px solid rgba(27, 188, 155, 0.3); + border: 15px solid $color-1-lighter; transition: border-color 0.2s ease-in; &:hover { - border-color: rgba(27, 188, 155, 0.6); + border-color: $color-1-light; } canvas { diff --git a/demos/src/mnist-vae.js b/demos/src/mnist-vae.js index 836eccc..b602078 100644 --- a/demos/src/mnist-vae.js +++ b/demos/src/mnist-vae.js @@ -1,5 +1,4 @@ /* global Vue */ - import './mnist-vae.css' import * as utils from './utils' @@ -60,79 +59,7 @@ const LAYER_DISPLAY_CONFIG = { * */ export const MnistVae = Vue.extend({ - template: ` -
-
Convolutional Variational Autoencoder, trained on MNIST
-
- Loading...{{ loadingProgress }}% -
-
-
-
-
Click around the latent space ⤸
-
- -
- -1.5 - x - 1.5 -
-
- -1.5 - y - 1.5 -
-
-
-
-
- Use GPU -
-
x: {{ inputCoordinates[0] < 0 ? inputCoordinates[0].toFixed(2) : inputCoordinates[0].toFixed(3) }}
-
y: {{ inputCoordinates[1] < 0 ? inputCoordinates[1].toFixed(2) : inputCoordinates[1].toFixed(3) }}
-
-
-
-
- - -
-
-
-
-
-
-
- {{ layerResult.layerClass }} - {{ layerDisplayConfig[layerResult.name].heading }} -
-
- - -
-
-
-
- `, + template: require('raw!./mnist-vae.template.html'), data: function () { return { diff --git a/demos/src/mnist-vae.template.html b/demos/src/mnist-vae.template.html new file mode 100644 index 0000000..af18ca5 --- /dev/null +++ b/demos/src/mnist-vae.template.html @@ -0,0 +1,74 @@ +
+
+ Convolutional Variational Autoencoder, trained on MNIST + +
+
+ Loading...{{ loadingProgress }}% +
+
+
+
+
Click around the latent space ⤸
+
+ +
+ -1.5 + x + 1.5 +
+
+ -1.5 + y + 1.5 +
+
+
+
+
+ Use GPU +
+
x: {{ inputCoordinates[0] < 0 ? inputCoordinates[0].toFixed(2) : inputCoordinates[0].toFixed(3) }}
+
y: {{ inputCoordinates[1] < 0 ? inputCoordinates[1].toFixed(2) : inputCoordinates[1].toFixed(3) }}
+
+
+
+
+ + +
+
+
+
+
+
+
+ {{ layerResult.layerClass }} + {{ layerDisplayConfig[layerResult.name].heading }} +
+
+ + +
+
+
+
diff --git a/demos/src/resnet50.template.html b/demos/src/resnet50.template.html new file mode 100644 index 0000000..eebdb7e --- /dev/null +++ b/demos/src/resnet50.template.html @@ -0,0 +1,55 @@ +
+
+ 50-layer Residual Network, trained on ImageNet + +
+
+ Loading...{{ loadingProgress }}% +
+
+
Enter an image URL or select from dropdown
+
+ + or + +
+
+
+
+
+ +
+
+
+ Use GPU +
+
+
+
+
+
+
+
+
+ {{ layerResult.layerClass }} + {{ layerDisplayConfig[layerResult.name].heading }} +
+
+ + +
+
+
+
diff --git a/package.json b/package.json index b0eb202..ff01ae9 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "http-server": "^0.9.0", "postcss-loader": "^0.13.0", "precss": "^1.4.0", + "raw-loader": "^0.5.1", "standard": "^8.3.0", "style-loader": "^0.13.1", "webpack": "^2.1.0-beta.25"