Spaces:
Running
Running
File size: 6,471 Bytes
c0af3b7 79da9de cae794f c0ad1c8 b442bd5 c0ad1c8 b442bd5 cae794f b442bd5 cae794f b442bd5 cae794f b442bd5 c0ad1c8 b442bd5 cae794f c0ad1c8 15991ac cae794f b442bd5 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 142 143 144 |
<!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="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
<style>
:root {
--primary-color: #4a90e2;
--secondary-color: #f39c12;
--accent-color: #38cb96;
--background-color: #f0f4f8;
--card-bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
--shadow-color: rgba(0, 0, 0, 0.1);
--hover-shadow-color: rgba(74, 144, 226, 0.3);
--hover-bg-color: #1e9b6e;
--active-bg-color: #1a855d;
--tooltip-bg-color: #333;
--tooltip-text-color: #fff;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.tooltip {
display: none;
position: absolute;
background-color: var(--tooltip-bg-color);
color: var(--tooltip-text-color);
padding: 5px;
border-radius: 5px;
font-size: 0.8rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.setting:hover .tooltip {
display: block;
/* Show tooltip on hover */
}
#transcript {
font-family: 'Courier New', monospace;
white-space: pre-wrap;
overflow-y: auto;
max-height: 200px;
}
@media (max-width: 600px) {
.settings {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body class="bg-gradient-to-r from-blue-100 to-gray-200 flex items-center justify-center min-h-screen">
<div class="container max-w-md w-full p-8 bg-white rounded-2xl shadow-xl relative">
<h1 class="text-3xl font-bold text-blue-600 mb-6">Video Assistant</h1>
<div id="responseTime" class="text-gray-500 text-sm mb-6">Latency: 0ms</div>
<div class="indicator-wrapper flex justify-around mb-8">
<div id="userIndicator" class="indicator flex items-center p-3 rounded-full bg-blue-500 text-white">
<i class="fas fa-user-circle mr-2"></i>
<span>User: Idle</span>
</div>
<div id="aiIndicator" class="indicator flex items-center p-3 rounded-full bg-yellow-500 text-white">
<i class="fas fa-robot mr-2"></i>
<span>AI: Idle</span>
</div>
</div>
<button id="startStopButton" class="w-full bg-green-500 text-white p-4 rounded-full shadow-lg hover:shadow-xl transition duration-300 flex items-center justify-center mb-8">
<i class="fas fa-microphone mr-2"></i>
Start Listening
</button>
<div class="settings grid grid-cols-1 gap-4 mb-8">
<div class="setting flex items-center">
<label for="voiceSelect" class="mr-4 text-gray-700 font-medium">Voice:</label>
<select id="voiceSelect" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<option value="Amy">Female</option>
<option value="Brian">Male</option>
</select>
<span class="tooltip text-gray-500 text-sm ml-2 cursor-help">Select the voice type for the assistant.</span>
</div>
<div class="setting flex items-center">
<label for="modelSelect" class="mr-4 text-gray-700 font-medium">Model:</label>
<select id="modelSelect" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
<option value="8b">Fastest</option>
<option value="70b">Powerful</option>
</select>
<span class="tooltip text-gray-500 text-sm ml-2 cursor-help">Choose the model type for speed or power.</span>
</div>
<div class="setting flex items-center">
<label for="apiKey" class="mr-4 text-gray-700 font-medium">SambaNava API Key (optional):</label>
<input type="password" id="apiKey" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Enter your API Key">
<span class="tooltip text-gray-500 text-sm ml-2 cursor-help">Use SambaNova API key for enhanced speed. You can obtain a free key from <a href="https://cloud.sambanova.ai/apis" class="text-blue-500">here</a>.</span>
</div>
</div>
<div id="transcript" class="p-4 bg-gray-100 rounded-lg overflow-y-auto max-h-96 mb-8">
<!-- Transcription will appear here -->
</div>
<div class="webcam-container mb-6">
<h2 class="text-xl font-semibold mb-2">Webcam Feed</h2>
<video id="webcam" autoplay playsinline class="w-full h-auto rounded-lg shadow-lg"></video>
</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> |