{ "role": "system", "content": "You are an elite AI systems engineer and full-stack deep learning developer. Your role is to build a unified, real-time sign language interpreter using the best elements from existing GitHub repositories." }, { "role": "user", "content": { "goal": "To create a complete, production-ready, real-time sign language interpreter using webcam input, capable of translating to both text and audio. This project must run on an average laptop (CPU or GPU), be beginner-friendly, and require zero coding knowledge from the user.", "input_repositories": [ "https://github.com/harshbg/Sign-Language-Interpreter-using-Deep-Learning", "https://github.com/Deva0813/Real-time-Sign-Language-Translator-Virtual-Camera", "https://github.com/sru123p/Sign-language-recognition/tree/main", "https://github.com/sign-language-translator/sign-language-translator", "https://github.com/laplaces42/sign-language-interpreter", "https://github.com/sign/translate", "https://github.com/dgovor/Sign-Language-Translator", "https://github.com/SiddharthaChakrabarty/Sign-Language-Translation-Across-Multiple-Languages", "https://github.com/paulinamoskwa/Real-Time-Sign-Language", "https://github.com/satyam9090/Automatic-Indian-Sign-Language-Translator-ISL", "https://github.com/jigargajjar55/Audio-Speech-To-Sign-Language-Converter" ], "tasks": [ "Analyze and compare the repositories.", "Extract best components, such as model architectures (CNN, LSTM, Transformers), datasets (ASL, ISL, or custom), training pipelines, webcam integration (OpenCV, MediaPipe), real-time loops, translation logic, and UI designs (Tkinter, Streamlit, Flask, etc.).", "Combine best features into a modular, unified codebase with clean folder structure (model/, data/, ui/, utils/, etc.).", "Produce working Python scripts with inline comments.", "Create a requirements.txt for dependencies.", "Provide a full README.md with installation, usage instructions, screenshots (if possible), and troubleshooting tips.", "Ensure code runs without modification on average laptops with GPU or CPU.", "Include configuration settings in a single Python file or config.json." ], "features_to_include": { "core": [ "Real-time sign recognition via webcam.", "Translation to both text and audio output.", "Language toggle support (ASL, ISL).", "Efficient, lightweight deep learning models.", "Beginner-friendly setup requiring zero coding knowledge." ], "optional": [ "Ability to retrain on custom sign datasets.", "Dataset augmentation for improved accuracy.", "Mobile deployment ideas.", "Gesture customization for accessibility." ] }, "output_expectation": { "summary": "Overview of design choices and which components were selected from each repository.", "folder_structure": "Full project folder structure, modular and clean.", "code": "Complete, commented Python scripts.", "setup_guide": "Step-by-step terminal instructions, requirements.txt, and README.md.", "expandability_tips": "Suggestions for testing, adding new features, and optimization." }, "user_level": "Beginner. No coding experience. Instructions must be copy-paste runnable." } } - Initial Deployment
49a6e26 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sign Language Interpreter</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .camera-container { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| padding-bottom: 75%; | |
| background-color: #1a202c; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .camera-feed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .recording-indicator { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .language-option.active { | |
| border-color: #4f46e5; | |
| background-color: #eef2ff; | |
| } | |
| .translation-box { | |
| min-height: 120px; | |
| transition: all 0.3s ease; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| /* Custom scrollbar */ | |
| .history-container::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .history-container::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .history-container::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .history-container::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-hands-helping text-indigo-600 text-4xl mr-3"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">SignSpeak</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-200 transition"> | |
| <i class="fas fa-cog text-gray-600 text-xl"></i> | |
| </button> | |
| <div id="settings-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Help</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">About</a> | |
| </div> | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition flex items-center"> | |
| <i class="fas fa-download mr-2"></i> Install App | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column - Camera Feed --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Camera Container --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Sign Language Input</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="camera-container"> | |
| <video id="camera-feed" class="camera-feed" autoplay playsinline></video> | |
| <div id="no-camera" class="absolute inset-0 flex items-center justify-center text-white"> | |
| <div class="text-center"> | |
| <i class="fas fa-video-slash text-4xl mb-2"></i> | |
| <p>Camera not available</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-4 space-x-4"> | |
| <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg transition flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Start | |
| </button> | |
| <button id="stop-btn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg transition flex items-center" disabled> | |
| <i class="fas fa-stop mr-2"></i> Stop | |
| </button> | |
| <button id="capture-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition flex items-center"> | |
| <i class="fas fa-camera mr-2"></i> Capture | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Translation Output --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">Translation</h2> | |
| <div class="flex items-center"> | |
| <span id="recording-indicator" class="hidden flex items-center mr-4"> | |
| <span class="recording-indicator w-3 h-3 rounded-full bg-red-500 mr-2"></span> | |
| <span class="text-sm text-gray-600">Processing</span> | |
| </span> | |
| <div class="relative"> | |
| <button id="audio-btn" class="p-2 rounded-full hover:bg-gray-200 transition"> | |
| <i class="fas fa-volume-up text-gray-600 text-xl"></i> | |
| </button> | |
| <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">EN</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div id="translation-box" class="translation-box bg-gray-50 rounded-lg p-4 border border-gray-200"> | |
| <p id="translation-text" class="text-gray-600">Your translation will appear here...</p> | |
| <div id="confidence-meter" class="mt-4 hidden"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Confidence</span> | |
| <span id="confidence-value" class="text-sm font-medium text-gray-700">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="confidence-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Controls and History --> | |
| <div class="space-y-6"> | |
| <!-- Language Selection --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Language Settings</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Input Sign Language</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="language-option active border-2 border-gray-200 rounded-lg p-3 text-center transition"> | |
| <i class="fas fa-flag-usa text-2xl mb-1"></i> | |
| <p class="text-sm">American (ASL)</p> | |
| </button> | |
| <button class="language-option border-2 border-gray-200 rounded-lg p-3 text-center transition"> | |
| <i class="fas fa-flag text-2xl mb-1"></i> | |
| <p class="text-sm">Indian (ISL)</p> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Output Spoken Language</label> | |
| <div class="relative"> | |
| <select class="block w-full p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>English</option> | |
| <option>Spanish</option> | |
| <option>Hindi</option> | |
| <option>French</option> | |
| <option>German</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Reference --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-semibold text-gray-800">Common Signs</h2> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">Hello</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">Thank You</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">Help</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">Yes</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">No</p> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-2 text-center"> | |
| <div class="bg-gray-200 h-16 mb-1 rounded"></div> | |
| <p class="text-xs font-medium">Water</p> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-book mr-2"></i> View Full Dictionary | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Translation History --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-xl font-semibold text-gray-800">History</h2> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800">Clear All</button> | |
| </div> | |
| <div class="p-4"> | |
| <div id="history-container" class="history-container max-h-60 overflow-y-auto space-y-3"> | |
| <div class="bg-gray-50 p-3 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">Hello, how are you?</p> | |
| <span class="text-xs text-gray-500">2 min ago</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">I need help</p> | |
| <span class="text-xs text-gray-500">5 min ago</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">Where is the bathroom?</p> | |
| <span class="text-xs text-gray-500">12 min ago</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">Thank you very much</p> | |
| <span class="text-xs text-gray-500">18 min ago</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg border border-gray-200"> | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">Good morning</p> | |
| <span class="text-xs text-gray-500">25 min ago</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-600 text-sm"> | |
| <p>SignSpeak - Real-time Sign Language Interpreter</p> | |
| <p class="mt-1">© 2023 SignSpeak. All rights reserved.</p> | |
| <div class="flex justify-center space-x-4 mt-2"> | |
| <a href="#" class="hover:text-indigo-600"><i class="fab fa-github"></i></a> | |
| <a href="#" class="hover:text-indigo-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-indigo-600"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="hover:text-indigo-600"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Toggle settings dropdown | |
| document.getElementById('settings-btn').addEventListener('click', function() { | |
| document.getElementById('settings-dropdown').classList.toggle('hidden'); | |
| }); | |
| // Language option selection | |
| const languageOptions = document.querySelectorAll('.language-option'); | |
| languageOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| languageOptions.forEach(opt => opt.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Camera feed simulation | |
| const cameraFeed = document.getElementById('camera-feed'); | |
| const noCamera = document.getElementById('no-camera'); | |
| const startBtn = document.getElementById('start-btn'); | |
| const stopBtn = document.getElementById('stop-btn'); | |
| const captureBtn = document.getElementById('capture-btn'); | |
| const recordingIndicator = document.getElementById('recording-indicator'); | |
| const translationText = document.getElementById('translation-text'); | |
| const confidenceMeter = document.getElementById('confidence-meter'); | |
| const confidenceBar = document.getElementById('confidence-bar'); | |
| const confidenceValue = document.getElementById('confidence-value'); | |
| const audioBtn = document.getElementById('audio-btn'); | |
| // Simulate camera access | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(function(stream) { | |
| cameraFeed.srcObject = stream; | |
| noCamera.style.display = 'none'; | |
| }) | |
| .catch(function(error) { | |
| console.error("Camera error: ", error); | |
| noCamera.style.display = 'flex'; | |
| }); | |
| } else { | |
| noCamera.style.display = 'flex'; | |
| } | |
| // Start/stop translation | |
| startBtn.addEventListener('click', function() { | |
| this.disabled = true; | |
| stopBtn.disabled = false; | |
| recordingIndicator.classList.remove('hidden'); | |
| // Simulate translation processing | |
| const phrases = [ | |
| "Hello, how are you?", | |
| "I need help with something", | |
| "Where is the nearest hospital?", | |
| "Thank you very much", | |
| "Good morning, have a nice day", | |
| "What time is it?", | |
| "I don't understand", | |
| "Please speak slowly", | |
| "My name is John", | |
| "Nice to meet you" | |
| ]; | |
| let counter = 0; | |
| const interval = setInterval(() => { | |
| if (counter >= phrases.length) counter = 0; | |
| const randomConfidence = Math.floor(Math.random() * 30) + 70; | |
| confidenceValue.textContent = `${randomConfidence}%`; | |
| confidenceBar.style.width = `${randomConfidence}%`; | |
| translationText.textContent = phrases[counter]; | |
| confidenceMeter.classList.remove('hidden'); | |
| // Add to history | |
| const historyContainer = document.getElementById('history-container'); | |
| const newEntry = document.createElement('div'); | |
| newEntry.className = 'bg-gray-50 p-3 rounded-lg border border-gray-200'; | |
| newEntry.innerHTML = ` | |
| <div class="flex justify-between items-start"> | |
| <p class="text-sm font-medium">${phrases[counter]}</p> | |
| <span class="text-xs text-gray-500">just now</span> | |
| </div> | |
| <p class="text-xs text-gray-600 mt-1">From: ASL | To: English</p> | |
| `; | |
| historyContainer.insertBefore(newEntry, historyContainer.firstChild); | |
| counter++; | |
| }, 3000); | |
| // Stop button functionality | |
| stopBtn.addEventListener('click', function() { | |
| clearInterval(interval); | |
| startBtn.disabled = false; | |
| this.disabled = true; | |
| recordingIndicator.classList.add('hidden'); | |
| }, { once: true }); | |
| }); | |
| // Capture button functionality | |
| captureBtn.addEventListener('click', function() { | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = cameraFeed.videoWidth; | |
| canvas.height = cameraFeed.videoHeight; | |
| canvas.getContext('2d').drawImage(cameraFeed, 0, 0); | |
| // Show a toast notification | |
| const toast = document.createElement('div'); | |
| toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| toast.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Sign captured successfully!</span> | |
| `; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => toast.remove(), 300); | |
| }, 3000); | |
| }); | |
| // Audio button functionality | |
| audioBtn.addEventListener('click', function() { | |
| if ('speechSynthesis' in window) { | |
| const utterance = new SpeechSynthesisUtterance(translationText.textContent); | |
| window.speechSynthesis.speak(utterance); | |
| // Show a toast notification | |
| const toast = document.createElement('div'); | |
| toast.className = 'fixed bottom-4 right-4 bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| toast.innerHTML = ` | |
| <i class="fas fa-volume-up mr-2"></i> | |
| <span>Playing audio...</span> | |
| `; | |
| document.body.appendChild(toast); | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => toast.remove(), 300); | |
| }, 3000); | |
| } else { | |
| alert('Text-to-speech is not supported in your browser.'); | |
| } | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!event.target.closest('#settings-btn') && !event.target.closest('#settings-dropdown')) { | |
| document.getElementById('settings-dropdown').classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=saketh-adithya/sign-language-interpreter" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |