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);