static/script.js

let lightMode = true;
let recording = false;
let voiceOption = "default";
let sttLanguage = "en-US";
const responses = [];
const botRepeatButtonIDToIndexMap = {};
const userRepeatButtonIDToRecordingMap = {};
const baseUrl = window.location.origin;
//webkitURL is deprecated but nevertheless
URL = window.URL || window.webkitURL;
var gumStream; //stream from getUserMedia()
var recorder; //WebAudioRecorder object
var input; //MediaStreamAudioSourceNode we'll be recording
var encodingType = "wav"; //holds selected encoding for resulting audio (file)
var encodeAfterRecord = true; // when to encode
// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext; //new audio context to help us record

async function showBotLoadingAnimation() {
  await sleep(500);
  $(".loading-animation")[1].style.display = "inline-block";
}

function hideBotLoadingAnimation() {
  $(".loading-animation")[1].style.display = "none";
}

async function showUserLoadingAnimation() {
  await sleep(100);
  $(".loading-animation")[0].style.display = "flex";
}

function hideUserLoadingAnimation() {
  $(".loading-animation")[0].style.display = "none";
}

const getSpeechToText = async (userRecording) => {
  const formData = new FormData();
  formData.append("audio", userRecording.audioBlob, "recording.wav");
  formData.append("language", sttLanguage);

  let response = await fetch(baseUrl + "/speech-to-text", {
    method: "POST",
    body: formData,
  });
  console.log(response);
  response = await response.json();
  console.log(response);
  return response.text;
};

const processUserMessage = async (userMessage) => {
  let response = await fetch(baseUrl + "/process-message", {
    method: "POST",
    headers: { Accept: "application/json", "Content-Type": "application/json" },
    body: JSON.stringify({ userMessage: userMessage, voice: voiceOption }),
  });
  response = await response.json();
  console.log(response);
  return response;
};

const cleanTextInput = (value) => {
  return value
    .trim() // remove starting and ending spaces
    .replace(/[\n\t]/g, "") // remove newlines and tabs
    .replace(/<[^>]*>/g, "") // remove HTML tags
    .replace(/[<>&;]/g, ""); // sanitize inputs
};

function startRecording() {
  console.log("startRecording() called");
  var constraints = {
    audio: true,
    video: false,
  };
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      console.log(
        "getUserMedia() success, stream created, initializing WebAudioRecorder..."
      );
      audioContext = new AudioContext();
      //assign to gumStream for later use
      gumStream = stream;
      /* use the stream */
      input = audioContext.createMediaStreamSource(stream);
      recorder = new WebAudioRecorder(input, {
        workerDir: "static/js/", // must end with slash
        encoding: encodingType,
        numChannels: 2, //2 is the default, mp3 encoding supports only 2
        onEncoderLoading: function (recorder, encoding) {
          // show "loading encoder..." display
          console.log("Loading " + encoding + " encoder...");
        },
        onEncoderLoaded: function (recorder, encoding) {
          // hide "loading encoder..." display
          console.log(encoding + " encoder loaded");
        },
      });
      recorder.onComplete = function (recorder, blob) {
        console.log("Encoding complete");
        const audioUrl = URL.createObjectURL(blob);
        const audio = new Audio(audioUrl);
        const play = () => audio.play();
        const userRecording = { audioBlob: blob, audioUrl, play };
        getSpeechToText(userRecording).then((userMessage) => {
          populateUserMessage(userMessage, userRecording);
          populateBotResponse(userMessage);
        });
      };
      recorder.setOptions({
        timeLimit: 120,
        encodeAfterRecord: encodeAfterRecord,
        ogg: {
          quality: 0.5,
        },
        mp3: {
          bitRate: 160,
        },
      });
      //start the recording process
      recorder.startRecording();
      console.log("Recording started");
    })
    .catch(function (err) {
      //enable the record button if getUSerMedia() fails
      recording = false;
      $(".fa-microphone").css("color", "#125ee5");
    });
}

function stopRecording() {
  console.log("stopRecording() called");
  //stop microphone access
  gumStream.getAudioTracks()[0].stop();
  //tell the recorder to finish the recording (stop recording + encode the recorded audio)
  recorder.finishRecording();
  console.log("Recording stopped");
}

const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

