Spaces:

suvradip2000
/

ASR

Sleeping

File size: 6,209 Bytes

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