Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GCI "Filter layers that are exclusive to selected frameworks" #418

Merged
merged 28 commits into from
Nov 7, 2018
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
03115b8
Add files via upload
ZeroZeroJedenJeden Nov 1, 2018
807afb6
Add files via upload
ZeroZeroJedenJeden Nov 1, 2018
1d4a783
Update adding_new_layers.md
ZeroZeroJedenJeden Nov 1, 2018
db576e3
Update adding_new_layers.md
ZeroZeroJedenJeden Nov 1, 2018
7e197ff
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
555e8f1
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
071aebd
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
4ad5a1f
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
3503fad
Update adding_new_layers.md
ZeroZeroJedenJeden Nov 2, 2018
5eff333
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
94ffe32
Add files via upload
ZeroZeroJedenJeden Nov 2, 2018
e13de94
Update filterbar.js
ZeroZeroJedenJeden Nov 2, 2018
6223c70
Add files via upload
ZeroZeroJedenJeden Nov 3, 2018
603cef9
Add files via upload
ZeroZeroJedenJeden Nov 3, 2018
ec4781c
Add files via upload
ZeroZeroJedenJeden Nov 3, 2018
22c835d
Delete filterbar.js
ZeroZeroJedenJeden Nov 3, 2018
24d347a
Delete pane.js
ZeroZeroJedenJeden Nov 3, 2018
244980b
Delete content.js
ZeroZeroJedenJeden Nov 3, 2018
c61dde2
Add files via upload
ZeroZeroJedenJeden Nov 3, 2018
6b48678
Add files via upload
ZeroZeroJedenJeden Nov 3, 2018
e053568
Update content.js
ZeroZeroJedenJeden Nov 3, 2018
cd40ef0
Add files via upload
ZeroZeroJedenJeden Nov 4, 2018
ad4dfa9
Add files via upload
ZeroZeroJedenJeden Nov 5, 2018
18532a0
Add files via upload
ZeroZeroJedenJeden Nov 5, 2018
bc81f8d
Delete filterbar.js
ZeroZeroJedenJeden Nov 5, 2018
702aca3
Add files via upload
ZeroZeroJedenJeden Nov 6, 2018
9ba2d18
Add files via upload
ZeroZeroJedenJeden Nov 6, 2018
95d250c
Merge branch 'master' into master
Ram81 Nov 7, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ide/static/js/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import UrlImportModal from './urlImportModal';
import UserProfile from './UserProfile';
import UpdateHistoryModal from './updateHistoryModal';
import CommentSidebar from './CommentSidebar';
import FilterBar from './filterbar';
import $ from 'jquery'

