Hugging Face's logo

Spaces:
KingNish
/
Live-Video-Chat
Running

App Files Community
1
KingNish commited on
Commit
4fe65b0
·
verified ·
1 Parent(s): 05537ff

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -49
index.html CHANGED
@@ -5,80 +5,77 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Video Assistant</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
 
10
  <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
11
  </head>
12
- <body class="bg-gray-100 font-roboto">
13
- <div class="container mx-auto px-4 py-8">
14
- <div class="voice-assistant-card bg-white rounded-lg shadow-lg p-8 relative overflow-hidden">
15
- <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-green-500 opacity-25 blur-lg"></div>
16
- <h1 class="title text-3xl font-bold text-blue-600 mb-4 z-10">Video Assistant</h1>
17
- <div id="responseTime" class="text-gray-600 text-sm mb-4 z-10">Latency: 0ms</div>
18
-
19
- <div class="indicator-wrapper flex space-x-4 mb-6 z-10">
20
- <div id="userIndicator" class="indicator bg-blue-500 rounded-full px-4 py-2 flex items-center text-white">
21
- <i class="fas fa-user mr-2"></i>
 
22
  <span>User: Idle</span>
23
  </div>
24
- <div id="aiIndicator" class="indicator bg-yellow-500 rounded-full px-4 py-2 flex items-center text-white">
25
- <i class="fas fa-robot mr-2"></i>
 
 
 
 
26
  <span>AI: Idle</span>
27
  </div>
28
  </div>
29
-
30
- <button id="startStopButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-green-300 z-10">
31
- <i class="fas fa-microphone mr-2"></i> Start Listening
 
 
 
 
 
32
  </button>
33
-
34
- <div class="settings grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 z-10">
35
  <div class="setting">
36
- <label for="voiceSelect" class="block text-gray-700 font-bold mb-2">Voice:</label>
37
- <select id="voiceSelect" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
38
  <option value="Amy">Female</option>
39
  <option value="Brian">Male</option>
40
  </select>
41
- <span class="tooltip absolute bg-gray-800 text-white text-xs rounded p-1 invisible opacity-0 transition-opacity duration-300">Select the voice type for the assistant.</span>
42
  </div>
43
  <div class="setting">
44
- <label for="modelSelect" class="block text-gray-700 font-bold mb-2">Model:</label>
45
- <select id="modelSelect" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
46
  <option value="8b">Fastest</option>
47
  <option value="70b">Powerful</option>
48
  </select>
49
- <span class="tooltip absolute bg-gray-800 text-white text-xs rounded p-1 invisible opacity-0 transition-opacity duration-300">Choose the model based on speed or power.</span>
50
  </div>
51
  <div class="setting">
52
- <label for="apiKey" class="block text-gray-700 font-bold mb-2">SambaNava API Key (optional):</label>
53
- <input type="password" id="apiKey" placeholder="Enter your API Key" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
54
- <span class="tooltip absolute bg-gray-800 text-white text-xs rounded p-1 invisible opacity-0 transition-opacity duration-300">Use SambaNova API key for enhanced speed. You can obtain a free key from <a href="https://cloud.sambanova.ai/apis" class="text-blue-300">https://cloud.sambanova.ai/apis</a>.</span>
55
  </div>
56
  </div>
 
 
 
57
 
58
- <div id="transcript" class="bg-gray-200 rounded-lg p-4 mt-8 text-gray-700 whitespace-pre-wrap overflow-y-auto max-h-64 z-10"></div>
59
-
60
- <div class="webcam-container mt-8 z-10">
61
- <h2 class="text-xl font-semibold text-gray-800 mb-2">Webcam Feed</h2>
62
- <video id="webcam" autoplay playsinline width="640" height="480" class="rounded-lg shadow-md"></video>
63
  </div>
64
  </div>
65
  </div>
66
 
67
- <script>
68
- // Add simple tooltip hover effect
69
- const settings = document.querySelectorAll('.setting');
70
- settings.forEach(setting => {
71
- setting.addEventListener('mouseover', () => {
72
- setting.querySelector('.tooltip').classList.remove('invisible');
73
- setting.querySelector('.tooltip').classList.add('opacity-100');
74
- });
75
- setting.addEventListener('mouseout', () => {
76
- setting.querySelector('.tooltip').classList.add('invisible');
77
- setting.querySelector('.tooltip').classList.remove('opacity-100');
78
- });
79
- });
80
- </script>
81
-
82
  <script>
