feat: update driver.js guided tour

aip_trainer/lambdas/js.py

@@ -84,19 +84,27 @@ 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 driver = window.driver.js.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' } }
+    { element: "id-ai-pronunciation-trainer-gradio-app-container", popover: { title: "AI Pronunciation Trainer Gradio app", description: "A quick tour of the features of the Gradio app 'AI Pronunciation Trainer'." } },
+    { element: "#radio-language-id-element", popover: { title: "Languages", description: "Choose the input language." } },
+    { element: "#radio-difficulty-id-element", popover: { title: "Difficulty", description: "Choose the difficulty for the random selection of the sentence to be used as input for speech recognition." } },
+    { element: "#btn-random-phrase-id-element", popover: { title: "Choose a random phrase", description: "Choose a random sentence to be used as input for speech recognition." } }
+    { element: "#text-student-transcription-id-element", popover: { title: "Phrase to read for speech recognition", description: "Enter the sentence to be used as input for speech recognition." } },
+    { element: "#audio-tts-id-element", popover: { title: "Audio TTS", description: "Speech-to-text audio output." } },
+    { element: "#btn-run-tts-id-element", popover: { title: "In-browser Text-to-Speech", description: "Execute the text-to-speech functionality in the browser by reading the student's transcription." } },
+    { element: "#btn-run-tts-backend-id-element", popover: { title: "Backend Text-to-Speech", description: "Execute the text-to-speech functionality in the backend by reading the student's transcription." } },
+    { element: "#btn-clear-tts-backend-id-element", popover: { title: "Clear Text-to-Speech", description: "Clear the synthetic audio output of the text-to-speech synthesis." } },
+    { element: "#audio-student-recording-stt-id-element", popover: { title: "Speech-to-Text audio output", description: "Recorded audio output of the speech recognition." } },
+    { element: "#text-student-recording-ipa-id-element", popover: { title: "Student phonetic transcription", description: "Phonetic transcription of the student's speech." } },
+    { element: "#text-ideal-ipa-id-element", popover: { title: "'Ideal' phonetic transcription", description: "'Ideal' phonetic transcription." } },
+    { element: ".speech-output-group", popover: { title: "Detailed speech accuracy output", description: "Detailed output of speech accuracy, word by word." } },
+    { element: "#number-pronunciation-accuracy-id-element", popover: { title: "Current accuracy", description: "Current speech accuracy." } },
+    { element: "#number-score-de-id-element", popover: { title: "Global German accuracy", description: "Total speech accuracy in German." } },
+    { element: "#number-score-en-id-element", popover: { title: "Global English accuracy", description: "Total speech accuracy in English." } },
+    { element: "#btn-recognize-speech-accuracy-id-element", popover: { title: "Run speech accuracy recognition", description: "Execute the speech accuracy recognition." } },
+    { element: "#accordion-examples-id-element", popover: { title: "Text examples", description: "Some text examples to be used as input for speech recognition." } },
 ]
 const driverObj = driver({
   showProgress: true,

app.py

@@ -6,8 +6,11 @@ from aip_trainer.lambdas import js, lambdaGetSample, lambdaSpeechToScore, lambda
 
 
 css = """
-.speech-output-label p {color: grey;}
-.speech-output-container {align-items: center; min-height: 60px; padding-left: 8px; padding-right: 8px; margin-top: -12px; border-width: 1px; border-style: solid; border-color: lightgrey;}
+.speech-output-label p {color: grey; margin-bottom: white;}
+.background-white {background-color: white !important; }
+.speech-output-group {padding: 12px;}
+.speech-output-container {min-height: 60px;}
+.speech-output-html {text-align: left; }
 """
 
 
@@ -31,7 +34,7 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
         with gr.Column(scale=4, min_width=300):
             with gr.Row():
                 with gr.Column(scale=2, min_width=80):
-                    radio_language = gr.Radio(["de", "en"], label="Language", value="en")
+                    radio_language = gr.Radio(["de", "en"], label="Language", value="en", elem_id="radio-language-id-element")
                 with gr.Column(scale=5, min_width=160):
                     radio_difficulty = gr.Radio(
                         label="Difficulty",
@@ -42,29 +45,32 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
                             ("medium", 2),
                             ("hard", 3),
                         ],
+                        elem_id="radio-difficulty-id-element",
                     )
                 with gr.Column(scale=1, min_width=100):
-                    btn_random_phrase = gr.Button(value="Choose a random phrase")
+                    btn_random_phrase = gr.Button(value="Choose a random phrase", elem_id="btn-random-phrase-id-element")
             with gr.Row():
                 with gr.Column(scale=7, min_width=300):
-                    text_learner_transcription = gr.Textbox(
+                    text_student_transcription = gr.Textbox(
                         lines=3,
-                        label="Learner Transcription",
+                        label="Phrase to read for speech recognition",
                         value="Hi there, how are you?",
+                        elem_id="text-student-transcription-id-element",
                     )
             with gr.Row():
-                audio_tts = gr.Audio(label="Audio TTS")
+                audio_tts = gr.Audio(label="Audio TTS", elem_id="audio-tts-id-element")
             with gr.Row():
                 btn_run_tts = gr.Button(value="TTS in browser", elem_id="btn-run-tts-id-element")
                 btn_run_tts_backend = gr.Button(value="TTS backend", elem_id="btn-run-tts-backend-id-element")
-                btn_clear_tts = gr.Button(value="Clear TTS backend")
+                btn_clear_tts = gr.Button(value="Clear TTS backend", elem_id="btn-clear-tts-backend-id-element")
                 btn_clear_tts.click(clear, inputs=[], outputs=[audio_tts])
             with gr.Row():
-                audio_learner_recording_stt = gr.Audio(
-                    label="Learner Recording",
+                audio_student_recording_stt = gr.Audio(
+                    label="Speech-toText audio output",
                     sources=["microphone", "upload"],
                     type="filepath",
                     show_download_button=True,
+                    elem_id="audio-student-recording-stt-id-element",
                 )
         with gr.Column(scale=4, min_width=320):
             text_transcribed_hidden = gr.Textbox(
@@ -76,35 +82,36 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
                 visible=False,
             )
             text_recording_ipa = gr.Textbox(
-                placeholder=None, label="Learner phonetic transcription"
+                placeholder=None, label="Student phonetic transcription", elem_id="text-student-recording-ipa-id-element"
             )
             text_ideal_ipa = gr.Textbox(
-                placeholder=None, label="Ideal phonetic transcription"
+                placeholder=None, label="Ideal phonetic transcription", elem_id="text-ideal-ipa-id-element"
             )
             text_raw_json_output_hidden = gr.Textbox(placeholder=None, label="text_raw_json_output_hidden", visible=False)
-            gr.Markdown("Speech accuracy output", elem_classes="speech-output-label")
-            with gr.Row(elem_classes="speech-output-container"):
-                html_output = gr.HTML(
-                    label="Speech accuracy output",
-                    elem_id="speech-output",
-                    show_label=False,
-                    visible=True,
-                    render=True,
-                    value=" - ",
-                    elem_classes="speech-output",
-                )
+            with gr.Group(elem_classes="speech-output-group background-white"):
+                gr.Markdown("Speech accuracy output", elem_classes="speech-output-label background-white")
+                with gr.Group(elem_classes="speech-output-container background-white"):
+                    html_output = gr.HTML(
+                        label="Speech accuracy output",
+                        elem_id="speech-output",
+                        show_label=False,
+                        visible=True,
+                        render=True,
+                        value=" - ",
+                        elem_classes="speech-output-html background-white",
+                    )
             with gr.Row():
-                gr.Markdown("### Speech accuracy score (%)", elem_classes="speech-accuracy-score-container row1")
+                gr.Markdown("### Speech accuracy score (%)", elem_classes="speech-accuracy-score-container row1", elem_id="speech-accuracy-score-container-id-element")
             with gr.Row():
                 with gr.Column(min_width=100, elem_classes="speech-accuracy-score-container row2 col1"):
-                    number_pronunciation_accuracy = gr.Number(label="Current score")
+                    number_pronunciation_accuracy = gr.Number(label="Current score", elem_id="number-pronunciation-accuracy-id-element")
                 with gr.Column(min_width=100, elem_classes="speech-accuracy-score-container row2 col2"):
-                    number_score_de = gr.Number(label="Global score DE", value=0, interactive=False)
+                    number_score_de = gr.Number(label="Global score DE", value=0, interactive=False, elem_id="number-score-de-id-element")
                 with gr.Column(min_width=100, elem_classes="speech-accuracy-score-container row2 col3"):
-                    number_score_en = gr.Number(label="Global score EN", value=0, interactive=False)
+                    number_score_en = gr.Number(label="Global score EN", value=0, interactive=False, elem_id="number-score-en-id-element")
             with gr.Row():
-                btn = gr.Button(value="Recognize speech accuracy")
-            with gr.Accordion("Click here to expand the table examples", open=False):
+                btn = gr.Button(value="Recognize speech accuracy", elem_id="btn-recognize-speech-accuracy-id-element")
+            with gr.Accordion("Click here to expand the table examples", open=True, elem_id="accordion-examples-id-element"):
                 examples_text = gr.Examples(
                     examples=[
                         ["Hallo, wie geht es dir?", "de", 1],
@@ -114,7 +121,8 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
                         ["Die König-Ludwig-Eiche ist ein Naturdenkmal im Staatsbad Brückenau, einem Ortsteil des drei Kilometer nordöstlich gelegenen Bad Brückenau im Landkreis Bad Kissingen in Bayern.", "de", 3],
                         ["Some machine learning models are designed to understand and generate human-like text based on the input they receive.", "en", 3],
                     ],
-                    inputs=[text_learner_transcription, radio_language, radio_difficulty],
+                    inputs=[text_student_transcription, radio_language, radio_difficulty],
+                    elem_id="examples-text-id-element",
                 )
 
     def get_updated_score_by_language(text: str, audio_rec: str | Path, lang: str, score_de: float, score_en: float):
@@ -145,7 +153,7 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
 
     btn.click(
         get_updated_score_by_language,
-        inputs=[text_learner_transcription, audio_learner_recording_stt, radio_language, number_score_de, number_score_en],
+        inputs=[text_student_transcription, audio_student_recording_stt, radio_language, number_score_de, number_score_en],
         outputs=[
             text_transcribed_hidden,
             text_letter_correctness,
@@ -156,21 +164,21 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
             number_score_de, number_score_en
         ],
     )
-    btn_run_tts.click(fn=None, inputs=[text_learner_transcription, radio_language], outputs=audio_tts, js=js.js_play_audio)
+    btn_run_tts.click(fn=None, inputs=[text_student_transcription, radio_language], outputs=audio_tts, js=js.js_play_audio)
     btn_run_tts_backend.click(
         fn=lambdaTTS.get_tts,
-        inputs=[text_learner_transcription, radio_language],
+        inputs=[text_student_transcription, radio_language],
         outputs=audio_tts,
     )
     btn_random_phrase.click(
         lambdaGetSample.get_random_selection,
         inputs=[radio_language, radio_difficulty],
-        outputs=[text_learner_transcription],
+        outputs=[text_student_transcription],
     )
     btn_random_phrase.click(
         clear2,
         inputs=[],
-        outputs=[audio_learner_recording_stt, audio_tts]
+        outputs=[audio_student_recording_stt, audio_tts]
     )
     html_output.change(
         None,