Spaces:

Athspi-ai
/

Audio-translation

Running

App Files Files Community

Athspi commited on Mar 11

Commit

4e7c8a7

verified ·

1 Parent(s): b33af77

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +99 -372

static/index.html CHANGED Viewed

@@ -547,31 +547,16 @@
 <body>
     <div class="container">
         <header>
-            <div class="bubbles">
-                <!-- Bubbles generated by JS -->
-            </div>
             <h1>AI Audio Translator</h1>
             <p>Upload an audio file or record via microphone, select a target language, and get the transcription, translation, and translated audio!</p>
         </header>
         <div class="main-content">
             <div class="audio-input card">
-                <h2>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"></path>
-                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-                        <line x1="12" y1="19" x2="12" y2="22"></line>
-                    </svg>
-                    Audio Input
-                </h2>
                 <div class="dropzone" id="dropzone">
-                    <div class="icon">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                            <polyline points="17 8 12 3 7 8"></polyline>
-                            <line x1="12" y1="3" x2="12" y2="15"></line>
-                        </svg>
-                    </div>
                     <p>Drag and drop your audio file here</p>
                     <p>or</p>
                     <label for="audioFileInput" class="custom-file-upload">
@@ -583,51 +568,27 @@
                 <div class="record-option">
                     <button id="recordBtn" class="record-btn">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <circle cx="12" cy="12" r="3"></circle>
-                        </svg>
-                        Start Recording
                     </button>
                 </div>
                 <div id="audioVisualization" class="audio-visualization hidden">
-                    <div class="visualizer-bars" id="visualizerBars">
-                        <!-- Bars will be generated dynamically -->
-                    </div>
                 </div>
             </div>
             <div class="language-selection card">
-                <h2>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M5 8l6 6"></path>
-                        <path d="M4 14l6-6 2-3"></path>
-                        <path d="M2 5h12"></path>
-                        <path d="M7 2h1"></path>
-                        <path d="M22 22l-5-10-5 10"></path>
-                        <path d="M14 18h6"></path>
-                    </svg>
-                    Target Language
-                </h2>
                 <div class="language-dropdown">
                     <select id="languageSelect">
                         <option value="" disabled selected>Select language</option>
-                        <!-- Languages will be populated dynamically -->
                     </select>
                 </div>
                 <button id="translateBtn" class="translate-btn" disabled>
                     <span class="btn-content">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M5 8l6 6"></path>
-                            <path d="M4 14l6-6 2-3"></path>
-                            <path d="M2 5h12"></path>
-                            <path d="M7 2h1"></path>
-                            <path d="M22 22l-5-10-5 10"></path>
-                            <path d="M14 18h6"></path>
-                        </svg>
-                        Translate Audio
                     </span>
                 </button>
             </div>
@@ -641,42 +602,25 @@
                 <div class="results-container">
                     <div class="result-card">
                         <h3>Original Transcription</h3>
-                        <div id="originalText" class="result-content">
-                            <!-- Transcription will appear here -->
-                        </div>
                         <audio id="originalAudio" class="audio-player" controls></audio>
                         <div class="controls">
                             <button id="copyOriginal" class="control-btn copy-btn">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                </svg>
-                                Copy Text
                             </button>
                         </div>
                     </div>
                     <div class="result-card">
                         <h3>Translated Text</h3>
-                        <div id="translatedText" class="result-content">
-                            <!-- Translation will appear here -->
-                        </div>
                         <audio id="translatedAudio" class="audio-player" controls></audio>
                         <div class="controls">
                             <button id="copyTranslated" class="control-btn copy-btn">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                                </svg>
-                                Copy Text
                             </button>
                             <button id="downloadTranslated" class="control-btn download-btn">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                                    <polyline points="7 10 12 15 17 10"></polyline>
-                                    <line x1="12" y1="15" x2="12" y2="3"></line>
-                                </svg>
-                                Download
                             </button>
                         </div>
                     </div>
@@ -689,324 +633,107 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
     <script>