83
  function loadScript() {
84
  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
@@ -101,6 +98,5 @@
101
  }
102
  document.addEventListener('DOMContentLoaded', loadScript);
103
  </script>
104
-
105
  </body>
106
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Video Assistant</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animated.css/1.1.1/animated.min.css">
11
  <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
12
  </head>
13
+ <body class="bg-gradient-to-r from-blue-100 to-gray-100 flex items-center justify-center min-h-screen">
14
+ <div class="container max-w-2xl w-full p-8 bg-white rounded-2xl shadow-2xl">
15
+ <div class="voice-assistant-card">
16
+ <h1 class="text-3xl font-bold text-blue-600 mb-4">Video Assistant</h1>
17
+ <div id="responseTime" class="text-gray-500 text-sm mb-6">Latency: 0ms</div>
18
+ <div class="indicator-wrapper flex justify-around mb-8">
19
+ <div id="userIndicator" class="indicator p-3 rounded-full text-white flex items-center gap-2 bg-blue-500">
20
+ <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
21
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
22
+ <circle cx="12" cy="7" r="4"></circle>
23
+ </svg>
24
  <span>User: Idle</span>
25
  </div>
26
+ <div id="aiIndicator" class="indicator p-3 rounded-full text-white flex items-center gap-2 bg-yellow-500">
27
+ <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
28
+ <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
29
+ <polyline points="2 17 12 22 22 17"></polyline>
30
+ <polyline points="2 12 12 17 22 12"></polyline>
31
+ </svg>
32
  <span>AI: Idle</span>
33
  </div>
34
  </div>
35
+ <button id="startStopButton" class="w-full bg-green-500 text-white py-3 rounded-full flex items-center justify-center gap-2 hover:bg-green-600 transition duration-300">
36
+ <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
37
+ <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
38
+ <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
39
+ <line x1="12" y1="19" x2="12" y2="23"></line>
40
+ <line x1="8" y1="23" x2="16" y2="23"></line>
41
+ </svg>
42
+ Start Listening
43
  </button>
44
+ <div class="settings grid grid-cols-3 gap-4 mt-8">
 
45
  <div class="setting">
46
+ <label for="voiceSelect" class="block font-medium text-gray-700">Voice:</label>
47
+ <select id="voiceSelect" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
48
  <option value="Amy">Female</option>
49
  <option value="Brian">Male</option>
50
  </select>
51
+ <span class="tooltip text-sm text-gray-500">Select the voice type for the assistant.</span>
52
  </div>
53
  <div class="setting">
54
+ <label for="modelSelect" class="block font-medium text-gray-700">Model:</label>
55
+ <select id="modelSelect" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
56
  <option value="8b">Fastest</option>
57
  <option value="70b">Powerful</option>
58
  </select>
59
+ <span class="tooltip text-sm text-gray-500">Choose the model based on speed or power.</span>
60
  </div>
61
  <div class="setting">
62
+ <label for="apiKey" class="block font-medium text-gray-700">SambaNava API Key (optional):</label>
63
+ <input type="password" id="apiKey" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your API Key">
64
+ <span class="tooltip text-sm text-gray-500">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">https://cloud.sambanova.ai/apis</a>.</span>
65
  </div>
66
  </div>
67
+ <div id="transcript" class="mt-8 p-4 bg-gray-100 rounded-lg text-left whitespace-pre-wrap max-h-96 overflow-y-auto">
68
+ <!-- Transcripts will appear here -->
69
+ </div>
70
 
71
+ <!-- Webcam Integration -->
72
+ <div class="webcam-container mt-8">
73
+ <h2 class="text-xl font-semibold mb-2">Webcam Feed</h2>
74
+ <video id="webcam" autoplay playsinline class="w-full h-auto"></video>
 
75
  </div>
76
  </div>
77
  </div>
78
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  <script>
80
  function loadScript() {
81
  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
 
98
  }
99
  document.addEventListener('DOMContentLoaded', loadScript);
100
  </script>
 
101
  </body>
102
  </html>