Spaces:

dev-Rachitgarg
/

handspeak-ai-translator

Running

App Files Files Community

dev-Rachitgarg commited on Nov 4, 2025

Commit

2b66289

verified ·

1 Parent(s): 367039f

<!doctype html>

Browse files

<html>
<head>
<meta charset="utf-8" />
<title>Sign Language Recognizer — AI Vision</title>
<style>
:root {
--bg: #2c3e50;
--panel: #34495e;
--accent: #1abc9c;
--danger: #e74c3c;
--text: #ecf0f1;
}
body {
margin:0; font-family: "Segoe UI", system-ui;
background: var(--bg); color: var(--text);
display:flex; flex-wrap:wrap; gap:20px; padding:20px; justify-content:center;
}
#left {
position:relative;
width:640px;
}
video, canvas {
border-radius:12px;
width:640px; height:480px;
background:#000;
box-shadow:0 0 20px rgba(0,0,0,0.4);
}
#status {
margin-top:12px;
font-weight:600;
text-align:center;
font-size:18px;
color:var(--accent);
}
#controls {
width:360px;
background: var(--panel);
border-radius:12px;
padding:20px;
box-shadow:0 0 25px rgba(0,0,0,0.3);
}
h3 { margin-top:0; text-align:center; color:var(--accent); }
input, button, textarea {
font-family:inherit;
border:none;
outline:none;
border-radius:8px;
padding:8px 12px;
margin-top:6px;
}
input {
width: calc(100% - 24px);
background:#22313f;
color:var(--text);
}
button {
cursor:pointer;
background:var(--accent);
color:var(--text);
transition:0.2s;
}
button:hover { background:#16a085; }
.label-btn {
background:#3b5770;
color:#ecf0f1;
}
.recording { background:var(--danger) !important; }
#prediction {
font-weight:bold;
color:#f1c40f;
font-size:20px;
}
textarea {
width:100%; height:100px;
background:#22313f;
color:var(--text);
margin-top:8px;
resize:none;
}
/* Subscription Modal */
#subModal {
position: fixed; inset:0;
background: rgba(0,0,0,0.75);
display:flex; align-items:center; justify-content:center;
z-index:999; opacity:0; visibility:hidden;
transition: opacity 0.3s;
}
#subModal.active { opacity:1; visibility:visible; }
.sub-box {
background: var(--panel);
padding:30px; border-radius:16px; width:360px;
text-align:center; box-shadow:0 0 25px rgba(0,0,0,0.5);
}
.sub-box h2 { color:var(--accent); margin-bottom:10px; }
.sub-btn {
background: var(--accent);
color:white;
border:none;
border-radius:10px;
padding:10px 18px;
font-size:16px;
margin:10px 0;
cursor:pointer;
width:80%;
}
.trial-btn { background:#f39c12; }
</style>
</head>
<body>

<div id="left">
<div style="position:relative; width:640px; height:480px;">
<video id="video" autoplay muted playsinline></video>
<canvas id="overlay" width="640" height="480"></canvas>
</div>
<div id="status">Status: Idle</div>
</div>

<div id="controls">
<h3>✋ Sign Language Recognizer</h3>
<div>
<input id="labelInput" placeholder="Label name (e.g. Hello, A)" />
<button id="addLabel">Add Label</button>
</div>

<div id="labelsArea" style="margin-top:8px;"></div>

<div style="margin-top:12px;">
<button id="toggleRec">Start Recording Examples</button>
<button id="predictToggle">Start Predicting</button>
</div>

<div style="margin-top:12px;">
<button id="saveBtn">Save Dataset</button>
<button id="loadBtn">Load Dataset</button>
<input type="file" id="fileInput" style="display:none" />
</div>

<div style="margin-top:12px;">
<strong>Prediction:</strong> <span id="prediction">—</span>
</div>

<div style="margin-top:12px;">
<strong>Dataset JSON</strong>
<textarea id="datasetJSON" readonly></textarea>
</div>
</div>


<div id="subModal">
<div class="sub-box">
<h2>🔒 Subscribe to Unlock</h2>
<p>Access the AI Sign Recognizer for just <strong>₹199/month</strong>.</p>
<p>Or enjoy a <strong>3-Day Free Trial</strong>.</p>
<button class="sub-btn" id="subscribeBtn">Subscribe ₹199</button><br>
<button class="sub-btn trial-btn" id="trialBtn">Start Free Trial</button>
</div>
</div>

<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>
(async ()=>{
// === CORE VARIABLES ===
const videoElem = document.getElementById('video');
const overlay = document.getElementById('overlay');
const ctx = overlay.getContext('2d');
let labels = [];
let recording=false, recordingLabel=null, predicting=false;
let knnK=5;

const status = document.getElementById('status');
const predictionSpan = document.getElementById('prediction');
const datasetJSON = document.getElementById('datasetJSON');

function setStatus(s){ status.textContent='Status: '+s; }

// === LANDMARK PROCESSING ===
function landmarksToVector(landmarks){
if(!landmarks || landmarks.length===0) return null;
const wrist = landmarks[0];
const ref = landmarks[9] || landmarks[8];
const dx = ref.x - wrist.x;
const dy = ref.y - wrist.y;
const scale = Math.hypot(dx, dy) || 1;
const vec=[];
for(let p of landmarks){
vec.push((p.x - wrist.x)/scale,(p.y - wrist.y)/scale,(p.z - wrist.z)/scale);
}
return vec;
}

function euclid(a,b){
let s=0;
for(let i=0;i<a.length;i++){ const d=a[i]-b[i]; s+=d*d; }
return Math.sqrt(s);
}
function knnPredict(vec){
const all=[];
for(const lab of labels) for(const ex of lab.examples)
all.push({label:lab.name, dist:euclid(vec,ex)});
if(!all.length) return {label:null,confidence:0};
all.sort((a,b)=>a.dist-b.dist);
const k=Math.min(knnK,all.length);
const top=all.slice(0,k);
const counts={};
for(const t of top) counts[t.label]=(counts[t.label]||0)+1;
let best=null, bestCount=0;
for(const l in counts) if(counts[l]>bestCount){best=l;bestCount=counts[l];}
return {label:best, confidence:bestCount/k};
}

// === UI: LABELS ===
const labelsArea=document.getElementById('labelsArea');
document.getElementById('addLabel').onclick=()=>{
const name=document.getElementById('labelInput').value.trim();
if(!name) return alert('Enter a label');
if(labels.find(l=>l.name===name)) return alert('Already exists');
labels.push({name,examples:[]});
renderLabels();
document.getElementById('labelInput').value='';
};
function renderLabels(){
labelsArea.innerHTML='';
labels.forEach((lab,idx)=>{
const div=document.createElement('div');
div.style.display='flex'; div.style.alignItems='center'; div.style.gap='6px';
const btn=document.createElement('button');
btn.textContent=lab.name+' ('+lab.examples.length+')';
btn.className='label-btn';
btn.onclick=()=>{
recordingLabel=lab.name;
document.querySelectorAll('.label-btn').forEach(b=>b.classList.remove('recording'));
btn.classList.add('recording');
};
const del=document.createElement('button');
del.textContent='✖'; del.style.background=varDanger='#c0392b';
del.onclick=()=>{if(confirm('Delete label?')){labels.splice(idx,1);renderLabels();}};
div.appendChild(btn); div.appendChild(del);
labelsArea.appendChild(div);
});
datasetJSON.value=JSON.stringify(labels,null,2);
}

// === SAVE / LOAD ===
document.getElementById('saveBtn').onclick=()=>{
const blob=new Blob([JSON.stringify(labels)],{type:'application/json'});
const a=document.createElement('a');
a.href=URL.createObjectURL(blob); a.download='sign_dataset.json'; a.click();
};
document.getElementById('loadBtn').onclick=()=>document.getElementById('fileInput').click();
document.getElementById('fileInput').onchange=e=>{
const f=e.target.files[0]; if(!f) return;
const r=new FileReader();
r.onload=()=>{
try{
const d=JSON.parse(r.result);
if(!Array.isArray(d)) throw 'Invalid';
labels=d.map(l=>({name:l.name,examples:l.examples||[]}));
renderLabels(); setStatus('Dataset loaded');
}catch{alert('Invalid file');}
};
r.readAsText(f);
};

// === RECORD & PREDICT ===
document.getElementById('toggleRec').onclick=()=>{
recording=!recording;
setStatus(recording?'Recording...':'Idle');
document.getElementById('toggleRec').textContent=recording?'Stop Recording':'Start Recording Examples';
};
document.getElementById('predictToggle').onclick=()=>{
predicting=!predicting;
setStatus(predicting?'Predicting...':'Idle');
document.getElementById('predictToggle').textContent=predicting?'Stop Predicting':'Start Predicting';
};

// === MEDIAPIPE HANDS ===
const hands=new Hands({locateFile:(file)=>`https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`});
hands.setOptions({maxNumHands:1,modelComplexity:1,minDetectionConfidence:0.7,minTrackingConfidence:0.6});
hands.onResults(onResults);
const camera=new Camera(videoElem,{onFrame:async()=>await hands.send({image:videoElem}),width:640,height:480});
camera.start();

let lastSpoken=null;
function speak(text){
if('speechSynthesis' in window){
if(lastSpoken===text) return; // avoid repetition
lastSpoken=text;
const msg=new SpeechSynthesisUtterance(text);
msg.rate=1; msg.pitch=1;
speechSynthesis.cancel();
speechSynthesis.speak(msg);
}
}

function onResults(results){
ctx.save();
ctx.clearRect(0,0,overlay.width,overlay.height);
ctx.drawImage(results.image,0,0,overlay.width,overlay.height);
if(results.multiHandLandmarks){
for(const lm of results.multiHandLandmarks){
drawConnectors(ctx,lm,HAND_CONNECTIONS,{color:'#1abc9c',lineWidth:2});
drawLandmarks(ctx,lm,{color:'#f1c40f',lineWidth:1});
}
}
ctx.restore();

if(results.multiHandLandmarks && results.multiHandLandmarks.length>0){
const vec=landmarksToVector(results.multiHandLandmarks[0]);
if(!vec) return;
if(recording && recordingLabel){
const lab=labels.find(l=>l.name===recordingLabel);
if(lab){lab.examples.push(vec);renderLabels();}
}
if(predicting){
const out=knnPredict(vec);
if(out.label){
predictionSpan.textCo

Files changed (4) hide show

README.md +8 -5
index.html +120 -19
script.js +282 -0
style.css +54 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Handspeak Ai Translator
-emoji: 🚀
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HandSpeak AI Translator  ✋
+colorFrom: blue
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,120 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <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>

script.js ADDED Viewed

	@@ -0,0 +1,282 @@

+document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize elements
+    const videoElem = document.getElementById('video');
+    const overlay = document.getElementById('overlay');
+    const ctx = overlay.getContext('2d');
+    const status = document.getElementById('status');
+    const predictionSpan = document.getElementById('prediction');
+    const confidenceBar = document.getElementById('confidenceBar');
+    const datasetJSON = document.getElementById('datasetJSON');
+    let labels = [];
+    let recording = false;
+    let recordingLabel = null;
+    let predicting = false;
+    let knnK = 5;
+    let lastSpoken = null;
+    // Set initial status
+    setStatus('Initializing camera...');
+    // === Utility Functions ===
+    function setStatus(s) {
+        status.textContent = `Status: ${s}`;
+    }
+    function speak(text) {
+        if ('speechSynthesis' in window && text !== lastSpoken) {
+            lastSpoken = text;
+            const msg = new SpeechSynthesisUtterance(text);
+            msg.rate = 1;
+            msg.pitch = 1;
+            speechSynthesis.cancel();
+            speechSynthesis.speak(msg);
+        }
+    }
+    // === Landmark Processing ===
+    function landmarksToVector(landmarks) {
+        if (!landmarks || landmarks.length === 0) return null;
+        const wrist = landmarks[0];
+        const ref = landmarks[9] || landmarks[8];
+        const dx = ref.x - wrist.x;
+        const dy = ref.y - wrist.y;
+        const scale = Math.hypot(dx, dy) || 1;
+        const vec = [];
+        for (let p of landmarks) {
+            vec.push(
+                (p.x - wrist.x) / scale,
+                (p.y - wrist.y) / scale,
+                (p.z - wrist.z) / scale
+            );
+        }
+        return vec;
+    }
+    function euclid(a, b) {
+        let s = 0;
+        for (let i = 0; i < a.length; i++) {
+            const d = a[i] - b[i];
+            s += d * d;
+        }
+        return Math.sqrt(s);
+    }
+    function knnPredict(vec) {
+        const all = [];
+        for (const lab of labels) {
+            for (const ex of lab.examples) {
+                all.push({ label: lab.name, dist: euclid(vec, ex) });
+            }
+        }
+        if (!all.length) return { label: null, confidence: 0 };
+        all.sort((a, b) => a.dist - b.dist);
+        const k = Math.min(knnK, all.length);
+        const top = all.slice(0, k);
+        const counts = {};
+        for (const t of top) counts[t.label] = (counts[t.label] || 0) + 1;
+        let best = null, bestCount = 0;
+        for (const l in counts) {
+            if (counts[l] > bestCount) {
+                best = l;
+                bestCount = counts[l];
+            }
+        }
+        return {
+            label: best,
+            confidence: bestCount / k
+        };
+    }
+    // === UI: Labels Management ===
+    document.getElementById('addLabel').addEventListener('click', () => {
+        const name = document.getElementById('labelInput').value.trim();
+        if (!name) return alert('Please enter a label name');
+        if (labels.find(l => l.name === name)) return alert('Label already exists');
+        labels.push({ name, examples: [] });
+        renderLabels();
+        document.getElementById('labelInput').value = '';
+    });
+    function renderLabels() {
+        const labelsArea = document.getElementById('labelsArea');
+        labelsArea.innerHTML = '';
+        labels.forEach((lab, idx) => {
+            const div = document.createElement('div');
+            div.className = 'flex items-center justify-between bg-gray-700 p-2 rounded-lg';
+            const labelBtn = document.createElement('button');
+            labelBtn.className = `flex items-center gap-2 px-3 py-1 rounded-md transition ${
+                recordingLabel === lab.name ? 'bg-teal-600 text-white' : 'bg-gray-600 hover:bg-gray-500'
+            }`;
+            labelBtn.innerHTML = `
+                <i data-feather="${lab.name.length > 1 ? 'type' : 'hash'}" width="16"></i>
+                ${lab.name} <span class="text-xs opacity-75">(${lab.examples.length})</span>
+            `;
+            labelBtn.addEventListener('click', () => {
+                recordingLabel = lab.name;
+                renderLabels();
+            });
+            const deleteBtn = document.createElement('button');
+            deleteBtn.className = 'p-1 text-red-400 hover:text-red-300 rounded-full';
+            deleteBtn.innerHTML = '<i data-feather="trash-2" width="16"></i>';
+            deleteBtn.addEventListener('click', () => {
+                if (confirm(`Delete label "${lab.name}"?`)) {
+                    labels.splice(idx, 1);
+                    if (recordingLabel === lab.name) recordingLabel = null;
+                    renderLabels();
+                }
+            });
+            div.appendChild(labelBtn);
+            div.appendChild(deleteBtn);
+            labelsArea.appendChild(div);
+        });
+        datasetJSON.value = JSON.stringify(labels, null, 2);
+        feather.replace();
+    }
+    // === Data Management ===
+    document.getElementById('saveBtn').addEventListener('click', () => {
+        if (labels.length === 0) return alert('No data to save');
+        const blob = new Blob([JSON.stringify(labels)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'handspeak_dataset.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        setStatus('Dataset saved');
+    });
+    document.getElementById('loadBtn').addEventListener('click', () => {
+        document.getElementById('fileInput').click();
+    });
+    document.getElementById('fileInput').addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+            try {
+                const data = JSON.parse(reader.result);
+                if (!Array.isArray(data)) throw new Error('Invalid format');
+                labels = data.map(l => ({
+                    name: l.name,
+                    examples: l.examples || []
+                }));
+                renderLabels();
+                setStatus('Dataset loaded successfully');
+            } catch (err) {
+                alert('Error loading file: ' + err.message);
+            }
+        };
+        reader.readAsText(file);
+    });
+    // === Recording & Prediction ===
+    document.getElementById('toggleRec').addEventListener('click', () => {
+        recording = !recording;
+        if (recording && !recordingLabel) {
+            alert('Please select a label first');
+            recording = false;
+            return;
+        }
+        setStatus(recording ? `Recording examples for "${recordingLabel}"` : 'Ready');
+        document.getElementById('toggleRec').textContent = recording ?
+            'Stop Recording' : 'Start Recording Examples';
+        document.getElementById('toggleRec').className = recording ?
+            'w-full bg-red-600 hover:bg-red-500 text-white px-4 py-3 rounded-lg font-medium transition' :
+            'w-full bg-blue-600 hover:bg-blue-500 text-white px-4 py-3 rounded-lg font-medium transition';
+    });
+    document.getElementById('predictToggle').addEventListener('click', () => {
+        predicting = !predicting;
+        if (predicting && labels.length === 0) {
+            alert('Please add some labels and examples first');
+            predicting = false;
+            return;
+        }
+        setStatus(predicting ? 'Predicting...' : 'Ready');
+        document.getElementById('predictToggle').textContent = predicting ?
+            'Stop Predicting' : 'Start Predicting';
+        document.getElementById('predictToggle').className = predicting ?
+            'w-full bg-purple-700 hover:bg-purple-600 text-white px-4 py-3 rounded-lg font-medium transition' :
+            'w-full bg-purple-600 hover:bg-purple-500 text-white px-4 py-3 rounded-lg font-medium transition';
+    });
+    // === MediaPipe Hands Setup ===
+    const hands = new Hands({
+        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
+    });
+    hands.setOptions({
+        maxNumHands: 1,
+        modelComplexity: 1,
+        minDetectionConfidence: 0.7,
+        minTrackingConfidence: 0.6
+    });
+    hands.onResults(onResults);
+    const camera = new Camera(videoElem, {
+        onFrame: async () => {
+            await hands.send({ image: videoElem });
+        },
+        width: 640,
+        height: 480
+    });
+    camera.start();
+    // Results Handler
+    function onResults(results) {
+        ctx.save();
+        ctx.clearRect(0, 0, overlay.width, overlay.height);
+        ctx.drawImage(results.image, 0, 0, overlay.width, overlay.height);
+        if (results.multiHandLandmarks) {
+            for (const landmarks of results.multiHandLandmarks) {
+                drawConnectors(ctx, landmarks, HAND_CONNECTIONS, {
+                    color: '#10B981',
+                    lineWidth: 4
+                });
+                drawLandmarks(ctx, landmarks, {
+                    color: '#F59E0B',
+                    lineWidth: 2,
+                    radius: (data) => {
+                        return lerp(data.from.z, -0.15, 0.1, 5, 1);
+                    }
+                });
+            }
+        }
+        ctx.restore();
+        // Process landmarks for recording/prediction

style.css CHANGED Viewed

@@ -1,28 +1,64 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+    --primary: #0ea5e9;
+    --secondary: #7c3aed;
+    --accent: #10b981;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --info: #3b82f6;
+}
 body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #475569;
 }
+/* Animation classes */
+.animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
+/* Custom button glow */
+.btn-glow {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+    animation: pulse-glow 2s infinite;
+}
+@keyframes pulse-glow {
+    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
+    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
+    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
 }
+/* Responsive video container */
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+    overflow: hidden;
 }
+.video-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}