Hugging Face's logo

Spaces:
practisebook
/
Blind_Assistance
Running

App Files Community
practisebook commited on
Commit
cfbeca9
·
verified ·
1 Parent(s): 1c87666

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +42 -17
index.html CHANGED
@@ -1,20 +1,45 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Real-Time Object Detection for Blind Assistance</title>
7
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
8
- <script type="module" src="assets/detection.js"></script>
9
- <link rel="stylesheet" href="assets/styles.css" />
10
- </head>
11
- <body>
12
- <h1>Real-Time Object Detection for Blind Assistance</h1>
13
- <p>This app detects objects in real-time using a webcam feed and provides audio feedback for blind assistance.</p>
14
- <button id="start">Start Real-Time Detection</button>
15
- <div id="webcam-container">
16
- <video id="video" autoplay muted playsinline></video>
17
- <canvas id="canvas"></canvas>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </div>
19
- </body>
20
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Transformers.js | Real-time object detection</title>
8
+ <script type="module" crossorigin src="/assets/index-C0Q5FIv3.js"></script>
9
+ <link rel="stylesheet" crossorigin href="/assets/index-DMNAdTgA.css">
10
+ </head>
11
+
12
+ <body>
13
+ <h1>
14
+ Real-time object detection w/
15
+ <a href="http://github.com/xenova/transformers.js" target="_blank">🤗 Transformers.js</a>
16
+ </h1>
17
+ <h4>
18
+ Runs locally in your browser, powered by
19
+ <a href="https://github.com/WongKinYiu/yolov9" target="_blank">YOLOv9</a>
20
+ </h4>
21
+ <div id="container">
22
+ <video id="video" autoplay muted playsinline></video>
23
+ <canvas id="canvas" width="360" height="240"></canvas>
24
+ <div id="overlay"></div>
25
+ </div>
26
+ <div id="controls">
27
+ <div>
28
+ <label>Image size</label>
29
+ (<label id="size-value">128</label>)
30
+ <br>
31
+ <input id="size" type="range" min="64" max="256" step="32" value="128" disabled>
32
  </div>
33
+ <div>
34
+ <label>Threshold</label>
35
+ (<label id="threshold-value">0.25</label>)
36
+ <br>
37
+ <input id="threshold" type="range" min="0.01" max="1" step="0.01" value="0.25" disabled>
38
+ </div>
39
+ </div>
40
+ <label id="status"></label>
41
+
42
+
43
+ </body>
44
+
45
+ </html>