Live-Video-Chat

Running

App Files Files Community

KingNish commited on Sep 28, 2024

Commit

b442bd5

verified ·

1 Parent(s): 37acd69

Update index.html

Browse files

Files changed (1) hide show

index.html +107 -77

index.html CHANGED Viewed

@@ -4,87 +4,117 @@
     <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#4a90e2',
-                        secondary: '#f39c12',
-                        accent: '#38cb96',
-                    }
-                }
-            }
-        }
-    </script>
 </head>
-<body class="bg-gray-100 font-sans">
-    <div class="container mx-auto px-4 py-8">
-        <div class="bg-white rounded-lg shadow-lg p-6 md:p-8" x-data="{ isListening: false }">
-            <h1 class="text-3xl font-bold text-center text-primary mb-6">Video Assistant</h1>
-            <div class="text-sm text-gray-600 text-center mb-4" id="responseTime">Latency: 0ms</div>
-            <div class="flex justify-center space-x-4 mb-6">
-                <div class="bg-primary text-white px-4 py-2 rounded-full flex items-center" id="userIndicator">
-                    <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>
-                    <span>User: Idle</span>
-                </div>
-                <div class="bg-secondary text-white px-4 py-2 rounded-full flex items-center" id="aiIndicator">
-                    <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>
-                    <span>AI: Idle</span>
-                </div>
             </div>
-            <button
-                id="startStopButton"
-                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"
-                @click="isListening = !isListening"
-                :class="{ 'bg-red-500 hover:bg-red-600': isListening }"
-            >
-                <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>
-                <span x-text="isListening ? 'Stop Listening' : 'Start Listening'"></span>
-            </button>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                <div class="relative">
-                    <label for="voiceSelect" class="block text-sm font-medium text-gray-700 mb-1">Voice:</label>
-                    <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">
-                        <option value="Amy">Female</option>
-                        <option value="Brian">Male</option>
-                    </select>
-                    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
-                        <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>
-                    </div>
-                </div>
-                <div class="relative">
-                    <label for="modelSelect" class="block text-sm font-medium text-gray-700 mb-1">Model:</label>
-                    <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">
-                        <option value="8b">Fastest</option>
-                        <option value="70b">Powerful</option>
-                    </select>
-                    <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
-                        <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>
-                    </div>
-                </div>
-                <div>
-                    <label for="apiKey" class="block text-sm font-medium text-gray-700 mb-1">SambaNava API Key:</label>
-                    <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">
-                </div>
             </div>
-            <div id="transcript" class="bg-gray-100 rounded-lg p-4 text-sm font-mono h-40 overflow-y-auto mb-6"></div>
-            <div class="webcam-container">
-                <h2 class="text-xl font-semibold mb-2">Webcam Feed</h2>
-                <div class="relative w-full h-0 pb-[56.25%]">
-                    <video id="webcam" autoplay playsinline class="absolute top-0 left-0 w-full h-full object-cover rounded-lg"></video>
-                </div>
             </div>
         </div>
     </div>
@@ -97,7 +127,7 @@
                 existingScript.remove();
             }
             var script = document.createElement('script');
-            script.type = 'module';
             if (isChrome && isDesktop) {
                 script.src = 'script1.js';
             } else {

     <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>
                 existingScript.remove();
             }
             var script = document.createElement('script');
+            script.type = 'module'; // Set the script type to module
             if (isChrome && isDesktop) {
                 script.src = 'script1.js';
             } else {