-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
60 lines (43 loc) · 1.85 KB
/
index.html
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
<!DOCTYPE html>
<title>ODIS</title>
<div>ODIS (Obstacle Detection Inside the Sea)</div>
<button type='button' onclick='init()'>Start</button>
<div id='webcam-container'></div>
<div id='label-container'></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8.3/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// model
const URL = 'https://teachablemachine.withgoogle.com/models/_DsAPqAwp/';
let model, webcam, labelContainer, maxPredictions;
async function init() {
const modelURL = URL + 'model.json';
const metadataURL = URL + 'metadata.json';
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const flip = true;
webcam = new tmImage.Webcam(400, 400, flip);
await webcam.setup();
webcam.play();
window.requestAnimationFrame(loop);
document.getElementById('webcam-container').appendChild(webcam.canvas);
labelContainer = document.getElementById('label-container');
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement('div'));
}
}
async function loop() {
webcam.update();
await predict();
window.requestAnimationFrame(loop);
}
async function predict() {
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ': ' + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</html>