Hugging Face's logo

Spaces:
DHEIVER
/
Hand-Pose-Detection
Running

App Files Community
DHEIVER commited on
Commit
9fa86c3
·
verified ·
1 Parent(s): b9c9575

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +40 -21
index.html CHANGED
@@ -1,21 +1,40 @@
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>Hand Pose Detection</title>
7
- <link rel="stylesheet" href="styles.css">
8
- </head>
9
- <body>
10
- <h1>3D Hand Pose Detection</h1>
11
- <div id="container">
12
- <img id="inputImage" src="hand.jpg" alt="Input Image">
13
- <canvas id="outputCanvas"></canvas>
14
- </div>
15
- <p id="status">Loading model...</p>
16
-
17
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
18
- <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"></script>
19
- <script src="app.js"></script>
20
- </body>
21
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <main class="container">
2
+ <header>
3
+ <h1></h1>
4
+ </header>
5
+ <section class="video-section">
6
+ <video class="input_video" aria-label="Vídeo de entrada"></video>
7
+ </section>
8
+ <section class="canvas-section">
9
+ <div class="canvas-container" style="display: flex; justify-content: center; align-items: center;">
10
+ <canvas class="output_canvas" width="1280" height="720" style="max-width: 100%; height: auto;">
11
+ Seu navegador não suporta o elemento Canvas. Por favor, use um navegador moderno.
12
+ </canvas>
13
+ </div>
14
+ </section>
15
+ <div class="loading" role="status" aria-live="polite" style="background-color: rgba(0, 0, 0, 0.8); color: white;">
16
+ <div class="spinner" aria-hidden="true"></div>
17
+ <div class="message">
18
+ Carregando...
19
+ </div>
20
+ </div>
21
+ <figure class="abs logo">
22
+ <a href="http://www.mediapipe.dev" target="_blank" aria-label="Visite o site oficial do MediaPipe">
23
+ <img class="logo" src="logo_white.png" alt="Logo do MediaPipe" style="height: 50px;">
24
+ <figcaption class="title">MediaPipe</figcaption>
25
+ </a>
26
+ </figure>
27
+ <div class="shoutout">
28
+ <div>
29
+ <a href="https://solutions.mediapipe.dev/face_mesh" aria-label="Saiba mais sobre a solução Face Mesh do MediaPipe">
30
+ O Brasileiro é Foda!
31
+ </a>
32
+ </div>
33
+ </div>
34
+ <button id="toggle-control-panel" aria-expanded="false" aria-controls="control-panel">
35
+ Mostrar/Ocultar Painel de Controle
36
+ </button>
37
+ <div class="control-panel" id="control-panel" style="display: none;">
38
+ <!-- Opções de controle aqui -->
39
+ </div>
40
+ </main>