Hugging Face's logo

Spaces:
KingNish
/
Live-Video-Chat
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +62 -50
index.html CHANGED
@@ -4,74 +4,86 @@
4
  <meta charset="UTF-8">
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>
@@ -85,7 +97,7 @@
85
  existingScript.remove();
86
  }
87
  var script = document.createElement('script');
88
- script.type = 'module'; // Set the script type to module
89
  if (isChrome && isDesktop) {
90
  script.src = 'script1.js';
91
  } else {
 
4
  <meta charset="UTF-8">
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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
+ <script src="https://cdn.tailwindcss.com"></script>
 
 
9
  <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#4a90e2',
17
+ secondary: '#f39c12',
18
+ accent: '#38cb96',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
  </head>
25
+ <body class="bg-gray-100 font-sans">
26
+ <div class="container mx-auto px-4 py-8">
27
+ <div class="bg-white rounded-lg shadow-lg p-6 md:p-8" x-data="{ isListening: false }">
28
+ <h1 class="text-3xl font-bold text-center text-primary mb-6">Video Assistant</h1>
29
+
30
+ <div class="text-sm text-gray-600 text-center mb-4" id="responseTime">Latency: 0ms</div>
31
+
32
+ <div class="flex justify-center space-x-4 mb-6">
33
+ <div class="bg-primary text-white px-4 py-2 rounded-full flex items-center" id="userIndicator">
34
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
 
35
  <span>User: Idle</span>
36
  </div>
37
+ <div class="bg-secondary text-white px-4 py-2 rounded-full flex items-center" id="aiIndicator">
38
+ <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
 
 
 
 
39
  <span>AI: Idle</span>
40
  </div>
41
  </div>
42
+
43
+ <button
44
+ id="startStopButton"
45
+ class="bg-accent hover:bg-accent-dark text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg flex items-center justify-center mx-auto mb-6"
46
+ @click="isListening = !isListening"
47
+ :class="{ 'bg-red-500 hover:bg-red-600': isListening }"
48
+ >
49
+ <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path></svg>
50
+ <span x-text="isListening ? 'Stop Listening' : 'Start Listening'"></span>
51
  </button>
52
+
53
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
54
+ <div class="relative">
55
+ <label for="voiceSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice:</label>
56
+ <select id="voiceSelect" class="block w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
57
  <option value="Amy">Female</option>
58
  <option value="Brian">Male</option>
59
  </select>
60
+ <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
61
+ <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
62
+ </div>
63
  </div>
64
+ <div class="relative">
65
+ <label for="modelSelect" class="block text-sm font-medium text-gray-700 mb-1">Model:</label>
66
+ <select id="modelSelect" class="block w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
67
  <option value="8b">Fastest</option>
68
  <option value="70b">Powerful</option>
69
  </select>
70
+ <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
71
+ <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
72
+ </div>
73
  </div>
74
+ <div>
75
+ <label for="apiKey" class="block text-sm font-medium text-gray-700 mb-1">SambaNava API Key:</label>
76
+ <input type="password" id="apiKey" placeholder="Enter your API Key" class="block w-full bg-white border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary">
 
77
  </div>
78
  </div>
79
+
80
+ <div id="transcript" class="bg-gray-100 rounded-lg p-4 text-sm font-mono h-40 overflow-y-auto mb-6"></div>
81
+
82
+ <div class="webcam-container">
 
 
83
  <h2 class="text-xl font-semibold mb-2">Webcam Feed</h2>
84
+ <div class="relative w-full h-0 pb-[56.25%]">
85
+ <video id="webcam" autoplay playsinline class="absolute top-0 left-0 w-full h-full object-cover rounded-lg"></video>
86
+ </div>
87
  </div>
88
  </div>
89
  </div>
 
97
  existingScript.remove();
98
  }
99
  var script = document.createElement('script');
100
+ script.type = 'module';
101
  if (isChrome && isDesktop) {
102
  script.src = 'script1.js';
103
  } else {