Hugging Face's logo

Spaces:
VISHAL18for4
/
camera_draw
Sleeping

App Files Community
VISHAL18for4 commited on
Commit
60a3cab
·
verified ·
1 Parent(s): 40884f1

Update public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +28 -13
public/index.html CHANGED
@@ -2,8 +2,8 @@
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>Gesture Drawing · Camera Overlay</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
8
  <link rel="stylesheet" href="style.css" />
9
  </head>
@@ -12,23 +12,39 @@
12
  <header>
13
  <h1>✋ Gesture Draw</h1>
14
  <div class="toolbar">
15
- <button id="colorPicker" title="Brush color"><i class="fas fa-palette"></i></button>
16
- <input type="color" id="brushColor" value="#FF4500" />
17
- <button id="brushSizeDown"><i class="fas fa-minus"></i></button>
18
  <span id="sizeDisplay">5</span>
19
- <button id="brushSizeUp"><i class="fas fa-plus"></i></button>
20
- <button id="eraserToggle" title="Eraser mode"><i class="fas fa-eraser"></i></button>
21
- <button id="clearCanvas" title="Clear drawing"><i class="fas fa-trash"></i></button>
22
  <button id="snapshotBtn" title="Save snapshot"><i class="fas fa-camera"></i> Save</button>
23
- <button id="toggleCamera" title="Show/Hide camera feed"><i class="fas fa-video"></i></button>
24
  </div>
25
- <div id="status">📷 Starting camera...</div>
26
  </header>
27
 
28
  <main>
29
  <video id="webcam" autoplay playsinline style="display:none;"></video>
30
  <canvas id="drawCanvas"></canvas>
31
- <div id="gestureIndicator" class="gesture-off">✋</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </main>
33
 
34
  <footer>
@@ -37,11 +53,10 @@
37
  </footer>
38
  </div>
39
 
40
- <!-- TensorFlow.js + Handpose from reliable CDN -->
41
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js"></script>
42
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.1.0/dist/handpose.min.js"></script>
43
 
44
- <!-- Our application script -->
45
  <script src="script.js"></script>
46
  </body>
47
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
6
+ <title>Gesture Draw</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
8
  <link rel="stylesheet" href="style.css" />
9
  </head>
 
12
  <header>
13
  <h1>✋ Gesture Draw</h1>
14
  <div class="toolbar">
15
+ <input type="color" id="brushColor" value="#FF4500" title="Brush color" />
16
+ <button id="brushSizeDown" title="Smaller brush"><i class="fas fa-minus"></i></button>
 
17
  <span id="sizeDisplay">5</span>
18
+ <button id="brushSizeUp" title="Larger brush"><i class="fas fa-plus"></i></button>
19
+ <button id="eraserToggle" title="Eraser"><i class="fas fa-eraser"></i></button>
20
+ <button id="clearCanvas" title="Clear all"><i class="fas fa-trash"></i></button>
21
  <button id="snapshotBtn" title="Save snapshot"><i class="fas fa-camera"></i> Save</button>
22
+ <button id="toggleCamera" title="Toggle camera view"><i class="fas fa-video"></i></button>
23
  </div>
 
24
  </header>
25
 
26
  <main>
27
  <video id="webcam" autoplay playsinline style="display:none;"></video>
28
  <canvas id="drawCanvas"></canvas>
29
+
30
+ <!-- Gesture Guide Overlay -->
31
+ <div id="gestureGuide">
32
+ <div class="gesture-item">
33
+ <span class="gesture-icon">✋</span>
34
+ <span class="gesture-label">Index up = Draw</span>
35
+ </div>
36
+ <div class="gesture-item">
37
+ <span class="gesture-icon">✊</span>
38
+ <span class="gesture-label">Fist = Stop</span>
39
+ </div>
40
+ <div class="gesture-item">
41
+ <span class="gesture-icon">🧹</span>
42
+ <span class="gesture-label">Eraser mode (toggle)</span>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Status indicator (minimal) -->
47
+ <div id="statusIndicator"></div>
48
  </main>
49
 
50
  <footer>
 
53
  </footer>
54
  </div>
55
 
56
+ <!-- TensorFlow.js + Handpose -->
57
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js"></script>
58
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.1.0/dist/handpose.min.js"></script>
59
 
 
60
  <script src="script.js"></script>
61
  </body>
62
  </html>