document.addEventListener('DOMContentLoaded', () => {
    const convertButton = document.getElementById('convertButton');
    const inputText = document.getElementById('inputText');
    const statusDiv = document.getElementById('status');
    const downloadLink = document.getElementById('downloadLink');
    const audioPlayer = document.getElementById('audioPlayer');

    convertButton.addEventListener('click', async () => {
        const text = inputText.value;
        statusDiv.textContent = 'Processing...';
        downloadLink.style.display = 'none';
        audioPlayer.style.display = 'none';

        try {
            const response = await fetch('http://localhost:80/text-to-speech/', { // Updated port to 80
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text }),
            });

            if (!response.ok) {
                const errorData = await response.json();
                statusDiv.textContent = `Error: ${errorData.detail || response.statusText}`;
                return;
            }

            const blob = await response.blob();
            const audioUrl = URL.createObjectURL(blob);

            statusDiv.textContent = 'Speech generated successfully!';
            downloadLink.href = audioUrl;
            downloadLink.style.display = 'block';
            audioPlayer.src = audioUrl;
            audioPlayer.style.display = 'block';

        } catch (error) {
            statusDiv.textContent = `Network error: ${error}`;
        }
    });
});