const playResponseAudio = (function () {
  const df = document.createDocumentFragment();
  return function Sound(src) {
    const snd = new Audio(src);
    df.appendChild(snd); // keep in fragment until finished playing
    snd.addEventListener("ended", function () {
      df.removeChild(snd);
    });
    snd.play();
    return snd;
  };
})();

const getRandomID = () => {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
};

const scrollToBottom = () => {
  // Scroll the chat window to the bottom
  $("#chat-window").animate({
    scrollTop: $("#chat-window")[0].scrollHeight,
  });
};
const populateUserMessage = (userMessage, userRecording) => {
  // Clear the input field
  $("#message-input").val("");

  // Append the user's message to the message list

  if (userRecording) {
    const userRepeatButtonID = getRandomID();
    userRepeatButtonIDToRecordingMap[userRepeatButtonID] = userRecording;
    hideUserLoadingAnimation();
    $("#message-list").append(
      `<div class='message-line my-text'><div class='message-box my-text${

        !lightMode ? " dark" : ""

      }'><div class='me'>${userMessage}</div></div>

            <button id='${userRepeatButtonID}' class='btn volume repeat-button' onclick='userRepeatButtonIDToRecordingMap[this.id].play()'><i class='fa fa-volume-up'></i></button>

            </div>`
    );
  } else {
    $("#message-list").append(
      `<div class='message-line my-text'><div class='message-box my-text${

        !lightMode ? " dark" : ""

      }'><div class='me'>${userMessage}</div></div></div>`
    );
  }

  scrollToBottom();
};

const populateBotResponse = async (userMessage) => {
  await showBotLoadingAnimation();
  const response = await processUserMessage(userMessage);
  responses.push(response);

  const repeatButtonID = getRandomID();
  botRepeatButtonIDToIndexMap[repeatButtonID] = responses.length - 1;
  hideBotLoadingAnimation();
  // Append the random message to the message list
  const messageBox = $(`<div class='message-line'><div class='message-box${

      !lightMode ? " dark" : ""

    }'></div></div>`);
  messageBox.find('.message-box').html(response.openaiResponseText);
  $("#message-list").append(messageBox);

  playResponseAudio("data:audio/wav;base64," + response.openaiResponseSpeech);

  scrollToBottom();
};

$(document).ready(function () {
  // Listen for the "Enter" key being pressed in the input field
  $("#message-input").keyup(function (event) {
    let inputVal = cleanTextInput($("#message-input").val());

    if (event.keyCode === 13 && inputVal != "") {
      const message = inputVal;

      populateUserMessage(message, null);
      populateBotResponse(message);
    }

    inputVal = $("#message-input").val();

    if (inputVal == "" || inputVal == null) {
      $("#send-button")
        .removeClass("send")
        .addClass("microphone")
        .html("<i class='fa fa-microphone'></i>");
    } else {
      $("#send-button")
        .removeClass("microphone")
        .addClass("send")
        .html("<i class='fa fa-paper-plane'></i>");
    }
  });

  // When the user clicks the "Send" button
  $("#send-button").click(async function () {
    if ($("#send-button").hasClass("microphone") && !recording) {
      startRecording();
      $(".fa-microphone").css("color", "#f3685eff");
      console.log("start recording");
      recording = true;
    } else if (recording) {
      stopRecording();
      await showUserLoadingAnimation();
      $(".fa-microphone").css("color", "#477de2");
      console.log("stop recording");
      recording = false;
    } else {
      // Get the message the user typed in
      const message = cleanTextInput($("#message-input").val());

      populateUserMessage(message, null);
      populateBotResponse(message);

      $("#send-button")
        .removeClass("send")
        .addClass("microphone")
        .html("<i class='fa fa-microphone'></i>");
    }
  });

  // handle the event of switching light-dark mode
  $("#light-dark-mode-switch").change(function () {
    $("body").toggleClass("dark-mode");
    $(".message-box").toggleClass("dark");
    $(".loading-dots").toggleClass("dark");
    $(".dot").toggleClass("dark-dot");
    lightMode = !lightMode;
  });

  $("#voice-options").change(function () {
    voiceOption = $(this).val();
    console.log(voiceOption);
  });

  $("#stt-language-options").change(function () {
    sttLanguage = $(this).val();
    console.log(sttLanguage);
  });
});