Spaces:
Running
Running
File size: 5,814 Bytes
83798ec |
1 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Voice Assistant</title><link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"rel="stylesheet"><style>.transition-all{transition:all 0.3s ease-in-out}body.dark{background-color:#1a202c}body.dark.bg-white{background-color:#2d3748}body.dark.text-gray-900{color:#e2e8f0}body.dark.text-gray-700{color:#a0aec0}body.dark.bg-gray-100{background-color:#4a5568}body.dark.bg-gray-200{background-color:#718096}body.dark.bg-gradient-to-r{background-size:200%auto;background-position:left center}#darkmode-toggle span{transition:transform 0.3s ease-in-out}.hover:bg-gradient-to-r{background-size:200%auto;transition:background-position 0.5s ease-in-out}.hover:bg-gradient-to-r:hover{background-position:right center}svg{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}</style><script>function loadScript(){var isChrome=/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)&&!/Edg/.test(navigator.userAgent);var isDesktop=window.innerWidth>768;var existingScript=document.querySelector('script[src="script1.js"], script[src="script2.js"]');if(existingScript){existingScript.remove()}var script=document.createElement('script');var timestamp=new Date().getTime();if(isChrome&&isDesktop){script.src='script1.js?t='+timestamp}else{script.src='script2.js?t='+timestamp}script.onerror=function(){console.error('Error loading script:',script.src)};document.head.appendChild(script)}document.addEventListener('DOMContentLoaded',loadScript);document.addEventListener('DOMContentLoaded',loadScript);</script></head><body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300"><div class="container mx-auto px-4 py-16"><div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg px-8 py-6 transition-all"><div class="flex items-center justify-between mb-6"><h1 class="text-3xl font-bold text-gray-900 dark:text-white"><span class="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">Voice</span>Assistant</h1><button id="darkmode-toggle"class="relative w-12 h-6 rounded-full bg-gray-300 dark:bg-gray-700 transition-colors duration-300 focus:outline-none"><span class="absolute left-1 top-1 w-4 h-4 rounded-full bg-white dark:bg-gray-900 transform transition-transform duration-300"></span></button></div><div id="responseTime"class="text-sm text-gray-500 dark:text-gray-400 mb-4">Latency:0ms</div><div class="flex items-center justify-around mb-8"><div id="userIndicator"class="rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-green-400 to-blue-500 hover:bg-gradient-to-r"data-content="User: Idle"><svg class="w-4 h-4 mr-2"viewBox="0 0 24 24"><path d="M12 14a7 7 0 017 7H5a7 7 0 017-7zm0-8a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span>Idle</span></div><div id="aiIndicator"class="rounded-full px-4 py-2 text-white flex items-center transition-colors duration-300 bg-gradient-to-r from-red-400 to-yellow-500 hover:bg-gradient-to-r"data-content="AI: Listening"><svg class="w-4 h-4 mr-2"viewBox="0 0 24 24"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg><span>Listening</span></div></div><div class="flex items-center justify-center mb-8"><button style="text-align: -webkit-center;"id="startStopButton"class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-purple-600 hover:to-blue-500 text-white font-bold py-2 px-4 rounded transition-all focus:outline-none focus:shadow-outline"><svg id="microphoneIcon"class="w-6 h-6 inline-block mr-2"viewBox="0 0 24 24"><path d="M12 14v2a4 4 0 004 4h0a4 4 0 004-4v-2M16 7a4 4 0 10-8 0v4h8z"></path></svg><span>Start Listening</span></button></div><div class="mt-8"><div class="grid grid-cols-1 md:grid-cols-2 gap-4"><div><label for="voiceSelect"class="block text-gray-700 dark:text-gray-300 font-bold mb-2">Voice:</label><select id="voiceSelect"class="w-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 py-2 px-3 rounded focus:outline-none focus:shadow-outline"><option value="Amy">Female</option><option value="Brian">Male</option></select></div><div><label for="modelSelect"class="block text-gray-700 dark:text-gray-300 font-bold mb-2">Model:</label><select id="modelSelect"class="w-full bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 py-2 px-3 rounded focus:outline-none focus:shadow-outline"><option value="8b">Fastest</option><option value="70b">Powerful</option></select></div><div class="flex items-center"style="visibility: hidden; "><label for="noiseSuppression"class="block text-gray-700 dark:text-gray-300 font-bold mb-2">Noise Suppression:</label><input type="checkbox"id="noiseSuppression"checked class="ml-2 form-checkbox h-5 w-5 text-blue-500"></div></div></div><div id="transcript"class="mt-8 p-4 bg-gray-200 dark:bg-gray-700 rounded-lg text-sm font-mono whitespace-pre-wrap transition-all"></div></div></div><script>document.addEventListener('DOMContentLoaded',function(){const toggle=document.getElementById('darkmode-toggle');function setTheme(theme){if(theme==='dark'){document.body.classList.add('dark');toggle.querySelector('span').style.transform='translateX(24px)'}else{document.body.classList.remove('dark');toggle.querySelector('span').style.transform='translateX(0)'}localStorage.setItem('theme',theme)}function updateTheme(){const isDarkMode=document.body.classList.contains('dark');setTheme(isDarkMode?'light':'dark')}const savedTheme=localStorage.getItem('theme');setTheme(savedTheme||'light');toggle.addEventListener('click',updateTheme)});</script></body></html> |