Hugging Face's logo

Spaces:
KingNish
/
Live-Video-Chat
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +48 -41
index.html CHANGED
@@ -5,73 +5,80 @@
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="styles.css" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
10
  <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
11
  </head>
12
- <body>
13
- <div class="container">
14
- <div class="voice-assistant-card">
15
- <h1 class="title">Video Assistant</h1>
16
- <div id="responseTime">Latency: 0ms</div>
17
- <div class="indicator-wrapper">
18
- <div id="userIndicator" class="indicator">
19
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
20
- <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
21
- <circle cx="12" cy="7" r="4"></circle>
22
- </svg>
23
  <span>User: Idle</span>
24
  </div>
25
- <div id="aiIndicator" class="indicator">
26
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
27
- <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
28
- <polyline points="2 17 12 22 22 17"></polyline>
29
- <polyline points="2 12 12 17 22 12"></polyline>
30
- </svg>
31
  <span>AI: Idle</span>
32
  </div>
33
  </div>
34
- <button id="startStopButton">
35
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
36
- <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
37
- <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
38
- <line x1="12" y1="19" x2="12" y2="23"></line>
39
- <line x1="8" y1="23" x2="16" y2="23"></line>
40
- </svg> Start Listening </button>
41
- <div class="settings">
42
  <div class="setting">
43
- <label for="voiceSelect">Voice:</label>
44
- <select id="voiceSelect">
45
  <option value="Amy">Female</option>
46
  <option value="Brian">Male</option>
47
  </select>
48
- <span class="tooltip">Select the voice type for the assistant.</span>
49
  </div>
50
  <div class="setting">
51
- <label for="modelSelect">Model:</label>
52
- <select id="modelSelect">
53
  <option value="8b">Fastest</option>
54
  <option value="70b">Powerful</option>
55
  </select>
56
- <span class="tooltip">Choose the model based on speed or power.</span>
57
  </div>
58
  <div class="setting">
59
- <label for="apiKey">SambaNava API Key (optional):</label>
60
- <input type="password" id="apiKey" placeholder="Enter your API Key">
61
- <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>
62
  </div>
63
  </div>
64
- <div id="transcript"></div>
65
 
 
66
 
67
- <!-- Webcam Integration -->
68
- <div class="webcam-container mt-4">
69
- <h2 class="text-lg font-semibold mb-2">Webcam Feed</h2>
70
- <video id="webcam" autoplay playsinline width="640" height="480"></video>
71
  </div>
72
  </div>
73
  </div>
74
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  <script>
76
  function loadScript() {
77
  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/Edg/.test(navigator.userAgent);
 
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/[email protected]/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);