Attempt ViaAnthroposBenevolentia#3

ViaAnthroposBenevolentia · ViaAnthroposBenevolentia · commit 06b4c0dcce42 · 2024-12-24T02:17:28.000+05:00
diff --git a/css/style.css b/css/style.css
@@ -481,4 +481,40 @@ body {
 .audio-bar.active {
     animation: audio-pulse 0.5s infinite;
 }
+
+#api-key-container {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    display: none; /* Hidden by default, shown when no API key is set */
+}
+
+#api-key-container input {
+    width: calc(100% - 220px);
+    padding: 8px;
+    margin-right: 10px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+}
+
+#api-key-container button {
+    padding: 8px 16px;
+    background: #34a853;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#api-key-container a {
+    margin-left: 10px;
+    color: #4285f4;
+    text-decoration: none;
+}
+
+#api-key-container a:hover {
+    text-decoration: underline;
+}
  
diff --git a/index.html b/index.html
@@ -9,6 +9,11 @@
 </head>
 <body>
     <div id="app">
+        <div id="api-key-container">
+            <input type="password" id="api-key-input" placeholder="Enter your Google AI Studio API key">
+            <button id="save-api-key">Save API Key</button>
+            <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener noreferrer">Get API Key</a>
+        </div>
         <button id="connect-button">Connect</button>
         <div id="logs-container"></div>
         <input type="text" id="message-input" placeholder="Enter message...">
diff --git a/js/main.js b/js/main.js
@@ -27,6 +27,9 @@ const screenIcon = document.getElementById('screen-icon');
 const screenContainer = document.getElementById('screen-container');
 const screenPreview = document.getElementById('screen-preview');
 const inputAudioVisualizer = document.getElementById('input-audio-visualizer');
+const apiKeyContainer = document.getElementById('api-key-container');
+const apiKeyInput = document.getElementById('api-key-input');
+const saveApiKeyButton = document.getElementById('save-api-key');
 
 // State variables
 let isRecording = false;
@@ -40,6 +43,7 @@ let isScreenSharing = false;
 let screenRecorder = null;
 let isUsingTool = false;
 let client = null;
+let apiKey = localStorage.getItem('gemini_api_key');
 
 /**
  * Logs a message to the UI.
@@ -194,6 +198,37 @@ async function resumeAudioContext() {
     }
 }
 
+/**
+ * Handles the API key management
+ */
+function handleApiKey() {
+    apiKey = localStorage.getItem('gemini_api_key');
+    if (!apiKey) {
+        apiKeyContainer.style.display = 'block';
+        connectButton.disabled = true;
+    } else {
+        apiKeyContainer.style.display = 'none';
+        connectButton.disabled = false;
+        CONFIG.API.KEY = apiKey;
+    }
+}
+
+/**
+ * Saves the API key to localStorage
+ */
+function saveApiKey() {
+    const newApiKey = apiKeyInput.value.trim();
+    if (newApiKey) {
+        apiKey = newApiKey;
+        localStorage.setItem('gemini_api_key', apiKey);
+        CONFIG.API.KEY = apiKey;
+        apiKeyContainer.style.display = 'none';
+        connectButton.disabled = false;
+        apiKeyInput.value = '';
+        logMessage('API key saved successfully', 'system');
+    }
+}
+
 /**
  * Connects to the WebSocket server.
  */
@@ -505,4 +540,13 @@ function stopScreenSharing() {
 
 screenButton.addEventListener('click', handleScreenShare);
 screenButton.disabled = true;
+
+saveApiKeyButton.addEventListener('click', saveApiKey);
+apiKeyInput.addEventListener('keypress', (event) => {
+    if (event.key === 'Enter') {
+        saveApiKey();
+    }
+});
+
+handleApiKey(); // Call this when the page loads
   
