Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Assistant</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> | |
| <link href="styles.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="voice-assistant-card"> | |
| <h1 class="title">Video 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> | |
| <!-- Webcam Integration --> | |
| <div class="webcam-container mt-4"> | |
| <h2 class="text-lg font-semibold mb-2">Webcam Feed</h2> | |
| <video id="webcam" autoplay playsinline width="640" height="480"></video> | |
| </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> |