Spaces:

Pamudu13
/

deepseek-api

Paused

App Files Files Community

KingNish commited on Sep 28, 2024

Commit

37acd69

verified ·

1 Parent(s): 4fe65b0

Update index.html

Browse files

Files changed (1) hide show

index.html +62 -50

index.html CHANGED Viewed

@@ -4,74 +4,86 @@
     <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/flag-icon-css/3.5.0/css/flag-icon.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animated.css/1.1.1/animated.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"></script>
 </head>
-<body class="bg-gradient-to-r from-blue-100 to-gray-100 flex items-center justify-center min-h-screen">
-    <div class="container max-w-2xl w-full p-8 bg-white rounded-2xl shadow-2xl">
-        <div class="voice-assistant-card">
-            <h1 class="text-3xl font-bold text-blue-600 mb-4">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 p-3 rounded-full text-white flex items-center gap-2 bg-blue-500">
-                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                        <circle cx="12" cy="7" r="4"></circle>
-                    </svg>
                     <span>User: Idle</span>
                 </div>
-                <div id="aiIndicator" class="indicator p-3 rounded-full text-white flex items-center gap-2 bg-yellow-500">
-                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
-                        <polyline points="2 17 12 22 22 17"></polyline>
-                        <polyline points="2 12 12 17 22 12"></polyline>
-                    </svg>
                     <span>AI: Idle</span>
                 </div>
             </div>
-            <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">
-                <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                    <line x1="12" y1="19" x2="12" y2="23"></line>
-                    <line x1="8" y1="23" x2="16" y2="23"></line>
-                </svg>
-                Start Listening
             </button>
-            <div class="settings grid grid-cols-3 gap-4 mt-8">
-                <div class="setting">
-                    <label for="voiceSelect" class="block font-medium text-gray-700">Voice:</label>
-                    <select id="voiceSelect" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                         <option value="Amy">Female</option>
                         <option value="Brian">Male</option>
                     </select>
-                    <span class="tooltip text-sm text-gray-500">Select the voice type for the assistant.</span>
                 </div>
-                <div class="setting">
-                    <label for="modelSelect" class="block font-medium text-gray-700">Model:</label>
-                    <select id="modelSelect" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
                         <option value="8b">Fastest</option>
                         <option value="70b">Powerful</option>
                     </select>
-                    <span class="tooltip text-sm text-gray-500">Choose the model based on speed or power.</span>
                 </div>
-                <div class="setting">
-                    <label for="apiKey" class="block font-medium text-gray-700">SambaNava API Key (optional):</label>
-                    <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">
-                    <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>
                 </div>
             </div>
-            <div id="transcript" class="mt-8 p-4 bg-gray-100 rounded-lg text-left whitespace-pre-wrap max-h-96 overflow-y-auto">
-                <!-- Transcripts will appear here -->
-            </div>
-            <!-- Webcam Integration -->
-            <div class="webcam-container mt-8">
                 <h2 class="text-xl font-semibold mb-2">Webcam Feed</h2>
-                <video id="webcam" autoplay playsinline class="w-full h-auto"></video>
             </div>
         </div>
     </div>
@@ -85,7 +97,7 @@
                 existingScript.remove();
             }
             var script = document.createElement('script');
-            script.type = 'module'; // Set the script type to 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=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/alpinejs@3.x.x/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>
                 existingScript.remove();
             }
             var script = document.createElement('script');
+            script.type = 'module';
             if (isChrome && isDesktop) {
                 script.src = 'script1.js';
             } else {