-        // Create bubble animation in header
-        const createBubbles = () => {
-            const bubblesContainer = document.querySelector('.bubbles');
-            const bubbleCount = 10;
-            for (let i = 0; i < bubbleCount; i++) {
-                const bubble = document.createElement('div');
-                bubble.classList.add('bubble');
-                // Random sizes
-                const size = Math.random() * 60 + 20;
-                bubble.style.width = `${size}px`;
-                bubble.style.height = `${size}px`;
-                // Random positions
-                bubble.style.left = `${Math.random() * 100}%`;
-                bubble.style.top = `${Math.random() * 100}%`;
-                // Random animation delay and duration
-                const animationDuration = Math.random() * 10 + 5;
-                const animationDelay = Math.random() * 5;
-                bubble.style.animationDuration = `${animationDuration}s`;
-                bubble.style.animationDelay = `${animationDelay}s`;
-                bubblesContainer.appendChild(bubble);
-            }
-        };
-        // DOM Elements
-        const dropzone = document.getElementById('dropzone');
-        const fileInput = document.getElementById('audioFileInput');
-        const fileInfo = document.getElementById('fileInfo');
-        const recordBtn = document.getElementById('recordBtn');
-        const translateBtn = document.getElementById('translateBtn');
-        const languageSelect = document.getElementById('languageSelect');
-        const loadingSection = document.getElementById('loadingSection');
-        const outputContainer = document.getElementById('outputContainer');
-        const originalText = document.getElementById('originalText');
-        const translatedText = document.getElementById('translatedText');
-        const originalAudio = document.getElementById('originalAudio');
-        const translatedAudio = document.getElementById('translatedAudio');
-        const copyOriginal = document.getElementById('copyOriginal');
-        const copyTranslated = document.getElementById('copyTranslated');
-        const downloadTranslated = document.getElementById('downloadTranslated');
-        const toast = document.getElementById('toast');
-        const audioVisualization = document.getElementById('audioVisualization');
-        const visualizerBars = document.getElementById('visualizerBars');
-        // Variables
-        let audioFile = null;
-        let mediaRecorder = null;
-        let audioChunks = [];
-        let isRecording = false;
-        let audioContext = null;
-        let analyser = null;
-        let visualizationInterval = null;
-        // Create visualizer bars
-        const createVisualizerBars = () => {
-            visualizerBars.innerHTML = '';
-            const barCount = 50;
-            for (let i = 0; i < barCount; i++) {
-                const bar = document.createElement('div');
-                bar.classList.add('visualizer-bar');
-                visualizerBars.appendChild(bar);
-            }
         };