const infoStyle = {
Expand Down Expand Up @@ -1310,6 +1311,7 @@ class Content extends React.Component {
<Login setUserId={this.setUserId} setUserName={this.setUserName}></Login>
<h5 className="sidebar-heading insert-layer-title">
<input id="layer-search-input" placeholder="Search for layer"></input>
<FilterBar />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please resolve the below webpack error (line 1314):

content.js:1314:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs

<div id="insert-layer-sign">INSERT LAYER</div>
<i className="material-icons" id="layer-search-icon">search</i>
</h5>
Expand Down
100 changes: 100 additions & 0 deletions ide/static/js/filterbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React from 'react';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename the file to filterBar.js

import $ from 'jquery'

class FilterBar extends React.Component {
constructor(props) {
super(props);
this.changeEvent= this.changeEvent.bind(this);
}

changeEvent() {
var KerasLayers = ["RNN_Button", "GRU_Button", "LSTM_Button", "Embed_Button", "Eltwise_Button",
"ThresholdedReLU", "ReLU_Button", "PReLU_Button", "Softmax_Button", "BatchNorm_Button",
"GaussianNoise_Button", "GaussianDropout_Button", "AlphaDropout_Button", "TimeDistributed_Button",
"Bidirectional_Button", "RepeatVector_Button", "Masking_Button", "Permute_Button", "InnerProduct_Button",
"Deconvolution_Button", "Regularization_Button", "Softsign_Button", "Upsample_Button", "Pooling_Button",
"LocallyConnected_Button", "Crop_Button"];
var TensorFlowLayers = ["RNN_Button", "GRU_Button", "LSTM_Button", "Embed_Button", "Eltwise_Button",
"ThresholdedReLU", "ReLU_Button", "PReLU_Button", "Softmax_Button", "BatchNorm_Button", "GaussianNoise_Button",
"GaussianDropout_Button", "AlphaDropout_Button", "TimeDistributed_Button", "Bidirectional_Button",
"RepeatVector_Button", "Masking_Button", "Permute_Button", "InnerProduct_Button", "Deconvolution_Button",
"Regularization_Button", "Softsign_Button", "Upsample_Button", "Pooling_Button", "LocallyConnected_Button",
"SoftmaxWithLoss_Button", "SigmoidCrossEntropyLoss_Button", "Crop_Button", "DepthwiseConv_Button"];
var CaffeLayers = ["ImageData_Button", "HDF5Data_Button", "HDF5Output_Button", "Input_Button", "WindowData_Button",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a newline above this

"MemoryData_Button", "DummyData_Button", "Convolution_Button", "Pooling_Button", "SPP_Button", "Deconvolution_Button",
"Recurrent_Button", "RNN_Button", "LSTM_Button", "LRN_Button", "MVN_Button", "BatchNorm_Button",
"InnerProduct_Button", "Dropout_Button", "Embed_Button", "ReLU_Button", "PReLU_Button", "ELU_Button",
"Sigmoid_Button", "TanH_Button", "AbsVal_Button", "Power_Button", "Exp_Button", "Log_Button", "BNLL_Button",
"Threshold_Button", "Bias_Button", "Scale_Button", "Softplus_Button", "HardSigmoid_Button", "Flatten_Button",
"Reshape_Button", "BatchReindex_Button", "Split_Button", "Concat_Button", "Eltwise_Button", "Filter_Button",
"Reduction_Button", "Silence_Button", "ArgMax_Button", "Softmax_Button", "MultinomialLogisticLoss_Button",
"InfogainLoss_Button", "SoftmaxWithLoss_Button", "EuclideanLoss_Button", "HingeLoss_Button",
"SigmoidCrossEntropyLoss_Button", "Accuracy_Button", "ContrastiveLoss_Button", "Data_Button", "Crop_Button"];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You forgot Threshold Relu, Slice, Python layers. Apart from these, I didn't find any layers that were missed.

var CheckBoxA = document.getElementById("CheckBoxA");
var CheckBoxB = document.getElementById("CheckBoxB");
var CheckBoxC = document.getElementById("CheckBoxC");
var visible = [];
if(CheckBoxA.checked == false & CheckBoxB.checked == false & CheckBoxC.checked == false){
for (let elem of $('.drowpdown-button')) {
elem.classList.remove("hide");
}
}
if (CheckBoxA.checked == true){
visible = visible.concat(KerasLayers);
}
if (CheckBoxB.checked == true){
visible = visible.concat(TensorFlowLayers);
}
if (CheckBoxC.checked == true){
visible = visible.concat(CaffeLayers);
}

for (let elem of $('.drowpdown-button')) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Uneven Indentation

for (let j = 0; j < visible.length; j++){
let id = elem.id;
if(id == visible[j]){
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after ) and before {

elem.classList.remove("hide");
j = visible.length + 1;
}else{
Copy link
Member

@Ram81 Ram81 Nov 5, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put else on newline and add space after else

elem.classList.add("hide");
}
}
}

}

render() {
return (
<div>
<div className="form-group pull-right">
<div className="dropdown">
<button id="topbar-icon" className="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span className="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span className="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
<span className="glyphicon glyphicon-filter" aria-hidden="true"></span>

I think this should look better

</button>
<ul className="dropdown-menu pull-right">
<li>
<a className="btn">
<input type="checkbox" id="CheckBoxA" value="A" onChange={this.changeEvent} />
<label>Keras</label>
</a>
</li>
<li>
<a className="btn">
<input type="checkbox" id="CheckBoxB" value="B" onChange={this.changeEvent} />
<label>Tensorflow</label>
</a>
</li>
<li>
<a className="btn">
<input type="checkbox" id="CheckBoxC" value="C" onChange={this.changeEvent} />
<label>Caffe</label>
</a>
</li>
</ul>
</div>
</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please resolve the below webpack error (lines 96 and 97):

filterbar.js:96:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs
filterbar.js:97:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs

)
}
}
export default FilterBar;
101 changes: 100 additions & 1 deletion ide/static/js/pane.js
Original file line number Diff line number Diff line change
Expand Up @@ -461,10 +461,109 @@ class Pane extends React.Component {
</div>
</div>


);
}
}

