def update_topic_sentence_input(topic_sentences_radio, topic_sentence_output):

app.py

@@ -45,9 +45,8 @@ 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_false = gr.update(visible=False)
-
-    return topics_text, is_visible_false
+    gr_update = gr.update(visible=False, value=topics_text)
+    return gr_update
 
 def update_topic_input(topic):
     return topic
@@ -74,9 +73,16 @@ def generate_points(model, max_tokens, sys_content, scenario, eng_level, topic,
     }
 
     response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
-    content = response.choices[0].message.content.strip()
+    content = response.choices[0].message.content
 
-    return content
+    points = json.loads(content)["points"]
+    points_text = json.dumps(points)
+
+    gr_update = gr.update(visible=False, value=points_text)
+    return gr_update
+
+def update_points_input(points):
+    return points
 
 def generate_topic_sentences(model, max_tokens, sys_content, scenario, eng_level, topic, points, user_generate_topic_sentences_prompt):
     """
@@ -95,7 +101,6 @@ def generate_topic_sentences(model, max_tokens, sys_content, scenario, eng_level
     ]
     response_format = { "type": "json_object" }
 
-
     request_payload = {
         "model": model,
         "messages": messages,
@@ -104,33 +109,32 @@ def generate_topic_sentences(model, max_tokens, sys_content, scenario, eng_level
     }
 
     response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
-    json_content = response.choices[0].message.content
-    content = parse_and_display_topic_sentences(json_content)
+    response_content = json.loads(response.choices[0].message.content)
+    json_content = response_content["results"]
+    topic_sentences_text = json.dumps(json_content, ensure_ascii=False)
+
+    gr_update = gr.update(visible=False, value=topic_sentences_text)
+    return gr_update
+
+def update_topic_sentence_input(topic_sentences_radio, topic_sentence_output):
+    selected_topic_sentence = topic_sentences_radio
+    topic_sentence_output = json.loads(topic_sentence_output)
+    for ts in topic_sentence_output:
+        if ts["topic-sentence"] == selected_topic_sentence:
+            appropriate = "O 適合" if ts["appropriate"] == "Y" else "X 不適合"
+            border_color = "green" if ts["appropriate"] == "Y" else "red"
+            background_color = "#e0ffe0" if ts["appropriate"] == "Y" else "#ffe0e0"
+            
+            suggestion_html = f"""
+            <div style="border: 2px solid {border_color}; background-color: {background_color}; padding: 10px; border-radius: 5px;">
+                <p>你選了主題句：{selected_topic_sentence}</p>
+                <p>是否適當：{appropriate}</p>
+                <p>原因：{ts['reason']}</p>
+            </div>
+            """
+            break
 
-    return content
-
-def parse_and_display_topic_sentences(json_data):
-    """
-    解析JSON格式的主题句数据，并转换成易于阅读的格式。
-    """
-    # 将JSON字符串解析成Python字典
-    data = json.loads(json_data)
-    
-    # 初始化一个空字符串用于存放最终的格式化文本
-    formatted_text = ""
-    
-    # 遍历每个主题句及其评价
-    for key, value in data.items():
-        topic_sentence = value[0]['topic-sentence']
-        appropriate = "適當" if value[0]['appropriate'] == "Y" else "不適當"
-        reason = value[0]['reason']
-        
-        # 将每个主题句的信息添加到格式化文本中
-        formatted_text += f"主题句 {int(key)+1}: {topic_sentence}\n"
-        formatted_text += f"是否適當: {appropriate}\n"
-        formatted_text += f"原因: {reason}\n\n"
-    
-    return formatted_text
+    return selected_topic_sentence, suggestion_html
 
 def generate_supporting_sentences(model, max_tokens, sys_content, scenario, eng_level, topic, points, topic_sentence, user_generate_supporting_sentences_prompt):
     """
@@ -305,9 +309,9 @@ def paragraph_save_and_tts(paragraph_text):
         return paragraph_text, None
 
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.orange)) as demo:
+    # basic inputs 主題與情境
     with gr.Row():
         with gr.Column():