-        // Initialize audio context
-        const initAudioContext = () => {
-            if (!audioContext) {
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                analyser = audioContext.createAnalyser();
-                analyser.fftSize = 256;
-            }
-        };
-        // Update visualization
-        const updateVisualization = (dataArray) => {
-            const bars = visualizerBars.querySelectorAll('.visualizer-bar');
-            const bufferLength = analyser.frequencyBinCount;
-            analyser.getByteFrequencyData(dataArray);
-            for (let i = 0; i < bars.length; i++) {
-                const index = Math.floor(i * (bufferLength / bars.length));
-                const value = dataArray[index] / 255;
-                const height = value * 100;
-                bars[i].style.height = `${height}%`;
-            }
-        };
-        // Start visualization
-        const startVisualization = (stream) => {
-            initAudioContext();
-            const source = audioContext.createMediaStreamSource(stream);
-            source.connect(analyser);
-            const dataArray = new Uint8Array(analyser.frequencyBinCount);
-            createVisualizerBars();
-            audioVisualization.classList.remove('hidden');
-            visualizationInterval = setInterval(() => {
-                updateVisualization(dataArray);
-            }, 50);
-        };
-        // Stop visualization
-        const stopVisualization = () => {
-            if (visualizationInterval) {
-                clearInterval(visualizationInterval);
-                visualizationInterval = null;
-            }
-            audioVisualization.classList.add('hidden');
-        };
-        // Initialize
-        const init = () => {
-            createBubbles();
-            // Drag and drop functionality
-            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-                dropzone.addEventListener(eventName, preventDefaults, false);
-            });
-            function preventDefaults(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            ['dragenter', 'dragover'].forEach(eventName => {
-                dropzone.addEventListener(eventName, highlight, false);
-            });
-            ['dragleave', 'drop'].forEach(eventName => {
-                dropzone.addEventListener(eventName, unhighlight, false);
-            });
-            function highlight() {
-                dropzone.classList.add('dragover');
-            }
-            function unhighlight() {
-                dropzone.classList.remove('dragover');
-            }
-            dropzone.addEventListener('drop', handleDrop, false);
-            function handleDrop(e) {
-                const dt = e.dataTransfer;
-                const files = dt.files;
-                if (files.length > 0) {
-                    handleFile(files[0]);
-                }
-            }
-            // File input change handler
-            fileInput.addEventListener('change', (e) => {
-                if (e.target.files.length > 0) {
-                    handleFile(e.target.files[0]);
-                }
-            });
-            // Handle file selection
-            const handleFile = (file) => {
-                if (file.type.startsWith('audio/')) {
-                    audioFile = file;
-                    fileInfo.textContent = `Selected file: ${file.name}`;
-                    fileInfo.classList.remove('hidden');
-                    translateBtn.disabled = false;
-                } else {
-                    alert('Please upload a valid audio file.');
-                }
-            };
-            // Record button click handler
-            recordBtn.addEventListener('click', () => {
-                if (!isRecording) {
-                    startRecording();
-                } else {
-                    stopRecording();
-                }
-            });
-            // Start recording
-            const startRecording = async () => {
-                try {
-                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    mediaRecorder = new MediaRecorder(stream);
-                    mediaRecorder.start();
-                    isRecording = true;
-                    recordBtn.classList.add('recording');
-                    recordBtn.innerHTML = `
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="12" cy="12" r="10"></circle>
-                            <rect x="6" y="6" width="12" height="12" rx="2"></rect>
-                        </svg>
-                        Stop Recording
-                    `;
-                    startVisualization(stream);
-                    mediaRecorder.ondataavailable = (e) => {
-                        audioChunks.push(e.data);
-                    };
-                    mediaRecorder.onstop = () => {
-                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                        audioFile = new File([audioBlob], 'recording.wav', { type: 'audio/wav' });
-                        fileInfo.textContent = `Recording saved: ${audioFile.name}`;
-                        fileInfo.classList.remove('hidden');
-                        translateBtn.disabled = false;
-                        stopVisualization();
-                    };
-                } catch (err) {
-                    console.error('Error starting recording:', err);
-                    alert('Error starting recording. Please ensure you have a microphone connected and permissions granted.');
                 }
-            };
-            // Stop recording
-            const stopRecording = () => {
-                mediaRecorder.stop();
-                isRecording = false;
-                recordBtn.classList.remove('recording');
-                recordBtn.innerHTML = `
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <circle cx="12" cy="12" r="3"></circle>
-                    </svg>
-                    Start Recording
-                `;
-                audioChunks = [];
             };
-            // Translate button click handler
-            translateBtn.addEventListener('click', async () => {
-                if (!audioFile || !languageSelect.value) {
-                    alert('Please select an audio file and a target language.');
-                    return;
-                }
-                loadingSection.style.display = 'flex';
-                outputContainer.style.display = 'none';
                 const formData = new FormData();
-                formData.append('audio', audioFile);
-                formData.append('language', languageSelect.value);
-                try {
-                    const response = await axios.post('/translate', formData);
-                    if (response.data.error) {
-                        throw new Error(response.data.error);
-                    }
-                    const { transcription, translation, audio_url } = response.data;
-                    originalText.textContent = transcription;
-                    translatedText.textContent = translation;
-                    originalAudio.src = URL.createObjectURL(audioFile);
-                    translatedAudio.src = audio_url;
-                    loadingSection.style.display = 'none';
-                    outputContainer.style.display = 'block';
-                } catch (err) {
-                    console.error('Error:', err);
-                    showToast(err.message || 'An error occurred');
-                    loadingSection.style.display = 'none';
-                }
-            });
-            // Copy original text to clipboard
-            copyOriginal.addEventListener('click', () => {
-                navigator.clipboard.writeText(originalText.textContent).then(() => {
-                    showToast('Original text copied to clipboard!');
-                });
-            });
-            // Copy translated text to clipboard
-            copyTranslated.addEventListener('click', () => {
-                navigator.clipboard.writeText(translatedText.textContent).then(() => {
-                    showToast('Translated text copied to clipboard!');
-                });
             });
-            // Download translated audio
-            downloadTranslated.addEventListener('click', () => {
-                const link = document.createElement('a');
-                link.href = translatedAudio.src;
-                link.download = `translated_audio.${translatedAudio.src.split('.').pop()}`;
-                link.click();
-            });
-            // Show toast message
-            const showToast = (message) => {
-                toast.textContent = message;
-                toast.classList.add('show');
-                setTimeout(() => {
-                    toast.classList.remove('show');
-                }, 3000);
-            };
-            // Load languages
-            fetch('/languages')
-                .then(response => response.json())
-                .then(languages => {
-                    languageSelect.innerHTML = '<option value="" disabled selected>Select language</option>' +
-                        languages.map(lang => `<option value="${lang}">${lang}</option>`).join('');
-                });
-        };
-        // Initialize the app
-        init();
     </script>
 </body>
 </html>

 <body>
     <div class="container">
         <header>
+            <div class="bubbles"></div>
             <h1>AI Audio Translator</h1>
             <p>Upload an audio file or record via microphone, select a target language, and get the transcription, translation, and translated audio!</p>
         </header>
         <div class="main-content">
             <div class="audio-input card">
+                <h2>Audio Input</h2>
                 <div class="dropzone" id="dropzone">
