english_exam_practice_tab_button_js = """

app.py

@@ -727,6 +727,45 @@ CSS = """
     }
 """
 
+english_grapragh_practice_button_js = """
+    function english_grapragh_practice_button_click() {
+        document.getElementById("english_grapragh_practice_row").style.display = "block";
+        document.getElementById("english_grapragh_evaluate_row").style.display = "none";
+        document.getElementById("english_exam_practice_row").style.display = "none";
+        document.getElementById("english_grapragh_practice_button").classList.add("primary");
+        document.getElementById("english_grapragh_evaluate_button").classList.remove("primary");
+        document.getElementById("english_exam_practice_tab_button").classList.remove("primary");
+
+        return true;
+    }
+"""
+
+english_grapragh_evaluate_button_js = """
+    function english_grapragh_evaluate_button_click() {
+        document.getElementById("english_grapragh_practice_row").style.display = "none";
+        document.getElementById("english_grapragh_evaluate_row").style.display = "block";
+        document.getElementById("english_exam_practice_row").style.display = "none";
+        document.getElementById("english_grapragh_practice_button").classList.remove("primary");
+        document.getElementById("english_grapragh_evaluate_button").classList.add("primary");
+        document.getElementById("english_exam_practice_tab_button").classList.remove("primary");
+    
+        return true;
+    }
+"""
+
+english_exam_practice_tab_button_js = """
+    function english_exam_practice_tab_button_click() {
+        document.getElementById("english_grapragh_practice_row").style.display = "none";
+        document.getElementById("english_grapragh_evaluate_row").style.display = "none";
+        document.getElementById("english_exam_practice_row").style.display = "block";
+        document.getElementById("english_grapragh_practice_button").classList.remove("primary");
+        document.getElementById("english_grapragh_evaluate_button").classList.remove("primary");
+        document.getElementById("english_exam_practice_tab_button").classList.add("primary");
+
+        return true;
+    }
+"""
+
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.orange), css=CSS) as demo:
 
     with gr.Row(visible=False) as english_group:
@@ -744,13 +783,13 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                             """)
                     with gr.Row():
                         with gr.Column():
-                            english_grapragh_practice_button = gr.Button("📝 英文段落寫作練習", variant="primary")
+                            english_grapragh_practice_button = gr.Button("📝 英文段落寫作練習", variant="primary", elem_id="english_grapragh_practice_button")
                         with gr.Column():
-                            english_grapragh_evaluate_button = gr.Button("📊 英文段落寫作評分")
+                            english_grapragh_evaluate_button = gr.Button("📊 英文段落寫作評分", variant="", elem_id="english_grapragh_evaluate_button")
                         with gr.Column():
-                            english_exam_practice_tab_button = gr.Button("🎯 英文考古題寫作練習")
+                            english_exam_practice_tab_button = gr.Button("🎯 英文考古題寫作練習", variant="", elem_id="english_exam_practice_tab_button")
             # ===== 英文段落寫作練習 =====
-            with gr.Row(visible=True) as english_grapragh_practice_row:
+            with gr.Row(visible=True, elem_id="english_grapragh_practice_row") as english_grapragh_practice_row:
                 with gr.Column():
                     with gr.Row():
                         gr.Markdown("# 📝 英文段落寫作練習")
@@ -1624,7 +1663,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                                 )
 
             # ====="英文全文批改"=====
-            with gr.Row(visible=False) as english_grapragh_evaluate_row:
+            with gr.Row(visible=False, elem_id="english_grapragh_evaluate_row") as english_grapragh_evaluate_row:
                 with gr.Column():
                     with gr.Row(visible=False) as full_paragraph_params:
                         full_paragraph_sys_content_input = gr.Textbox(label="System Prompt", value="You are an English teacher who is practicing with me to improve my English writing skill.")
@@ -1726,7 +1765,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     )
 
             # ====="英文考古題寫作練習====="   
-            with gr.Row(visible=False) as english_exam_practice_row:
+            with gr.Row(visible=False, elem_id="english_exam_practice_row") as english_exam_practice_row:
                 
                 with gr.Column():
                     with gr.Row():
@@ -1843,41 +1882,60 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                                     outputs=past_exam_refine_output_diff
                                 )
                 
+            # english_grapragh_practice_button.click(
+            #     fn=update_english_grapragh_practice_rows,
+            #     inputs=[english_grapragh_practice_button],
+            #     outputs=[
+            #         english_grapragh_practice_row,
+            #         english_grapragh_evaluate_row,
+            #         english_exam_practice_row,
+            #         english_grapragh_practice_button,
+            #         english_grapragh_evaluate_button,
+            #         english_exam_practice_tab_button
+            #     ]
+            # )
             english_grapragh_practice_button.click(
-                fn=update_english_grapragh_practice_rows,
-                inputs=[english_grapragh_practice_button],
-                outputs=[
-                    english_grapragh_practice_row,
-                    english_grapragh_evaluate_row,
-                    english_exam_practice_row,
-                    english_grapragh_practice_button,
-                    english_grapragh_evaluate_button,
-                    english_exam_practice_tab_button
-                ]
+                None,
+                None,
+                None,
+                js=english_grapragh_practice_button_js
             )
+
+            # english_grapragh_evaluate_button.click(
+            #     fn=update_english_grapragh_practice_rows,
+            #     inputs=[english_grapragh_evaluate_button],
+            #     outputs=[
+            #         english_grapragh_practice_row,
+            #         english_grapragh_evaluate_row,
+            #         english_exam_practice_row,
+            #         english_grapragh_practice_button,
+            #         english_grapragh_evaluate_button,
+            #         english_exam_practice_tab_button
+            #     ]
+            # )
             english_grapragh_evaluate_button.click(
-                fn=update_english_grapragh_practice_rows,
-                inputs=[english_grapragh_evaluate_button],
-                outputs=[
-                    english_grapragh_practice_row,
-                    english_grapragh_evaluate_row,
-                    english_exam_practice_row,
-                    english_grapragh_practice_button,
-                    english_grapragh_evaluate_button,
-                    english_exam_practice_tab_button
-                ]
+                None,
+                None,
+                None,
+                js=english_grapragh_evaluate_button_js
             )
+            # english_exam_practice_tab_button.click(
+            #     fn=update_english_grapragh_practice_rows,
+            #     inputs=[english_exam_practice_tab_button],
+            #     outputs=[
+            #         english_grapragh_practice_row,
+            #         english_grapragh_evaluate_row,
+            #         english_exam_practice_row,
+            #         english_grapragh_practice_button,
+            #         english_grapragh_evaluate_button,
+            #         english_exam_practice_tab_button
+            #     ]
+            # )
             english_exam_practice_tab_button.click(
-                fn=update_english_grapragh_practice_rows,
-                inputs=[english_exam_practice_tab_button],
-                outputs=[
-                    english_grapragh_practice_row,
-                    english_grapragh_evaluate_row,
-                    english_exam_practice_row,
-                    english_grapragh_practice_button,
-                    english_grapragh_evaluate_button,
-                    english_exam_practice_tab_button
-                ]
+                None,
+                None,
+                None,
+                js=english_exam_practice_tab_button_js
             )