diff --git a/ide/static/css/searchbar_style.css b/ide/static/css/searchbar_style.css index d7e3c537a..6edb5eb88 100644 --- a/ide/static/css/searchbar_style.css +++ b/ide/static/css/searchbar_style.css @@ -9,6 +9,13 @@ float: left; } +#model-search-icon { + position: relative; + left: 0px; + top: 0px; + float: left; +} + #layer-search-icon:hover { cursor: pointer; } @@ -28,6 +35,21 @@ transition: 0.3s; } +#model-search-input { + position: relative; + top: 0px; + left: 0px; + width: 60%; + height: 25px; + font-size: 15px; + background: none; + border: none; + color: rgb(69, 80, 97); + outline: none; + opacity: 1; + transition: 0.3s; +} + .filter-button { height: 24px !important; } diff --git a/ide/static/css/zoo.css b/ide/static/css/zoo.css new file mode 100644 index 000000000..a7b8516aa --- /dev/null +++ b/ide/static/css/zoo.css @@ -0,0 +1,101 @@ +body { + overflow-x: hidden; + } + +#wrapper { + padding-left: 250px; +} + +#sidebar-wrapper { + z-index: 1000; + position: fixed; + left: 200px; + top: 0px; + width: 200px; + height: 110%; + margin-left: -200px; + overflow-y: auto; + background: #F5F5F5; +} + + +#page-content-wrapper { + width: 100%; + padding: 20px; + padding-left: 200px; + position: relative; +} + +.sidebar-content { + min-height: 80vh; + height: 0px; + overflow-y: scroll; +} + +.sidebar-nav { + position: absolute; + top: 0; + width: 250px; + margin: 0; + padding: 0; + list-style: none; +} + +.sidebar-nav li { + text-indent: 20px; + line-height: 40px; + cursor: pointer; +} + +.sidebar-nav li a { + display: block; + text-decoration: none; + color: #000000; +} + +.sidebar-nav li a:hover { + text-decoration: none; + color: #000; +} + +.sidebar-nav li a:active, +.sidebar-nav li a:focus { + text-decoration: none; +} + +.sidebar-nav > .sidebar-brand { + height: 65px; + font-size: 18px; + line-height: 60px; +} + +.sidebar-nav > .sidebar-brand a { + color: #000000; +} + + +.sidebar-content img { + width: 60%; +} + +.filterbar-container { + margin-top: 24px; + margin-left: 16px; +} + +.wordwrap { + white-space: pre-wrap; /* CSS3 */ + white-space: -moz-pre-wrap; /* Firefox */ + white-space: -pre-wrap; /* Opera <7 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* IE */ +} + +.caption { + height: 80px; +} + +.bold { + background: #cdcfd2; + font-weight: bold; +} diff --git a/ide/static/img/zoo/All_CNN.png b/ide/static/img/zoo/All_CNN.png new file mode 100644 index 000000000..8f601e408 Binary files /dev/null and b/ide/static/img/zoo/All_CNN.png differ diff --git a/ide/static/img/zoo/CoCo_Caption.png b/ide/static/img/zoo/CoCo_Caption.png new file mode 100644 index 000000000..b228d097c Binary files /dev/null and b/ide/static/img/zoo/CoCo_Caption.png differ diff --git a/ide/static/img/zoo/DAE_MNIST.png b/ide/static/img/zoo/DAE_MNIST.png new file mode 100644 index 000000000..f8d987b52 Binary files /dev/null and b/ide/static/img/zoo/DAE_MNIST.png differ diff --git a/ide/static/img/zoo/GoogleNet.png b/ide/static/img/zoo/GoogleNet.png new file mode 100644 index 000000000..0b87f0e4d Binary files /dev/null and b/ide/static/img/zoo/GoogleNet.png differ diff --git a/ide/static/img/zoo/HED.png b/ide/static/img/zoo/HED.png new file mode 100644 index 000000000..a388717b1 Binary files /dev/null and b/ide/static/img/zoo/HED.png differ diff --git a/ide/static/img/zoo/SENet.png b/ide/static/img/zoo/SENet.png new file mode 100644 index 000000000..cd6b2b6b3 Binary files /dev/null and b/ide/static/img/zoo/SENet.png differ diff --git a/ide/static/img/zoo/Squeezenet.png b/ide/static/img/zoo/Squeezenet.png new file mode 100644 index 000000000..2914502f6 Binary files /dev/null and b/ide/static/img/zoo/Squeezenet.png differ diff --git a/ide/static/img/zoo/VQA.png b/ide/static/img/zoo/VQA.png new file mode 100644 index 000000000..147841a65 Binary files /dev/null and b/ide/static/img/zoo/VQA.png differ diff --git a/ide/static/img/zoo/VQA2.png b/ide/static/img/zoo/VQA2.png new file mode 100644 index 000000000..687fc9182 Binary files /dev/null and b/ide/static/img/zoo/VQA2.png differ diff --git a/ide/static/img/zoo/ZF_UNET_224.png b/ide/static/img/zoo/ZF_UNET_224.png new file mode 100644 index 000000000..78713ca8f Binary files /dev/null and b/ide/static/img/zoo/ZF_UNET_224.png differ diff --git a/ide/static/img/zoo/alexnet.png b/ide/static/img/zoo/alexnet.png new file mode 100644 index 000000000..f3b8249c4 Binary files /dev/null and b/ide/static/img/zoo/alexnet.png differ diff --git a/ide/static/img/zoo/cifar10_full.png b/ide/static/img/zoo/cifar10_full.png new file mode 100644 index 000000000..e5d6d9ec1 Binary files /dev/null and b/ide/static/img/zoo/cifar10_full.png differ diff --git a/ide/static/img/zoo/densenet.png b/ide/static/img/zoo/densenet.png new file mode 100644 index 000000000..642981e2d Binary files /dev/null and b/ide/static/img/zoo/densenet.png differ diff --git a/ide/static/img/zoo/fcn.png b/ide/static/img/zoo/fcn.png new file mode 100644 index 000000000..20c1839aa Binary files /dev/null and b/ide/static/img/zoo/fcn.png differ diff --git a/ide/static/img/zoo/fcn2.png b/ide/static/img/zoo/fcn2.png new file mode 100644 index 000000000..51c363e90 Binary files /dev/null and b/ide/static/img/zoo/fcn2.png differ diff --git a/ide/static/img/zoo/imdb_cnn_lstm.png b/ide/static/img/zoo/imdb_cnn_lstm.png new file mode 100644 index 000000000..20d194a85 Binary files /dev/null and b/ide/static/img/zoo/imdb_cnn_lstm.png differ diff --git a/ide/static/img/zoo/lenet.png b/ide/static/img/zoo/lenet.png new file mode 100644 index 000000000..f38d7f888 Binary files /dev/null and b/ide/static/img/zoo/lenet.png differ diff --git a/ide/static/img/zoo/mlpVQA.png b/ide/static/img/zoo/mlpVQA.png new file mode 100644 index 000000000..e6a443e92 Binary files /dev/null and b/ide/static/img/zoo/mlpVQA.png differ diff --git a/ide/static/img/zoo/pix2pix.png b/ide/static/img/zoo/pix2pix.png new file mode 100644 index 000000000..8c55f0a8b Binary files /dev/null and b/ide/static/img/zoo/pix2pix.png differ diff --git a/ide/static/img/zoo/resnet101.png b/ide/static/img/zoo/resnet101.png new file mode 100644 index 000000000..62651295d Binary files /dev/null and b/ide/static/img/zoo/resnet101.png differ diff --git a/ide/static/img/zoo/seq2seq_lang.png b/ide/static/img/zoo/seq2seq_lang.png new file mode 100644 index 000000000..67fb25db1 Binary files /dev/null and b/ide/static/img/zoo/seq2seq_lang.png differ diff --git a/ide/static/img/zoo/siamese_mnist.png b/ide/static/img/zoo/siamese_mnist.png new file mode 100644 index 000000000..41d91b32f Binary files /dev/null and b/ide/static/img/zoo/siamese_mnist.png differ diff --git a/ide/static/img/zoo/simpleNet.png b/ide/static/img/zoo/simpleNet.png new file mode 100644 index 000000000..f76afc11e Binary files /dev/null and b/ide/static/img/zoo/simpleNet.png differ diff --git a/ide/static/img/zoo/textGeneration.png b/ide/static/img/zoo/textGeneration.png new file mode 100644 index 000000000..79176c9c9 Binary files /dev/null and b/ide/static/img/zoo/textGeneration.png differ diff --git a/ide/static/img/zoo/v3.png b/ide/static/img/zoo/v3.png new file mode 100644 index 000000000..6b764f619 Binary files /dev/null and b/ide/static/img/zoo/v3.png differ diff --git a/ide/static/img/zoo/v4.png b/ide/static/img/zoo/v4.png new file mode 100644 index 000000000..3482aa0b2 Binary files /dev/null and b/ide/static/img/zoo/v4.png differ diff --git a/ide/static/img/zoo/vanilla.png b/ide/static/img/zoo/vanilla.png new file mode 100644 index 000000000..5d11c50a3 Binary files /dev/null and b/ide/static/img/zoo/vanilla.png differ diff --git a/ide/static/img/zoo/vgg16.png b/ide/static/img/zoo/vgg16.png new file mode 100644 index 000000000..e6b033531 Binary files /dev/null and b/ide/static/img/zoo/vgg16.png differ diff --git a/ide/static/img/zoo/yolo_net.png b/ide/static/img/zoo/yolo_net.png new file mode 100644 index 000000000..a5d4a4c54 Binary files /dev/null and b/ide/static/img/zoo/yolo_net.png differ diff --git a/ide/static/js/modelElement.js b/ide/static/js/modelElement.js index bd4991a70..dbf326e3b 100644 --- a/ide/static/js/modelElement.js +++ b/ide/static/js/modelElement.js @@ -7,13 +7,14 @@ class ModelElement extends React.Component { render() { if (this.props.children){ return ( - this.props.importNet('sample'+this.props.framework, this.props.id)} - > - {this.props.children} - +
+
this.props.importNet('sample'+this.props.framework, this.props.id)}> + +
+

