Spaces:
Running
Running
File size: 7,098 Bytes
c0af3b7 79da9de cae794f c0ad1c8 00164ce baa6085 00164ce c0ad1c8 cae794f 00164ce b442bd5 cae794f 00164ce b442bd5 cae794f b442bd5 00164ce b442bd5 00164ce b442bd5 00164ce c0ad1c8 00164ce b442bd5 00164ce b442bd5 00164ce b442bd5 00164ce cae794f 00164ce cae794f 00164ce 15991ac 00164ce cae794f 00164ce cae794f 00164ce cae794f 00164ce cae794f 00164ce c71cc13 00164ce cae794f 00164ce 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 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!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>
<!-- Tailwind CSS -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<!-- Heroicons -->
<script src="https://unpkg.com/heroicons@2.0.13/dist/heroicons.min.js" defer></script>
<!-- Tippy.js CSS -->
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<!-- Tippy.js -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<!-- Gradio Client -->
<script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
</head>
<body class="bg-gradient-to-br from-blue-100 via-blue-200 to-blue-300 font-roboto flex items-center justify-center min-h-screen p-4">
<div class="w-full max-w-4xl bg-white rounded-3xl shadow-lg p-8 relative">
<h1 class="text-4xl font-bold text-blue-600 mb-4 text-center">Video Assistant</h1>
<div id="responseTime" class="text-gray-600 mb-6 text-center">Latency: 0ms</div>
<!-- Webcam Integration -->
<div class="mt-8">
<h2 class="text-xl font-semibold text-gray-700 mb-2">Webcam Feed</h2>
<video id="webcam" autoplay playsinline class="w-full max-w-md rounded-lg shadow"></video>
</div>
<!-- Indicators -->
<div class="flex justify-center space-x-8 mb-6">
<!-- User Indicator -->
<div id="userIndicator" class="flex items-center bg-blue-500 text-white px-4 py-2 rounded-full space-x-2">
<!-- User Icon -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<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>
<!-- AI Indicator -->
<div id="aiIndicator" class="flex items-center bg-yellow-500 text-white px-4 py-2 rounded-full space-x-2">
<!-- AI Icon -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<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>
<!-- Start Listening Button -->
<button id="startStopButton" class="flex items-center mx-auto bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-semibold py-3 px-6 rounded-full shadow transition transform hover:-translate-y-1">
<!-- Mic Icon -->
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<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>
<!-- Settings -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
<!-- Voice Selection -->
<div class="relative">
<label for="voiceSelect" class="block text-gray-700 font-semibold mb-2">Voice:</label>
<select id="voiceSelect" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="Amy">Female</option>
<option value="Brian">Male</option>
</select>
<span class="tooltip" data-tippy-content="Select the voice type for the assistant."></span>
</div>
<!-- Model Selection -->
<div class="relative">
<label for="modelSelect" class="block text-gray-700 font-semibold mb-2">Model:</label>
<select id="modelSelect" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500">
<option value="8b">Fastest</option>
<option value="70b">Powerful</option>
</select>
<span class="tooltip" data-tippy-content="Choose the model based on speed or power."></span>
</div>
<!-- API Key Input -->
<div class="relative">
<label for="apiKey" class="block text-gray-700 font-semibold mb-2">SambaNava API Key (optional):</label>
<input type="password" id="apiKey" placeholder="Enter your API Key" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500">
<span class="tooltip" data-tippy-content="Use SambaNova API key for enhanced speed. You can obtain a free key from <a href='https://cloud.sambanova.ai/apis' class='text-teal-400 underline' target='_blank'>https://cloud.sambanova.ai/apis</a>."></span>
</div>
</div>
<!-- Transcript Section -->
<div id="transcript" class="mt-8 bg-gray-100 rounded-lg p-4 h-48 overflow-y-auto text-sm font-mono shadow-inner">
<!-- Transcript content will appear here -->
</div>
</div>
<!-- Custom Script -->
<script>
// Load appropriate script based on browser and device
function loadScript() {
const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
const isDesktop = window.innerWidth > 768;
let scriptSrc;
if (isChrome && isDesktop) {
scriptSrc = 'script1.js';
} else {
scriptSrc = 'script2.js';
}
const existingScript = document.querySelector('script[data-custom="true"]');
if (existingScript) {
existingScript.remove();
}
const script = document.createElement('script');
script.src = scriptSrc;
script.type = 'module';
script.async = true;
script.setAttribute('data-custom', 'true');
script.onerror = () => console.error('Error loading script:', scriptSrc);
document.body.appendChild(script);
}
document.addEventListener('DOMContentLoaded', () => {
loadScript();
// Initialize Tippy.js tooltips
tippy('.tooltip', {
allowHTML: true,
theme: 'light-border',
placement: 'top',
});
});
</script>
</body>
</html> |