// class FilterBar extends React.Component {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove comments if you're sure about your changes.

// constructor(props) {
// super(props);
// this.changeEvent= this.changeEvent.bind(this);
// }

// changeEvent() {
// var KerasLayers = ["RNN_Button", "GRU_Button", "LSTM_Button", "Embed_Button", "Eltwise_Button",
// "ThresholdedReLU", "ReLU_Button", "PReLU_Button", "Softmax_Button", "BatchNorm_Button",
// "GaussianNoise_Button", "GaussianDropout_Button", "AlphaDropout_Button", "TimeDistributed_Button",
// "Bidirectional_Button", "RepeatVector_Button", "Masking_Button", "Permute_Button", "InnerProduct_Button",
// "Deconvolution_Button", "Regularization_Button", "Softsign_Button", "Upsample_Button", "Pooling_Button",
// "LocallyConnected_Button", "Crop_Button"];
// var TensorFlowLayers = ["RNN_Button", "GRU_Button", "LSTM_Button", "Embed_Button", "Eltwise_Button",
// "ThresholdedReLU", "ReLU_Button", "PReLU_Button", "Softmax_Button", "BatchNorm_Button", "GaussianNoise_Button",
// "GaussianDropout_Button", "AlphaDropout_Button", "TimeDistributed_Button", "Bidirectional_Button",
// "RepeatVector_Button", "Masking_Button", "Permute_Button", "InnerProduct_Button", "Deconvolution_Button",
// "Regularization_Button", "Softsign_Button", "Upsample_Button", "Pooling_Button", "LocallyConnected_Button",
// "SoftmaxWithLoss_Button", "SigmoidCrossEntropyLoss_Button", "Crop_Button", "DepthwiseConv_Button"];
// var CaffeLayers = ["ImageData_Button", "HDF5Data_Button", "HDF5Output_Button", "Input_Button", "WindowData_Button",
// "MemoryData_Button", "DummyData_Button", "Convolution_Button", "Pooling_Button", "SPP_Button", "Deconvolution_Button",
// "Recurrent_Button", "RNN_Button", "LSTM_Button", "LRN_Button", "MVN_Button", "BatchNorm_Button",
// "InnerProduct_Button", "Dropout_Button", "Embed_Button", "ReLU_Button", "PReLU_Button", "ELU_Button",
// "Sigmoid_Button", "TanH_Button", "AbsVal_Button", "Power_Button", "Exp_Button", "Log_Button", "BNLL_Button",
// "Threshold_Button", "Bias_Button", "Scale_Button", "Softplus_Button", "HardSigmoid_Button", "Flatten_Button",
// "Reshape_Button", "BatchReindex_Button", "Split_Button", "Concat_Button", "Eltwise_Button", "Filter_Button",
// "Reduction_Button", "Silence_Button", "ArgMax_Button", "Softmax_Button", "MultinomialLogisticLoss_Button",
// "InfogainLoss_Button", "SoftmaxWithLoss_Button", "EuclideanLoss_Button", "HingeLoss_Button",
// "SigmoidCrossEntropyLoss_Button", "Accuracy_Button", "ContrastiveLoss_Button", "Data_Button", "Crop_Button"];
// var CheckBoxA = document.getElementById("CheckBoxA");
// var CheckBoxB = document.getElementById("CheckBoxB");
// var CheckBoxC = document.getElementById("CheckBoxC");
// var visible = [];
// if(CheckBoxA.checked == false & CheckBoxB.checked == false & CheckBoxC.checked == false){
// for (let elem of $('.drowpdown-button')) {
// elem.classList.remove("hide");
// }
// }
// if (CheckBoxA.checked == true){
// visible = visible.concat(KerasLayers);
// }
// if (CheckBoxB.checked == true){
// visible = visible.concat(TensorFlowLayers);
// }
// if (CheckBoxC.checked == true){
// visible = visible.concat(CaffeLayers);
// }

