-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
175 lines (151 loc) · 7.44 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
const classifier = knnClassifier.create();
const webcamElement = document.getElementById('webcam');
let net;
// Counters for how many images per class where taken
let count_a = 0;
let count_b = 0;
let count_c = 0;
let count_d = 0;
let classes = [];
// get canvas to draw images into
let context_a = document.getElementById('canvas-a').getContext('2d');
let context_b = document.getElementById('canvas-b').getContext('2d');
let context_c = document.getElementById('canvas-c').getContext('2d');
let context_d = document.getElementById('canvas-d').getContext('2d');
// is checkbox checked
let checked = false;
// Setting up the webcam.
async function setupWebcam() {
return new Promise((resolve, reject) => {
const navigatorAny = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
navigatorAny.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true},
stream => {
webcamElement.srcObject = stream;
webcamElement.addEventListener('loadeddata', () => resolve(), false);
},
error => reject());
} else {
reject();
}
});
}
// Create an infinite loop which makes predictions through the webcam element.
async function app() {
console.log('Loading mobilenet..');
// Load the model.
net = await mobilenet.load();
console.log('Sucessfully loaded model');
await setupWebcam();
// Reads an image from the webcam and associates it with a specific class
// index.
const addExample = classId => {
// Get the intermediate activation of MobileNet 'conv_preds' and pass that
// to the KNN classifier.
const activation = net.infer(webcamElement, 'conv_preds');
// Count images fed in and if first image fed in add class to classes
if (classId === 0) {
if (count_a === 0) {
classes.push('A')
}
count_a++;
document.getElementById('num-a').innerText = `${count_a}`;
context_a.drawImage(document.getElementById('webcam'), 0, 0, 50, 32);
}
if (classId === 1) {
if (count_b === 0) {
classes.push('B')
}
count_b++;
document.getElementById('num-b').innerText = `${count_b}`;
context_b.drawImage(document.getElementById('webcam'), 0, 0, 50, 32);
}
if (classId === 2) {
if (count_c === 0) {
classes.push('C')
}
count_c++;
document.getElementById('num-c').innerText = `${count_c}`;
context_c.drawImage(document.getElementById('webcam'), 0, 0, 50, 32);
}
if (classId === 3) {
if (count_d === 0) {
classes.push('D')
}
count_d++;
document.getElementById('num-d').innerText = `${count_d}`;
context_d.drawImage(document.getElementById('webcam'), 0, 0, 50, 32);
}
// Pass the intermediate activation to the classifier.
classifier.addExample(activation, classId);
};
// When clicking a button, add an example for that class.
document.getElementById('class-a').addEventListener('click', () => addExample(0));
document.getElementById('class-b').addEventListener('click', () => addExample(1));
document.getElementById('class-c').addEventListener('click', () => addExample(2));
document.getElementById('class-d').addEventListener('click', () => addExample(3));
// Listen to checkbox if clicked, than set checked
document.getElementById('myCheck').addEventListener('click', () => checked = document.getElementById('myCheck').checked);
// infinite loop over each webcam frame
while (true) {
// If checkbox not checked print prediction of MobileNet
if (checked === false) {
document.getElementById("custom").style.visibility = "hidden";
document.getElementById("prediction").style.display = "block";
const result_b = await net.classify(webcamElement);
document.getElementById('prediction').innerText = `
prediction: ${result_b[0].className}\n
probability: ${result_b[0].probability}
`;
}
// If checkbox checked use custom classifier for prediction
if (checked) {
document.getElementById("custom").style.visibility = "visible";
document.getElementById("prediction").style.display = "none";
if (classifier.getNumClasses() > 0) {
// Get the activation from mobilenet from the webcam.
const activation = net.infer(webcamElement, 'conv_preds');
// Get the most likely class and confidences from the classifier module.
document.getElementById("custom").style.visibility = "visible";
document.getElementById("prediction").style.display = "none";
const result = await classifier.predictClass(activation);
const length = 4;
// Print the prediction values to the table
document.getElementById('out-A').innerText = `${result.confidences[0]}`.substring(0, length);
document.getElementById('out-B').innerText = `${result.confidences[1]}`.substring(0, length);
document.getElementById('out-C').innerText = `${result.confidences[2]}`.substring(0, length);
document.getElementById('out-D').innerText = `${result.confidences[3]}`.substring(0, length);
// Color the background of highest prediction green
if (classes[result.classIndex] === 'A') {
document.getElementById("tab-A").style.backgroundColor = "green";
document.getElementById("tab-B").style.backgroundColor = "transparent";
document.getElementById("tab-C").style.backgroundColor = "transparent";
document.getElementById("tab-D").style.backgroundColor = "transparent";
}
if (classes[result.classIndex] === 'B') {
document.getElementById("tab-A").style.backgroundColor = "transparent";
document.getElementById("tab-B").style.backgroundColor = "green";
document.getElementById("tab-C").style.backgroundColor = "transparent";
document.getElementById("tab-D").style.backgroundColor = "transparent";
}
if (classes[result.classIndex] === 'C') {
document.getElementById("tab-A").style.backgroundColor = "transparent";
document.getElementById("tab-B").style.backgroundColor = "transparent";
document.getElementById("tab-C").style.backgroundColor = "green";
document.getElementById("tab-D").style.backgroundColor = "transparent";
}
if (classes[result.classIndex] === 'D') {
document.getElementById("tab-A").style.backgroundColor = "transparent";
document.getElementById("tab-B").style.backgroundColor = "transparent";
document.getElementById("tab-C").style.backgroundColor = "transparent";
document.getElementById("tab-D").style.backgroundColor = "green";
}
}
}
await tf.nextFrame();
}
}
app();