Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>ASR</title> | |
| <!-- Add Bootstrap CSS link here --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| #header { | |
| background-color: #101725; | |
| color: #fff; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| #title { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| #subtitle { | |
| font-size: 20px; | |
| font-weight: 500; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 20px auto; | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | |
| padding: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .btn { | |
| width: 100%; | |
| padding: 10px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| #outputText { | |
| width: 100%; | |
| min-height: 100px; | |
| padding: 10px; | |
| font-size: 16px; | |
| border-radius: 5px; | |
| resize: vertical; | |
| } | |
| #playButton { | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="header"> | |
| <h1 id="title">Automatic Speech Recognition</h1> | |
| <p id="subtitle">Group 27</p> | |
| </div> | |
| <div class="container"> | |
| <div class="form-group"> | |
| <label for="audioUpload">Upload Audio File:</label> | |
| <input type="file" class="form-control" id="audioUpload"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="languageSelect">Select Language:</label> | |
| <select class="form-control" id="languageSelect"> | |
| <option value="en">English</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <button class="btn btn-danger" id="recordButton">Start Recording</button> | |
| <button class="btn btn-secondary" id="submitButton">Transcribe</button> | |
| <button class="btn btn-info" id="playButton">Play Audio</button> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" id="outputText" rows="5" readonly style="display: none;"></textarea> | |
| </div> | |
| </div> | |
| <!-- Add Bootstrap JS link and any other required scripts here --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script> | |
| <script> | |
| let isRecording = false; | |
| let recordedChunks = []; | |
| let uploadedFile; | |
| let recordedAudioBlob; | |
| let mediaRecorder; | |
| const recordButton = document.getElementById("recordButton"); | |
| const submitButton = document.getElementById("submitButton"); | |
| const languageSelect = document.getElementById("languageSelect"); | |
| const playButton = document.getElementById("playButton"); | |
| const outputText = document.getElementById("outputText"); | |
| let lastModifiedType = null; | |
| recordButton.addEventListener("click", function () { | |
| if (!isRecording) { | |
| navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) { | |
| mediaRecorder = new MediaRecorder(stream); | |
| recordedChunks = []; | |
| mediaRecorder.ondataavailable = function (e) { | |
| recordedChunks.push(e.data); | |
| }; | |
| mediaRecorder.onstop = function () { | |
| recordedAudioBlob = new Blob(recordedChunks, { type: "audio/wav" }); | |
| }; | |
| mediaRecorder.start(); | |
| isRecording = true; | |
| recordButton.innerText = "Stop Recording"; | |
| }).catch(function (err) { | |
| console.error("Error accessing microphone:", err); | |
| }); | |
| } else { | |
| mediaRecorder.stop(); | |
| console.log('Audio recorded') | |
| lastModifiedType = "recorded"; | |
| isRecording = false; | |
| recordButton.innerText = "Start Recording"; | |
| } | |
| }); | |
| const audioUpload = document.getElementById("audioUpload"); | |
| audioUpload.addEventListener("change", function (event) { | |
| uploadedFile = event.target.files[0]; | |
| if (uploadedFile) { | |
| const fileReader = new FileReader(); | |
| fileReader.onload = function () { | |
| uploadedArrayBuffer = fileReader.result; | |
| }; | |
| fileReader.readAsArrayBuffer(uploadedFile); | |
| } | |
| lastModifiedType = "uploaded"; | |
| console.log('File uploaded') | |
| }); | |
| submitButton.addEventListener("click", function () { | |
| outputText.value = "Transcribed Text : " | |
| if (recordedAudioBlob || uploadedFile) { | |
| const formData = new FormData(); | |
| if (lastModifiedType === "recorded" && recordedAudioBlob) { | |
| formData.append("audio", recordedAudioBlob, "recorded_audio.wav"); | |
| } else if (lastModifiedType === "uploaded" && uploadedFile) { | |
| formData.append("audio", uploadedFile, uploadedFile.name); | |
| } | |
| outputText.style.display="block"; | |
| formData.append("language", languageSelect.value); | |
| fetch("/process_audio", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.success) { | |
| outputText.value = "Transcribed Text : " + data.language; | |
| } else { | |
| outputText.value = data.message; | |
| } | |
| }) | |
| .catch((error) => { | |
| console.error("Error communicating with the backend:", error); | |
| outputText.value = "Backend communication failed."; | |
| }); | |
| } else { | |
| outputText.value = "Please record audio or upload a file and select a language before submitting."; | |
| } | |
| }); | |
| playButton.addEventListener("click", function () { | |
| let audioURL; | |
| if (lastModifiedType === "recorded" && recordedAudioBlob) { | |
| audioURL = URL.createObjectURL(recordedAudioBlob); | |
| } else if (lastModifiedType === "uploaded" && uploadedFile) { | |
| audioURL = URL.createObjectURL(uploadedFile); | |
| } | |
| if (audioURL) { | |
| const audio = new Audio(audioURL); | |
| audio.play(); | |
| } else { | |
| outputText.value = "No audio available."; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |