-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
84 lines (74 loc) · 3.58 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="icon" type="image/svg+xml"
href="https://em-content.zobj.net/source/microsoft-teams/363/face-with-medical-mask_1f637.png" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Cherry+Swash:wght@700&display=swap");
</style>
</head>
<body
class="container-sm mx-auto p-24 font-extrabold text-gray-900 text-6xl bg-purple-100 grid h-1/3 place-items-center"
style="font-family: 'Cherry Swash', cursive">
<img src="https://em-content.zobj.net/source/microsoft-teams/363/face-with-medical-mask_1f637.png" alt="mask emoji"
class="h-44 md:h-64 mt-none animate-bounce" />
<div class="block xl:inline text-purple-600 text-center">Mask Detector</div>
<button type="button" onclick="init()"
class="text-white hover:bg-violet-600 bg-purple-600 mt-4 text-4xl px-4 focus:outline-none focus:ring focus:ring-violet-300 py-3 rounded-lg block tracking-wide duration-200 transition-all hover:rounded-3xl hover:drop-shadow-2xl">
Start
</button>
<div id="webcam-container" class="mt-4 rounded-xl"></div>
<div id="label-container" class="grid h-4/5 place-items-center"></div>
<div class="text-purple-500 text-2xl text-center mt-5 grid h-4/5 place-items-center">
Made with <img src="https://em-content.zobj.net/source/microsoft-teams/363/sparkling-heart_1f496.png" class="h-24"
alt=""> <a href="https://realanupreet.github.io/" class="hover:underline transition-all">by Anupreet Singh</a> <a
href="https://github.com/realanupreet"
class="underline hover:text-purple-700 transition-all duration-200">Github</a> <a
href="https://www.linkedin.com/in/realanupreet/"
class="underline hover:text-purple-700 transition-all duration-200">Linkedin</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
const URL = "https://teachablemachine.withgoogle.com/models/BglTxLTWe/";
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(200, 200, flip);
await webcam.setup();
await 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>
</body>
</html>