Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> | |
| <title>Gesture Draw</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <header> | |
| <h1>✋ Gesture Draw</h1> | |
| <div class="toolbar"> | |
| <input type="color" id="brushColor" value="#FF4500" title="Brush color" /> | |
| <button id="brushSizeDown" title="Smaller brush"><i class="fas fa-minus"></i></button> | |
| <span id="sizeDisplay">5</span> | |
| <button id="brushSizeUp" title="Larger brush"><i class="fas fa-plus"></i></button> | |
| <button id="eraserToggle" title="Eraser"><i class="fas fa-eraser"></i></button> | |
| <button id="clearCanvas" title="Clear all"><i class="fas fa-trash"></i></button> | |
| <button id="snapshotBtn" title="Save snapshot"><i class="fas fa-camera"></i> Save</button> | |
| <button id="toggleCamera" title="Toggle camera view"><i class="fas fa-video"></i></button> | |
| </div> | |
| </header> | |
| <main> | |
| <video id="webcam" autoplay playsinline style="display:none;"></video> | |
| <canvas id="drawCanvas"></canvas> | |
| <!-- Gesture Guide Overlay --> | |
| <div id="gestureGuide"> | |
| <div class="gesture-item"> | |
| <span class="gesture-icon">✋</span> | |
| <span class="gesture-label">Index up = Draw</span> | |
| </div> | |
| <div class="gesture-item"> | |
| <span class="gesture-icon">✊</span> | |
| <span class="gesture-label">Fist = Stop</span> | |
| </div> | |
| <div class="gesture-item"> | |
| <span class="gesture-icon">🧹</span> | |
| <span class="gesture-label">Eraser mode (toggle)</span> | |
| </div> | |
| </div> | |
| <!-- Status indicator (minimal) --> | |
| <div id="statusIndicator"></div> | |
| </main> | |
| <footer> | |
| <span id="fpsCounter">0 FPS</span> | |
| <span id="savedCounter">Saved: 0</span> | |
| </footer> | |
| </div> | |
| <!-- TensorFlow.js + Handpose --> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.1.0/dist/handpose.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |