static/script.js

const API_URL = 'http://localhost:5001';

let currentTaskId = null;
let originalText = '';
let translatedText = '';

const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const languageSelector = document.getElementById('languageSelector');
const progressSection = document.getElementById('progressSection');
const resultsSection = document.getElementById('resultsSection');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const translateBtn = document.getElementById('translateBtn');
const generateAudioBtn = document.getElementById('generateAudioBtn');
const downloadTextBtn = document.getElementById('downloadTextBtn');
const downloadAudioBtn = document.getElementById('downloadAudioBtn');
const audioPlayer = document.getElementById('audioPlayer');

uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragging');
});

uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragging');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragging');
    
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        handleFileUpload(files[0]);
    }
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        handleFileUpload(e.target.files[0]);
    }
});

async function handleFileUpload(file) {
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        updateProgress(10, 'Uploading document...');
        progressSection.style.display = 'block';
        
        const response = await fetch(`${API_URL}/upload`, {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            throw new Error('Upload failed');
        }
        
        const data = await response.json();
        currentTaskId = data.task_id;
        originalText = data.text_preview;
        
        updateProgress(30, 'Document uploaded successfully');
        
        uploadArea.style.display = 'none';
        languageSelector.style.display = 'flex';
        
        document.getElementById('originalText').textContent = originalText;
        
    } catch (error) {
        alert('Error uploading file: ' + error.message);
        progressSection.style.display = 'none';
    }
}

translateBtn.addEventListener('click', async () => {
    const targetLanguage = document.getElementById('targetLanguage').value;
    
    try {
        updateProgress(40, 'Translating document...');
        
        const response = await fetch(`${API_URL}/translate/${currentTaskId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ target_language: targetLanguage })
        });
        
        if (!response.ok) {
            throw new Error('Translation failed');
        }
        
        const data = await response.json();
        translatedText = data.translated_text;
        
        updateProgress(80, 'Translation completed');
        
        document.getElementById('translatedText').textContent = translatedText;
        
        languageSelector.style.display = 'none';
        resultsSection.style.display = 'block';
        
        updateProgress(100, 'Ready!');
        setTimeout(() => {
            progressSection.style.display = 'none';
        }, 1000);
        
    } catch (error) {
        alert('Error translating document: ' + error.message);
        updateProgress(0, 'Translation failed');
    }
});

generateAudioBtn.addEventListener('click', async () => {
    const targetLanguage = document.getElementById('targetLanguage').value;
    const languageCode = targetLanguage.split('-')[1];
    
    try {
        generateAudioBtn.disabled = true;
        generateAudioBtn.textContent = 'Generating audio...';
        
        const response = await fetch(`${API_URL}/generate_audio/${currentTaskId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ language_code: languageCode })
        });
        
        if (!response.ok) {
            throw new Error('Audio generation failed');
        }
        
        const data = await response.json();
        
        audioPlayer.src = `${API_URL}/download/${currentTaskId}/audio`;
        audioPlayer.style.display = 'block';
        generateAudioBtn.style.display = 'none';
        downloadAudioBtn.disabled = false;
        
    } catch (error) {
        alert('Error generating audio: ' + error.message);
        generateAudioBtn.disabled = false;
        generateAudioBtn.textContent = 'Generate Audio';
    }
});

downloadTextBtn.addEventListener('click', () => {
    window.open(`${API_URL}/download/${currentTaskId}/translation`, '_blank');
});

downloadAudioBtn.addEventListener('click', () => {
    window.open(`${API_URL}/download/${currentTaskId}/audio`, '_blank');
});

function updateProgress(percentage, text) {
    progressFill.style.width = percentage + '%';
    progressText.textContent = text;
}