Spaces:

Athspi-ai
/

Audio-translation

Running

App Files Files Community

Athspi commited on Mar 11

Commit

a14dcb8

verified ·

1 Parent(s): 5a6cf61

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +372 -99

static/index.html CHANGED Viewed

@@ -547,16 +547,31 @@
 <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">
@@ -568,27 +583,51 @@
                 <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>
@@ -602,25 +641,42 @@
                 <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>
@@ -633,107 +689,324 @@
     <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>

 <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">
                 <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>
                 <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>
     <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>