text update

app.py

@@ -405,8 +405,8 @@ def generate_correct_grammatical_spelling_errors(model, sys_content, eng_level,
     ]
     headers = ["原文", "建議", "解釋"]
 
-    corrections_list_gr_update = gr.update(value=corrections_list, headers=headers, wrap=True)
-    reverse_paragraph_gr_update = gr.update(value=data["Revised Paragraph"])
+    corrections_list_gr_update = gr.update(value=corrections_list, headers=headers, wrap=True, visible=True)
+    reverse_paragraph_gr_update = gr.update(value=data["Revised Paragraph"], visible=False)
     
     return corrections_list_gr_update, reverse_paragraph_gr_update
 
@@ -469,8 +469,8 @@ def generate_refine_paragraph(model, sys_content, eng_level, paragraph, user_ref
         for item in data['Suggestions and Explanations']
     ]
 
-    refine_paragraph_gr_update = gr.update(value=table_data, headers=headers)
-    revised_paragraph_gr_update = gr.update(value=data["Revised Paragraph"])
+    refine_paragraph_gr_update = gr.update(value=table_data, headers=headers, visible=True)
+    revised_paragraph_gr_update = gr.update(value=data["Revised Paragraph"],visible=False)
 
     return refine_paragraph_gr_update, revised_paragraph_gr_update
 
@@ -823,7 +823,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                             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_sentence_input = gr.Textbox(label="根據主題、要點/關鍵字來寫主題句")
                     with gr.Column():
                         generate_topic_sentences_button = gr.Button("✨ JUTOR 產出三個主題句，選出一個最合適的", variant="primary")
                         topic_sentence_output_json = gr.JSON(label="AI 產出主題句", visible=False)
@@ -979,9 +979,9 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                             """)
                 with gr.Row():
                     with gr.Column():
-                        conclusion_sentence_input = gr.Textbox(label="寫出總結段落的結論句")
+                        conclusion_sentence_input = gr.Textbox(label="根據主題句、支持句來寫結論句")
                     with gr.Column():
-                        generate_conclusion_sentence_button = gr.Button("✨ JUTOR 產出結論句，供參考並自行寫出支持句", variant="primary")
+                        generate_conclusion_sentence_button = gr.Button("✨ JUTOR 產出結論句，供參考並自行寫出結論句", variant="primary")
                         conclusion_sentence_output = gr.Radio(label="AI 產出結論句", visible=False, interactive=True)
 
                         generate_conclusion_sentence_button.click(
@@ -1038,112 +1038,113 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                                 - 最後，段落應該有一個結論句，總結主要觀點，強化所要傳遞的資訊。
                             """)
                 with gr.Row():
