Spaces:

KingNish
/

Voicee

Running

App Files Files Community

KingNish commited on Aug 24

Commit

c0af3b7

•

1 Parent(s): cadf0c8

Update index.html

Browse files

Files changed (1) hide show

index.html +66 -1

index.html CHANGED Viewed

	@@ -1 +1,66 @@
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/[email protected]/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>

+<!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/[email protected]/dist/tailwind.min.css rel=stylesheet>
+<style>.transition-all{transition:all .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 .3s ease-in-out}.hover:bg-gradient-to-r{background-size:200% auto;transition:background-position .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 d=/Chrome/.test(navigator.userAgent)&&/Google Inc/.test(navigator.vendor)&&!/Edg/.test(navigator.userAgent);var b=window.innerWidth>768;var e=document.querySelector('script[src="script1.js"], script[src="script2.js"]');if(e){e.remove()}var a=document.createElement("script");var c=new Date().getTime();if(d&&b){a.src="script1.js?t="+c}else{a.src="script2.js?t="+c}a.onerror=function(){console.error("Error loading script:",a.src)};document.head.appendChild(a)}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 a=document.getElementById("darkmode-toggle");function d(e){if(e==="dark"){document.body.classList.add("dark");a.querySelector("span").style.transform="translateX(24px)"}else{document.body.classList.remove("dark");a.querySelector("span").style.transform="translateX(0)"}localStorage.setItem("theme",e)}function b(){const e=document.body.classList.contains("dark");d(e?"light":"dark")}const c=localStorage.getItem("theme");d(c||"light");a.addEventListener("click",b)});</script>
+</body>
+</html>