templates/static/js/scripts.js

// Debug: Check if script is loaded
console.log('Scripts.js loaded successfully');

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM loaded, initializing form handler');
    
    const form = document.getElementById('avatarForm');
    if (!form) {
        console.error('Avatar form not found!');
        return;
    }

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        console.log('Form submitted');
        
        const imageInput = document.getElementById('imageInput');
        const textInput = document.getElementById('textInput');
        
        if (!imageInput.files[0]) {
            alert('Please select an image');
            return;
        }
        
        if (!textInput.value.trim()) {
            alert('Please enter some text');
            return;
        }
        
        const formData = new FormData();
        formData.append('image', imageInput.files[0]);
        formData.append('text', textInput.value);

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

        try {
            console.log('Sending request to /generate');
            const response = await fetch('/generate', {
                method: 'POST',
                body: formData
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            console.log('Response received:', data);
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            // 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) {
            console.error('Error:', error);
            alert('Error: ' + error.message);
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-magic me-2"></i>Generate Video';
        }
    });
});