Step 2. 確定段落主題

app.py

@@ -45,9 +45,9 @@ def generate_topics(model, max_tokens, sys_content, scenario, eng_level, user_ge
     topics = json.loads(content)["topics"]
     topics_text = json.dumps(topics)
 
-    is_visible = gr.update(visible=False)
+    is_visible_false = gr.update(visible=False)
 
-    return topics_text, is_visible
+    return topics_text, is_visible_false
 
 def update_topic_input(topic):
     return topic
@@ -304,39 +304,69 @@ def paragraph_save_and_tts(paragraph_text):
         # Handle the error appropriately (e.g., return an error message or a default audio path)
         return paragraph_text, None
 
-CSS = """
-.btn-max-length { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.btn-highlight { border-color: yellow; }
-"""
-with gr.Blocks(css=CSS) as demo:
+with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.orange)) as demo:
     with gr.Row():
         with gr.Column():
             # basic inputs
-            gr.Markdown("## 1. Basic Inputs")
             model = gr.Radio(["gpt-4o", "gpt-3.5-turbo"], label="Model", value="gpt-4o", visible=False)
             max_tokens = gr.Slider(minimum=50, maximum=4000, value=4000, label="Max Tokens", visible=False)
             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.", visible=False)
-            scenario_input = gr.Textbox(label="Scenario")
-            eng_level_input = gr.Radio(["beginner", "intermediate", "advanced"], label="English Level", value="beginner")
             
-            gr.Markdown("## 2. Generate Topic 主題")
-            default_generate_topics_prompt = """
-                Give me 10 topics relevant to Scenario, 
-                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"]
-            """
-            user_generate_topics_prompt = gr.Textbox(label="Topics Prompt", value=default_generate_topics_prompt, visible=False)
+            with gr.Row():
+                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():
+                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_input = gr.Dropdown(label="先選擇一個大範圍的情境：", choices=scenario_values, value="Health")
             
+            # Step 2. 確定段落主題
+            with gr.Row():
+                gr.Markdown("# Step 2. 確定段落主題")
             with gr.Row():
                 with gr.Column():
-                    topic_input = gr.Textbox(label="Topic")
-
+                    gr.Markdown("""## 主題是整個段落要探討、闡述的主要議題。確定主題對於段落的架構、內容非常重要，幫助讀者預期段落的內容，增加閱讀的速度及理解度。寫作過程中，掌握主題可以幫助作者有效傳達自己的想法和觀點，幫助讀者更容易理解。""")
+                with gr.Column():
+                    with gr.Accordion("參考指引：情境與主題如何搭配呢？", open=False):
+                        gr.Markdown("""
+                        例如，情境是 `School & Learning` ，你可以依照自己的興趣、背景及經驗，決定合適的主題，像是：`My First Day at School` 或 `The Role of Internet in Learning`
+                        例如，情境是 `Climate Change`，相關主題可能是 `Global Warming` 或 `Extreme Weather Events`
+                    """)
+            with gr.Row(visible=False) as topic_params:
+                default_generate_topics_prompt = """
+                    Give me 10 topics relevant to Scenario, 
+                    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"]
+                """
+                user_generate_topics_prompt = gr.Textbox(label="Topics Prompt", value=default_generate_topics_prompt, visible=False)
+            with gr.Row():
+                with gr.Column():
+                    topic_input = gr.Textbox(label="選擇合適的主題：", interactive=False)
                 with gr.Column():
-                    generate_topics_button = gr.Button("AI Generate Topic Sentences")
+                    generate_topics_button = gr.Button("使用 🪄 JUTOR 產生 10 個段落主題，再挑選一個來練習吧！", variant="primary")
                     topic_output = gr.Textbox(label="AI Generated Topic 主題", visible=True, value=[])
 
                     @gr.render(inputs=topic_output)