Spaces:
Running
Running
| <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://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #4a90e2; | |
| --secondary-color: #f39c12; | |
| --background-color: #f0f4f8; | |
| --card-bg-color: #ffffff; | |
| --text-color: #333333; | |
| --border-color: #e0e0e0; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| width: 90%; | |
| max-width: 800px; | |
| } | |
| .voice-assistant-card { | |
| background-color: var(--card-bg-color); | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| .title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| color: var(--primary-color); | |
| } | |
| #responseTime { | |
| font-size: 0.9rem; | |
| color: #777; | |
| margin-bottom: 20px; | |
| } | |
| .indicator-wrapper { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: 30px; | |
| } | |
| .indicator { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px 20px; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| color: #fff; | |
| transition: all 0.3s ease; | |
| } | |
| .indicator svg { | |
| margin-right: 8px; | |
| } | |
| #userIndicator { | |
| background-color: var(--primary-color); | |
| } | |
| #aiIndicator { | |
| background-color: var(--secondary-color); | |
| } | |
| #startStopButton { | |
| background-color: #38cb96; | |
| color: #fff; | |
| border: none; | |
| padding: 15px 30px; | |
| font-size: 1.2rem; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 30px; | |
| } | |
| #startStopButton:hover { | |
| background-color: #1e9b6e; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3); | |
| } | |
| #startStopButton svg { | |
| margin-right: 10px; | |
| } | |
| .settings { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1.5fr; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .setting { | |
| text-align: left; | |
| position: relative; | |
| /* Added for tooltip positioning */ | |
| } | |
| .setting label { | |
| display: block; | |
| margin-bottom: 5px; | |
| font-weight: 700; | |
| color: var(--text-color); | |
| } | |
| select, | |
| input[type="password"] { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| background-color: #fff; | |
| color: var(--text-color); | |
| } | |
| .tooltip { | |
| display: none; | |
| position: absolute; | |
| background-color: #333; | |
| color: #fff; | |
| padding: 5px; | |
| border-radius: 5px; | |
| font-size: 0.8rem; | |
| } | |
| .setting:hover .tooltip { | |
| display: block; | |
| /* Show tooltip on hover */ | |
| } | |
| #transcript { | |
| background-color: #f9f9f9; | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-top: 30px; | |
| text-align: left; | |
| font-family: 'Courier New', monospace; | |
| white-space: pre-wrap; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| @media (max-width: 600px) { | |
| .settings { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="voice-assistant-card"> | |
| <h1 class="title">Voice Assistant</h1> | |
| <div id="responseTime">Latency: 0ms</div> | |
| <div class="indicator-wrapper"> | |
| <div id="userIndicator" class="indicator"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> | |
| <circle cx="12" cy="7" r="4"></circle> | |
| </svg> | |
| <span>User: Idle</span> | |
| </div> | |
| <div id="aiIndicator" class="indicator"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon> | |
| <polyline points="2 17 12 22 22 17"></polyline> | |
| <polyline points="2 12 12 17 22 12"></polyline> | |
| </svg> | |
| <span>AI: Idle</span> | |
| </div> | |
| </div> | |
| <button id="startStopButton"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path> | |
| <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path> | |
| <line x1="12" y1="19" x2="12" y2="23"></line> | |
| <line x1="8" y1="23" x2="16" y2="23"></line> | |
| </svg> Start Listening </button> | |
| <div class="settings"> | |
| <div class="setting"> | |
| <label for="voiceSelect">Voice:</label> | |
| <select id="voiceSelect"> | |
| <option value="Amy">Female</option> | |
| <option value="Brian">Male</option> | |
| </select> | |
| <span class="tooltip">Select the voice type for the assistant.</span> | |
| </div> | |
| <div class="setting"> | |
| <label for="modelSelect">Model:</label> | |
| <select id="modelSelect"> | |
| <option value="8b">Fastest</option> | |
| <option value="70b">Powerful</option> | |
| </select> | |
| <span class="tooltip">Choose the model based on speed or power.</span> | |
| </div> | |
| <div class="setting"> | |
| <label for="apiKey">SambaNava API Key (optional):</label> | |
| <input type="password" id="apiKey" placeholder="Enter your API Key"> | |
| <span class="tooltip">Use SambaNova API key for enhanced speed. You can obtain a free key from <a href="https://cloud.sambanova.ai/apis" style="color: #00f9f0;">https://cloud.sambanova.ai/apis</a>. </span> | |
| </div> | |
| </div> | |
| <div id="transcript"></div> | |
| </div> | |
| </div> | |
| <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'); | |
| if (isChrome && isDesktop) { | |
| script.src = 'script1.js'; | |
| } else { | |
| script.src = 'script2.js'; | |
| } | |
| script.onerror = function() { | |
| console.error('Error loading script:', script.src); | |
| }; | |
| document.head.appendChild(script); | |
| } | |
| document.addEventListener('DOMContentLoaded', loadScript); | |
| </script> | |
| </body> | |
| </html> |