Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Speech Recognition and Translation</title> | |
| </head> | |
| <body> | |
| <h1>Speech Recognition and Translation</h1> | |
| <!-- Language selection --> | |
| <form id="language-form" method="POST" action="/translate"> | |
| <label for="language">Choose Language:</label> | |
| <select name="language" id="language"> | |
| <option value="1">Tamil</option> | |
| <option value="2">English</option> | |
| <option value="3">Hindi</option> | |
| </select> | |
| <br><br> | |
| <button type="button" onclick="startSpeechRecognition()">Start Speech Recognition</button> | |
| </form> | |
| <h3>Recognized Text:</h3> | |
| <p id="recognized-text"></p> | |
| <h3>Translation:</h3> | |
| <p id="translated-text"></p> | |
| <script> | |
| function startSpeechRecognition() { | |
| const language = document.getElementById("language").value; | |
| // Start speech recognition | |
| const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); | |
| recognition.lang = language == "1" ? "ta-IN" : (language == "2" ? "en-US" : "hi-IN"); | |
| recognition.start(); | |
| recognition.onresult = function(event) { | |
| const speechText = event.results[0][0].transcript; | |
| document.getElementById("recognized-text").innerText = speechText; | |
| // Send recognized text to the backend for translation | |
| fetch("/translate", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/x-www-form-urlencoded" }, | |
| body: `language=${language}` | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.translation) { | |
| document.getElementById("translated-text").innerText = "Translation: " + data.translation; | |
| } else { | |
| document.getElementById("translated-text").innerText = "Error: " + data.error; | |
| } | |
| }) | |
| .catch(error => console.log(error)); | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> | |