|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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> |
|
|
|
