Neural ntwork

Index.html

<a href="#controls">Jump to controls</a> 
<canvas id="graph" width="600" height="600"></canvas>
<div class="controls" id="controls">
    <button onclick="initialise()">initialise</button>
    <button onclick="train()">Train</button>
    <button onclick="classifyPoints()">Classify Points</button>
<button onclick="visualizeNeuronsAndWeights()">Visualize Neurons and Weights</button>
</div>
<label>Training Data Size
    <input id="trainingDataSize" value="5000">    
</label>
<label>training iterations
    <input id="trainingIterations" value="50000">    
</label>
<label>Learning Rate
    <input id="learningRate" value="0.03">    
</label>
<label>hidden nodes (more than 2!)
    <input id="hiddenNodes" value="8">    
</label>
<label>points to classify
    <input id="numPoints" value="400">    
</label>

Neuralnet.css

label{
    display: block;
    padding: 10px;
}
a{
    display:block;
    margin-bottom: 20px;
}
.controls{
    display: flex;
    gap: 20px;
    padding: 10px;
}

body{
    padding: 20px;
}

canvas{
    outline: 2px solid #666;
    
}

NeuralNet.js

            }
            this.biasOutput[i] += this.learningRate * errorsOutput[i];
        }

        for (let i = 0; i < this.hiddenSize; i++) {
            errorsHidden[i] = 0;
            for (let j = 0; j < this.outputSize; j++) {
                errorsHidden[i] +=
                    this.weightsHiddenToOutput[j][i] * errorsOutput[j];
            }
            this.biasHidden[i] += this.learningRate * errorsHidden[i];
            for (let j = 0; j < this.inputSize; j++) {
                this.weightsInputToHidden[i][j] +=
                    this.learningRate *
                    errorsHidden[i] *
                    this.hiddenLayer[i] *
                    (1 - this.hiddenLayer[i]) *
                    inputs[j];
            }
        }
    }
}

const canvas = document.getElementById("graph");
const ctx = canvas.getContext("2d");
const pointRadius = 5; // Radius of the points

const trainingData = [];
const numDataPoints = document.querySelector('#trainingDataSize').value; // Adjust the number of data points as needed

for (let i = 0; i < numDataPoints; i++) {
    const x = Math.random() * 2 - 1; // Random x value between -1 and 1
    const y = Math.random() * 2 - 1; // Random y value between -1 and 1

    let label;
    if (x <= 0 && y < 0) {
        label = "blue";
    } else if (x <= 0 && y > 0) {
        label = "green";
    } else if (x > 0 && y <= 0) {
        label = "red";
    } else {
        label = "purple";
    }

    trainingData.push({ x, y, label });
}