document.getElementById('avatarForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    formData.append('image', document.getElementById('imageInput').files[0]);
    formData.append('text', document.getElementById('textInput').value);

    // Show loading state
    const btn = document.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Processing...';

    try {
        const response = await fetch('/generate', {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        
        // Display result
        const video = document.getElementById('outputVideo');
        video.src = data.video;
        document.getElementById('result').classList.remove('d-none');
        
        // Set up download
        document.getElementById('downloadBtn').onclick = () => {
            const a = document.createElement('a');
            a.href = data.video;
            a.download = 'talking_avatar.mp4';
            a.click();
        };
    } catch (error) {
        alert('Error: ' + error.message);
    } finally {
        btn.disabled = false;
        btn.innerHTML = 'Generate Video';
    }
});