整理桌面

This commit is contained in:
2022-04-10 00:37:53 +08:00
parent 82e3f2623f
commit e25c8bb318
728 changed files with 986384 additions and 16 deletions

81
node_modules/neataptic/graph/README.md generated vendored Normal file
View File

@@ -0,0 +1,81 @@
## Drawing a graph
Visualising neural networks gives insight on which node have a larger effect on the output. And especially in evolving neural networks, it shows the characteristics of an ideal network. Setting up a graph is fairly easy:
#### Index.html
The html file should include [d3v3](http://d3js.org/d3.v3.min.js) and [webcola](http://marvl.infotech.monash.edu/webcola/cola.v3.min.js). Ofcourse you should also provide the neataptic.js file and the graph.js file from above. This is an example of the html file:
```html
<html>
<head>
<script src="libs/d3v3.js"></script>
<script src="libs/webcola.js"></script>
<script src="/libs/neataptic.js"></script>
<script src="/libs/graph.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="/libs/graph.css">
</head>
<body>
<div class="container">
<div class="row">
<svg class="draw" width="1000px" height="1000px"/>
</div>
</div>
</body>
</html>
```
#### Script.js
If you want to work from a script, make sure to use the jquery `$( document ).ready()` function. Drawing the graph looks something like this then:
```javascript
// Global var
var network;
$( document ).ready(function() {
network = new neataptic.Architect.Perceptron(2, 10, 6, 5, 35, 1);
drawGraph(network.graph(1000, 1000), '.draw');
});
```
You can draw a graph using:
```javascript
drawGraph(data, dom_element);
```
Retrieve your networks graph:
```javascript
var data = myNetwork.graph(width, height);
```
#### Graph.js
In the graph.js file, make sure to set the `WIDTH` and `HEIGHT` to the desired amount.
```javascript
[...]
var NODE_RADIUS = 7; // radius of circles on graph
var REPEL_FORCE = 10; // force power between circles
var LINK_DISTANCE = 100; // length of a connection
var WIDTH = 1000; // width of your graph
var HEIGHT = 500; // height of your graph
[...]
```
#### Graph.css
Make sure to include graph.css in your html file. This makes sure your connections are visible and makes the nodes more eye-appealing.
## Disable constraints
Normally graphs look like the network on the left. If you want a more fluid design, disable constraints, and you'll get a graph like on the right:
<img src="https://i.gyazo.com/d22470d901ed9afb792e106151ed7e95.png" width="50%"/><img src="https://i.gyazo.com/8626b66afc8881ab6e535ed9c00d46cf.png" width="50%"/>
In `graph.js`, remove line 60:
```js
.constraints(graph.constraints) // remove this line
```
This basically makes the input and output nodes less distinguishable.

97
node_modules/neataptic/graph/graph.css generated vendored Normal file
View File

@@ -0,0 +1,97 @@
.node {
cursor: move;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #BDBDBD;
stroke-width: 1.5px;
opacity: 0.4;
marker-end: url(#end-arrow);
}
.label {
fill: #CCCCCC;
font-size: 9px;
text-anchor: middle;
cursor: move;
font-family: Arial;
}
#end-arrow{
opacity: 0.4;
}
.INPUT{
fill: #ff6666;
stroke: #ff4d4d;
}
.OUTPUT{
fill : #ff8c66;
stroke: #ff794d;
}
.LOGISTIC{
fill: #ffb366;
stroke: #ffa64d;
}
.TANH{
fill: #ffd966;
stroke: #ffd24d;
}
.IDENTITY{
fill: #ffff66;
stroke: #ffff4d;
}
.STEP{
fill: #d9ff66;
stroke: #d2ff4d;
}
.RELU{
fill: #b3ff66;
stroke: #a6ff4d;
}
.SOFTSIGN{
fill: #8cff66;
stroke: #79ff4d;
}
.SINUSOID{
fill: #66ff66;
stroke: #4dff4d;
}
.GAUSSIAN{
fill: #66ff8c;
stroke: #4dff79;
}
.BENT_IDENTITY{
fill: #66ffd9;
stroke: #4dffd2;
}
.BIPOLAR{
fill: #66d9ff;
stroke: #4dd2ff;
}
.BIPOLAR_SIGMOID{
fill: #66b3ff;
stroke: #4da6ff;
}
.HARD_TANH{
fill: #668cff;
stroke: #4d79ff;
}
.ABSOLUTE{
fill: #6666ff;
stroke: #4d4dff;
}
.GATE{
fill: #003300;
stroke: #001a00;
}
.CONSTANT{
fill: #ff00ff;
stroke: #e600e6;
}
.INVERSE{
fill: #ff0080;
stroke: #e60073;
}
.SELU{
fill: #ff0040;
stroke: #e60039;
}

139
node_modules/neataptic/graph/graph.js generated vendored Normal file
View File

@@ -0,0 +1,139 @@
var NODE_RADIUS = 7;
var GATE_RADIUS = 2;
var REPEL_FORCE = 0;
var LINK_DISTANCE = 100;
var WIDTH = 1000;
var HEIGHT = 500;
function drawGraph (graph, panel) {
var d3cola = cola.d3adaptor()
.avoidOverlaps(true)
.size([WIDTH, HEIGHT]);
var svg = d3.select(panel);
d3.selectAll(panel + '> *').remove();
// define arrow markers for graph links
svg.append('svg:defs').append('svg:marker')
.attr('id', 'end-arrow')
.attr('viewBox', '0 -5 10 10')
.attr('refX', 6)
.attr('markerWidth', 4)
.attr('markerHeight', 4)
.attr('orient', 'auto')
.append('svg:path')
.attr('d', 'M0,-5L10,0L0,5');
graph.nodes.forEach(function (v) {
v.height = v.width = 2 * (v.name === 'GATE' ? GATE_RADIUS : NODE_RADIUS);
});
d3cola
.nodes(graph.nodes)
.links(graph.links)
.constraints(graph.constraints)
.symmetricDiffLinkLengths(REPEL_FORCE)
.linkDistance(LINK_DISTANCE)
.start(10, 15, 20);
var path = svg.selectAll('.link')
.data(graph.links)
.enter().append('svg:path')
.attr('class', 'link');
path.append('title')
.text(function (d) {
var text = '';
text += 'Weight: ' + Math.round(d.weight * 1000) / 1000 + '\n';
text += 'Source: ' + d.source.id + '\n';
text += 'Target: ' + d.target.id;
return text;
});
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter().append('circle')
.attr('class', function (d) {
return 'node ' + d.name;
})
.attr('r', function (d) {
return d.name === 'GATE' ? GATE_RADIUS : NODE_RADIUS;
})
.call(d3cola.drag);
node.append('title')
.text(function (d) {
var text = '';
text += 'Activation: ' + Math.round(d.activation * 1000) / 1000 + '\n';
text += 'Bias: ' + Math.round(d.bias * 1000) / 1000 + '\n';
text += 'Position: ' + d.id;
return text;
});
var label = svg.selectAll('.label')
.data(graph.nodes)
.enter().append('text')
.attr('class', 'label')
.text(function (d) {
return '(' + d.index + ') ' + d.name;
})
.call(d3cola.drag);
d3cola.on('tick', function () {
// draw directed edges with proper padding from node centers
path.attr('d', function (d) {
var deltaX = d.target.x - d.source.x;
var deltaY = d.target.y - d.source.y;
var dist = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var normX = deltaX / dist;
var normY = deltaY / dist;
if (isNaN(normX)) normX = 0;
if (isNaN(normY)) normY = 0;
var sourcePadding = d.source.width / 2;
var targetPadding = d.target.width / 2 + 2;
var sourceX = d.source.x + (sourcePadding * normX);
var sourceY = d.source.y + (sourcePadding * normY);
var targetX = d.target.x - (targetPadding * normX);
var targetY = d.target.y - (targetPadding * normY);
// Defaults for normal edge.
var drx = 0;
var dry = 0;
var xRotation = 0; // degrees
var largeArc = 0; // 1 or 0
var sweep = 1; // 1 or 0
// Self edge.
if (d.source.x === d.target.x && d.source.y === d.target.y) {
xRotation = -45;
largeArc = 1;
drx = 20;
dry = 20;
targetX = targetX + 1;
targetY = targetY + 1;
}
return 'M' + sourceX + ',' + sourceY + 'A' + drx + ',' + dry + ' ' + xRotation + ',' + largeArc + ',' + sweep + ' ' + targetX + ',' + targetY;
});
node
.attr('cx', function (d) {
return d.x;
})
.attr('cy', function (d) {
return d.y;
});
label
.attr('x', function (d) {
return d.x + 10;
})
.attr('y', function (d) {
return d.y - 10;
});
});
}