static/script.js

// API Base URL - automatically uses the current host
const API_BASE = window.location.origin;

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    console.log('🚀 Initializing Flare.NX & Orynx AI Labs Dashboard');
    checkHealth();
    checkGPU();
    loadGPUInfo();
});

// Health Check
async function checkHealth() {
    const statusEl = document.getElementById('healthStatus');
    const cardEl = document.getElementById('healthCard');
    
    try {
        statusEl.innerHTML = '<div class="spinner"></div> Checking...';
        const response = await fetch(`${API_BASE}/health`);
        const data = await response.json();
        
        if (data.status === 'healthy' && data.gpu_available) {
            statusEl.innerHTML = `
                <div class="status-ok">✅ Healthy</div>
                <div class="status-detail">GPU: ${data.device_name}</div>
                <div class="status-detail">Devices: ${data.cuda_devices}</div>
            `;
            cardEl.classList.add('status-ok');
            cardEl.classList.remove('status-error');
        } else {
            statusEl.innerHTML = '<div class="status-warning">⚠️ CPU Only</div>';
            cardEl.classList.add('status-warning');
        }
    } catch (error) {
        statusEl.innerHTML = '<div class="status-error">❌ Error</div>';
        cardEl.classList.add('status-error');
        console.error('Health check error:', error);
    }
}

// GPU Status Check
async function checkGPU() {
    const statusEl = document.getElementById('gpuStatus');
    const cardEl = document.getElementById('gpuCard');
    
    try {
        statusEl.innerHTML = '<div class="spinner"></div> Loading...';
        const response = await fetch(`${API_BASE}/gpu-info`);
        const data = await response.json();
        
        if (data.cuda_available && data.devices.length > 0) {
            const device = data.devices[0];
            statusEl.innerHTML = `
                <div class="status-ok">✅ Active</div>
                <div class="status-detail">${device.name}</div>
                <div class="status-detail">${device.total_memory_gb} GB VRAM</div>
            `;
            cardEl.classList.add('status-ok');
            cardEl.classList.remove('status-error');
        } else {
            statusEl.innerHTML = '<div class="status-warning">⚠️ No GPU</div>';
            cardEl.classList.add('status-warning');
        }
    } catch (error) {
        statusEl.innerHTML = '<div class="status-error">❌ Error</div>';
        cardEl.classList.add('status-error');
        console.error('GPU check error:', error);
    }
}

// Load GPU Information
async function loadGPUInfo() {
    const detailsEl = document.getElementById('gpuDetails');
    
    try {
        const response = await fetch(`${API_BASE}/gpu-info`);
        const data = await response.json();
        
        if (data.cuda_available && data.devices.length > 0) {
            const device = data.devices[0];
            detailsEl.innerHTML = `
                <div class="gpu-card">
                    <div class="gpu-header">
                        <h3>🎮 ${device.name}</h3>
                        <span class="gpu-badge">Device #${device.id}</span>
                    </div>
                    <div class="gpu-specs">
                        <div class="spec-item">
                            <span class="spec-label">Total Memory:</span>
                            <span class="spec-value">${device.total_memory_gb} GB</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">Compute Capability:</span>
                            <span class="spec-value">${device.major}.${device.minor}</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">Multiprocessors:</span>
                            <span class="spec-value">${device.multi_processor_count}</span>
                        </div>
                        <div class="spec-item">
                            <span class="spec-label">Total Devices:</span>
                            <span class="spec-value">${data.device_count}</span>
                        </div>
                    </div>
                    <div class="gpu-performance">
                        <div class="performance-bar">
                            <div class="performance-fill" style="width: 95%"></div>
                        </div>
                        <p class="performance-text">GPU Performance: Optimal</p>
                    </div>
                </div>
            `;
        } else {
            detailsEl.innerHTML = `
                <div class="gpu-card gpu-unavailable">
                    <p>⚠️ CUDA not available. Running on CPU.</p>
                </div>
            `;
        }
    } catch (error) {
        detailsEl.innerHTML = `
            <div class="gpu-card gpu-error">
                <p>❌ Error loading GPU information.</p>
            </div>
        `;
        console.error('GPU info error:', error);
    }
}

// Process Text
async function processText() {
    const textInput = document.getElementById('textInput').value;
    const maxLength = parseInt(document.getElementById('maxLength').value);
    const outputGroup = document.getElementById('outputGroup');
    const outputContent = document.getElementById('outputContent');
    
    if (!textInput.trim()) {
        alert('Please enter some text to process!');
        return;
    }
    
    try {
        outputContent.innerHTML = '<div class="spinner"></div> Processing with GPU...';
        outputGroup.style.display = 'block';
        
        const response = await fetch(`${API_BASE}/process`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                text: textInput,
                max_length: maxLength
            })
        });
        
        const data = await response.json();
        
        outputContent.innerHTML = `
            <div class="result-card">
                <div class="result-item">
                    <strong>Input:</strong>
                    <div class="result-value">${data.input}</div>
                </div>
                <div class="result-item">
                    <strong>Processed:</strong>
                    <div class="result-value result-highlight">${data.processed}</div>
                </div>
                <div class="result-item">
                    <strong>Length:</strong>
                    <span class="result-badge">${data.length} characters</span>
                </div>
                <div class="result-item">
                    <strong>Max Length:</strong>
                    <span class="result-badge">${data.max_length}</span>
                </div>
                <div class="result-item">
                    <strong>GPU Used:</strong>
                    <span class="result-badge ${data.gpu_used ? 'badge-success' : 'badge-warning'}">
                        ${data.gpu_used ? '✅ Yes' : '⚠️ No'}
                    </span>
                </div>
            </div>
        `;
    } catch (error) {
        outputContent.innerHTML = `
            <div class="error-message">
                ❌ Error processing text: ${error.message}
            </div>
        `;
        console.error('Process error:', error);
    }
}

// Test Endpoint
async function testEndpoint(endpoint) {
    const responseSection = document.getElementById('responseSection');
    const responseContent = document.getElementById('responseContent');
    
    try {
        responseContent.textContent = 'Loading...';
        responseSection.style.display = 'block';
        responseSection.scrollIntoView({ behavior: 'smooth' });
        
        // Use /api for root endpoint, others as-is
        const url = endpoint === '/' ? `${API_BASE}/api` : `${API_BASE}${endpoint}`;
        const response = await fetch(url);
        const data = await response.json();
        
        responseContent.textContent = JSON.stringify(data, null, 2);
        responseContent.classList.add('json-highlight');
    } catch (error) {
        responseContent.textContent = `Error: ${error.message}`;
        console.error('Endpoint test error:', error);
    }
}

// Copy Response
function copyResponse() {
    const responseContent = document.getElementById('responseContent');
    navigator.clipboard.writeText(responseContent.textContent).then(() => {
        const btn = document.querySelector('.btn-copy');
        const originalText = btn.textContent;
        btn.textContent = '✅ Copied!';
        setTimeout(() => {
            btn.textContent = originalText;
        }, 2000);
    });
}

// Close Response
function closeResponse() {
    document.getElementById('responseSection').style.display = 'none';
}

// Auto-refresh status every 30 seconds
setInterval(() => {
    checkHealth();
    checkGPU();
}, 30000);