feat: first working driver.js guided tour

aip_trainer/lambdas/js.py

@@ -79,4 +79,29 @@ function playAudio(text, language) {
     });
 }
 """
-1
+
+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>
+"""

app.py

@@ -19,7 +19,7 @@ def clear2():
     return None, None
 
 
-with gr.Blocks(css=css) as gradio_app:
+with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
     local_storage = gr.BrowserState([0.0, 0.0])
     app_logger.info("start gradio app building...")
 
@@ -55,8 +55,8 @@ with gr.Blocks(css=css) as gradio_app:
             with gr.Row():
                 audio_tts = gr.Audio(label="Audio TTS")
             with gr.Row():
-                btn_run_tts = gr.Button(value="TTS in browser")
-                btn_run_tts_backend = gr.Button(value="TTS backend")
+                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.click(clear, inputs=[], outputs=[audio_tts])
             with gr.Row():