-            # 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)
@@ -338,8 +342,10 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     "My Favorite Cartoon/Anime"
                 ]
                 scenario_input = gr.Dropdown(label="先選擇一個大範圍的情境：", choices=scenario_values, value="Health")
-            
-            # Step 2. 確定段落主題
+    
+    # Step 2. 確定段落主題
+    with gr.Row():
+        with gr.Column():      
             with gr.Row():
                 gr.Markdown("# Step 2. 確定段落主題")
             with gr.Row():
@@ -379,39 +385,116 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                             outputs=[topic_input]
                         )
                         return topic_radio
-            
-            gr.Markdown("## 3. Generate Points 要點")
-            default_generate_points_prompt = """
-                Please provide main points to develop in a paragraph about topic in the context of scenario, 
-                use simple English language and make sure the vocabulary you use is at eng_level.
-                No more explanation either no developing these points into a simple paragraph.
-            """  
-            user_generate_points_prompt = gr.Textbox(label="Points Prompt", value=default_generate_points_prompt, visible=False)
-            generate_points_button = gr.Button("AI Generate Points")
-            points_output = gr.Textbox(label="AI Generated Points 要點")
-            points_input = gr.Textbox(label="Points")
-
-            gr.Markdown("## 4. Generate Topic Sentences 主題句")
-            default_generate_topic_sentences_prompt = """
-                Please provide one appropriate topic sentence that aptly introduces the subject for the given scenario and topic. 
-                Additionally, provide two topic sentences that, while related to the topic, 
-                would be considered inappropriate or less effective for the specified context. 
-                Those sentences must include the three main points:". 
-                Use English language and each sentence should not be too long.
-                For each sentence, explain the reason in Traditional Chinese, Taiwan, 繁體中文 zh-TW. 
-                Make sure the vocabulary you use is at level.
-
-                Only return the result in JSON format starting as: 
-                {{ 
-                    "0": [ {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }} ], 
-                    "1": [ {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }} ],
-                    "2": [ {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }} ] 
-                }}            
-            """
-            user_generate_topic_sentences_prompt = gr.Textbox(label="Topic Sentences Prompt", value=default_generate_topic_sentences_prompt, visible=False)
-            generate_topic_sentences_button = gr.Button("AI Generate Topic Sentences")
-            topic_sentence_output = gr.Textbox(label="AI Generated Topic Sentences 主題句")
-            topic_sentence_input = gr.Textbox(label="Topic Sentences")
+    # Step 3. 寫出段落要點
+    with gr.Row():
+        with gr.Column():
+            with gr.Row() as points_params:
+                default_generate_points_prompt = """
+                    Please provide main points to develop in a paragraph about topic in the context of scenario, 
+                    use simple English language and make sure the vocabulary you use is at eng_level.
+                    No more explanation either no developing these points into a simple paragraph.
+                    Output use JSON format
+
+                    EXAMPLE:
+                    "points":["point1", "point2", "point3"]
+                """  
+                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. 寫出段落要點")
+            with gr.Row():
+                gr.Markdown("## 根據情境、主題，可以視主題不同，試著寫出 1-3 個要點。段落要點務必選擇比較相關的，才好寫入一個段落。不相關的要點會讓段落缺乏連貫一致性。")
+            with gr.Row():
+                gr.Markdown("### `基礎級使用者` 先從 1 個要點開始練習，比較好掌握；等熟悉之後在 `實力級`，就可選擇 2-3 個要點來發揮。")
+            with gr.Row():
+                with gr.Column():
+                    points_input = gr.Textbox(label="#1 要點／關鍵字")
+                with gr.Column():
+                    generate_points_button = gr.Button("找尋靈感？使用 🪄 JUTOR 產生要點／關鍵字", variant="primary")
+                    points_output = gr.Textbox(label="AI Generated Points 要點", visible=True, value=[])
+
+                    @gr.render(inputs=points_output)
+                    def render_points(points):    
+                        points_list = json.loads(points)
+                        points_radio = gr.Radio(points_list, label="Points", elem_id="point_button")
+                        points_radio.select(
+                            fn=update_points_input, 
+                            inputs=[points_radio], 
+                            outputs=[points_input]
+                        )
+                        return points_radio
+    # Step 4. 選定主題句
+    with gr.Row():
+        with gr.Column():
+            with gr.Row() as topic_sentences_params:
+                default_generate_topic_sentences_prompt = """
+                    Please provide one appropriate topic sentence that aptly introduces the subject for the given scenario and topic. 
+                    Additionally, provide two topic sentences that, while related to the topic, 
+                    would be considered inappropriate or less effective for the specified context. 
+                    Those sentences must include the three main points:". 
+                    Use English language and each sentence should not be too long.
+                    For each sentence, explain the reason in Traditional Chinese, Taiwan, 繁體中文 zh-TW. 
+                    Make sure the vocabulary you use is at level.
+
+                    Output use JSON format
+
+                    EXAMPLE:
+                    "results": 
+                        [
+                            {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }} , 
+                            {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }},
+                            {{ "topic-sentence": "#","appropriate": "Y/N", "reason": "#中文解釋" }}
+                        ]       
+                """
+                user_generate_topic_sentences_prompt = gr.Textbox(label="Topic Sentences Prompt", value=default_generate_topic_sentences_prompt, visible=False)
+
+            with gr.Row() as topic_sentences_html:    
+                gr.Markdown("# Step 4. 選定主題句")
+            with gr.Row():      
+                with gr.Column():
+                    gr.Markdown("## 主題句（Topic Sentence）是一個段落中最重要的句子，它介紹主題並含括該段落的所有要點，引起讀者的興趣。就像藍圖一樣，指出客廳、廚房、臥室等位置。")
+                    gr.Markdown("## 主題句通常位於段落的開頭，幫助讀者迅速理解段落的內容。如果沒有主題句，段落的架構及內容的一致性及連貫性就會受影響。")
+                    gr.Markdown("## 主題句的範圍，應能適當含括你剛才決定的各個要點，範圍不要太大，以致無法在一個段落清楚説明，也不能太小，無法含括段落的所有要點。")
+                with gr.Column():
+                    with gr.Accordion("參考指引：合適的主題句？", open=False):
+                        gr.Markdown("""舉例，情境是 `School & Learning`，段落主題是 `Time Management`，那麼 `Balancing school work and leisure time is a crucial aspect of effective time management` 就是合適的主題句，因為它清楚點出該段落將説明有效運用時間來讓課業及娛樂取得平衡。""")
+            with gr.Row():
+                with gr.Column():
+                    topic_sentence_input = gr.Textbox(label="Topic Sentences")
+                with gr.Column():
+                    generate_topic_sentences_button = gr.Button("生成並在下面 3 個 JUTOR 產生的主題句中，選出一個最合適的", variant="primary")
+                    topic_sentence_output = gr.Textbox(label="AI Generated Topic Sentences 主題句")
+                
+                    @gr.render(inputs=topic_sentence_output)
+                    def render_topic_sentences(topic_sentences):   
+                        # Parsing the JSON string to a list
+                        topic_sentences_list = json.loads(topic_sentences)
+                        
+                        # Extracting only the topic sentences for the radio button options
+                        radio_options = [ts["topic-sentence"] for ts in topic_sentences_list]
+                        
+                        # Creating the radio button element
+                        topic_sentences_radio = gr.Radio(radio_options, label="Topic Sentences", elem_id="topic_sentence_button")
+                        topic_sentences_suggestions = gr.HTML()                        # Setting up the action when a radio button is selected
+                        topic_sentences_radio.select(
+                            fn=update_topic_sentence_input, 
+                            inputs=[topic_sentences_radio, topic_sentence_output], 
+                            outputs= [topic_sentence_input, topic_sentences_suggestions]
+                        )
+
+                        return topic_sentences_radio
+
+
+
+
+
+
+
+
+
+
+
+
+
 
             gr.Markdown("## 5. Generate Supporting Sentence 支持句")
             default_generate_supporting_sentences_prompt = """
@@ -568,7 +651,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
             eng_level_input,
             user_generate_topics_prompt
         ],
-        outputs=[topic_output, topic_output]
+        outputs=[topic_output]
     )
 
     generate_points_button.click(