-                    with gr.Column():
-                        with gr.Row():
-                            generate_paragraph_button = gr.Button("閱讀並修訂草稿", variant="primary")
-                        with gr.Row():
-                            paragraph_output = gr.Textbox(label="完整段落", show_copy_button=True)
-
-                            generate_paragraph_button.click(
-                                fn=generate_paragraph,
-                                inputs=[
-                                    topic_sentence_input,
-                                    supporting_sentences_input, 
-                                    conclusion_sentence_input
-                                ],
-                                outputs=paragraph_output
-                            )
-                    with gr.Column():
-                        with gr.Row(visible=False) as paragraph_evaluate_params:
-                            default_user_generate_paragraph_evaluate_prompt = """
-                                Based on the final paragraph provided, evaluate the writing in terms of content, organization, grammar, and vocabulary. Provide feedback in simple and supportive language.
-
-                                -- 根據上述的文章，以「內容（content）」層面評分。
-                                Assess the student's writing by focusing on the 'Content' category according to the established rubric. Determine the clarity of the theme or thesis statement and whether it is supported by specific and complete details relevant to the topic. Use the following levels to guide your evaluation:
-
-                                - Excellent (5-4 points): Look for a clear and pertinent theme or thesis, directly related to the topic, with detailed support.
-                                - Good (3 points): The theme should be present but may lack clarity or emphasis; some narrative development related to the theme should be evident.
-                                - Fair (2-1 points): Identify if the theme is unclear or if the majority of the narrative is undeveloped or irrelevant to the theme.
-                                - Poor (0 points): Determine if the response is off-topic or not written at all. Remember that any response that is off-topic or unwritten should receive zero points in all aspects.
-
-                                Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's content meets the criteria. 
-                                Translate your feedback into Traditional Chinese (zh-tw) as the final result (#中文解釋 zh-TW).
-
-                                評分結果以 JSON 格式輸出: content: { 
-                                "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
-                                "explanation": "#中文解釋 zh-TW"
-                                }
-
-                                -- 根據上述的文章，以「組織（organization）」層面評分。
-                                Evaluate the student's writing with a focus on 'Organization' according to the grading rubric. Consider the structure of the text, including the presence of a clear introduction, development, and conclusion, as well as the coherence throughout the piece and the use of transitional phrases. Use the following levels to structure your feedback:
-
-                                - Excellent (5-4 points): Look for clear key points with a logical introduction, development, and conclusion, and note whether transitions are coherent and effectively used.
-                                - Good (3 points): The key points should be identifiable but may not be well-arranged; observe any imbalance in development and transitional phrase usage.
-                                - Fair (2-1 points): Identify if the key points are unclear and if the text lacks coherence.
-                                - Poor (0 points): Check if the writing is completely unorganized or not written according to the prompts. Texts that are entirely unorganized should receive zero points.
-                                
-                                Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Organization meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
-
-                                評分結果以 JSON 格式輸出: organization: { 
-                                "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
-                                "explanation": "#中文解釋 zh-TW" 
-                                }
-
-                                -- 根據上述的文章，以「文法和用法（Grammar and usage）」層面評分。
-                                Review the student's writing, paying special attention to 'Grammar/Sentence Structure'. Assess the accuracy of grammar and the variety of sentence structures throughout the essay. Use the rubric levels to judge the work as follows:
-
-                                - Excellent (5-4 points): Search for text with minimal grammatical errors and a diverse range of sentence structures.
-                                - Good (3 points): There may be some grammatical errors, but they should not affect the overall meaning or flow of the text.
-                                - Fair (2-1 points): Determine if grammatical errors are frequent and if they significantly affect the meaning of the text.
-                                - Poor (0 points): If the essay contains severe grammatical errors throughout, leading to an unclear meaning, it should be marked accordingly.
-
-                                Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Grammar/Sentence Structure meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
-
-                                評分結果以 JSON 格式輸出: grammar_and_usage: { 
-                                "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
-                                "explanation": "#中文解釋 zh-TW" 
-                                }
-
-                                -- 根據上述的文章，以「詞彙（Vocabulary ）」層面評分。
-                                Assess the use of 'Vocabulary/Spelling' in the student's writing based on the criteria provided. Evaluate the precision and appropriateness of the vocabulary and the presence of spelling errors. Reference the following scoring levels in your analysis:
-
-                                - Excellent (5-4 points): The writing should contain accurate and appropriate vocabulary with almost no spelling mistakes.
-                                - Good (3 points): Vocabulary might be somewhat repetitive or mundane; there may be occasional misused words and minor spelling mistakes, but they should not impede understanding.
-                                - Fair (2-1 points): Notice if there are many vocabulary errors and spelling mistakes that clearly affect the clarity of the text's meaning.
-                                - Poor (0 points): Writing that only contains scattered words related to the topic or is copied should be scored as such.
-
-                                Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Vocabulary/Spelling meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
-
-                                評分結果以 JSON 格式輸出: vocabulary: { 
-                                "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
-                                "explanation": "#中文解釋 zh-TW" 
-                                }
-
-                                -- 根據上述的文章，以「連貫性和連接詞（Coherence and Cohesion）」層面評分。
-                                - 評分等級有三級：beginner, intermediate, advanced.
-                                - 以繁體中文 zh-TW 解釋
-                                評分結果以 JSON 格式輸出: coherence_and_cohesion: { 
-                                "level": "#beginner/intermediate/advanced", 
-                                "explanation": "#中文解釋 zh-TW"
-                                }
-
-                                Restrictions:
-                                - the _explanation should be in Traditional Chinese (zh-TW), it's very important.
-
-                                Final Output JSON Format:
-                                {{
-                                “content“: {{content’s dict}},
-                                “organization“: {{organization'dict}},
-                                “grammar_and_usage“: {{grammar_and_usage'dict}},
-                                “vocabulary“: {{vocabulary'dict}},
-                                “coherence_and_cohesion“: {{coherence_and_cohesion'dict}}
-                                }}            
-                            """
-                            user_generate_paragraph_evaluate_prompt = gr.Textbox(label="Paragraph evaluate Prompt", value=default_user_generate_paragraph_evaluate_prompt, visible=False)
-                        with gr.Row():
-                            generate_paragraph_evaluate_button = gr.Button("✨ 段落分析", variant="primary")
-                        with gr.Row():
-                            paragraph_evaluate_output = gr.Dataframe(label="完整段落分析", wrap=True, column_widths=[35, 15, 50], interactive=False)
+                    generate_paragraph_button = gr.Button("閱讀並修訂草稿", variant="primary")
+                with gr.Row():
+                    paragraph_output = gr.Textbox(label="完整段落", show_copy_button=True)
+
+                    generate_paragraph_button.click(
+                        fn=show_elements,
+                        inputs=[],
+                        outputs=[paragraph_output]
+                    ).then(
+                        fn=generate_paragraph,
+                        inputs=[
+                            topic_sentence_input,
+                            supporting_sentences_input, 
+                            conclusion_sentence_input
+                        ],
+                        outputs=paragraph_output
+                    )
+                with gr.Row(visible=False) as paragraph_evaluate_params:
+                    default_user_generate_paragraph_evaluate_prompt = """
+                        Based on the final paragraph provided, evaluate the writing in terms of content, organization, grammar, and vocabulary. Provide feedback in simple and supportive language.
+
+                        -- 根據上述的文章，以「內容（content）」層面評分。
+                        Assess the student's writing by focusing on the 'Content' category according to the established rubric. Determine the clarity of the theme or thesis statement and whether it is supported by specific and complete details relevant to the topic. Use the following levels to guide your evaluation:
+
+                        - Excellent (5-4 points): Look for a clear and pertinent theme or thesis, directly related to the topic, with detailed support.
+                        - Good (3 points): The theme should be present but may lack clarity or emphasis; some narrative development related to the theme should be evident.
+                        - Fair (2-1 points): Identify if the theme is unclear or if the majority of the narrative is undeveloped or irrelevant to the theme.
+                        - Poor (0 points): Determine if the response is off-topic or not written at all. Remember that any response that is off-topic or unwritten should receive zero points in all aspects.
+
+                        Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's content meets the criteria. 
+                        Translate your feedback into Traditional Chinese (zh-tw) as the final result (#中文解釋 zh-TW).
+
+                        評分結果以 JSON 格式輸出: content: { 
+                        "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
+                        "explanation": "#中文解釋 zh-TW"
+                        }
+
+                        -- 根據上述的文章，以「組織（organization）」層面評分。
+                        Evaluate the student's writing with a focus on 'Organization' according to the grading rubric. Consider the structure of the text, including the presence of a clear introduction, development, and conclusion, as well as the coherence throughout the piece and the use of transitional phrases. Use the following levels to structure your feedback:
+
+                        - Excellent (5-4 points): Look for clear key points with a logical introduction, development, and conclusion, and note whether transitions are coherent and effectively used.
+                        - Good (3 points): The key points should be identifiable but may not be well-arranged; observe any imbalance in development and transitional phrase usage.
+                        - Fair (2-1 points): Identify if the key points are unclear and if the text lacks coherence.
+                        - Poor (0 points): Check if the writing is completely unorganized or not written according to the prompts. Texts that are entirely unorganized should receive zero points.
+                        
+                        Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Organization meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
+
+                        評分結果以 JSON 格式輸出: organization: { 
+                        "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
+                        "explanation": "#中文解釋 zh-TW" 
+                        }
+
+                        -- 根據上述的文章，以「文法和用法（Grammar and usage）」層面評分。
+                        Review the student's writing, paying special attention to 'Grammar/Sentence Structure'. Assess the accuracy of grammar and the variety of sentence structures throughout the essay. Use the rubric levels to judge the work as follows:
+
+                        - Excellent (5-4 points): Search for text with minimal grammatical errors and a diverse range of sentence structures.
+                        - Good (3 points): There may be some grammatical errors, but they should not affect the overall meaning or flow of the text.
+                        - Fair (2-1 points): Determine if grammatical errors are frequent and if they significantly affect the meaning of the text.
+                        - Poor (0 points): If the essay contains severe grammatical errors throughout, leading to an unclear meaning, it should be marked accordingly.
+
+                        Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Grammar/Sentence Structure meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
+
+                        評分結果以 JSON 格式輸出: grammar_and_usage: { 
+                        "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
+                        "explanation": "#中文解釋 zh-TW" 
+                        }
+
+                        -- 根據上述的文章，以「詞彙（Vocabulary ）」層面評分。
+                        Assess the use of 'Vocabulary/Spelling' in the student's writing based on the criteria provided. Evaluate the precision and appropriateness of the vocabulary and the presence of spelling errors. Reference the following scoring levels in your analysis:
+
+                        - Excellent (5-4 points): The writing should contain accurate and appropriate vocabulary with almost no spelling mistakes.
+                        - Good (3 points): Vocabulary might be somewhat repetitive or mundane; there may be occasional misused words and minor spelling mistakes, but they should not impede understanding.
+                        - Fair (2-1 points): Notice if there are many vocabulary errors and spelling mistakes that clearly affect the clarity of the text's meaning.
+                        - Poor (0 points): Writing that only contains scattered words related to the topic or is copied should be scored as such.
+
+                        Your detailed feedback should explain the score you assign, including specific examples from the text to illustrate how well the student's Vocabulary/Spelling meets the criteria. Translate your feedback into Traditional Chinese (zh_tw) as the final result (#中文解釋).
+
+                        評分結果以 JSON 格式輸出: vocabulary: { 
+                        "level": "#Excellent(5-4 pts)/Good(3 pts)/Fair(2-1 pts)/Poor(0 pts)", 
+                        "explanation": "#中文解釋 zh-TW" 
+                        }
+
+                        -- 根據上述的文章，以「連貫性和連接詞（Coherence and Cohesion）」層面評分。
+                        - 評分等級有三級：beginner, intermediate, advanced.
+                        - 以繁體中文 zh-TW 解釋
+                        評分結果以 JSON 格式輸出: coherence_and_cohesion: { 
+                        "level": "#beginner/intermediate/advanced", 
+                        "explanation": "#中文解釋 zh-TW"
+                        }
+
+                        Restrictions:
+                        - the _explanation should be in Traditional Chinese (zh-TW), it's very important.
+
+                        Final Output JSON Format:
+                        {{
+                        “content“: {{content’s dict}},
+                        “organization“: {{organization'dict}},
+                        “grammar_and_usage“: {{grammar_and_usage'dict}},
+                        “vocabulary“: {{vocabulary'dict}},
+                        “coherence_and_cohesion“: {{coherence_and_cohesion'dict}}
+                        }}            
+                    """
+                    user_generate_paragraph_evaluate_prompt = gr.Textbox(label="Paragraph evaluate Prompt", value=default_user_generate_paragraph_evaluate_prompt, visible=False)
+                with gr.Row():
+                    generate_paragraph_evaluate_button = gr.Button("✨ 段落分析", variant="primary")
+                with gr.Row():
+                    paragraph_evaluate_output = gr.Dataframe(label="完整段落分析", wrap=True, column_widths=[35, 15, 50], interactive=False, visible=False)
 
         # 修訂文法與拼字錯誤
         with gr.Row():
