with gr.Group():

app.py

@@ -484,59 +484,60 @@ CSS = """
     }
 """
 
-
 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.Tab(label="英文段落寫作練習"):
-        # basic inputs 主題與情境
-        with gr.Row():
-            with gr.Column():
-                with gr.Row(visible=False) as default_params:
-                    model = gr.Radio(["gpt-4-turbo", "gpt-3.5-turbo"], label="Model", value="gpt-4-turbo")
-                    max_tokens = gr.Slider(minimum=50, maximum=4000, value=4000, label="Max Tokens")
-                    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.")
-                    eng_level_input = gr.Radio(["beginner", "intermediate", "advanced"], label="English Level", value="beginner")
-                with gr.Row():
-                    gr.Markdown("# Step 1. 你今天想練習寫什麼呢？")
-                with gr.Row():
-                    gr.Markdown("""## 寫作的主題與讀者、寫作的目的、文章的風格、長度、範圍、以及作者的專業知識等都有關係。因為不容易找主題，所以利用兩階段方式來找主題。特為較無英文寫作經驗的  基礎級使用者 提供多種大範圍情境，待篩選情境後，下一步再來決定明確的主題。""")
-                with gr.Row():
-                    with gr.Column():
-                        scenario_input = gr.Textbox(label="先選擇一個大範圍的情境或是自定義：")
-                    with gr.Column():
-                        scenario_values = [
-                            "Health",
-                            "Thanksgiving",
-                            "Halloween",
-                            "moon festival in Taiwan",
-                            "School and Learning",
-                            "Travel and Places",
-                            "Family and Friends",
-                            "Hobbies and Leisure Activities",
-                            "Health and Exercise",
-                            "Personal Experiences",
-                            "My Future Goals",
-                            "School Life",
-                            "Pets",
-                            "A Problem and Solution",
-                            "Holidays and Celebrations",
-                            "My Favorite Cartoon/Anime"
-                        ]
-                        scenario_radio_button = gr.Radio(scenario_values, label="Scenario", elem_id="scenario_button")
+        # ===== 基礎級使用者 =====
+        with gr.Row(visible=False) as default_params:
+            model = gr.Radio(["gpt-4-turbo", "gpt-3.5-turbo"], label="Model", value="gpt-4-turbo")
+            max_tokens = gr.Slider(minimum=50, maximum=4000, value=4000, label="Max Tokens")
+            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.")
+            eng_level_input = gr.Radio(["beginner", "intermediate", "advanced"], label="English Level", value="beginner")
 
-                        scenario_radio_button.select(
-                            fn=update_scenario_input,
-                            inputs=[scenario_radio_button],
-                            outputs=[scenario_input]
-                        )
+        # basic inputs 主題與情境
+        with gr.Group():
+            with gr.Row(visible=False) as scenario_params:
+                with gr.Column():
+                    
+                    with gr.Row():
+                        gr.Markdown("# Step 1. 你今天想練習寫什麼呢？")
+                    with gr.Row():
+                        gr.Markdown("""## 寫作的主題與讀者、寫作的目的、文章的風格、長度、範圍、以及作者的專業知識等都有關係。因為不容易找主題，所以利用兩階段方式來找主題。特為較無英文寫作經驗的  基礎級使用者 提供多種大範圍情境，待篩選情境後，下一步再來決定明確的主題。""")
+                    with gr.Row():
+                        with gr.Column():
+                            scenario_input = gr.Textbox(label="先選擇一個大範圍的情境或是自定義：")
+                        with gr.Column():
+                            scenario_values = [
+                                "Health",
+                                "Thanksgiving",
+                                "Halloween",
+                                "moon festival in Taiwan",
+                                "School and Learning",
+                                "Travel and Places",
+                                "Family and Friends",
+                                "Hobbies and Leisure Activities",
+                                "Health and Exercise",
+                                "Personal Experiences",
+                                "My Future Goals",
+                                "School Life",
+                                "Pets",
+                                "A Problem and Solution",
+                                "Holidays and Celebrations",
+                                "My Favorite Cartoon/Anime"
+                            ]
+                            scenario_radio_button = gr.Radio(scenario_values, label="Scenario", elem_id="scenario_button")
 
