|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>KelmoidAI - Backend Connection</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.connection-card { |
|
|
background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%); |
|
|
} |
|
|
.api-status.connected { |
|
|
background-color: #10B981; |
|
|
} |
|
|
.api-status.disconnected { |
|
|
background-color: #EF4444; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
|
|
|
<nav class="bg-black bg-opacity-70 border-b border-gray-800 py-4 px-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="index.html" class="flex items-center space-x-2"> |
|
|
<i data-feather="box" class="w-6 h-6 text-blue-400"></i> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">KelmoidAI</span> |
|
|
</a> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="generator.html" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium"> |
|
|
Generator |
|
|
</a> |
|
|
<a href="backend.html" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium"> |
|
|
Backend |
|
|
</a> |
|
|
<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700"> |
|
|
<i data-feather="user" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-3xl font-bold mb-8">Backend Connection</h1> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700"> |
|
|
<h2 class="text-xl font-semibold mb-6">API Configuration</h2> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">API Endpoint</label> |
|
|
<input type="text" placeholder="https://api.kelmoidai.com/v1" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" |
|
|
value="https://api.kelmoidai.com/v1"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">HuggingFace Token</label> |
|
|
<input type="password" placeholder="Enter your HF token" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<p class="text-xs text-gray-400 mt-1">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-blue-400 hover:underline">HuggingFace settings</a></p> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">HF Model</label> |
|
|
<select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion XL</option> |
|
|
<option value="runwayml/stable-diffusion-v1-5">Stable Diffusion v1.5</option> |
|
|
<option value="CompVis/stable-diffusion-v1-4">Stable Diffusion v1.4</option> |
|
|
<option value="deepfloyd/IF-I-XL-v1.0">DeepFloyd IF</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="w-3 h-3 rounded-full api-status disconnected"></span> |
|
|
<span>Disconnected</span> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium"> |
|
|
Connect |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700"> |
|
|
<h2 class="text-xl font-semibold mb-6">Database Connection</h2> |
|
|
<div class="space-y-6"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Host</label> |
|
|
<input type="text" placeholder="localhost" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Port</label> |
|
|
<input type="text" placeholder="5432" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Database Name</label> |
|
|
<input type="text" placeholder="kelmoidai_db" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Username</label> |
|
|
<input type="text" placeholder="admin" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Password</label> |
|
|
<input type="password" placeholder="password" |
|
|
class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium"> |
|
|
Test Connection |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-gray-800 bg-opacity-70 rounded-xl p-6 border border-gray-700"> |
|
|
<h2 class="text-xl font-semibold mb-4">Connection Logs</h2> |
|
|
<div class="bg-gray-900 rounded-lg p-4 h-64 overflow-y-auto font-mono text-sm"> |
|
|
<div class="text-green-400">[2023-11-15 10:42:31] Initializing connection...</div> |
|
|
<div class="text-yellow-400">[2023-11-15 10:42:32] Checking API credentials...</div> |
|
|
<div class="text-red-400">[2023-11-15 10:42:33] Error: Invalid API key</div> |
|
|
<div class="text-gray-400">[2023-11-15 10:42:34] Retrying connection...</div> |
|
|
<div class="text-green-400">[2023-11-15 10:42:35] Database connection established</div> |
|
|
<div class="text-yellow-400">[2023-11-15 10:42:36] Verifying permissions...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.querySelector('.bg-blue-600').addEventListener('click', async function() { |
|
|
const token = document.querySelector('input[type="password"]').value; |
|
|
const model = document.querySelector('select').value; |
|
|
const status = document.querySelector('.api-status'); |
|
|
const logs = document.querySelector('.bg-gray-900'); |
|
|
|
|
|
if (!token) { |
|
|
logs.innerHTML += `<div class="text-red-400">[${new Date().toISOString()}] Error: HF token is required</div>`; |
|
|
return; |
|
|
} |
|
|
|
|
|
try { |
|
|
logs.innerHTML += `<div class="text-yellow-400">[${new Date().toISOString()}] Connecting to ${model}...</div>`; |
|
|
|
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1500)); |
|
|
|
|
|
status.classList.remove('disconnected'); |
|
|
status.classList.add('connected'); |
|
|
status.nextElementSibling.textContent = 'Connected'; |
|
|
|
|
|
logs.innerHTML += `<div class="text-green-400">[${new Date().toISOString()}] Successfully connected to HF model: ${model}</div>`; |
|
|
} catch (error) { |
|
|
logs.innerHTML += `<div class="text-red-400">[${new Date().toISOString()}] Error: ${error.message || 'Connection failed'}</div>`; |
|
|
} |
|
|
|
|
|
logs.scrollTop = logs.scrollHeight; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
