Hugging Face's logo

Spaces:
Sa-m
/
Gesture-Driven-Advance-Email-App
Running

App Files Community
Gesture-Driven-Advance-Email-App
File size: 3,838 Bytes 
e45d9f8
 
 
 
 
 
2f7c81a
525ec2a
 
 
e45d9f8
 
 
 
 
 
 
 
 
 
 
45eaa08
 
 
 
 
e45d9f8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f09496b
e45d9f8
f09496b
e45d9f8
f09496b
d046c57
7993e2f
45eaa08
 
 
 
f09496b
45eaa08
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f09496b
 
 
 
e45d9f8
2f7c81a
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GestureMail Pro</title>
    <link rel="stylesheet" href="style.css">
    <!-- MediaPipe dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/hands.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="app-container">
        <div class="header">
            <div class="logo">
                <i>📧</i>
                <span>GestureMail Pro</span>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="Search emails...">
            </div>
            
            <!-- Debug Toggle Button -->
            <div class="debug-toggle" id="debugToggle">
                <button class="debug-button">⚙️</button>
            </div>
        </div>
        
        <div class="content">
            <div class="email-list" id="emailList">
                <!-- Emails will be populated here -->
            </div>
        </div>
    </div>
    
    <div class="webcam-container">
        <video id="webcam" autoplay playsinline></video>
    </div>
    
    <div class="gesture-guide">
        <h3>🖐️ Gesture Guide</h3>
        <div class="gesture-item">
            <div class="gesture-icon">1</div>
            <div>Point to select an email</div>
        </div>
        <div class="gesture-item">
            <div class="gesture-icon">←</div>
            <div>Swipe left to delete</div>
        </div>
        <div class="gesture-item">
            <div class="gesture-icon">→</div>
            <div>Swipe right to archive</div>
        </div>
        <div class="gesture-item">
            <div class="gesture-icon">◯</div>
            <div>Draw circle for summary</div>
        </div>
    </div>
    
    <div class="action-feedback" id="actionFeedback"></div>
    
    <div class="gesture-visualization">
        <div class="hand-landmarks" id="handLandmarks"></div>
        <div class="gesture-path" id="gesturePath"></div>
    </div>
    
    <div class="selection-highlight" id="selectionHighlight" style="display: none;"></div>
    
    <!-- Debug Panel -->
    <div class="debug-panel" id="debugPanel">
        <h3>Debug Information</h3>
        <div class="debug-item">
            <span class="debug-label">Status:</span>
            <span class="debug-value" id="debugStatus">Initializing...</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Selected Email:</span>
            <span class="debug-value" id="debugSelectedEmail">None</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Gesture Type:</span>
            <span class="debug-value" id="debugGestureType">None</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Gesture Buffer:</span>
            <span class="debug-value" id="debugBufferCount">0 points</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Circle Points:</span>
            <span class="debug-value" id="debugCircleCount">0 points</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Camera:</span>
            <span class="debug-value" id="debugCameraStatus">Not initialized</span>
        </div>
        <div class="debug-item">
            <span class="debug-label">Last Error:</span>
            <span class="debug-value" id="debugLastError">None</span>
        </div>
    </div>
    
    <div class="status-indicator" id="statusIndicator"></div>

    <script src="assets/js/script.js"></script>
</body>
</html>