+                            scenario_radio_button.select(
+                                fn=update_scenario_input,
+                                inputs=[scenario_radio_button],
+                                outputs=[scenario_input]
+                            )
 
-        
         # Step 2. 確定段落主題
         with gr.Row():
             with gr.Column():      
                 with gr.Row():
-                    gr.Markdown("# Step 2. 確定段落主題")
+                    gr.Markdown("# Step 1. 確定段落主題")
                 with gr.Row():
                     with gr.Column():
                         gr.Markdown("""## 主題是整個段落要探討、闡述的主要議題。確定主題對於段落的架構、內容非常重要，幫助讀者預期段落的內容，增加閱讀的速度及理解度。寫作過程中，掌握主題可以幫助作者有效傳達自己的想法和觀點，幫助讀者更容易理解。""")
@@ -548,11 +549,10 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                         """)
                 with gr.Row(visible=False) as topic_params:
                     default_generate_topics_prompt = """
-                        Give me 10 topics relevant to Scenario, 
+                        Give me 10 randon topics, 
                         for a paragraph. Just the topics, no explanation, use simple English language. 
                         Make sure the vocabulary you use is at english level.
                         output use JSON 
-
                         EXAMPLE:
                         "topics":["topic1", "topic2", "topic3", "topic4", "topic5", "topic6", "topic7", "topic8", "topic9", "topic10"]
                     """
@@ -561,7 +561,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     with gr.Column():
                         topic_input = gr.Textbox(label="選擇合適的主題或是自定義：")
                     with gr.Column():
-                        generate_topics_button = gr.Button("使用 🪄 JUTOR 產生 10 個段落主題，再挑選一個來練習吧！", variant="primary")
+                        generate_topics_button = gr.Button("✨ JUTOR 隨機產生 10 個段落主題，再挑選一個來練習吧！", variant="primary")
                         topic_output = gr.Textbox(label="AI Generated Topic 主題", visible=True, value=[])
 
                         generate_topics_button.click(
@@ -603,16 +603,16 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     """  
                     user_generate_points_prompt = gr.Textbox(label="Points Prompt", value=default_generate_points_prompt, visible=False)
                 with gr.Row() as points_html:
-                    gr.Markdown("# Step 3. 寫出段落要點")
+                    gr.Markdown("# Step 2. 寫出關鍵字")
                 with gr.Row():
-                    gr.Markdown("## 根據情境、主題，可以視主題不同，試著寫出 1-3 個要點。段落要點務必選擇比較相關的，才好寫入一個段落。不相關的要點會讓段落缺乏連貫一致性。")
+                    gr.Markdown("## 根據主題，試著寫出 1-3 個關鍵字。關鍵字務必選擇比較相關的，才好寫入一個段落。不相關的關鍵字會讓段落缺乏連貫一致性。")
                 with gr.Row():
-                    gr.Markdown("### `基礎級使用者` 先從 1 個要點開始練習，比較好掌握；等熟悉之後在 `實力級`，就可選擇 2-3 個要點來發揮。")
+                    gr.Markdown("### 基礎級使用者先從 1 個要點開始練習，比較好掌握；等熟悉之後再選擇 2-3 個要點來發揮。")
                 with gr.Row():
                     with gr.Column():
-                        points_input = gr.Textbox(label="#1 要點／關鍵字")
+                        points_input = gr.Textbox(label="#1 關鍵字")
                     with gr.Column():
-                        generate_points_button = gr.Button("找尋靈感？使用 🪄 JUTOR 產生要點／關鍵字", variant="primary")
+                        generate_points_button = gr.Button("✨ 找尋靈感？使用 JUTOR 產生要點／關鍵字", variant="primary")
                         points_output = gr.Textbox(label="AI Generated Points 要點", visible=True, value=[])
 
                         generate_points_button.click(
@@ -1166,7 +1166,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     paragraph_save_button = gr.Button("建立歷程回顧", variant="primary")
                 with gr.Row():
                     with gr.Accordion("歷程回顧", open=False) as history_accordion:
-                        scenario_input_history = gr.Textbox(label="情境")
+                        scenario_input_history = gr.Textbox(label="情境", visible=False)
                         topic_input_history = gr.Textbox(label="主題")
                         points_input_history = gr.Textbox(label="要點")
                         topic_sentence_input_history = gr.Textbox(label="主題句")