Spaces:

adititewari
/

SoundScripter

Sleeping

File size: 15,445 Bytes

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