Hugging Face's logo

Spaces:
dev-Rachitgarg
/
handspeak-ai-translator
Running

App Files Community
handspeak-ai-translator
File size: 7,095 Bytes 
2b66289
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20d3c9a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2b66289
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20d3c9a
2b66289
 
 
 
 
 
 
 
 
 
 
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HandSpeak AI Translator  ✋</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
    <custom-navbar></custom-navbar>
    <header class="bg-gradient-to-r from-gray-900 to-gray-800 py-20">
      <div class="container mx-auto px-4 text-center">
        <h1 class="text-5xl md:text-6xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
          HandSpeak AI Translator
        </h1>
        <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8">
          Real-time sign language recognition powered by AI and computer vision
        </p>
        <div class="flex flex-wrap justify-center gap-4">
          <a href="/pricing.html" class="bg-teal-600 hover:bg-teal-500 text-white px-8 py-3 rounded-lg font-medium transition text-lg">
            View Pricing
          </a>
          <a href="/about.html" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg font-medium transition text-lg">
            Learn More
          </a>
        </div>
      </div>
    </header>
<main class="flex-grow container mx-auto px-4 py-8">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-blue-500">
                    HandSpeak AI Translator
                </h1>
                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                    Real-time sign language recognition using AI and computer vision
                </p>
            </div>

            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Video Feed Section -->
                <div class="lg:w-2/3">
                    <div class="relative rounded-xl overflow-hidden shadow-2xl bg-black">
                        <video id="video" class="w-full" autoplay muted playsinline></video>
                        <canvas id="overlay" class="absolute top-0 left-0 w-full h-full" width="640" height="480"></canvas>
                    </div>
                    <div id="status" class="mt-4 text-center text-lg font-medium text-teal-400">
                        Status: Initializing...
                    </div>
                </div>

                <!-- Controls Section -->
                <div class="lg:w-1/3 bg-gray-800 rounded-xl p-6 shadow-xl">
                    <h3 class="text-2xl font-bold mb-6 text-center flex items-center justify-center gap-2">
                        <i data-feather="settings"></i> Controls
                    </h3>

                    <div class="space-y-6">
                        <!-- Label Management -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Add New Sign</label>
                            <div class="flex gap-2">
                                <input id="labelInput" type="text" placeholder="e.g. Hello, A" 
                                    class="flex-grow bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-teal-500 focus:border-transparent">
                                <button id="addLabel" class="bg-teal-600 hover:bg-teal-500 text-white px-4 py-2 rounded-lg transition">
                                    Add
                                </button>
                            </div>
                        </div>

                        <!-- Labels Display -->
                        <div id="labelsArea" class="space-y-2 max-h-40 overflow-y-auto pr-2"></div>

                        <!-- Recording Controls -->
                        <div class="space-y-3">
                            <button id="toggleRec" class="w-full bg-blue-600 hover:bg-blue-500 text-white px-4 py-3 rounded-lg font-medium transition">
                                Start Recording Examples
                            </button>
                            <button id="predictToggle" class="w-full bg-purple-600 hover:bg-purple-500 text-white px-4 py-3 rounded-lg font-medium transition">
                                Start Predicting
                            </button>
                        </div>

                        <!-- Data Management -->
                        <div class="grid grid-cols-2 gap-3">
                            <button id="saveBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
                                Save Dataset
                            </button>
                            <button id="loadBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition">
                                Load Dataset
                            </button>
                            <input type="file" id="fileInput" class="hidden">
                        </div>

                        <!-- Prediction Display -->
                        <div class="bg-gray-700 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-medium">Current Prediction:</span>
                                <span id="prediction" class="text-xl font-bold text-yellow-400">—</span>
                            </div>
                            <div class="h-2 bg-gray-600 rounded-full overflow-hidden">
                                <div id="confidenceBar" class="h-full bg-teal-500" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dataset JSON -->
            <div class="mt-8 bg-gray-800 rounded-xl p-6 shadow-xl">
                <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
                    <i data-feather="database"></i> Dataset JSON
                </h3>
                <textarea id="datasetJSON" readonly 
                    class="w-full h-40 bg-gray-700 border border-gray-600 rounded-lg p-3 font-mono text-sm"></textarea>
            </div>
        </div>
    </main>
    <custom-footer></custom-footer>
<!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>