{this.props.displayName}

+
+
+
); } else @@ -25,7 +26,8 @@ ModelElement.propTypes = { importNet: React.PropTypes.func, framework: React.PropTypes.string.isRequired, children: React.PropTypes.string.isRequired, - id: React.PropTypes.string.isRequired + id: React.PropTypes.string.isRequired, + displayName: React.PropTypes.string.isRequired }; export default ModelElement; diff --git a/ide/static/js/modelZoo.js b/ide/static/js/modelZoo.js index 320360427..a407eaf01 100644 --- a/ide/static/js/modelZoo.js +++ b/ide/static/js/modelZoo.js @@ -2,80 +2,184 @@ import React from 'react'; import ModelElement from './modelElement'; class ModelZoo extends React.Component { + constructor(props) { + super(props); + this.mouseClick = this.mouseClick.bind(this); + } + mouseClick(event, id) { + this.refs.recognition.className = "hide"; + this.refs.detection.className = "hide"; + this.refs.retrieval.className = "hide"; + this.refs.seq2seq.className = "hide"; + this.refs.caption.className = "hide"; + this.refs.segmentation.className = "hide"; + this.refs.vqa.className = "hide"; + $('#sidebar-nav li a').removeClass(); + event.currentTarget.className = "bold"; + if (id == "all") { + this.refs.recognition.className = " "; + this.refs.detection.className = " "; + this.refs.retrieval.className = " "; + this.refs.seq2seq.className = " "; + this.refs.caption.className = " "; + this.refs.segmentation.className = " "; + this.refs.vqa.className = " "; + } + else if (id == "recognition") + { + this.refs.recognition.className = " "; + } + else if (id == "detection") + { + this.refs.detection.className = " "; + } + else if (id == "retrieval") + { + this.refs.retrieval.className = " "; + } + else if (id == "seq2seq") + { + this.refs.seq2seq.className = " "; + } + else if (id == "caption") + { + this.refs.caption.className = " "; + } + else if (id == "segmentation") + { + this.refs.segmentation.className = " "; + } + else if (id == "vqa") + { + this.refs.vqa.className = " "; + } + } + + componentDidMount() { + let filter = (pattern) => { + let layerCompability = (searchQuery, layerName) => { + let j = 0; + let seq = []; + let full_match = true; + for (let i = 0; i < searchQuery.length; i++) { + while (j < layerName.length && layerName[j].toLowerCase() != searchQuery[i].toLowerCase()) { + seq[j] = false; + j++; + } + if (j < layerName.length && layerName[j].toLowerCase() == searchQuery[i].toLowerCase()) { + seq[j] = true; + j++; + } else { + full_match = false; + } + } + return { + match: seq, + full_match: full_match + }; + } + for (let elem of $('.col-sm-6')) { + let sub = elem.id; + if (!sub) continue; + let resp = layerCompability(pattern, sub); + if (resp.full_match) { + elem.style.display = 'block'; + } else { + elem.style.display = 'none'; + } + } + } + $('#model-search-input').keyup((e) => { + filter(e.target.value); + }); + } + render() { + return ( -
-
-
-

Recognition

- MNIST LeNet -
- Cifar10 CNN -
- AlexNet -
- All CNN -
- VGG 16 -
- DenseNet -
- GoogLeNet -
- ResNet 101 -
- Inception V3 -
- Inception V4 -
- Squeezenet -
- SENet -
- IMDB CNN LSTM -
- SimpleNet +
+
+ -
-

Detection

- Vanilla CNN -
- FCN32 Pascal -
- YOLONet -
- HED -

Retrieval

- MNIST Siamese +
+
+
+
+ + + + + + + + + + + + + + +
+
+ + + + +
+
+ +
+
+ + + +
-
-

Seq2Seq

- Text Generation -
- Seq2Seq Translation -
- Pix2Pix -
- Denoising Auto-Encoder +
+
-
-

Caption

- CoCo Caption -

Segmentation

- Semantic Segmentation -
- UNET +
+ +
-
-

VQA

- VQA -
- VQA2 -
- VQS +
+ + +
+
); } } diff --git a/ide/templates/index.html b/ide/templates/index.html index 7423bd53f..80ea64972 100644 --- a/ide/templates/index.html +++ b/ide/templates/index.html @@ -13,6 +13,7 @@ rel="stylesheet"> + diff --git a/requirements/common.txt b/requirements/common.txt index 5422a4c46..e3986ecda 100644 --- a/requirements/common.txt +++ b/requirements/common.txt @@ -1,7 +1,7 @@ django==1.10.2 channels==1.1.6 celery==3.1.18 -asgi-redis==1.2.1 +asgi-redis==1.4.3 pyaml==15.8.2 django-allauth==0.30.0 psycopg2==2.7.3