Enhance API key functionality with regeneration and better management

chat.html

@@ -14,6 +14,8 @@
                 <label for="api-key-input">API Key:</label>
                 <input type="password" id="api-key-input" placeholder="Enter API key">
                 <button id="save-api-key">Save</button>
+                <button id="regenerate-key">Regenerate</button>
+                <div id="api-key-info">Check server console for auto-generated API key</div>
             </div>
         </div>
         <div id="chat-window">

main.py

@@ -19,7 +19,7 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
 
 def verify_api_key(credentials: HTTPAuthorizationCredentials = Depends(security)):
     """Verify that the provided API key is valid"""
-    if credentials.credentials != API_KEY:
+    if credentials.credentials != current_api_key:
         raise HTTPException(
             status_code=401,
             detail="Invalid API key"
@@ -58,3 +58,29 @@ async def root():
 @app.get("/chat")
 async def chat_page():
     return FileResponse('chat.html')
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint to verify API is running"""
+    return {"status": "ok"}
+
+# Store the current API key in memory
+current_api_key = API_KEY
+
+@app.get("/api/config")
+async def get_config():
+    """Return configuration information including the API key status (without revealing the key)"""
+    has_env_key = bool(os.getenv("OLLAMA_API_KEY"))
+    return {
+        "api_key_set": has_env_key,
+        "model_default": "qwen3:1.7b"
+    }
+
+@app.post("/api/regenerate_key")
+async def regenerate_api_key(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """Regenerate the API key (requires valid current API key)"""
+    global current_api_key
+    new_key = secrets.token_urlsafe(32)
+    current_api_key = new_key
+    print(f"New API Key: {new_key}")  # Display the new key in the console
+    return {"message": "API key regenerated successfully", "key": new_key}

static/script.js

@@ -3,6 +3,7 @@ const messageInput = document.getElementById('message-input');
 const sendButton = document.getElementById('send-button');
 const apiKeyInput = document.getElementById('api-key-input');
 const saveApiKeyButton = document.getElementById('save-api-key');
+const regenerateKeyButton = document.getElementById('regenerate-key');
 
 // Get API key from localStorage
 let apiKey = localStorage.getItem('ollama_api_key');
@@ -22,6 +23,32 @@ saveApiKeyButton.addEventListener('click', () => {
     }
 });
 
+// Regenerate API key button event
+regenerateKeyButton.addEventListener('click', () => {
+    if (confirm('Are you sure you want to regenerate the API key? This will invalidate the current key.')) {
+        fetch('/api/regenerate_key', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.key) {
+                alert(`New API key generated. Please update your API key in the input field. The new key is (also shown in server console): ${data.key}`);
+                // Do not automatically update the API key in localStorage for security reasons
+            } else {
+                alert('Failed to regenerate API key. Please check the server.');
+            }
+        })
+        .catch(error => {
+            console.error('Error regenerating API key:', error);
+            alert('Error regenerating API key. Please check the server.');
+        });
+    }
+});
+
 // Send message function
 sendButton.addEventListener('click', sendMessage);
 messageInput.addEventListener('keydown', (event) => {

static/style.css

@@ -33,6 +33,7 @@ body {
     display: flex;
     align-items: center;
     gap: 10px;
+    flex-wrap: wrap;
 }
 
 #api-key-input {
@@ -41,6 +42,14 @@ body {
     border-radius: 3px;
 }
 
+#api-key-info {
+    font-size: 0.8em;
+    color: #666;
+    background-color: #f0f0f0;
+    padding: 3px 6px;
+    border-radius: 3px;
+}
+
 #save-api-key {
     background-color: #007cba;
     color: white;
@@ -50,6 +59,15 @@ body {
     cursor: pointer;
 }
 
+#regenerate-key {
+    background-color: #ff9800;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
 #chat-window {
     flex-grow: 1;
     overflow-y: auto;