document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('translationForm'); const progressArea = document.getElementById('progressArea'); const progressBar = document.querySelector('.progress-bar'); const progressText = document.getElementById('progressText'); const resultArea = document.getElementById('resultArea'); const mediaPlayer = document.getElementById('mediaPlayer'); const downloadBtn = document.getElementById('downloadBtn'); const submitBtn = document.getElementById('submitBtn'); // Retry configuration const MAX_RETRIES = 3; const RETRY_DELAY = 5000; // 5 seconds async function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function submitWithRetry(formData, retryCount = 0) { try { const response = await fetch('/api/translate', { method: 'POST', body: formData }); if (response.status === 429) { // Rate limit error if (retryCount < MAX_RETRIES) { const waitTime = (retryCount + 1) * RETRY_DELAY; updateProgress(50, `Rate limit reached. Retrying in ${waitTime/1000} seconds... (Attempt ${retryCount + 1}/${MAX_RETRIES})`); await delay(waitTime); return submitWithRetry(formData, retryCount + 1); } else { throw new Error('Rate limit exceeded. Please try again later.'); } } if (!response.ok) { const error = await response.text(); throw new Error(error); } return response; } catch (error) { if (error.message.includes('Rate limit exceeded')) { throw error; } throw new Error(`Request failed: ${error.message}`); } } form.addEventListener('submit', async function(e) { e.preventDefault(); // Show progress and disable submit button progressArea.classList.remove('d-none'); submitBtn.disabled = true; progressBar.style.width = '0%'; resultArea.classList.add('d-none'); downloadBtn.classList.add('d-none'); // Remove any previous error styling progressBar.classList.remove('bg-danger'); const updateProgress = (percent, message) => { progressBar.style.width = `${percent}%`; progressText.textContent = message; }; try { const formData = new FormData(this); const file = formData.get('file'); // Validate file size (max 500MB) if (file.size > 500 * 1024 * 1024) { throw new Error('File size exceeds 500MB limit'); } updateProgress(10, 'Uploading file...'); try { const response = await submitWithRetry(formData); const blob = await response.blob(); const url = URL.createObjectURL(blob); // Update UI based on file type const outputType = formData.get('output_type'); const mediaElement = document.createElement(outputType === 'video' ? 'video' : 'audio'); mediaElement.src = url; mediaElement.controls = true; mediaElement.classList.add('w-100'); // Clear previous media player content mediaPlayer.innerHTML = ''; mediaPlayer.appendChild(mediaElement); // Setup download button downloadBtn.href = url; downloadBtn.download = `translated_media.${outputType === 'video' ? 'mp4' : 'mp3'}`; // Show results const thumbnailHTML = `