feat: improve the onboarding driverjs tour for new users

aip_trainer/lambdas/js.py

@@ -115,25 +115,16 @@ head_driver_tour = """
 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 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: "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: "#id-choose-random-phrase-by-language-and-difficulty", popover: { title: "Choose a Random Phrase", description: "Choose a random sentence to be used as input for speech recognition, defining your own language and difficulty..." } },
+    { element: "#accordion-examples-id-element", popover: { title: "Text Examples", description: "...Or start with these text examples, increasing in difficulty." } },
+    { element: "#text-student-transcription-id-element", popover: { title: "Phrase to Read for Speech Recognition", description: "You can also write your own sentence." } },
+    { 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." } }
-]
+    { element: ".speech-output-group", popover: { title: "Detailed Speech Accuracy Output", description: "Detailed output of speech accuracy, word by word." } },
+    { element: "#id-replay-splitted-audio-by-words", popover: { title: "Replay Split Audio by Words", description: "Replay your recorded audio split into single words followed by the 'ideal' pronunciation spelled by the text-to-speech audio output for the same word." } },
+];
 const driverObj = driver({
   showProgress: true,
   steps: driverSteps

app.py

@@ -43,7 +43,7 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
         gr.Markdown(md_app_description.format(sample_rate_start=sample_rate_start))
     with gr.Row():
         with gr.Column(scale=4, min_width=300):
-            with gr.Row():
+            with gr.Row(elem_id="id-choose-random-phrase-by-language-and-difficulty"):
                 with gr.Column(scale=2, min_width=80):
                     radio_language = gr.Radio(["de", "en"], label="Language", value="en", elem_id="radio-language-id-element")
                 with gr.Column(scale=5, min_width=160):
@@ -134,7 +134,7 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
                 with gr.Column(min_width=100, elem_classes="speech-accuracy-score-container row2 col3"):
                     num_score_en = gr.Number(label="Global score EN %", value=0, interactive=False, elem_id="number-score-en-id-element")
             btn_recognize_speech_accuracy = gr.Button(value="Get speech accuracy score (%)", elem_id="btn-recognize-speech-accuracy-id-element")
-            with gr.Row():
+            with gr.Row(elem_id="id-replay-splitted-audio-by-words"):
                 num_tot_recognized_words = gr.Number(label="Total recognized words", visible=False, minimum=0, interactive=False)
                 with gr.Column(scale=1, min_width=50):
                     num_selected_recognized_word = gr.Number(label=word_idx_text, visible=True, minimum=0, value=0, interactive=False)