|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mystic Server Connector</title> |
|
|
<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> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen flex flex-col"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">Server Connection Wizard</h1> |
|
|
<p class="text-gray-600">Connect to your test server with mystical precision</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-indigo-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i data-feather="server" class="text-indigo-500 mr-3"></i> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Server Details</h2> |
|
|
</div> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Server Address</label> |
|
|
<input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Port</label> |
|
|
<input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Authentication</label> |
|
|
<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option>None</option> |
|
|
<option>Basic Auth</option> |
|
|
<option>API Key</option> |
|
|
<option>OAuth</option> |
|
|
</select> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="bg-purple-50 p-6 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i data-feather="settings" class="text-purple-500 mr-3"></i> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Connection Settings</h2> |
|
|
</div> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Protocol</label> |
|
|
<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
<option>HTTP</option> |
|
|
<option>HTTPS</option> |
|
|
<option>WebSocket</option> |
|
|
<option>TCP</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Timeout (ms)</label> |
|
|
<input type="number" value="5000" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="auto-reconnect" class="mr-2"> |
|
|
<label for="auto-reconnect" class="text-gray-700">Auto-reconnect</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="debug-mode" class="mr-2"> |
|
|
<label for="debug-mode" class="text-gray-700">Debug mode</label> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 text-center"> |
|
|
<button id="connect-btn" class="px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"> |
|
|
<i data-feather="zap" class="inline mr-2"></i> Connect to Server |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="ai-panel" class="mt-8 hidden"> |
|
|
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-lg"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i data-feather="cpu" class="mr-2"></i> AI Server Troubleshooting |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">HuggingFace API Key</label> |
|
|
<input type="password" id="hf-api-key" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="hf_xxxxxxxxxxxxxxxx"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">AI Model</label> |
|
|
<select id="ai-model" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="distilbert-base-uncased">DistilBERT (General)</option> |
|
|
<option value="bert-base-uncased">BERT (General)</option> |
|
|
<option value="codellama/CodeLlama-34b">CodeLlama 34B (Code)</option> |
|
|
<option value="bigcode/starcoder2">StarCoder2 15B (Code)</option> |
|
|
<option value="deepseek-ai/deepseek-coder-33b">DeepSeek Coder 33B</option> |
|
|
<option value="Phind/Phind-CodeLlama-34B-v2">Phind CodeLlama 34B</option> |
|
|
<option value="microsoft/WizardCoder-33B-V1.1">WizardCoder 33B</option> |
|
|
<option value="Open-Orca/Mistral-7B-OpenOrca">Mistral 7B (SysAdmin)</option> |
|
|
<option value="TheBloke/Llama-2-70B-chat-GGUF">Llama 2 70B (Chat)</option> |
|
|
<option value="mistralai/Mixtral-8x7B-Instruct-v0.1">Mixtral 8x7B</option> |
|
|
<option value="google/gemini-pro">Gemini Pro</option> |
|
|
<option value="tiiuae/falcon-180B-chat">Falcon 180B</option> |
|
|
<option value="meta-llama/Llama-2-70b-chat-hf">Llama 2 70B Chat</option> |
|
|
<option value="cognitivecomputations/dolphin-2.6-mixtral-8x7b">Dolphin Mixtral</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<button id="analyze-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i data-feather="search" class="mr-2"></i> Analyze Server Logs |
|
|
</button> |
|
|
<button id="troubleshoot-btn" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center"> |
|
|
<i data-feather="terminal" class="mr-2"></i> SSH Troubleshoot |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="ai-results" class="mt-4 bg-white p-4 rounded-lg shadow hidden"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">AI Analysis Results</h4> |
|
|
<div class="bg-gray-50 p-3 rounded text-sm font-mono text-gray-700 max-h-60 overflow-y-auto"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i data-feather="message-square" class="mr-2"></i> AI Chat Assistant |
|
|
</h3> |
|
|
<ai-chat id="ai-chat-component"></ai-chat> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i data-feather="cpu" class="mr-2"></i> AI Troubleshooting |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">HuggingFace API Key</label> |
|
|
<input type="password" id="hf-api-key" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="hf_xxxxxxxxxxxxxxxx"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">AI Model</label> |
|
|
<select id="ai-model" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option value="distilbert-base-uncased">DistilBERT</option> |
|
|
<option value="bert-base-uncased">BERT</option> |
|
|
<option value="roberta-base">RoBERTa</option> |
|
|
<option value="microsoft/deberta-v3-base">DeBERTa</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<button id="analyze-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center"> |
|
|
<i data-feather="search" class="mr-2"></i> Analyze Logs |
|
|
</button> |
|
|
<button id="suggest-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center"> |
|
|
<i data-feather="lightbulb" class="mr-2"></i> Get Suggestions |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="ai-results" class="mt-4 bg-white p-4 rounded-lg shadow hidden"> |
|
|
<h4 class="font-semibold text-gray-800 mb-2">AI Analysis Results</h4> |
|
|
<div class="bg-gray-50 p-3 rounded text-sm font-mono text-gray-700 max-h-60 overflow-y-auto"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 border-t pt-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Connection Status</h3> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="h-3 w-3 rounded-full bg-gray-400 mr-2"></div> |
|
|
<span class="text-gray-600">Disconnected</span> |
|
|
</div> |
|
|
<div class="mt-4 h-32 overflow-y-auto bg-gray-100 p-3 rounded text-sm font-mono text-gray-700" id="console-output"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const consoleOutput = document.getElementById('console-output'); |
|
|
const messages = [ |
|
|
"Initializing connection wizard...", |
|
|
"Checking system requirements...", |
|
|
"Validating input parameters...", |
|
|
"Ready to connect to server", |
|
|
"Enter server details and click Connect" |
|
|
]; |
|
|
|
|
|
messages.forEach((msg, i) => { |
|
|
setTimeout(() => { |
|
|
consoleOutput.innerHTML += `> ${msg}<br>`; |
|
|
consoleOutput.scrollTop = consoleOutput.scrollHeight; |
|
|
}, i * 500); |
|
|
}); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