@@ -1200,7 +1201,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                         paragraph_correct_grammatical_spelling_errors_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的改正，你可以選擇是否修改：", show_copy_button=True)
                     with gr.Column():
                         generate_correct_grammatical_spelling_errors_button = gr.Button("✨ 修訂文法與拼字錯誤", variant="primary")
-                        correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False)
+                        correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False, visible=False)
                         revised_paragraph_output = gr.Textbox(label="Revised Paragraph", show_copy_button=True, visible=False)
                         gr.Markdown("## 修改參考")
                         revised_paragraph_diff = gr.HTML()
@@ -1251,13 +1252,17 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                         paragraph_refine_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：", show_copy_button=True)
                     with gr.Column():
                         generate_refine_paragraph_button = gr.Button("✨ 段落改善建議", variant="primary")
-                        refine_output_table = gr.DataFrame(label="段落改善建議", wrap=True, interactive=False)
+                        refine_output_table = gr.Dataframe(label="段落改善建議", wrap=True, interactive=False, visible=False)
                         refine_output = gr.HTML(label="修改建議", visible=False)
                         gr.Markdown("## 修改參考")
                         refine_output_diff = gr.HTML()
 
         # 段落分析
         generate_paragraph_evaluate_button.click(
+            fn=show_elements,
+            inputs=[],
+            outputs=[paragraph_evaluate_output]
+        ).then(
             fn=generate_paragraph_evaluate,
             inputs=[
                 model,
@@ -1274,6 +1279,10 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
 
         # 修訂文法與拼字錯誤
         generate_correct_grammatical_spelling_errors_button.click(
+            fn=show_elements,
+            inputs=[],
+            outputs=[correct_grammatical_spelling_errors_output_table]
+        ).then(
             fn=generate_correct_grammatical_spelling_errors,
             inputs=[
                 model,
@@ -1298,6 +1307,10 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
 
         # 段落改善建議
         generate_refine_paragraph_button.click(
+            fn=show_elements,
+            inputs=[],
+            outputs=[refine_output_table]
+        ).then(
             fn=generate_refine_paragraph,
             inputs=[
                 model,
@@ -1317,25 +1330,25 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
         with gr.Row():
             with gr.Column():
                 with gr.Row():
-                    gr.Markdown("## Final Step. 寫作完成 Save and Share")
+                    gr.Markdown("# Step 9. 寫作完成 Save and Share")
                 with gr.Row():
-                    gr.Markdown("### 完成修訂！你按部就班地完成了一次段落寫作練習，太棒了！")
+                    gr.Markdown("## 完成修訂！你按部就班地完成了一次段落寫作練習，太棒了！")
                 with gr.Row():
                     paragraph_save_button = gr.Button("建立歷程回顧", variant="primary")
                 with gr.Row():
                     with gr.Accordion("歷程回顧", open=False) as history_accordion:
                         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="主題句")
-                        supporting_sentences_input_history = gr.Textbox(label="支持句", lines=3)
-                        conclusion_sentence_input_history = gr.Textbox(label="結論句")
-                        paragraph_output_history = gr.Textbox(label="完整段落", lines=4)
+                        topic_input_history = gr.Markdown(label="主題")
+                        points_input_history = gr.Markdown(label="要點/關鍵字")
+                        topic_sentence_input_history = gr.Markdown(label="主題句")
+                        supporting_sentences_input_history = gr.Markdown(label="支持句")
+                        conclusion_sentence_input_history = gr.Markdown(label="結論句")
+                        paragraph_output_history = gr.Markdown(label="完整段落")
                         paragraph_evaluate_output_history = gr.Dataframe(label="完整段落分析", wrap=True, column_widths=[35, 15, 50], interactive=False)
                         correct_grammatical_spelling_errors_output_table_history = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False, wrap=True, column_widths=[30, 30, 40])
                         refine_output_table_history = gr.Dataframe(label="段落改善建議", wrap=True, interactive=False, column_widths=[30, 30, 40])
-                        refine_output_history = gr.Textbox(label="修改建議", lines=4)
-                        paragraph_save_output = gr.Textbox(label="最後結果", lines=4)
+                        refine_output_history = gr.Markdown(label="修改建議")
+                        paragraph_save_output = gr.Markdown(label="最後結果")
                 with gr.Row():
                     audio_output = gr.Audio(label="音檔", type="filepath")