aip_trainer/lambdas/js.py

js_update_ipa_output = """
function updateCssText(text, letters) {
    let wordsArr = text.split(" ")
    let lettersWordsArr = letters.split(" ")
    let speechOutputContainer = document.querySelector('#speech-output');
    speechOutputContainer.textContent = ""

    for (let idx in wordsArr) {
        let word = wordsArr[idx]
        let letterIsCorrect = lettersWordsArr[idx]
        for (let idx1 in word) {
        let letterCorrect = letterIsCorrect[idx1] == "1"
        let containerLetter = document.createElement("span")
        containerLetter.style.color = letterCorrect ? 'green' : "red"
        containerLetter.innerText = word[idx1];
        speechOutputContainer.appendChild(containerLetter)
        }
        let containerSpace = document.createElement("span")
        containerSpace.textContent = " "
        speechOutputContainer.appendChild(containerSpace)
    }
}
"""

js_play_audio = """
function playAudio(text, language) {
    let voice_idx = 0;
    let voice_synth = null;
    let synth = window.speechSynthesis;
    let voice_lang;

    function setSpeech() {
        return new Promise(
            function (resolve, reject) {
                let id;

                id = setInterval(() => {
                    if (synth.getVoices().length !== 0) {
                        resolve(synth.getVoices());
                        clearInterval(id);
                    }
                }, 10);
            }
        )
    }

    switch (language) {
        case 'de':
            voice_lang = 'de-DE';
            break;
        case 'en':
            voice_lang = 'en-US';
            break;
        default:
            console.log(`Sorry, we are out of ${expr}.`);
            throw new Error(`Language ${language} not valid!`)
            alert(`Language ${language} not valid!`)
    }
    
    let s = setSpeech();
    s.then((voices) => {
        let voicesSynth = voices.filter(voice => voice.lang === voice_lang);
        if (voicesSynth.length === 0) {
            console.error(`No voice found for language ${voice_lang}, retry for less restrictive check (startsWith)...`)
            voicesSynth = voices.filter(voice => voice.lang.startsWith(language));
        }
        if (voicesSynth.length === 0) {
            msg = `Error: no voice found for language ${voice_lang} / ${language}, you should use the Text-To-Speech backend feature...`
            alert(msg)
            throw new Error(msg)
        }
        var utterThis = new SpeechSynthesisUtterance(text);
        utterThis.voice = voicesSynth[0];
        utterThis.rate = 0.7;

        synth.speak(utterThis);
        // todo: capture audio from speech synthesis to reuse on the frontend
        // https://stackoverflow.com/questions/45003548/how-to-capture-generated-audio-from-window-speechsynthesis-speak-call
    });
}
"""

head_driver_tour = """
<script src="https://cdnjs.cloudflare.com/ajax/libs/driver.js/1.3.1/driver.js.iife.js" integrity="sha512-8EdV4D5VlQLX0dJFcdx6h/oJ/NanAIMlaViz57NDkhzwbQsxabgpFua0gzM4f5vdk60CfRAydhlbfbDThMfh3w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/driver.js/1.3.1/driver.css" integrity="sha512-jRsM62XMRl33ewZ0Si7yX6ANq+ZiWwUcvPk4H2DKr417W80rPMXzbD/towhs2YEoux/dfOuVRkLB+5Tfzmfolg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script type="module">
console.log("window driver:", window, "!#")
const driver0 = window.driver;
console.log("driver0:", driver0, "!#")
const driverJs = driver0.js;
console.log("driverJs:", driverJs, "!#")
const driver = driverJs.driver;

console.log("driver:", driver, "!#")

const driverSteps = [
  { element: 'id-ai-pronunciation-trainer-gradio-app-container', popover: { title: 'AI Pronunciation Trainer Gradio app', description: 'A quick tour about my Pronunciation Trainer Gradio app functionality' } },
  { element: '#btn-run-tts-id-element', popover: { title: 'btn_run_tts', description: 'a button to run btn_run_tts' } },
  { element: '#btn-run-tts-backend-id-element', popover: { title: 'btn_run_tts_backend', description: 'a button to run btn_run_tts_backend' } }
]
const driverObj = driver({
  showProgress: true,
  steps: driverSteps
});
driverObj.drive();
</script>
"""