Activate Step-by-Step Trace tab when clicking Generate Trace

app.py

@@ -274,7 +274,7 @@ def build_visual_grammar_html():
         for title, label, description in samples) + '</div>'
 
 
-with gr.Blocks(title="Autodiff Mermaid Visualizer") as demo:
+with gr.Blocks(title="Autodiff Mermaid Visualizer", head=TRACE_VIEW_SCRIPT) as demo:
     gr.Markdown("# 🧮 Autodiff Mermaid Visualizer")
     gr.Markdown("Type any mathematical expression and supply numerical values to visualize the computational graph and derivative calculus.")
 
@@ -309,8 +309,8 @@ with gr.Blocks(title="Autodiff Mermaid Visualizer") as demo:
         btn_diagram = gr.Button("Generate Diagram", variant="primary")
         btn_trace = gr.Button("Generate Trace", variant="primary")
 
-    with gr.Tabs():
-        with gr.TabItem("📊 Visual Diagram"):
+    with gr.Tabs(selected="tab_diagram") as main_tabs:
+        with gr.TabItem("📊 Visual Diagram", id="tab_diagram"):
             diagram_output = gr.HTML(label="Diagram")
             
             with gr.Accordion("📥 Download & Export (On-Demand)", open=True):
@@ -327,12 +327,12 @@ with gr.Blocks(title="Autodiff Mermaid Visualizer") as demo:
             with gr.Accordion("💡 Visual Grammar & Diagram Guide", open=True):
                 gr.HTML(build_visual_grammar_html())
 
-        with gr.TabItem("📝 Step-by-Step Trace"):
-            trace_output = gr.HTML(label="Step-by-step trace", head=TRACE_VIEW_SCRIPT)
+        with gr.TabItem("📝 Step-by-Step Trace", id="tab_trace"):
+            trace_output = gr.HTML(label="Step-by-step trace")
 
-        with gr.TabItem("💻 Mermaid Code"):
+        with gr.TabItem("💻 Mermaid Code", id="tab_code"):
             code_output = gr.Code(label="Mermaid Syntax", language="markdown")
-        with gr.TabItem("📖 Online Help"):
+        with gr.TabItem("📖 Online Help", id="tab_help"):
             gr.Markdown(
                 VISUAL_LANGUAGE + r"""
 
@@ -491,18 +491,18 @@ All supplied variables are differentiable real inputs. Thus examples may also sh
     )
 
     btn_diagram.click(
-        generate_diagram,
+        lambda *args: (gr.update(selected="tab_diagram"), *generate_diagram(*args)),
         inputs=[expr_input, vals_input, mode_input, notation_input],
-        outputs=[diagram_output, code_output]
+        outputs=[main_tabs, diagram_output, code_output]
     ).then(
         reset_downloads,
         outputs=[download_pdf, download_png, download_svg]
     )
 
     btn_trace.click(
-        generate_trace,
+        lambda *args: (gr.update(selected="tab_trace"), generate_trace(*args)),
         inputs=[expr_input, vals_input, mode_input, notation_input],
-        outputs=[trace_output]
+        outputs=[main_tabs, trace_output]
     )
 
     def load_initial_outputs(expr, vals, mode, notation):