static/app.js

// API Configuration
const API_URL = window.location.origin;  // Use same origin (works locally and on HF Spaces)

// DOM Elements
const promptEl = document.getElementById('prompt');
const generateBtn = document.getElementById('generateBtn');
const statusEl = document.getElementById('status');
const outputEl = document.getElementById('output');

const maxTokensEl = document.getElementById('maxTokens');
const temperatureEl = document.getElementById('temperature');
const topPEl = document.getElementById('topP');

const maxTokensValueEl = document.getElementById('maxTokensValue');
const temperatureValueEl = document.getElementById('temperatureValue');
const topPValueEl = document.getElementById('topPValue');

// Update slider value displays
maxTokensEl.addEventListener('input', (e) => {
    maxTokensValueEl.textContent = e.target.value;
});

temperatureEl.addEventListener('input', (e) => {
    temperatureValueEl.textContent = parseFloat(e.target.value).toFixed(1);
});

topPEl.addEventListener('input', (e) => {
    topPValueEl.textContent = parseFloat(e.target.value).toFixed(2);
});

// Generate button click handler
generateBtn.addEventListener('click', async () => {
    const prompt = promptEl.value.trim();
    
    if (!prompt) {
        outputEl.textContent = 'Please enter a prompt';
        outputEl.className = 'output error';
        return;
    }
    
    // Disable button and show loading with animation
    generateBtn.disabled = true;
    generateBtn.textContent = '⏳ Generating...';
    statusEl.textContent = '⏳';
    outputEl.textContent = '🔄 Your model is thinking...\n\nThis may take 10-30 seconds on CPU.\nPlease wait...';
    outputEl.className = 'output';
    
    try {
        const response = await fetch(`${API_URL}/api/generate`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                prompt: prompt,
                max_new_tokens: parseInt(maxTokensEl.value),
                temperature: parseFloat(temperatureEl.value),
                top_p: parseFloat(topPEl.value)
            })
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.error || `HTTP ${response.status}`);
        }
        
        // Display result
        outputEl.textContent = data.generated_text;
        outputEl.className = 'output';
        statusEl.textContent = '✅';
        
    } catch (error) {
        console.error('Error:', error);
        outputEl.textContent = `Error: ${error.message}`;
        outputEl.className = 'output error';
        statusEl.textContent = '❌';
    } finally {
        generateBtn.disabled = false;
        generateBtn.textContent = '✨ Generate';
    }
});

// Allow Enter key to trigger generation (Ctrl+Enter)
promptEl.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'Enter') {
        generateBtn.click();
    }
});

// Health check on load
async function checkHealth() {
    try {
        const response = await fetch(`${API_URL}/api/health`);
        const data = await response.json();
        console.log('API Health:', data);
    } catch (error) {
        console.warn('API health check failed:', error);
    }
}

// Run health check when page loads
checkHealth();