A Simple JavaScript Implementation of the Perceptron AI Algorithm
Add any sample using the addTrainingSample. A Sample is a set of values with a label. You can have only two labels. A label is a free string.
Calling train will update the inner weights of the perceptron. You can specify too a max training size. It return an error rate. 1 (100%) means it can't train the samples and 0 (0%) means this is perfect.
After training the perceptron, you can use the predict method with a set of values. It will return the label for this values.
In the following sample, we have two labels: green and red. Green represents a negative value, and red represents a positive one. We let the perceptron find the correct weights during training to predict them.
import { Perceptron } from "../dist/perceptron.mjs";
const perceptron = new Perceptron();
const sample1 = {
sample: [],
label:"red"
}
for ( let sample = 0; sample < 100; sample++ )
sample1.sample.push( Math.random() * 100 );
const sample2 = {
sample : [],
label:"green"
};
for ( let sample = 0; sample < 100; sample++ )
sample2.sample.push( -Math.random() * 100 );
perceptron.addTrainingSample( sample1 );
perceptron.addTrainingSample( sample2 );
const errorRate = perceptron.train();
console.log( "Training good result rate " + ( 100 - errorRate ) + "%" );
console.log( perceptron.predict( [-10,-2] ) ); // green
console.log( perceptron.predict( [200,30] ) ); // redIn this example, we have two sets of points. We display the points and the separator line found by the perceptron.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="module">
import { Perceptron } from "../dist/perceptron.mjs";
const perceptron = new Perceptron();
const trace1 = {
x:[],
y:[],
mode:'markers',
type:'scatter'
};
const trace2 = {
x:[],
y:[],
mode:'markers',
type:'scatter'
};
for ( let sample = 0; sample < 100; sample++ ) {
let x1,y1;
let x2,y2;
const sample1 = {
sample: [ x1 = ( Math.random() * 100 ) + 20, y1 = ( Math.random() * 100 ) + 20 ],
label:"red"
}
const sample2 = {
sample: [ x2 = ( Math.random() * 100 ) - 50, y2 = ( Math.random() * 100 ) - 50 ],
label : "green"
}
trace1.x.push( x1 );
trace1.y.push( y1 );
trace2.x.push( x2 );
trace2.y.push( y2 );
perceptron.addTrainingSample( sample1 );
perceptron.addTrainingSample( sample2 );
}
const errorRate = perceptron.train();
const a1 = -50;
const a2 = 120;
const w1 = perceptron.weight( 0 );
const w2 = perceptron.weight( 1 );
const b = perceptron.biais();
const b1 = (-w1 * a1 - b) / w2;
const b2 = (-w1 * a2 - b) / w2;
const trace3 =
{
x: [a1, a2],
y: [b1, b2],
mode: 'lines',
type: 'scatter',
name: 'Separator',
line: { color: 'blue', dash: 'dash' }
};
let data = [ trace1, trace2, trace3 ];
Plotly.newPlot( 'plots', data );
</script>
</head>
<body>
<h1>Perceptron result</h1>
<div id="plots">
</div>
</body>
</html>(c) 2026 Alexandre Brillant