diff --git a/demos/src/_variables.css b/demos/src/_variables.css index 4547169..838f065 100644 --- a/demos/src/_variables.css +++ b/demos/src/_variables.css @@ -3,7 +3,6 @@ $color-1-light: rgba(27, 188, 155, 0.6); $color-1-lighter: rgba(27, 188, 155, 0.3); $color-2: #69707a; $color-3: #393E46; -$color-4: #EB9532; $color-err: #D24D57; $font-1: 'Fira Sans', sans-serif; diff --git a/demos/src/image-urls/index.js b/demos/src/image-urls/index.js index 6103e90..514a045 100644 --- a/demos/src/image-urls/index.js +++ b/demos/src/image-urls/index.js @@ -1,5 +1,17 @@ export const IMAGE_URLS = [ { name: 'cat', value: 'http://i.imgur.com/CzXTtJV.jpg' }, { name: 'dog', value: 'http://i.imgur.com/OB0y6MR.jpg' }, - { name: 'bridge', value: 'http://i.imgur.com/Bvke53p.jpg' } + { name: 'cheetah', value: 'https://farm2.staticflickr.com/1533/26541536141_41abe98db3_z_d.jpg' }, + { name: 'goldfish', value: 'https://farm2.staticflickr.com/1301/1349366952_982df2276f_z_d.jpg' }, + { name: 'bird', value: 'https://farm4.staticflickr.com/3075/3168662394_7d7103de7d_z_d.jpg' }, + { name: 'bridge', value: 'http://i.imgur.com/Bvke53p.jpg' }, + { name: 'airplane', value: 'https://farm6.staticflickr.com/5590/14821526429_5c6ea60405_z_d.jpg' }, + { name: 'cello', value: 'https://farm2.staticflickr.com/1090/4595137268_0e3f2b9aa7_z_d.jpg' }, + { name: 'violin', value: 'https://farm6.staticflickr.com/5076/7175144508_e1ba0d6e35_z_d.jpg' }, + { name: 'piano', value: 'https://farm4.staticflickr.com/3224/3081748027_0ee3d59fea_z_d.jpg' }, + { name: 'apple', value: 'https://farm8.staticflickr.com/7377/9359257263_81b080a039_z_d.jpg' }, + { name: 'orange', value: 'https://farm6.staticflickr.com/5251/5522940446_0d5724d43a_z_d.jpg' }, + { name: 'flower', value: 'https://farm5.staticflickr.com/4037/4682037903_88cf1cfc47_z_d.jpg' }, + { name: 'coffee', value: 'https://farm4.staticflickr.com/3752/9684880330_9b4698f7cb_z_d.jpg' }, + { name: 'wine', value: 'https://farm4.staticflickr.com/3827/11349066413_99c32dee4a_z_d.jpg' } ] diff --git a/demos/src/index.css b/demos/src/index.css index 94da212..f0fc236 100644 --- a/demos/src/index.css +++ b/demos/src/index.css @@ -44,6 +44,42 @@ body { border-radius: 10px; } + .info-panel { + width: 350px; + border-radius: 5px; + background: white; + color: $color-3; + padding: 10px; + margin: 20px; + box-shadow: 5px 5px #CCCCCC; + + .info-panel-text { + margin-bottom: 10px; + + a { + color: $color-1; + transition: color 0.2s ease-in; + + &:hover { + color: $color-1-light; + } + } + } + + .info-panel-close { + display: flex; + align-items: center; + justify-content: flex-end; + color: $color-2; + transition: color 0.2s ease-in; + + &:hover { + color: $color-1-lighter; + cursor: pointer; + } + } + } + /****************************************************************/ /* MDL overrides */ @@ -100,7 +136,7 @@ body { .mdl-menu { .mdl-menu__item { font-family: $font-2; - font-size: 14px;; + font-size: 14px; color: $color-2; &:hover { diff --git a/demos/src/index.js b/demos/src/index.js index a10b16b..e7b99fe 100644 --- a/demos/src/index.js +++ b/demos/src/index.js @@ -7,12 +7,14 @@ import { Home } from './home' import { MnistCnn } from './mnist-cnn' import { MnistVae } from './mnist-vae' import { ResNet50 } from './resnet50' +import { InceptionV3 } from './inception-v3' Vue.component('menu', Menu) Vue.component('home', Home) Vue.component('mnist-cnn', MnistCnn) Vue.component('mnist-vae', MnistVae) Vue.component('resnet50', ResNet50) +Vue.component('inception-v3', InceptionV3) Vue.use(VueMdl.default) @@ -44,7 +46,8 @@ function matchRoute () { const routes = [ 'mnist-cnn', 'mnist-vae', - 'resnet50' + 'resnet50', + 'inception-v3' ] const { hash } = window.location diff --git a/demos/src/menu.template.html b/demos/src/menu.template.html index b68b5f3..0ddc0f7 100644 --- a/demos/src/menu.template.html +++ b/demos/src/menu.template.html @@ -25,6 +25,12 @@ ImageNet +
  • + + Inception V3 + ImageNet + +
  • Loading...{{ loadingProgress }}%
    +
    +
    + +
    +
    + closeCLOSE +
    +
    diff --git a/demos/src/mnist-vae.template.html b/demos/src/mnist-vae.template.html index 1f5ea17..392b262 100644 --- a/demos/src/mnist-vae.template.html +++ b/demos/src/mnist-vae.template.html @@ -6,6 +6,14 @@
    Loading...{{ loadingProgress }}%
    +
    +
    + +
    +
    + closeCLOSE +
    +
    diff --git a/demos/src/resnet50-arch.js b/demos/src/resnet50-arch.js index d1d1c4e..725e7be 100644 --- a/demos/src/resnet50-arch.js +++ b/demos/src/resnet50-arch.js @@ -20,7 +20,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn_conv1', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 2, col: 0 }, @@ -52,7 +52,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2a_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 6, col: 0 }, @@ -73,7 +73,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2a_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 9, col: 0 }, @@ -101,14 +101,14 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2a_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 12, col: 0 }, { name: 'bn2a_branch1', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 6, col: 1 }, @@ -140,7 +140,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2b_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 16, col: 0 }, @@ -161,7 +161,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2b_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 19, col: 0 }, @@ -182,7 +182,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2b_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 22, col: 0 }, @@ -214,7 +214,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2c_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 26, col: 0 }, @@ -235,7 +235,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2c_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 29, col: 0 }, @@ -256,7 +256,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn2c_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 32, col: 0 }, @@ -288,7 +288,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3a_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 36, col: 0 }, @@ -309,7 +309,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3a_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 39, col: 0 }, @@ -337,14 +337,14 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3a_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 42, col: 0 }, { name: 'bn3a_branch1', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 36, col: 1 }, @@ -376,7 +376,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3b_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 46, col: 0 }, @@ -397,7 +397,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3b_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 49, col: 0 }, @@ -418,7 +418,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3b_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 52, col: 0 }, @@ -450,7 +450,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3c_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 56, col: 0 }, @@ -471,7 +471,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3c_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 59, col: 0 }, @@ -492,7 +492,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3c_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 62, col: 0 }, @@ -524,7 +524,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3d_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 66, col: 0 }, @@ -545,7 +545,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3d_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 69, col: 0 }, @@ -566,7 +566,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn3d_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 72, col: 0 }, @@ -598,7 +598,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4a_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 76, col: 0 }, @@ -619,7 +619,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4a_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 79, col: 0 }, @@ -647,14 +647,14 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4a_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 82, col: 0 }, { name: 'bn4a_branch1', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 76, col: 1 }, @@ -686,7 +686,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4b_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 86, col: 0 }, @@ -707,7 +707,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4b_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 89, col: 0 }, @@ -728,7 +728,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4b_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 92, col: 0 }, @@ -760,7 +760,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4c_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 96, col: 0 }, @@ -781,7 +781,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4c_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 99, col: 0 }, @@ -802,7 +802,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4c_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 102, col: 0 }, @@ -834,7 +834,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4d_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 106, col: 0 }, @@ -855,7 +855,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4d_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 109, col: 0 }, @@ -876,7 +876,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4d_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 112, col: 0 }, @@ -908,7 +908,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4e_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 116, col: 0 }, @@ -929,7 +929,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4e_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 119, col: 0 }, @@ -950,7 +950,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4e_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 122, col: 0 }, @@ -982,7 +982,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4f_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 126, col: 0 }, @@ -1003,7 +1003,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4f_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 129, col: 0 }, @@ -1024,7 +1024,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn4f_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 132, col: 0 }, @@ -1056,7 +1056,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5a_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 136, col: 0 }, @@ -1077,7 +1077,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5a_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 139, col: 0 }, @@ -1105,14 +1105,14 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5a_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 142, col: 0 }, { name: 'bn5a_branch1', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 136, col: 1 }, @@ -1144,7 +1144,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5b_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 146, col: 0 }, @@ -1165,7 +1165,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5b_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 149, col: 0 }, @@ -1186,7 +1186,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5b_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 152, col: 0 }, @@ -1218,7 +1218,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5c_branch2a', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 156, col: 0 }, @@ -1239,7 +1239,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5c_branch2b', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 159, col: 0 }, @@ -1260,7 +1260,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'bn5c_branch2c', className: 'BatchNormalization', - details: 'feature-wise normalization on channel axis', + details: 'channel axis features', row: 162, col: 0 }, @@ -1285,7 +1285,7 @@ export const ARCHITECTURE_DIAGRAM = [ { name: 'avg_pool', className: 'AveragePooling2D', - details: '7x7 pool size', + details: '7x7 pool size, 7x7 strides, border mode valid', row: 165, col: 1 }, diff --git a/demos/src/resnet50.css b/demos/src/resnet50.css index 449cccc..3cc28b4 100644 --- a/demos/src/resnet50.css +++ b/demos/src/resnet50.css @@ -66,7 +66,7 @@ .loading-indicator { position: absolute; top: 0; - left: 0; + left: -10px; display: flex; flex-direction: column; align-self: flex-start; @@ -152,7 +152,8 @@ } .architecture-container { - width: 800px; + min-width: 700px; + max-width: 900px; margin: 0 auto; position: relative; @@ -170,6 +171,7 @@ display: flex; align-items: center; justify-content: center; + padding: 5px; .layer { display: inline-block; diff --git a/demos/src/resnet50.template.html b/demos/src/resnet50.template.html index 2ac56df..123ae8a 100644 --- a/demos/src/resnet50.template.html +++ b/demos/src/resnet50.template.html @@ -6,6 +6,14 @@
    Loading...{{ loadingProgress }}%
    +
    + +
    + closeCLOSE +
    +
    Enter a valid image URL or select an image from the dropdown: