Hugging Face's logo

Spaces:
Sam-max1
/
GestEffect
Running

App Files Community
GestEffect
File size: 4,070 Bytes
dfdf4aa
 
 
 
 
 
 
 
aa262d0
dfdf4aa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a8b35de
 
 
 
 
 
 
 
 
 
 
 
dfdf4aa
 
 
aa262d0
dfdf4aa
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="GestEffect - Real-time AR hand tracking with neon effects and fireball powers">
    <title>GestEffect - AR Hand Tracking</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <div class="video-container">
        <!-- Camera Permission Overlay -->
        <div id="cameraOverlay" class="camera-overlay">
            <div class="overlay-inner">
                <div class="logo-glow">✋</div>
                <h1>GestEffect AR</h1>
                <p>Real-time neon hand tracking with magical powers — powered by MediaPipe running entirely in your browser.</p>
                <button id="startCameraBtn" class="primary-btn"><span>Enable Camera</span></button>
                <p class="hint">Works on mobile &amp; desktop · Portrait &amp; landscape</p>
            </div>
        </div>

        <video id="videoElement" autoplay playsinline muted style="display:none;"></video>
        <canvas id="outputCanvas"></canvas>

        <!-- Left Stats Panels -->
        <div class="stats-panel-top">
            <div class="stat-row"><span class="stat-label">Hands</span><span class="stat-value" id="handCount">0</span></div>
            <div class="stat-row"><span class="stat-label">FPS</span><span class="stat-value" id="fps">0</span></div>
        </div>
        <div class="stats-panel-middle">
            <div class="stat-row"><span class="stat-label">Gesture</span><span class="stat-value gesture-text" id="gesture">—</span></div>
            <div class="stat-row"><span class="stat-label">Spread</span><span class="stat-value" id="spread">0%</span></div>
        </div>

        <!-- Right Theme Selector -->
        <div class="theme-selector">
            <button class="theme-btn" data-theme="Rainbow"><span class="theme-icon">🌈</span><span class="theme-name">Rainbow</span></button>
            <button class="theme-btn active" data-theme="Cyberpunk"><span class="theme-icon">🌃</span><span class="theme-name">Cyberpunk</span></button>
            <button class="theme-btn" data-theme="Lava"><span class="theme-icon">🔥</span><span class="theme-name">Lava</span></button>
            <button class="theme-btn" data-theme="Ocean"><span class="theme-icon">🌊</span><span class="theme-name">Ocean</span></button>
            <button class="theme-btn" data-theme="Galaxy"><span class="theme-icon">🌌</span><span class="theme-name">Galaxy</span></button>
            <button class="theme-btn" data-theme="Matrix"><span class="theme-icon">💻</span><span class="theme-name">Matrix</span></button>
            <button class="theme-btn" data-theme="Frostbite"><span class="theme-icon">❄️</span><span class="theme-name">Frostbite</span></button>
            <button class="theme-btn" data-theme="GoldenHour"><span class="theme-icon">🌅</span><span class="theme-name">GoldenHour</span></button>
            <button class="theme-btn" data-theme="Synthwave"><span class="theme-icon">🕹️</span><span class="theme-name">Synthwave</span></button>
            <button class="theme-btn" data-theme="NeonDemon"><span class="theme-icon">😈</span><span class="theme-name">NeonDemon</span></button>
        </div>

        <!-- Recording Status Pill (Top Middle) -->
        <div id="recordingStatusPill" class="status-pill" style="display: none;">
            <span class="status-dot"></span>
            <span id="recordingStatusText">Starting...</span>
        </div>

        <!-- Record Button (Bottom Middle) -->
        <button id="recordBtn" class="record-btn">
            <span class="record-icon"></span>
            <span class="record-text">Record</span>
        </button>
    </div>

    <!-- Main Engine -->
    <script src="static/main.js" type="module"></script>
</body>
</html>