// for (let elem of $('.drowpdown-button')) {
// for (let j = 0; j < visible.length; j++){
// let id = elem.id;
// if(id == visible[j]){
// elem.classList.remove("hide");
// j = visible.length + 1;
// }else{
// elem.classList.add("hide");
// }
// }
// }

// }

// render() {
// return (
// <div>
// <div className="form-group">
// <div className="filter dropdown">
// <button id="fiter-button" className="filter btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
// <span className="glyphicon glyphicon-list-alt" aria-hidden="true"><label>Filters</label></span>
// </button>
// <ul className="dropdown-menu">
// <li>
// <a className="btn">
// <input type="checkbox" id="CheckBoxA" value="A" onChange={this.changeEvent} />
// <label>Keras</label>
// </a>
// </li>
// <li>
// <a className="btn">
// <input type="checkbox" id="CheckBoxB" value="B" onChange={this.changeEvent} />
// <label>Tensorflow</label>
// </a>
// </li>
// <li>
// <a className="btn">
// <input type="checkbox" id="CheckBoxC" value="C" onChange={this.changeEvent} />
// <label>Caffe</label>
// </a>
// </li>
// </ul>
// </div>
// </div>
// </div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please resolve the below webpack error (lines 560 and 561). Just removing the comments would do as well, but mentioning it anyway:

pane.js:560:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs
pane.js:561:2  error  Mixed spaces and tabs  no-mixed-spaces-and-tabs

// )
// }
// }



Pane.propTypes = {
handleClick: React.PropTypes.func.isRequired,
setDraggingLayer: React.PropTypes.func.isRequired
Expand Down
2 changes: 1 addition & 1 deletion ide/static/js/paneElement.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class PaneElement extends React.Component {
render() {
return (
<div
className="btn btn-block drowpdown-button"
className="btn btn-block drowpdown-button "
draggable="true"
onClickCapture={this.props.handleClick}
onDragStart={this.drag}
Expand Down
3 changes: 2 additions & 1 deletion tutorials/adding_new_layers.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@

- Now, add a new line for the layer you just added in ```data.js``` in the section of Activation/Neuron Layer, because this layer belongs to this category.
- ```<PaneElement handleClick={this.props.handleClick} id="your_layer_id">your_layer_name</PaneElement>``` this line will make your layer visible in Fabrik.
- Open [filterbar.js](https://github.com/Cloud-CV/Fabrik/blob/master/ide/static/js/filterbar.js) in a text editor, add ```"your_layer_id"``` to 1(or more) of 3 framework filter array ```var KerasLayers = [...]```, ```var TensorFlowLayers = [...]``` or ```var CaffeLayers = [...]```. This should be like this ```var KerasLayers = ["RNN_Button", "GRU_Button", "your_layer_id"]```. This arrays are placed inside ```changeEvent() {}``` function.

### Adding layer handling to the backend

Expand Down Expand Up @@ -87,4 +88,4 @@

- Check the new layer inside the category you added it. See if all the parameters are properly displayed and usable as you wanted.
- If everything is working fine commit your changes and push it to your fork then make a Pull Request.
- Congratulations! Happy contributing :-)
- Congratulations! Happy contributing :-)