Hugging Face's logo

Spaces:
amitkumar299
/
object-detection
Sleeping

App Files Community
amitkumar299 commited on
Commit
d7115fc
·
verified ·
1 Parent(s): 58acee7

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +44 -30
templates/index.html CHANGED
@@ -1,30 +1,44 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>{{ project_name }}</title>
6
- <style>
7
- body {
8
- background-color: #000;
9
- color: #00ffff;
10
- text-align: center;
11
- font-family: Arial, sans-serif;
12
- }
13
- h1 {
14
- margin-top: 40px;
15
- font-size: 2.5rem;
16
- }
17
- img {
18
- margin-top: 30px;
19
- border: 5px solid #00ffff;
20
- border-radius: 12px;
21
- max-width: 80%;
22
- }
23
- </style>
24
- </head>
25
- <body>
26
- <h1>{{ project_name }}</h1>
27
- <p style="color: #ccc;">✨ Real Time Object Detection</p>
28
- <img src="{{ url_for('video_feed') }}" alt="Live Webcam Stream">
29
- </body>
30
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>YOLOv8 Real-Time Detection</title>
5
+ </head>
6
+ <body>
7
+ <h2>🎥 Real-Time Object Detection with YOLOv8</h2>
8
+ <video id="video" width="640" height="480" autoplay muted></video>
9
+ <canvas id="canvas" style="display:none;"></canvas>
10
+ <img id="result" width="640" height="480"/>
11
+
12
+ <script>
13
+ const video = document.getElementById('video');
14
+ const canvas = document.getElementById('canvas');
15
+ const result = document.getElementById('result');
16
+ const ctx = canvas.getContext('2d');
17
+
18
+ navigator.mediaDevices.getUserMedia({ video: true })
19
+ .then(stream => {
20
+ video.srcObject = stream;
21
+ video.play();
22
+ detectLoop();
23
+ });
24
+
25
+ async function detectLoop() {
26
+ canvas.width = video.videoWidth;
27
+ canvas.height = video.videoHeight;
28
+ ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
29
+ const dataUrl = canvas.toDataURL('image/jpeg');
30
+
31
+ const response = await fetch('/detect', {
32
+ method: 'POST',
33
+ headers: { 'Content-Type': 'application/json' },
34
+ body: JSON.stringify({ image: dataUrl })
35
+ });
36
+
37
+ const resultJson = await response.json();
38
+ result.src = resultJson.image;
39
+
40
+ requestAnimationFrame(detectLoop); // Repeat
41
+ }
42
+ </script>
43
+ </body>
44
+ </html>