Skip to content

Commit 0d409c8

Browse files
shiffmanshiffman
authored
Merge pull request #23 from ml5js/nn-examples
Basic Neural Network Examples
2 parents abcc23c + 2006ade commit 0d409c8

File tree

6 files changed

+184
-74
lines changed

6 files changed

+184
-74
lines changed

‎examples/NeuralNetwork/index.html‎ renamed to ‎examples/NeuralNetwork-color-classifier/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Document</title>
7+
<title>ml5.js Neural Network Color Classifier</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
89
<script src="../../dist/ml5.js"></script>
910
</head>
1011
<body>
11-
<script src="script.js"></script>
12+
<script src="sketch.js"></script>
1213
</body>
1314
</html>

‎examples/NeuralNetwork-color-classifier/sketch.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
// Step 1: load data or create some data
2+
let data = [
3+
{ r: 255, g: 0, b: 0, color: "red-ish" },
4+
{ r: 254, g: 0, b: 0, color: "red-ish" },
5+
{ r: 253, g: 0, b: 0, color: "red-ish" },
6+
{ r: 0, g: 255, b: 0, color: "green-ish" },
7+
{ r: 0, g: 254, b: 0, color: "green-ish" },
8+
{ r: 0, g: 253, b: 0, color: "green-ish" },
9+
{ r: 0, g: 0, b: 255, color: "blue-ish" },
10+
{ r: 0, g: 0, b: 254, color: "blue-ish" },
11+
{ r: 0, g: 0, b: 253, color: "blue-ish" },
12+
];
13+
14+
let classifer;
15+
let r = 255;
16+
let g = 0;
17+
let b = 0;
18+
let rSlider, gSlider, bSlider;
19+
let label = "training";
20+
21+
function setup() {
22+
createCanvas(640, 240);
23+
rSlider = createSlider(0, 255, 255).position(10, 20);
24+
gSlider = createSlider(0, 255, 0).position(10, 40);
25+
bSlider = createSlider(0, 255, 0).position(10, 60);
26+
27+
// Step 2: set your neural network options
28+
let options = {
29+
task: "classification",
30+
debug: true,
31+
};
32+
33+
// Step 3: initialize your neural network
34+
classifier = ml5.neuralNetwork(options);
35+
36+
// Step 4: add data to the neural network
37+
for (let i = 0; i < data.length; i++) {
38+
let item = data[i];
39+
let inputs = [item.r, item.g, item.b];
40+
let outputs = [item.color];
41+
classifier.addData(inputs, outputs);
42+
}
43+
44+
// Step 5: normalize your data;
45+
classifier.normalizeData();
46+
47+
// Step 6: train your neural network
48+
const trainingOptions = {
49+
epochs: 32,
50+
batchSize: 12,
51+
};
52+
classifier.train(trainingOptions, finishedTraining);
53+
}
54+
// Step 7: use the trained model
55+
function finishedTraining() {
56+
classify();
57+
}
58+
59+
// Step 8: make a classification
60+
function classify() {
61+
const input = [r, g, b];
62+
classifier.classify(input, handleResults);
63+
}
64+
65+
function draw() {
66+
r = rSlider.value();
67+
g = gSlider.value();
68+
b = bSlider.value();
69+
background(r, g, b);
70+
textAlign(CENTER, CENTER);
71+
textSize(64);
72+
text(label, width / 2, height / 2);
73+
}
74+
75+
// Step 9: define a function to handle the results of your classification
76+
function handleResults(results, error) {
77+
if (error) {
78+
console.error(error);
79+
return;
80+
}
81+
label = results[0].label;
82+
// console.log(results); // {label: 'red', confidence: 0.8};
83+
classify();
84+
}

‎examples/NeuralNetwork-mouse-gesture/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ml5.js Neural Network Color Classifier</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
9+
<script src="../../dist/ml5.js"></script>
10+
</head>
11+
<body>
12+
<script src="sketch.js"></script>
13+
</body>
14+
</html>

‎examples/NeuralNetwork-mouse-gesture/sketch.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
// Step 1: load data or create some data
2+
let data = [
3+
{ x: 0.99, y: 0.02, label: "right" },
4+
{ x: 0.76, y: -0.1, label: "right" },
5+
{ x: -1.0, y: 0.12, label: "left" },
6+
{ x: -0.9, y: -0.1, label: "left" },
7+
{ x: 0.02, y: 0.98, label: "down" },
8+
{ x: -0.2, y: 0.75, label: "down" },
9+
{ x: 0.01, y: -0.9, label: "up" },
10+
{ x: -0.1, y: -0.8, label: "up" },
11+
];
12+
13+
let classifer;
14+
let label = "training";
15+
16+
let start, end;
17+
18+
function setup() {
19+
createCanvas(640, 240);
20+
// Step 2: set your neural network options
21+
let options = {
22+
task: "classification",
23+
debug: true,
24+
};
25+
26+
// Step 3: initialize your neural network
27+
classifier = ml5.neuralNetwork(options);
28+
29+
// Step 4: add data to the neural network
30+
for (let i = 0; i < data.length; i++) {
31+
let item = data[i];
32+
let inputs = [item.x, item.y];
33+
let outputs = [item.label];
34+
classifier.addData(inputs, outputs);
35+
}
36+
37+
// Step 5: normalize your data;
38+
classifier.normalizeData();
39+
40+
// Step 6: train your neural network
41+
classifier.train({ epochs: 100 }, finishedTraining);
42+
}
43+
// Step 7: use the trained model
44+
function finishedTraining() {
45+
label = "ready";
46+
}
47+
48+
// Step 8: make a classification
49+
50+
function draw() {
51+
background(200);
52+
textAlign(CENTER, CENTER);
53+
textSize(64);
54+
text(label, width / 2, height / 2);
55+
if (start && end) {
56+
strokeWeight(8);
57+
line(start.x, start.y, end.x, end.y);
58+
}
59+
}
60+
61+
function mousePressed() {
62+
start = createVector(mouseX, mouseY);
63+
}
64+
65+
function mouseDragged() {
66+
end = createVector(mouseX, mouseY);
67+
}
68+
69+
function mouseReleased() {
70+
let dir = p5.Vector.sub(end, start);
71+
dir.normalize();
72+
let inputs = [dir.x, dir.y];
73+
console.log(inputs);
74+
classifier.classify(inputs, gotResults);
75+
}
76+
77+
// Step 9: define a function to handle the results of your classification
78+
function gotResults(results) {
79+
label = results[0].label;
80+
console.log(results);
81+
}

‎examples/NeuralNetwork/script.js‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎src/utils/callcallback.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
// This software is released under the MIT License.
44
// https://opensource.org/licenses/MIT
55

6-
76
/**
87
* Most ml5 methods accept a callback function which will be
98
* called with the arguments (error, result).
@@ -29,11 +28,11 @@ export default function callCallback(promise, callback) {
2928
return new Promise((resolve, reject) => {
3029
promise
3130
.then((result) => {
32-
callback(undefined, result);
31+
callback(result);
3332
resolve(result);
3433
})
3534
.catch((error) => {
36-
callback(error);
35+
callback(undefined, error);
3736
reject(error);
3837
});
3938
});

0 commit comments

Comments
 (0)