lollms-webui/static/js/audio.js

// Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
  isStarted = false;
  isSpeaking = false;
  const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
  const recognition = new SpeechRecognition();
  const synth = window.speechSynthesis || webkitspeechSynthesis;
  var voices = synth.getVoices();
  function prepre_audio() {
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.maxAlternatives = 10;
    language_select = document.getElementById("language")
  }
  voices = [];
  function populateVoicesList() {
    voices = synth.getVoices();
    voice_select = document.getElementById("voice")
    voice_select.innerHTML = "";
    for (let i = 0; i < voices.length; i++) {
      if (
        voices[i].lang.startsWith(
          language_select.value.substring(0, 2)
        )
      ) {
        const option = document.createElement("option");
        option.textContent = `${voices[i].name} (${voices[i].lang})`;

        if (voices[i].default) {
          option.textContent += " — DEFAULT";
        }

        option.setAttribute("data-lang", voices[i].lang);
        option.setAttribute("data-name", voices[i].name);
        voice_select.appendChild(option);
      }
    }
    voice_select.addEventListener("change", function () {
    });
  }
  // Audio code
  function splitString(string, maxLength) {
    const sentences = string.match(/[^.!?]+[.!?]/g);
    const strings = [];
    let currentString = "";

    if (sentences) {
      for (const sentence of sentences) {
        if (currentString.length + sentence.length > maxLength) {
          strings.push(currentString);
          currentString = "";
        }

        currentString += `${sentence} `;
      }
    } else {
      strings.push(string);
    }

    if (currentString) {
      strings.push(currentString);
    }

    return strings;
  }
  function addListeners(button, utterThis) {
    utterThis.onstart = (event) => {
      isSpeaking = true;
      button.style.backgroundColor = "red";
      button.style.boxShadow = "2px 2px 0.5px #808080";
    };

    utterThis.onend = (event) => {
      isSpeaking = false;
      button.style.backgroundColor = "";
      button.style.boxShadow = "";
    };
  }

  function attachAudio_modules(div, container) {
    if (container.getElementsByClassName("audio-out-button").length > 0) {
      return;
    }
    const audio_out_button = document.createElement("button");
    audio_out_button.id = "audio-out-button";
    audio_out_button.classList.add("audio_btn",'bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
    audio_out_button.innerHTML = "🕪";
    audio_out_button.classList.add("audio-out-button");
    container.appendChild(audio_out_button);

    function play_audio() {
      console.log("Playing audio")
      if (isSpeaking) {

        audio_out_button.style.backgroundColor = "";
        audio_out_button.style.boxShadow = "";
        synth.cancel();
        isSpeaking = false;
      } else {
        isSpeaking = true;
        text = div.textContent;

        const selectedOption =
          voice_select.selectedOptions[0].getAttribute("data-name");
        var selectedVoice = null;
        for (let i = 0; i < voices.length; i++) {
          if (voices[i].name === selectedOption) {
            selectedVoice = voices[i];
          }
        }
        if (selectedVoice && selectedVoice.voiceURI === "native") {
          const utterThis = new SpeechSynthesisUtterance(text);
          utterThis.voice = selectedVoice;
          addListeners(audio_out_button, utterThis);
          synth.speak(utterThis);
        } else {
          console.log("Not native")
          texts = splitString(text, 200);
          console.log(`Text to say ${texts}`)
          texts.forEach((text) => {
            const utterThis = new SpeechSynthesisUtterance(text);
            utterThis.voice = selectedVoice;
            addListeners(audio_out_button, utterThis);
            synth.speak(utterThis);
          });
        }
      }
    }
    audio_out_button.addEventListener("click", () => {
      play_audio();
    });
    // TODO : activate using configuration file
    //if (global["auto_audio"]) {
    //  play_audio();
    //}
  }

  function add_audio_in_ui() {
    const inputs = document.querySelectorAll("#user-input");
    inputs.forEach((input) => {
      // const wrapper = document.createElement("div");
      // wrapper.classList.add("flex", "items-center");
      var btn = document.querySelectorAll("#audio_in_tool");

      var found = false;
      // Iterate through the children
      for (var i = 0; i < btn.length; i++) {
        var child = btn[i];
        // Check if the wrapper element contains the current child element
        if (input.parentNode.parentNode.contains(child)) {
          found = true;
        }
      }


      if (!found) {
        const audio_in_button = document.createElement("button");
        audio_in_button.id = "audio_in_tool";
        audio_in_button.classList.add("audio_btn");
        audio_in_button.innerHTML = "🎤";

        input.parentNode.parentNode.insertBefore(
          audio_in_button,
          input.parentNode
        );

        input.classList.add("flex-1");
        audio_in_button.classList.add("ml-2");

        audio_in_button.addEventListener("click", () => {
          if (isStarted) {
            recognition.stop();
            isStarted = false;
          } else {
            recognition.lang = language_select.value;
            recognition.start();
            isStarted = true;
          }
        });

        recognition.addEventListener("result", (event) => {
          let transcript = "";
          for (const result of event.results) {
            transcript += result[0].transcript;
          }
          if (transcript != "") {
            input.value = transcript;
          }
        });

        recognition.addEventListener("start", () => {
          audio_in_button.style.backgroundColor = "red";
          audio_in_button.style.boxShadow = "2px 2px 0.5px #808080";
        });

        recognition.addEventListener("end", () => {
          audio_in_button.style.backgroundColor = "";
          audio_in_button.style.boxShadow = "";
        });
      }
    });
  }
}