netflow.js is a javascript library for visualizing neural network structure and training on the browser.
The library is ment to be used for explanation purposes.
You can see a demo here
powered by p5.js.
netflow.js is splited into multiple js files. You need to add the js files as shown below to your html file.
netflow.js depends on p5.js library for drawing on the html canvas.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/lib/p5.min.js"></script>
<script src="js/values/style.js"></script>
<script src="js/values/dimes.js"></script>
<script src="js/utils/helper.js"></script>
<script src="js/core/activation.js"></script>
<script src="js/core/view.js"></script>
<script src="js/core/draw.js"></script>
<script src="js/core/netflow.js"></script>
<script src="js/builder.js"></script>
</head>
<body>
</body>
</html>To build a neural network, go to builder.js
Below is a sample 3-layer (input (2), hidden (2) and output (1) ) neural network. The first added layer is always the input layer, while the last is the output. Any layer added in between is a hidden layer.
function build(){
var net = new Net();
net.addLayer(2); // input
net.addLayer(2); // hidden
net.addLayer(1); // output
return net;
}- Open
index.htmlin the browser to view the built network. - To run the forward pass and backpropagation click on the button on the top left corner or press space bar.
- To adjust the learning speed go to `dimes.js.
- Change the value of
DELAYvariable. - The value is in milliseconds.
- You can add an activation function to a layer while building the network in
builder.jsfile.
function build(){
var net = new Net();
net.addLayer(2); // input
net.addLayer(2, ReLu); // hidden with activation function
net.addLayer(1); // output
return net;
}