script.js

document.addEventListener('DOMContentLoaded', () => {
    // Connection button functionality
    const connectBtn = document.querySelector('button');
    const statusIndicator = document.querySelector('.h-3.w-3');
    const consoleOutput = document.getElementById('console-output');
    
    connectBtn.addEventListener('click', () => {
        // Update status
        statusIndicator.classList.remove('bg-gray-400');
        statusIndicator.classList.add('bg-yellow-400', 'connecting');
        
        // Add to console
        consoleOutput.innerHTML += '> Attempting to connect to server...<br>';
        consoleOutput.scrollTop = consoleOutput.scrollHeight;
        
        // Simulate connection attempt
        setTimeout(() => {
            statusIndicator.classList.remove('bg-yellow-400', 'connecting');
            statusIndicator.classList.add('bg-green-500');
            
            consoleOutput.innerHTML += '> Connection established successfully!<br>';
            consoleOutput.scrollTop = consoleOutput.scrollHeight;
            connectBtn.innerHTML = '<i data-feather="check" class="inline mr-2"></i> Connected';
            feather.replace();
            // Show AI panel after connection
            const aiPanel = document.getElementById('ai-panel');
            aiPanel.classList.remove('hidden');
            
            // Initialize AI chat when panel is shown
            const aiChat = document.getElementById('ai-chat-component');
            const apiKey = document.getElementById('hf-api-key').value;
            const model = document.getElementById('ai-model').value;
            
            if (apiKey && model) {
              aiChat.setModel(model, apiKey, [
                {name: "DistilBERT (General)", value: "distilbert-base-uncased"},
                {name: "BERT (General)", value: "bert-base-uncased"},
                {name: "CodeLlama 34B (Code)", value: "codellama/CodeLlama-34b"},
                {name: "StarCoder2 15B (Code)", value: "bigcode/starcoder2"},
                {name: "DeepSeek Coder 33B", value: "deepseek-ai/deepseek-coder-33b"},
                {name: "Phind CodeLlama 34B", value: "Phind/Phind-CodeLlama-34B-v2"},
                {name: "WizardCoder 33B", value: "microsoft/WizardCoder-33B-V1.1"},
                {name: "Mistral 7B (SysAdmin)", value: "Open-Orca/Mistral-7B-OpenOrca"},
                {name: "Llama 2 70B (Chat)", value: "TheBloke/Llama-2-70B-chat-GGUF"},
                {name: "Mixtral 8x7B", value: "mistralai/Mixtral-8x7B-Instruct-v0.1"},
                {name: "Gemini Pro", value: "google/gemini-pro"},
                {name: "Falcon 180B", value: "tiiuae/falcon-180B-chat"},
                {name: "Llama 2 70B Chat", value: "meta-llama/Llama-2-70b-chat-hf"},
                {name: "Dolphin Mixtral", value: "cognitivecomputations/dolphin-2.6-mixtral-8x7b"}
              ]);
            }
}, 3000);
    });
    // AI Troubleshooting functionality
    const analyzeBtn = document.getElementById('analyze-btn');
    const troubleshootBtn = document.getElementById('troubleshoot-btn');
    const aiResults = document.getElementById('ai-results');
    analyzeBtn.addEventListener('click', async () => {
        const apiKey = document.getElementById('hf-api-key').value;
            const model = document.getElementById('ai-model').value;
            
            if (!apiKey) {
                alert('Please enter your HuggingFace API key');
                return;
            }
            // Initialize AI chat with enhanced model list if not already initialized
            const aiChat = document.getElementById('ai-chat-component');
            if (!aiChat.model) {
              aiChat.setModel(model, apiKey, [
                {name: "DistilBERT (General)", value: "distilbert-base-uncased"},
                {name: "BERT (General)", value: "bert-base-uncased"},
                {name: "CodeLlama 34B (Code)", value: "codellama/CodeLlama-34b"},
                {name: "StarCoder2 15B (Code)", value: "bigcode/starcoder2"},
                {name: "DeepSeek Coder 33B", value: "deepseek-ai/deepseek-coder-33b"},
                {name: "Phind CodeLlama 34B", value: "Phind/Phind-CodeLlama-34B-v2"},
                {name: "WizardCoder 33B", value: "microsoft/WizardCoder-33B-V1.1"},
                {name: "Mistral 7B (SysAdmin)", value: "Open-Orca/Mistral-7B-OpenOrca"},
                {name: "Llama 2 70B (Chat)", value: "TheBloke/Llama-2-70B-chat-GGUF"},
                {name: "Mixtral 8x7B", value: "mistralai/Mixtral-8x7B-Instruct-v0.1"},
                {name: "Gemini Pro", value: "google/gemini-pro"},
                {name: "Falcon 180B", value: "tiiuae/falcon-180B-chat"},
                {name: "Llama 2 70B Chat", value: "meta-llama/Llama-2-70b-chat-hf"},
                {name: "Dolphin Mixtral", value: "cognitivecomputations/dolphin-2.6-mixtral-8x7b"}
              ]);
            }
aiResults.classList.remove('hidden');
        const resultsDiv = aiResults.querySelector('div');
        resultsDiv.innerHTML = '> Analyzing server logs with ' + model + '...<br>';
        
        try {
            // Simulate API call to HuggingFace
            const response = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${apiKey}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    inputs: "[SIMULATED SERVER LOGS] Error 500 - Internal server error..."
                })
            });
            
            const data = await response.json();
            
            // Display results
            resultsDiv.innerHTML += `> Analysis complete:<br>`;
            resultsDiv.innerHTML += `> Detected issue: ${data[0]?.label || 'Server configuration error'}<br>`;
            resultsDiv.innerHTML += `> Confidence: ${data[0]?.score ? (data[0].score * 100).toFixed(2) + '%' : 'High'}<br>`;
            resultsDiv.innerHTML += `> Suggested fix: Check server configuration files for syntax errors<br>`;
        } catch (error) {
            resultsDiv.innerHTML += `> Error: ${error.message}<br>`;
        }
    });
    
    troubleshootBtn.addEventListener('click', async () => {
        const apiKey = document.getElementById('hf-api-key').value;
        const model = document.getElementById('ai-model').value;
        
        if (!apiKey) {
            alert('Please enter your HuggingFace API key');
            return;
        }
        
        aiResults.classList.remove('hidden');
        const resultsDiv = aiResults.querySelector('div');
        resultsDiv.innerHTML = '> Establishing SSH connection to server...<br>';
        
        try {
            // Simulate SSH connection and troubleshooting
            resultsDiv.innerHTML += `> SSH connection established<br>`;
            resultsDiv.innerHTML += `> Running diagnostic commands...<br>`;
            
            // Simulate running commands via SSH
            const commands = [
                "df -h", 
                "free -m", 
                "top -n 1 -b", 
                "journalctl -n 20",
                "netstat -tulnp"
            ];
            
            commands.forEach((cmd, i) => {
                setTimeout(() => {
                    resultsDiv.innerHTML += `> ${cmd}<br>`;
                    resultsDiv.innerHTML += `> [SIMULATED OUTPUT]<br><br>`;
                    resultsDiv.scrollTop = resultsDiv.scrollHeight;
                }, i * 1000);
            });
            
            // After commands, analyze with AI
            setTimeout(async () => {
                resultsDiv.innerHTML += `> Analyzing results with ${model}...<br>`;
                
                try {
                    const response = await fetch(`https://api-inference.huggingface.co/models/${model}`, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${apiKey}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            inputs: "[SIMULATED SSH OUTPUT] High memory usage detected..."
                        })
                    });
                    
                    const data = await response.json();
                    
                    resultsDiv.innerHTML += `> AI Diagnosis:<br>`;
                    resultsDiv.innerHTML += `> Issue: ${data[0]?.label || 'High resource usage'}<br>`;
                    resultsDiv.innerHTML += `> Recommended actions:<br>`;
                    resultsDiv.innerHTML += `1. Restart the problematic service<br>`;
                    resultsDiv.innerHTML += `2. Increase server resources<br>`;
                    resultsDiv.innerHTML += `3. Optimize application code<br>`;
                    resultsDiv.innerHTML += `4. Check for memory leaks<br>`;
                } catch (error) {
                    resultsDiv.innerHTML += `> AI Analysis Error: ${error.message}<br>`;
                }
            }, commands.length * 1000 + 1000);
        } catch (error) {
            resultsDiv.innerHTML += `> SSH Error: ${error.message}<br>`;
        }
});
    
    // Form validation
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', (e) => {
            e.preventDefault();
        });
    });
});