Hugging Face's logo

Spaces:
KingNish
/
Live-Video-Chat
Running

App Files Community
1
KingNish commited on
Commit
cae794f
•
1 Parent(s): 3377ef9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +300 -248
index.html CHANGED
@@ -1,251 +1,303 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Voice Assistant</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
- <style>
9
- :root {
10
- --primary-color: #4a90e2;
11
- --secondary-color: #f39c12;
12
- --background-color: #f0f4f8;
13
- --card-bg-color: #ffffff;
14
- --text-color: #333333;
15
- --border-color: #e0e0e0;
16
- }
17
-
18
- body {
19
- font-family: 'Roboto', sans-serif;
20
- background-color: var(--background-color);
21
- color: var(--text-color);
22
- margin: 0;
23
- padding: 0;
24
- display: flex;
25
- justify-content: center;
26
- align-items: center;
27
- min-height: 100vh;
28
- }
29
-
30
- .container {
31
- width: 90%;
32
- max-width: 800px;
33
- }
34
-
35
- .voice-assistant-card {
36
- background-color: var(--card-bg-color);
37
- border-radius: 20px;
38
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
39
- padding: 40px;
40
- text-align: center;
41
- }
42
-
43
- .title {
44
- font-size: 2.5rem;
45
- font-weight: 700;
46
- margin-bottom: 20px;
47
- color: var(--primary-color);
48
- }
49
-
50
- #responseTime {
51
- font-size: 0.9rem;
52
- color: #777;
53
- margin-bottom: 20px;
54
- }
55
-
56
- .indicator-wrapper {
57
- display: flex;
58
- justify-content: space-around;
59
- margin-bottom: 30px;
60
- }
61
-
62
- .indicator {
63
- display: flex;
64
- align-items: center;
65
- padding: 10px 20px;
66
- border-radius: 50px;
67
- font-size: 1rem;
68
- color: #fff;
69
- transition: all 0.3s ease;
70
- }
71
-
72
- .indicator svg {
73
- margin-right: 8px;
74
- }
75
-
76
- #userIndicator {
77
- background-color: var(--primary-color);
78
- }
79
-
80
- #aiIndicator {
81
- background-color: var(--secondary-color);
82
- }
83
-
84
- #startStopButton {
85
- background-color: #38cb96;
86
- color: #fff;
87
- border: none;
88
- padding: 15px 30px;
89
- font-size: 1.2rem;
90
- border-radius: 50px;
91
- cursor: pointer;
92
- transition: all 0.3s ease;
93
- display: flex;
94
- align-items: center;
95
- justify-content: center;
96
- margin: 0 auto 30px;
97
- }
98
-
99
- #startStopButton:hover {
100
- background-color: #1e9b6e;
101
- transform: translateY(-2px);
102
- box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
103
- }
104
-
105
- #startStopButton svg {
106
- margin-right: 10px;
107
- }
108
-
109
- .settings {
110
- display: grid;
111
- grid-template-columns: 1fr 1fr 1.5fr;
112
- gap: 20px;
113
- margin-bottom: 30px;
114
- }
115
-
116
- .setting {
117
- text-align: left;
118
- position: relative;
119
- /* Added for tooltip positioning */
120
- }
121
-
122
- .setting label {
123
- display: block;
124
- margin-bottom: 5px;
125
- font-weight: 700;
126
- color: var(--text-color);
127
- }
128
-
129
- select,
130
- input[type="password"] {
131
- width: 100%;
132
- padding: 10px;
133
- border: 1px solid var(--border-color);
134
- border-radius: 5px;
135
- font-size: 1rem;
136
- background-color: #fff;
137
- color: var(--text-color);
138
- }
139
-
140
- .tooltip {
141
- display: none;
142
- position: absolute;
143
- background-color: #333;
144
- color: #fff;
145
- padding: 5px;
146
- border-radius: 5px;
147
- font-size: 0.8rem;
148
- }
149
-
150
- .setting:hover .tooltip {
151
- display: block;
152
- /* Show tooltip on hover */
153
- }
154
-
155
- #transcript {
156
- background-color: #f9f9f9;
157
- border-radius: 10px;
158
- padding: 20px;
159
- margin-top: 30px;
160
- text-align: left;
161
- font-family: 'Courier New', monospace;
162
- white-space: pre-wrap;
163
- max-height: 200px;
164
- overflow-y: auto;
165
- }
166
-
167
- @media (max-width: 600px) {
168
- .settings {
169
- grid-template-columns: 1fr;
170
- }
171
- }
172
- </style>
173
- </head>
174
- <body>
175
- <div class="container">
176
- <div class="voice-assistant-card">
177
- <h1 class="title">Voice Assistant</h1>
178
- <div id="responseTime">Latency: 0ms</div>
179
- <div class="indicator-wrapper">
180
- <div id="userIndicator" class="indicator">
181
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
182
- <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
183
- <circle cx="12" cy="7" r="4"></circle>
184
- </svg>
185
- <span>User: Idle</span>
186
- </div>
187
- <div id="aiIndicator" class="indicator">
188
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
189
- <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
190
- <polyline points="2 17 12 22 22 17"></polyline>
191
- <polyline points="2 12 12 17 22 12"></polyline>
192
- </svg>
193
- <span>AI: Idle</span>
194
- </div>
195
- </div>
196
- <button id="startStopButton">
197
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
198
- <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
199
- <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
200
- <line x1="12" y1="19" x2="12" y2="23"></line>
201
- <line x1="8" y1="23" x2="16" y2="23"></line>
202
- </svg> Start Listening </button>
203
- <div class="settings">
204
- <div class="setting">
205
- <label for="voiceSelect">Voice:</label>
206
- <select id="voiceSelect">
207
- <option value="Amy">Female</option>
208
- <option value="Brian">Male</option>
209
- </select>
210
- <span class="tooltip">Select the voice type for the assistant.</span>
211
- </div>
212
- <div class="setting">
213
- <label for="modelSelect">Model:</label>
214
- <select id="modelSelect">
215
- <option value="8b">Fastest</option>
216
- <option value="70b">Powerful</option>
217
- </select>
218
- <span class="tooltip">Choose the model based on speed or power.</span>
219
- </div>
220
- <div class="setting">
221
- <label for="apiKey">SambaNava API Key (optional):</label>
222
- <input type="password" id="apiKey" placeholder="Enter your API Key">
223
- <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>
224
- </div>
225
- </div>
226
- <div id="transcript"></div>
227
- </div>
228
- </div>
229
- <script>
230
- function loadScript() {
231
- var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
232
- var isDesktop = window.innerWidth > 768;
233
- var existingScript = document.querySelector('script[src="script1.js"], script[src="script2.js"]');
234
- if (existingScript) {
235
- existingScript.remove();
236
- }
237
- var script = document.createElement('script');
238
- if (isChrome && isDesktop) {
239
- script.src = 'script1.js';
240
- } else {
241
- script.src = 'script2.js';
242
- }
243
- script.onerror = function() {
244
- console.error('Error loading script:', script.src);
245
- };
246
- document.head.appendChild(script);
247
- }
248
- document.addEventListener('DOMContentLoaded', loadScript);
249
- </script>
250
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
251
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Voice Assistant</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary-color: #4a90e2;
11
+ --secondary-color: #f39c12;
12
+ --accent-color: #38cb96;
13
+ --background-color: #f0f4f8;
14
+ --card-bg-color: #ffffff;
15
+ --text-color: #333333;
16
+ --border-color: #e0e0e0;
17
+ --shadow-color: rgba(0, 0, 0, 0.1);
18
+ --hover-shadow-color: rgba(74, 144, 226, 0.3);
19
+ --hover-bg-color: #1e9b6e;
20
+ --active-bg-color: #1a855d;
21
+ --tooltip-bg-color: #333;
22
+ --tooltip-text-color: #fff;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Roboto', sans-serif;
27
+ background: linear-gradient(135deg, var(--background-color) 0%, #dfe9f3 100%);
28
+ color: var(--text-color);
29
+ margin: 0;
30
+ padding: 0;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ min-height: 100vh;
35
+ }
36
+
37
+ .container {
38
+ width: 90%;
39
+ max-width: 800px;
40
+ }
41
+
42
+ .voice-assistant-card {
43
+ background: linear-gradient(135deg, var(--card-bg-color) 0%, #f9f9f9 100%);
44
+ border-radius: 20px;
45
+ box-shadow: 0 10px 30px var(--shadow-color);
46
+ padding: 40px;
47
+ text-align: center;
48
+ position: relative;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .voice-assistant-card::before {
53
+ content: '';
54
+ position: absolute;
55
+ top: 0;
56
+ left: 0;
57
+ width: 100%;
58
+ height: 100%;
59
+ background: rgba(255, 255, 255, 0.1);
60
+ border-radius: 20px;
61
+ z-index: -1;
62
+ filter: blur(10px);
63
+ }
64
+
65
+ .title {
66
+ font-size: 2.5rem;
67
+ font-weight: 700;
68
+ margin-bottom: 20px;
69
+ color: var(--primary-color);
70
+ position: relative;
71
+ z-index: 1;
72
+ }
73
+
74
+ #responseTime {
75
+ font-size: 0.9rem;
76
+ color: #777;
77
+ margin-bottom: 20px;
78
+ position: relative;
79
+ z-index: 1;
80
+ }
81
+
82
+ .indicator-wrapper {
83
+ display: flex;
84
+ justify-content: space-around;
85
+ margin-bottom: 30px;
86
+ position: relative;
87
+ z-index: 1;
88
+ }
89
+
90
+ .indicator {
91
+ display: flex;
92
+ align-items: center;
93
+ padding: 10px 20px;
94
+ border-radius: 50px;
95
+ font-size: 1rem;
96
+ color: #fff;
97
+ transition: all 0.3s ease;
98
+ position: relative;
99
+ z-index: 1;
100
+ }
101
+
102
+ .indicator svg {
103
+ margin-right: 8px;
104
+ }
105
+
106
+ #userIndicator {
107
+ background: linear-gradient(135deg, var(--primary-color) 0%, #6fb1f2 100%);
108
+ }
109
+
110
+ #aiIndicator {
111
+ background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaf5c 100%);
112
+ }
113
+
114
+ #startStopButton {
115
+ background: linear-gradient(135deg, var(--accent-color) 0%, #28b475 100%);
116
+ color: #fff;
117
+ border: none;
118
+ padding: 15px 30px;
119
+ font-size: 1.2rem;
120
+ border-radius: 50px;
121
+ cursor: pointer;
122
+ transition: all 0.3s ease;
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ margin: 0 auto 30px;
127
+ position: relative;
128
+ z-index: 1;
129
+ }
130
+
131
+ #startStopButton:hover {
132
+ background: linear-gradient(135deg, var(--hover-bg-color) 0%, #28b475 100%);
133
+ transform: translateY(-2px);
134
+ box-shadow: 0 5px 15px var(--hover-shadow-color);
135
+ }
136
+
137
+ #startStopButton:active {
138
+ background: linear-gradient(135deg, var(--active-bg-color) 0%, #28b475 100%);
139
+ transform: translateY(0);
140
+ box-shadow: 0 2px 10px var(--shadow-color);
141
+ }
142
+
143
+ #startStopButton svg {
144
+ margin-right: 10px;
145
+ }
146
+
147
+ .settings {
148
+ display: grid;
149
+ grid-template-columns: 1fr 1fr 1.5fr;
150
+ gap: 20px;
151
+ margin-bottom: 30px;
152
+ position: relative;
153
+ z-index: 1;
154
+ }
155
+
156
+ .setting {
157
+ text-align: left;
158
+ position: relative;
159
+ /* Added for tooltip positioning */
160
+ }
161
+
162
+ .setting label {
163
+ display: block;
164
+ margin-bottom: 5px;
165
+ font-weight: 700;
166
+ color: var(--text-color);
167
+ }
168
+
169
+ select,
170
+ input[type="password"] {
171
+ width: 100%;
172
+ padding: 10px;
173
+ border: 1px solid var(--border-color);
174
+ border-radius: 5px;
175
+ font-size: 1rem;
176
+ background-color: #fff;
177
+ color: var(--text-color);
178
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
179
+ transition: all 0.3s ease;
180
+ }
181
+
182
+ select:hover,
183
+ input[type="password"]:hover {
184
+ border-color: var(--primary-color);
185
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
186
+ }
187
+
188
+ .tooltip {
189
+ display: none;
190
+ position: absolute;
191
+ background-color: var(--tooltip-bg-color);
192
+ color: var(--tooltip-text-color);
193
+ padding: 5px;
194
+ border-radius: 5px;
195
+ font-size: 0.8rem;
196
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
197
+ }
198
+
199
+ .setting:hover .tooltip {
200
+ display: block;
201
+ /* Show tooltip on hover */
202
+ }
203
+
204
+ #transcript {
205
+ background: linear-gradient(135deg, #f9f9f9 0%, #e6e6e6 100%);
206
+ border-radius: 10px;
207
+ padding: 20px;
208
+ margin-top: 30px;
209
+ text-align: left;
210
+ font-family: 'Courier New', monospace;
211
+ white-space: pre-wrap;
212
+ max-height: 200px;
213
+ overflow-y: auto;
214
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
215
+ position: relative;
216
+ z-index: 1;
217
+ }
218
+
219
+ @media (max-width: 600px) {
220
+ .settings {
221
+ grid-template-columns: 1fr;
222
+ }
223
+ }
224
+ </style>
225
+ </head>
226
+ <body>
227
+ <div class="container">
228
+ <div class="voice-assistant-card">
229
+ <h1 class="title">Voice Assistant</h1>
230
+ <div id="responseTime">Latency: 0ms</div>
231
+ <div class="indicator-wrapper">
232
+ <div id="userIndicator" class="indicator">
233
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
234
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
235
+ <circle cx="12" cy="7" r="4"></circle>
236
+ </svg>
237
+ <span>User: Idle</span>
238
+ </div>
239
+ <div id="aiIndicator" class="indicator">
240
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
241
+ <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
242
+ <polyline points="2 17 12 22 22 17"></polyline>
243
+ <polyline points="2 12 12 17 22 12"></polyline>
244
+ </svg>
245
+ <span>AI: Idle</span>
246
+ </div>
247
+ </div>
248
+ <button id="startStopButton">
249
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
250
+ <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
251
+ <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
252
+ <line x1="12" y1="19" x2="12" y2="23"></line>
253
+ <line x1="8" y1="23" x2="16" y2="23"></line>
254
+ </svg> Start Listening </button>
255
+ <div class="settings">
256
+ <div class="setting">
257
+ <label for="voiceSelect">Voice:</label>
258
+ <select id="voiceSelect">
259
+ <option value="Amy">Female</option>
260
+ <option value="Brian">Male</option>
261
+ </select>
262
+ <span class="tooltip">Select the voice type for the assistant.</span>
263
+ </div>
264
+ <div class="setting">
265
+ <label for="modelSelect">Model:</label>
266
+ <select id="modelSelect">
267
+ <option value="8b">Fastest</option>
268
+ <option value="70b">Powerful</option>
269
+ </select>
270
+ <span class="tooltip">Choose the model based on speed or power.</span>
271
+ </div>
272
+ <div class="setting">
273
+ <label for="apiKey">SambaNava API Key (optional):</label>
274
+ <input type="password" id="apiKey" placeholder="Enter your API Key">
275
+ <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>
276
+ </div>
277
+ </div>
278
+ <div id="transcript"></div>
279
+ </div>
280
+ </div>
281
+ <script>
282
+ function loadScript() {
283
+ var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
284
+ var isDesktop = window.innerWidth > 768;
285
+ var existingScript = document.querySelector('script[src="script1.js"], script[src="script2.js"]');
286
+ if (existingScript) {
287
+ existingScript.remove();
288
+ }
289
+ var script = document.createElement('script');
290
+ if (isChrome && isDesktop) {
291
+ script.src = 'script1.js';
292
+ } else {
293
+ script.src = 'script2.js';
294
+ }
295
+ script.onerror = function() {
296
+ console.error('Error loading script:', script.src);
297
+ };
298
+ document.head.appendChild(script);
299
+ }
300
+ document.addEventListener('DOMContentLoaded', loadScript);
301
+ </script>
302
+ </body>
303
  </html>