NeuralNetworkClassifier
Time to make NeuralNetworkClassifier watcher classify fruits.
Let's create an initialization function for the NNC watcher.
1
const initializeNNC = () => {};
Copied!
Retrieve the elements we'll be working with, along with the bounding rect of the element defining the watcher's contour.
1
const initializeNNC = () => {
2
// Get the elements we'll be working with...
3
const nncElement = document.getElementsByClassName('nnc')[0];
4
const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];
5
6
// ...along with the bounding rect that defines the watcher size
7
const nncBounds = nncElement.getBoundingClientRect();
8
};
Copied!
Define the watcher data structure.
1
// ...
2
3
const nncFruitsWatcher = {
4
name: 'NeuralNetworkClassifier',
5
shape: lampix.helpers.rectangle(
6
nncBounds.left,
7
nncBounds.top,
8
nncBounds.width,
9
nncBounds.height
10
),
11
params: {
12
neural_network_name: 'fruits'
13
}
14
};
Copied!
In case you're wondering, the above lampix.helpers.rectangle could be replaced with:
1
{
2
type: 'rectangle',
3
data: {
4
posX: nncBounds.left,
5
posY: nncBounds.top,
6
width: nncBounds.width,
7
height: nncBounds.height
8
}
9
}
Copied!
The watcher data structure above is almost complete, but it's missing one key component: what to actually do when classification is triggered.
1
// ...
2
3
// All Lampix classifiers return a list of recognized objects
4
// NNClassifier only recognizes one at a time, hence expecting
5
// an array with one element and destructuring it
6
const nncCallback = ([recognizedObject]) => {
7
nncRecognizedClassElement.textContent = `Recognized: ${recognizedObject.classTag}`;
8
9
if (Number(recognizedObject.classTag) === 1) {
10
// Change border color on each new detection
11
nncElement.style.borderColor = randomColor();
12
} else {
13
// Go back to white if object no longer there
14
nncElement.style.borderColor = '#FFFFFF';
15
}
16
};
17
18
const nncFruitsWatcher = {
19
name: 'NeuralNetworkClassifier',
20
shape: lampix.helpers.rectangle(
21
nncBounds.left,
22
nncBounds.top,
23
nncBounds.width,
24
nncBounds.height
25
),
26
params: {
27
neural_network_name: 'fruits'
28
},
29
onClassification: nncCallback
30
};
Copied!
All that's left now is to inform Lampix of its existence, by adding the following to the end of the initializeNNC function.
1
// ...
2
lampix.watchers.add(nncFruitsWatcher);
Copied!
Now, initializeNNC should look like this:
1
const initializeNNC = () => {
2
// Get the elements we'll be working with...
3
const nncElement = document.getElementsByClassName('nnc')[0];
4
const nncRecognizedClassElement = document.getElementsByClassName('nnc-recognized-class')[0];
5
6
// ...along with the bounding rect that defines the watcher size
7
const nncBounds = nncElement.getBoundingClientRect();
8
9
// All Lampix classifiers return a list of recognized objects
10
// NNClassifier only recognizes one at a time, hence expecting
11
// an array with one element and destructuring it
12
const nncCallback = ([recognizedObject]) => {
13
nncRecognizedClassElement.textContent = `Recognized: ${recognizedObject.classTag}`;
14
15
if (Number(recognizedObject.classTag) === 1) {
16
nncElement.style.borderColor = '#FF0000';
17
} else {
18
// Go back to white if object no longer there
19
nncElement.style.borderColor = '#FFFFFF';
20
}
21
};
22
23
const nncFruitsWatcher = {
24
name: 'NeuralNetworkClassifier',
25
shape: lampix.helpers.rectangle(
26
nncBounds.left,
27
nncBounds.top,
28
nncBounds.width,
29
nncBounds.height
30
),
31
params: {
32
neural_network_name: 'fruits'
33
},
34
onClassification: nncCallback
35
};
36
37
lampix.watchers.add(nncFruitsWatcher);
38
};
Copied!
Last modified 3yr ago
Copy link