wassname/keras-js
1
0
Fork 0
mirror of https://github.com/wassname/keras-js.git synced 2026-09-09 11:25:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

update demos

Browse Source
This commit is contained in:
Leon Chen
2016-10-11 00:29:54 -04:00
parent 130b346b5c
commit 5fa9f9e486
10 changed files with 142 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demos/src/_variables.css
-1
View File
@@ -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;
demos/src/image-urls/index.js
+13 -1
View File
@@ -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' }
]
demos/src/index.css
+37 -1
View File
@@ -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 {
demos/src/index.js
+4 -1
View File
@@ -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
demos/src/menu.template.html
+6
View File
@@ -25,6 +25,12 @@
<span class="menu-item-subheading">ImageNet</span>
</a>
</li>
<li v-bind:class="{ 'active': currentView === 'inception-v3' }">
<a href="#/inception-v3">
<span class="menu-item-heading">Inception V3</span>
<span class="menu-item-subheading">ImageNet</span>
</a>
</li>
</ul>
<p class="menu-label">
Links
demos/src/mnist-cnn.template.html
+8
View File
@@ -6,6 +6,14 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="info-panel">
<div class="info-panel-text">
</div>
<div class="info-panel-close">
<i class="material-icons">close</i>CLOSE
</div>
</div>
<div class="columns input-output" v-if="!modelLoading">
<div class="column input-column">
<div class="input-container">
demos/src/mnist-vae.template.html
+8
View File
@@ -6,6 +6,14 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="info-panel">
<div class="info-panel-text">
</div>
<div class="info-panel-close">
<i class="material-icons">close</i>CLOSE
</div>
</div>
<div class="columns input-output" v-if="!modelLoading">
<div class="column input-column">
<div class="input-container">
demos/src/resnet50-arch.js
+54 -54
View File
@@ -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
},
demos/src/resnet50.css
+4 -2
View File
@@ -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;
demos/src/resnet50.template.html
+8
View File
@@ -6,6 +6,14 @@
<div class="loading-progress" v-if="modelLoading && loadingProgress < 100">
Loading...{{ loadingProgress }}%
</div>
<div class="info-panel">
<div class="info-panel-text">
<a href="https://www.flickr.com/search/?text=&license=2%2C3%2C4%2C5%2C6%2C9&sort=interestingness-desc">Flickr creative commons</a>.
</div>
<div class="info-panel-close">
<i class="material-icons">close</i>CLOSE
</div>
</div>
<div class="top-container" v-if="!modelLoading">
<div class="input-container">
<div class="input-label">Enter a valid image URL or select an image from the dropdown:</div>