-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
60 lines (49 loc) · 2.66 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>
<html lang="en">
<head>
<title>Multiple ovwerlapping object detection</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Hirnaymay Bhaskar">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="intro">Multiple overlapping object detection</h1>
<h2>How to use</h2>
<p>Please wait for the model to load before trying the demos below at which point they will become visible when ready to use.</p>
<section id="demos" class="invisible">
<h2>Demo: Classifying Images</h2>
<p><em>Click on the image below </em> to try and recognize what is in the image using the power of Machine Learning! Notice how in this demo we not only know if the object is in the image, but also its position in the image. Very useful.</p>
<input type="file" id="image-input" accept="image/*">
<button id="clear-button">Clear Overlays</button>
<div class="classifyOnClick">
<img id="uploaded-image" src="media/demo_imageBasket.jpg" width="100%" crossorigin="anonymous" title="Click to get classification!" />
<canvas id="result-canvas"></canvas>
</div>
<h2>Demo: Webcam continuous classification</h2>
<p>Hold some objects up close to your webcam to get a real-time classification! You must be on <a href="https://codepen.io/octopols/pen/bGmMeJw">the https version of the website</a> for this to work. When ready click "enable webcam" below and accept access to the webcam when the browser asks (check the top left of your window)</p>
<div id="liveView" class="videoView">
<button id="webcamButton">Enable Webcam</button>
<video id="webcam" autoplay></video>
</div>
</section>
<footer>
<div class="footer-info">
<p>Hirnaymay Bhaskar © 2023 </p>
</div>
<div class="social-icons">
<a href="https://twitter.com/octopols">Twitter</a>
<a href="https://www.linkedin.com/in/hirnaymay/">LinkedIn</a>
<a href="https://github.com/octopols">GitHub</a>
</div>
</footer>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js" type="text/javascript"></script>
<!-- Load the coco-ssd model to use to recognize things in images -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>