Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Speech Translator</title> | |
| <style> | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; padding: 20px; background-color: #f4f4f4; color: #333; } | |
| .container { max-width: 700px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } | |
| h1 { text-align: center; color: #1a1a1a; } | |
| .upload-section, .result-box { margin-bottom: 20px; } | |
| .result-box { border: 1px solid #ddd; padding: 15px; border-radius: 5px; } | |
| label, h3 { display: block; margin-bottom: 10px; font-weight: bold; } | |
| input[type="file"] { display: block; margin-bottom: 10px; } | |
| button { display: block; width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } | |
| button:hover { background-color: #0056b3; } | |
| #status { text-align: center; font-style: italic; color: #555; margin-top: 15px; height: 20px; } | |
| audio { width: 100%; margin-top: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Arabic to English Speech Translator</h1> | |
| <div class="upload-section"> | |
| <label for="audioFileInput">Upload or Record Arabic Speech:</label> | |
| <input type="file" id="audioFileInput" accept="audio/*"> | |
| <button id="submitButton">Submit</button> | |
| <div id="status"></div> | |
| </div> | |
| <div class="result-box"> | |
| <h3>Arabic Transcript (STT):</h3> | |
| <p id="arabicText">...</p> | |
| </div> | |
| <div class="result-box"> | |
| <h3>English Translation (TTT):</h3> | |
| <p id="englishText">...</p> | |
| </div> | |
| <div class="result-box"> | |
| <h3>Synthesized English Speech (TTS):</h3> | |
| <audio id="audioPlayer" controls></audio> | |
| </div> | |
| </div> | |
| <script> | |
| const fileInput = document.getElementById('audioFileInput'); | |
| const submitButton = document.getElementById('submitButton'); | |
| const statusDiv = document.getElementById('status'); | |
| const arabicText = document.getElementById('arabicText'); | |
| const englishText = document.getElementById('englishText'); | |
| const audioPlayer = document.getElementById('audioPlayer'); | |
| submitButton.addEventListener('click', async () => { | |
| const file = fileInput.files[0]; | |
| if (!file) { | |
| alert("Please select a file first."); | |
| return; | |
| } | |
| statusDiv.textContent = "Uploading and processing... This may take a moment."; | |
| submitButton.disabled = true; | |
| const formData = new FormData(); | |
| formData.append('file', file); // The key 'file' must match the FastAPI endpoint parameter name | |
| try { | |
| // Replace with your deployed backend URL later | |
| const apiUrl = '/process-speech/'; | |
| const response = await fetch(apiUrl, { | |
| method: 'POST', | |
| body: formData, | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const result = await response.json(); | |
| arabicText.textContent = result.arabic_transcript; | |
| englishText.textContent = result.english_translation; | |
| if (result.audio_data.base64) { | |
| const audioData = `data:audio/wav;base64,${result.audio_data.base64}`; | |
| audioPlayer.src = audioData; | |
| audioPlayer.style.display = 'block'; | |
| } else { | |
| audioPlayer.style.display = 'none'; | |
| } | |
| statusDiv.textContent = "Processing complete!"; | |
| } catch (error) { | |
| console.error('Error:', error); | |
| statusDiv.textContent = `An error occurred: ${error.message}`; | |
| } finally { | |
| submitButton.disabled = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |