Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SoundScripter</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"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> | |
| <style> | |
| * { | |
| margin: 10px; | |
| } | |
| .btn img { | |
| cursor: pointer; /* Change cursor to pointer on hover */ | |
| padding: 5px; /* Add some padding for visual effect */ | |
| border: 1px solid #ccc; /* Add a border */ | |
| border-radius: 5px; /* Add rounded corners */ | |
| } | |
| .btn img:hover { | |
| background-color: #f0f0f0; /* Change background color on hover */ | |
| } | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .container_fp { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100%; | |
| } | |
| #soundScripter { | |
| font-family: Arial, sans-serif; | |
| font-size: 3rem; | |
| color: #333; | |
| animation: animateText 3s infinite alternate; | |
| } | |
| @keyframes animateText { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 100% { | |
| transform: scale(1.1); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body style="background-color:#daeaf7";> | |
| <div class="container_fp" id="firstPage"> | |
| <h1 id="soundScripter"><b>SoundScripter</b></h1> | |
| <button class="btn btn-danger" id="proceedButton" style="border-radius:30px; position: absolute; top: 55%;}"><b>PROCEED</b></button> | |
| </div> | |
| <div id="mainPage" class="hidden"> | |
| <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" > | |
| <!-- <div> | |
| <img src="wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px"> | |
| <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span> | |
| </div> | |
| <h5>Automatic Speech Recognition</h5> | |
| <button class="btn btn-danger" id="LiveASRButton" style="border-radius:30px; position: absolute; top: 55%;}"><b>LIVE ASR</b></button> | |
| <li class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | |
| Dropdown | |
| </a> | |
| <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
| <li><a class="dropdown-item" href="#">Action</a></li> | |
| <li><a class="dropdown-item" href="#">Another action</a></li> | |
| <li><hr class="dropdown-divider"></li> | |
| <li><a class="dropdown-item" href="#">Something else here</a></li> | |
| </ul> | |
| </li> --> | |
| <div style=" | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; margin-top: -2px;"> | |
| <div> | |
| <img src="https://i.ibb.co/BV9Z3Zw/wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px"> | |
| <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span> | |
| </div> | |
| <div style="display: flex;"> | |
| <div style="margin-top: 17px;"> | |
| <h5>Automatic Speech Recognition</h5> | |
| </div> | |
| <div style="margin-top: 0px;> | |
| <ul class="navbar-nav me-auto mb-2 mb-lg-0"> | |
| <li style="list-style-type: none;" class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | |
| <b>ASR</b> | |
| </a> | |
| <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
| <li><a class="dropdown-item">Static ASR</a></li> | |
| <li><hr class="dropdown-divider"></li> | |
| <li><a class="dropdown-item" id="LiveASRButton">Live ASR</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mt-5"> | |
| <h1><center><b>STATIC ASR</b></center><h1> | |
| <div style="text-align: right;"> | |
| <img src="https://i.ibb.co/zHwzrD0/refresh.png" alt="Refresh" width="20" height="20" onclick="refreshSection_mp()"> | |
| </div> | |
| <span/> | |
| <div class="form-group"> | |
| <div class="row"> | |
| <div class="col"> | |
| <input type="file" class="form-control" id="audioUpload" style="height: 40px; width: 90%;"> | |
| </div> | |
| <div class="col"> | |
| <img src="https://i.ibb.co/WWXMF7n/speaker.jpg" alt="Listen" width="30" height="30" style="margin:-8px" onclick="playAudio()"> | |
| </div> | |
| </div> | |
| <div><h6><b>OR</b></h6></div> | |
| <button class="btn" id="recordButton" style="background-color: white; border-radius:30px; height:50px; width:150px;"><h3>Record</h3></button> | |
| </div> | |
| <div class="form-group" style="text-align: center;"> | |
| <button class="btn btn-danger" id="submitButton" style="border-radius:30px;"><b>UPLOAD</b></button> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" id="outputText" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!--Live ASR--> | |
| <div id="liveASRPage" class="hidden"> | |
| <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" > | |
| <div style=" | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; margin-top: -2px;"> | |
| <div> | |
| <img src="https://i.ibb.co/BV9Z3Zw/wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px"> | |
| <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span> | |
| </div> | |
| <div style="display: flex;"> | |
| <div style=" margin-top: 17px;"> | |
| <h5>Automatic Speech Recognition</h5> | |
| </div> | |
| <div style="margin-top: 0px;> | |
| <ul class="navbar-nav me-auto mb-2 mb-lg-0"> | |
| <li style="list-style-type: none;" class="nav-item dropdown"> | |
| <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> | |
| <b>ASR</b> | |
| </a> | |
| <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> | |
| <li><a class="dropdown-item" id="StaticASRButton">Static ASR</a></li> | |
| <li><hr class="dropdown-divider"></li> | |
| <li><a class="dropdown-item">Live ASR</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container mt-5"> | |
| <h1><center><b>LIVE ASR</b></center><h1> | |
| <span/> | |
| <div class="form-group"> | |
| <button class="btn" id="startButton" style="background-color: white; border-radius:30px; height:50px; width:150px;"><h3>Record</h3></button> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" id="output" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea> | |
| </div> | |
| </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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> | |
| <script> | |
| let proceedClicked = false; | |
| let liveASRClicked = false; | |
| let firstPageClicked = false; | |
| let staticASRClicked = false; | |
| function removeFirstPage() { | |
| const firstPage = document.getElementById('firstPage'); | |
| firstPage.parentNode.removeChild(firstPage); | |
| } | |
| function toggleContent() { | |
| if (!proceedClicked) { | |
| removeFirstPage(); | |
| document.getElementById('mainPage').classList.remove('hidden'); | |
| proceedClicked = true; | |
| } | |
| } | |
| function toggleContent_sa() { | |
| if (!staticASRClicked) { | |
| removeMainPage(); | |
| document.getElementById('mainPage').classList.remove('hidden'); | |
| staticASRClicked = true; | |
| liveASRClicked = false; | |
| } | |
| } | |
| function removeMainPage() { | |
| const mainPage = document.getElementById('mainPage'); | |
| mainPage.classList.add('hidden'); | |
| } | |
| function toggleContent_la() { | |
| if (!liveASRClicked) { | |
| removeMainPage(); | |
| document.getElementById('liveASRPage').classList.remove('hidden'); | |
| liveASRClicked = true; | |
| staticASRClicked = false; | |
| } | |
| } | |
| function removeLiveASRPage() { | |
| const liveASRPage = document.getElementById('liveASRPage'); | |
| liveASRPage.classList.add('hidden'); | |
| } | |
| function toggleContent_fp() { | |
| if (!firstPageClicked) { | |
| removeLiveASRPage(); | |
| document.getElementById('firstPage').classList.remove('hidden'); | |
| firstPageClicked = true; | |
| liveASRClicked = false; | |
| } | |
| } | |
| document.getElementById('proceedButton').addEventListener('click', toggleContent); | |
| document.getElementById('LiveASRButton').addEventListener('click', toggleContent_la); | |
| document.getElementById('StaticASRButton').addEventListener('click', toggleContent_sa); | |
| document.getElementById('StaticASRButton').addEventListener('click', toggleContent_fp); | |
| let isRecording = false; | |
| let recordedChunks = []; | |
| let uploadedFile; | |
| let recordedAudioBlob; | |
| let mediaRecorder; | |
| const recordButton = document.getElementById("recordButton"); | |
| const submitButton = document.getElementById("submitButton"); | |
| const outputText = document.getElementById("outputText"); | |
| const audioUpload = document.getElementById("audioUpload"); | |
| let mediaStream; // Store the media stream to stop it later | |
| recordButton.addEventListener("click", function () { | |
| if (!isRecording) { | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(function (stream) { | |
| mediaStream = stream; // Save the stream for stopping later | |
| mediaRecorder = new MediaRecorder(stream); | |
| recordedChunks = []; | |
| mediaRecorder.ondataavailable = function (e) { | |
| if (e.data.size > 0) { | |
| 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(); | |
| mediaStream.getTracks().forEach(track => track.stop()); // Stop the media stream | |
| isRecording = false; | |
| recordButton.innerText = "RECORD"; | |
| } | |
| }); | |
| audioUpload.addEventListener("change", function (event) { | |
| uploadedFile = event.target.files[0]; | |
| if (uploadedFile) { | |
| console.error("File uploading") | |
| const fileReader = new FileReader(); | |
| fileReader.onload = function () { | |
| uploadedArrayBuffer = fileReader.result; | |
| }; | |
| fileReader.readAsArrayBuffer(uploadedFile); | |
| } | |
| }); | |
| submitButton.addEventListener("click", function () { | |
| if (recordedAudioBlob || uploadedFile) { | |
| const formData = new FormData(); | |
| if (recordedAudioBlob) { | |
| formData.append("audio", recordedAudioBlob, "recorded_audio.wav"); | |
| fetch("/asr/live", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.text) { | |
| outputText.value = data.text; | |
| } else { | |
| outputText.value = "No text recognized."; | |
| } | |
| }) | |
| .catch((error) => { | |
| console.error("Error while connecting with backend", error); | |
| outputText.value = "Backend communication failed."; | |
| }); | |
| } else if (uploadedFile) { | |
| formData.append("audio", uploadedFile, uploadedFile.name); | |
| fetch("/asr", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.text) { | |
| outputText.value = data.text; | |
| } else { | |
| outputText.value = "No text recognized."; | |
| } | |
| }) | |
| .catch((error) => { | |
| console.error("Error while connecting with backend", error); | |
| outputText.value = "Backend communication failed."; | |
| }); | |
| } | |
| // fetch("http://localhost:8000/asr", { | |
| // method: "POST", | |
| // body: formData, | |
| // }) | |
| // .then((response) => response.json()) | |
| // .then((data) => { | |
| // if (data.text) { | |
| // outputText.value = data.text; | |
| // } else { | |
| // outputText.value = "No text recognized."; | |
| // } | |
| // }) | |
| // .catch((error) => { | |
| // console.error("Error while connecting with backend", error); | |
| // outputText.value = "Backend communication failed."; | |
| // }); | |
| if (recordedAudioBlob) { | |
| const downloadLink = document.createElement("a"); | |
| downloadLink.href = URL.createObjectURL(recordedAudioBlob); | |
| downloadLink.download = "recorded_audio.wav"; | |
| downloadLink.style.display = "none"; | |
| document.body.appendChild(downloadLink); | |
| downloadLink.click(); | |
| URL.revokeObjectURL(downloadLink.href); | |
| document.body.removeChild(downloadLink); | |
| } | |
| } else { | |
| outputText.value = "Please upload an audio file or record."; | |
| } | |
| }); | |
| if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) { | |
| const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); | |
| recognition.lang = 'hi-IN'; // Set language to Hindi (India) | |
| recognition.continuous = true; | |
| recognition.interimResults = true; | |
| const output = document.getElementById('output'); | |
| const startButton = document.getElementById('startButton'); | |
| recognition.onresult = (event) => { | |
| const transcript = Array.from(event.results) | |
| .map(result => result[0].transcript) | |
| .join(''); | |
| // Display the Hindi text | |
| output.innerText = transcript; | |
| }; | |
| startButton.addEventListener('click', () => { | |
| if (startButton.innerText === 'Stop Recording') { | |
| recognition.stop(); | |
| startButton.innerText = 'RECORD'; | |
| } else { | |
| if (recognition.start) { | |
| recognition.start(); | |
| startButton.innerText = 'Stop Recording'; | |
| } else { | |
| startButton.innerText = 'Speech Recognition not supported'; | |
| } | |
| } | |
| }); | |
| } else { | |
| document.getElementById('output').innerText = 'Speech Recognition not supported'; | |
| } | |
| function refreshSection_mp() { | |
| // Reset input fields and clear recorded data | |
| document.getElementById('audioUpload').value = ''; // Reset file input | |
| recordedChunks = []; // Clear recorded chunks | |
| recordedAudioBlob = null; // Clear recorded audio blob | |
| mediaRecorder = null; // Clear media recorder | |
| // Clear output text | |
| document.getElementById('outputText').value = ''; | |
| // Show the refreshed content | |
| document.getElementById(mainPage).classList.remove('hidden'); | |
| // Update state variables if necessary | |
| staticASRClicked = (id === 'mainPage'); | |
| liveASRClicked = (id === 'liveASRPage'); | |
| } | |
| function playAudio() { | |
| const audioFile = document.getElementById('audioUpload').files[0]; | |
| if (audioFile) { | |
| const audioURL = URL.createObjectURL(audioFile); | |
| const audio = new Audio(audioURL); | |
| audio.play(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |