deeplearning4jUiAssets.js.train.model-layers.js Maven / Gradle / Ivy
The newest version!
/*
* ******************************************************************************
* *
* *
* * This program and the accompanying materials are made available under the
* * terms of the Apache License, Version 2.0 which is available at
* * https://www.apache.org/licenses/LICENSE-2.0.
* *
* * See the NOTICE file distributed with this work for additional
* * information regarding copyright ownership.
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* * License for the specific language governing permissions and limitations
* * under the License.
* *
* * SPDX-License-Identifier: Apache-2.0
* *****************************************************************************
*/
$(function () { // on dom ready
$('#layers').cytoscape({
layout: {
name: 'dagre',
padding: 10
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'shape': 'data(faveShape)',
'width': 'mapData(weight, 40, 80, 20, 60)',
'content': 'data(name)',
'text-valign': 'center',
'text-outline-width': 2,
'text-outline-color': 'data(faveColor)',
'background-color': 'data(faveColor)',
'color': '#fff'
})
.selector(':selected')
.css({
'border-width': 3,
'border-color': '#333'
})
.selector('edge')
.css({
'curve-style': 'bezier',
'opacity': 0.666,
'width': 'mapData(strength, 70, 100, 2, 6)',
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'circle',
'line-color': 'data(faveColor)',
'source-arrow-color': 'data(faveColor)',
'target-arrow-color': 'data(faveColor)'
})
.selector('edge.questionable')
.css({
'line-style': 'dotted',
'target-arrow-shape': 'diamond'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{
data: {
id: '0',
name: 'Input',
weight: 100,
faveColor: '#6FB1FC',
faveShape: 'triangle'
// , href: '?layer=0'
}
},
{
data: {
id: '1',
name: 'Dense',
weight: 100,
faveColor: '#EDA1ED',
faveShape: 'rectangle',
// href: '?layer=1'
}
},
{
data: {
id: '2',
name: 'Convolution',
weight: 100,
faveColor: '#86B342',
faveShape: 'rectangle',
href: '#'
}
},
{data: {id: '3', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '4', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '5', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '6', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '7', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '8', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '9', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '10', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '11', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '12', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '13', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '14', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '15', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '16', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '17', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '18', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '19', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '20', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '21', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '22', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
{data: {id: '23', name: 'Output', weight: 100, faveColor: '#FF0000', faveShape: 'ellipse', href: '#'}}
],
edges: [
{data: {source: '0', target: '1', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '1', target: '2', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '2', target: '3', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '3', target: '4', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '4', target: '5', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '5', target: '6', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '6', target: '7', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '7', target: '8', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '8', target: '9', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '9', target: '10', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '10', target: '11', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '11', target: '12', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '12', target: '13', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '13', target: '14', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '14', target: '15', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '15', target: '16', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '16', target: '17', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '17', target: '18', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '18', target: '19', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '19', target: '20', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '20', target: '21', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '21', target: '22', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '22', target: '23', faveColor: '#A9A9A9', strength: 100}},
{data: {source: '23', target: '24', faveColor: '#A9A9A9', strength: 100}}
]
},
ready: function () {
window.cy = this;
cy.panningEnabled(true);
cy.autoungrabify(true);
cy.maxZoom(5);
cy.minZoom(1);
// cy.wheelSensitivity(0);
}
});
// cy.on('tap', 'node', function () {
// window.location.href = this.data('href');
// });
cy.on('click', 'node', function (evt) {
console.log('CLICKED: id=' + this.id() + ", name=" + this.data.name);
console.log('CLICKED: id=' + this.id() + ", name=" + this.name);
});
}); // on dom ready
© 2015 - 2024 Weber Informatics LLC | Privacy Policy