have a section in settings that the user can enter API for either deepseek or Chat gpt
cafe130
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Settings - Algorithmic Harmony Maestro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 pt-20"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white text-center mb-8"> | |
| Settings | |
| </h1> | |
| <p class="text-gray-300 text-center mb-12"> | |
| Configure your AI API keys and preferences | |
| </p> | |
| <!-- API Settings Section --> | |
| <div class="glass rounded-2xl p-8 mb-8"> | |
| <h2 class="text-2xl font-semibold text-white mb-6">AI API Configuration</h2> | |
| <div class="space-y-6"> | |
| <!-- DeepSeek API --> | |
| <div class="bg-gray-800/30 rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4">DeepSeek API</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">DeepSeek API Key</label> | |
| <input | |
| type="password" | |
| id="deepseek-api-key" | |
| placeholder="Enter your DeepSeek API key" | |
| class="w-full bg-gray-700/50 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" | |
| > | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">API Base URL</label> | |
| <input | |
| type="text" | |
| id="deepseek-base-url" | |
| value="https://api.deepseek.com/v1" | |
| class="w-full bg-gray-700/50 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" | |
| > | |
| </div> | |
| <button id="test-deepseek" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all"> | |
| <i data-feather="wifi" class="inline mr-2"></i> | |
| Test DeepSeek Connection | |
| </button> | |
| </div> | |
| </div> | |
| <!-- OpenAI/ChatGPT API --> | |
| <div class="bg-gray-800/30 rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4">OpenAI API</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-300 mb-2">OpenAI API Key</label> | |
| <input | |
| type="password" | |
| id="openai-api-key" | |
| placeholder="Enter your OpenAI API key" | |
| class="w-full bg-gray-700/50 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" | |
| > | |
| </div> | |
| <div> | |
| <label class="block text-gray-300 mb-2">Model Selection</label> | |
| <select id="openai-model" class="w-full bg-gray-700/50 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option> | |
| <option value="gpt-4">GPT-4</option> | |
| <option value="gpt-4-turbo">GPT-4 Turbo</option> | |
| </select> | |
| </div> | |
| <button id="test-openai" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-semibold transition-all"> | |
| <i data-feather="wifi" class="inline mr-2"></i> | |
| Test OpenAI Connection | |
| </button> | |
| </div> | |
| </div> | |
| <!-- API Provider Selection --> | |
| <div class="bg-gray-800/30 rounded-lg p-6 mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-4">Preferred AI Provider</h3> | |
| <div class="space-y-3"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="ai-provider" value="deepseek" class="mr-3"> | |
| <span class="text-gray-300">Use DeepSeek (Recommended)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="ai-provider" value="openai" class="mr-3"> | |
| <span class="text-gray-300">Use OpenAI</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Save Settings --> | |
| <div class="text-center"> | |
| <button id="save-settings" class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-semibold px-8 py-4 rounded-lg transition-all transform hover:scale-105"> | |
| <i data-feather="save" class="inline mr-2"></i> | |
| Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Load saved settings | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const settings = JSON.parse(localStorage.getItem('ai_settings') || '{}'); | |
| // Populate form fields | |
| document.getElementById('deepseek-api-key').value = settings.deepseekApiKey || ''; | |
| document.getElementById('openai-api-key').value = settings.openaiApiKey || ''; | |
| document.getElementById('openai-model').value = settings.openaiModel || 'gpt-3.5-turbo'; | |
| // Set preferred provider | |
| const provider = settings.preferredProvider || 'deepseek'; | |
| document.querySelector(`input[name="ai-provider"][value="${provider}"]').checked = true; | |
| }); | |
| // Test DeepSeek Connection | |
| document.getElementById('test-deepseek').addEventListener('click', async function() { | |
| const apiKey = document.getElementById('deepseek-api-key').value.trim(); | |
| if (!apiKey) { | |
| alert('Please enter your DeepSeek API key first!'); | |
| return; | |
| } | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i> Testing...'; | |
| feather.replace(); | |
| try { | |
| const response = await fetch('https://api.deepseek.com/v1/models', { | |
| method: 'GET', | |
| headers: { | |
| 'Authorization': `Bearer ${apiKey}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| alert('✅ DeepSeek API connection successful!'); | |
| } else { | |
| alert('❌ DeepSeek API connection failed. Please check your API key.'); | |
| } | |
| } catch (error) { | |
| alert('❌ Connection test failed. Please check your network connection.'); | |
| } finally { | |
| this.innerHTML = originalText; | |
| feather.replace(); | |
| } | |
| }); | |
| // Test OpenAI Connection | |
| document.getElementById('test-openai').addEventListener('click', async function() { | |
| const apiKey = document.getElementById('openai-api-key').value.trim(); | |
| if (!apiKey) { | |
| alert('Please enter your OpenAI API key first!'); | |
| return; | |
| } | |
| const originalText = this.innerHTML; | |
| this.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i> Testing...'; | |
| feather.replace(); | |
| try { | |
| const response = await fetch('https://api.openai.com/v1/models', { | |
| method: 'GET', | |
| headers: { | |
| 'Authorization': `Bearer ${apiKey}`, | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| alert('✅ OpenAI API connection successful!'); | |
| } else { | |
| alert('❌ OpenAI API connection failed. Please check your API key.'); | |
| } | |
| } catch (error) { | |
| alert('❌ Connection test failed. Please check your network connection.'); | |
| } finally { | |
| this.innerHTML = originalText; | |
| feather.replace(); | |
| } | |
| }); | |
| // Save Settings | |
| document.getElementById('save-settings').addEventListener('click', function() { | |
| const settings = { | |
| deepseekApiKey: document.getElementById('deepseek-api-key').value.trim(), | |
| openaiApiKey: document.getElementById('openai-api-key').value.trim(), | |
| openaiModel: document.getElementById('openai-model').value, | |
| preferredProvider: document.querySelector('input[name="ai-provider"]:checked').value | |
| }; | |
| localStorage.setItem('ai_settings', JSON.stringify(settings)); | |
| alert('Settings saved successfully!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |