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!
HTML Structure
MovementBasedSegmenter
Last modified 3yr ago
Copy link