+                    <div class="icon">📁</div>
                     <p>Drag and drop your audio file here</p>
                     <p>or</p>
                     <label for="audioFileInput" class="custom-file-upload">
                 <div class="record-option">
                     <button id="recordBtn" class="record-btn">
+                        🎤 Start Recording
                     </button>
                 </div>
                 <div id="audioVisualization" class="audio-visualization hidden">
+                    <div class="visualizer-bars" id="visualizerBars"></div>
                 </div>
             </div>
             <div class="language-selection card">
+                <h2>Target Language</h2>
                 <div class="language-dropdown">
                     <select id="languageSelect">
                         <option value="" disabled selected>Select language</option>
+                        <!-- Languages populated dynamically -->
                     </select>
                 </div>
                 <button id="translateBtn" class="translate-btn" disabled>
                     <span class="btn-content">
+                        🌐 Translate Audio
                     </span>
                 </button>
             </div>
                 <div class="results-container">
                     <div class="result-card">
                         <h3>Original Transcription</h3>
+                        <div id="originalText" class="result-content"></div>
                         <audio id="originalAudio" class="audio-player" controls></audio>
                         <div class="controls">
                             <button id="copyOriginal" class="control-btn copy-btn">
+                                📋 Copy Text
                             </button>
                         </div>
                     </div>
                     <div class="result-card">
                         <h3>Translated Text</h3>
+                        <div id="translatedText" class="result-content"></div>
                         <audio id="translatedAudio" class="audio-player" controls></audio>
                         <div class="controls">
                             <button id="copyTranslated" class="control-btn copy-btn">
+                                📋 Copy Text
                             </button>
                             <button id="downloadTranslated" class="control-btn download-btn">
+                                ⬇️ Download
                             </button>
                         </div>
                     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js"></script>
     <script>
+        let currentJob = {
+            fileHash: null,
+            chunksUploaded: 0,
+            totalChunks: 0,
+            progress: 0,
+            state: null
         };
+        // Save state to localStorage
+        function saveState() {
+            localStorage.setItem('translationJob', JSON.stringify(currentJob));
+            document.cookie = `translationJob=${currentJob.fileHash}; max-age=${60*60*24}; path=/`;
+        }
+        // Load state on page load
+        window.addEventListener('load', () => {
+            const savedJob = localStorage.getItem('translationJob');
+            const cookieJob = document.cookie.split('; ').find(row => row.startsWith('translationJob='));
+            if (cookieJob && savedJob) {
+                currentJob = JSON.parse(savedJob);
+                if (!currentJob.state) {
+                    showResumeDialog();
                 }
+            }
+        });
+        async function uploadFile(file) {
+            const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB chunks
+            const fileHash = await calculateFileHash(file);
+            const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+            currentJob = {
+                fileHash,
+                chunksUploaded: 0,
+                totalChunks,
+                progress: 0,
+                state: 'uploading'
             };
+            saveState();
+            for (let i = 0; i < totalChunks; i++) {
+                const chunk = file.slice(i * CHUNK_SIZE, (i+1) * CHUNK_SIZE);
                 const formData = new FormData();
+                formData.append('file', chunk);
+                formData.append('chunkIndex', i);
+                formData.append('totalChunks', totalChunks);
+                formData.append('fileHash', fileHash);
+                await axios.post('/upload-chunk', formData);
+                currentJob.chunksUploaded++;
+                currentJob.progress = Math.round((currentJob.chunksUploaded / totalChunks) * 50);
+                saveState();
+                updateProgressBar();
+            }
+            currentJob.state = 'processing';
+            saveState();
+            const result = await axios.post('/process-file', {
+                fileHash,
+                language: document.getElementById('languageSelect').value
             });
+            currentJob.state = 'complete';
+            currentJob.progress = 100;
+            currentJob.result = result.data;
+            saveState();
+            // Show results
+            showResults(result.data);
+        }
+        async function calculateFileHash(file) {
+            const buffer = await file.arrayBuffer();
+            const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+            return Array.from(new Uint8Array(hashBuffer))
+                .map(b => b.toString(16).padStart(2, '0')).join('');
+        }
+        function showResumeDialog() {
+            if (confirm('Previous translation job found. Resume?')) {
+                resumeJob();
+            } else {
+                clearJob();
+            }
+        }
+        function clearJob() {
+            localStorage.removeItem('translationJob');
+            document.cookie = 'translationJob=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        }
+        // Add to existing translate button handler
+        document.getElementById('translateBtn').addEventListener('click', async () => {
+            const file = document.getElementById('audioFileInput').files[0];
+            if (file) {
+                await uploadFile(file);
+            }
+        });
     </script>
 </body>
 </html>