Spaces:
Running
Running
File size: 4,988 Bytes
c0af3b7 79da9de cae794f c0ad1c8 cae794f 666a697 c0ad1c8 cae794f c0ad1c8 cae794f df40d37 cae794f c0ad1c8 cae794f c0ad1c8 15991ac cae794f 15991ac cae794f 15991ac cae794f c0af3b7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<!DOCTYPE html>
<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');
script.type = 'module'; // Set the script type to module
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> |