app.py

import os
import gradio as gr
from openai import OpenAI

from difflib import Differ
import random

import json
import tempfile
import pandas as pd


is_env_local = os.getenv("IS_ENV_LOCAL", "false") == "true"
print(f"is_env_local: {is_env_local}")

# KEY CONFIG
if is_env_local:
    with open("local_config.json") as f:
        config = json.load(f)
        IS_ENV_PROD = "False"
        OPEN_AI_KEY = config["OPEN_AI_KEY"]
else:
    OPEN_AI_KEY = os.getenv("OPEN_AI_KEY")

OPEN_AI_CLIENT = OpenAI(api_key=OPEN_AI_KEY)

def update_scenario_input(scenario_radio):
    return scenario_radio

def generate_topics(model, max_tokens, sys_content, scenario, eng_level, user_generate_topics_prompt):
    """
    根据系统提示和用户输入的情境及主题，调用OpenAI API生成相关的主题句。
    """
    user_content = f"""
        scenario is: {scenario}
        english level is: {eng_level}
        ---
        {user_generate_topics_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": max_tokens,
        "response_format": { "type": "json_object" }
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content
    topics = json.loads(content)["topics"]
    topics_text = json.dumps(topics)

    gr_update = gr.update(visible=False, value=topics_text)
    return gr_update

def update_topic_input(topic):
    return topic

def generate_points(model, max_tokens, sys_content, scenario, eng_level, topic, user_generate_points_prompt):
    """
    根据系统提示和用户输入的情境、主题，调用OpenAI API生成相关的主题句。
    """
    user_content = f"""
        scenario is: {scenario}
        english level is: {eng_level}
        topic is: {topic}
        ---
        {user_generate_points_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": max_tokens,
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.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):
    """
    根据系统提示和用户输入的情境及要点，调用OpenAI API生成相关的主题句及其合理性解释。
    """
    user_content = f"""
        scenario is: {scenario}
        english level is: {eng_level}
        topic is: {topic}
        points is: {points}
        ---
        {user_generate_topic_sentences_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]
    response_format = { "type": "json_object" }

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": max_tokens,
        "response_format": response_format
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    response_content = json.loads(response.choices[0].message.content)
    json_content = response_content["results"]
    random.shuffle(json_content)
    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)
    topic_sentence_input = ""
    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>
            """

            topic_sentence_input = ts["topic-sentence"] if ts["appropriate"] == "Y" else ""
            break

    return topic_sentence_input, suggestion_html

def generate_supporting_sentences(model, max_tokens, sys_content, scenario, eng_level, topic, points, topic_sentence, user_generate_supporting_sentences_prompt):
    """
    根据系统提示和用户输入的情境、主题、要点、主题句，调用OpenAI API生成相关的支持句。
    """
    user_content = f"""
        scenario is: {scenario}
        english level is: {eng_level}
        topic is: {topic}
        points is: {points}
        topic sentence is: {topic_sentence}
        ---
        {user_generate_supporting_sentences_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": max_tokens,
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content.strip()
    gr_update = gr.update(choices=[content])

    return gr_update

def update_supporting_sentences_input(supporting_sentences_radio):
    return supporting_sentences_radio

def generate_conclusion_sentences(model, max_tokens, sys_content, scenario, eng_level, topic, points, topic_sentence, user_generate_conclusion_sentence_prompt):
    """
    根据系统提示和用户输入的情境、主题、要点、主题句，调用OpenAI API生成相关的结论句。
    """
    user_content = f"""
        scenario is: {scenario}
        english level is: {eng_level}
        topic is: {topic}
        points is: {points}
        topic sentence is: {topic_sentence}
        ---
        {user_generate_conclusion_sentence_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": max_tokens,
        "response_format": { "type": "json_object" }
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    response_content = json.loads(response.choices[0].message.content)
    json_content = response_content["results"]
    gr_update = gr.update(choices=[json_content])

    return gr_update

def update_conclusion_sentence_input(conclusion_sentence_radio):
    return conclusion_sentence_radio

def generate_paragraph(topic_sentence, supporting_sentences, conclusion_sentence):
    """
    根据用户输入的主题句、支持句、结论句，生成完整的段落。
    """
    paragraph = f"{topic_sentence} {supporting_sentences} {conclusion_sentence}"
    return paragraph

def generate_paragraph_evaluate(model, sys_content, paragraph, user_generate_paragraph_evaluate_prompt):
    """
    根据用户输入的段落，调用OpenAI API生成相关的段落分析。
    """
    user_content = f"""
        paragraph is: {paragraph}
        ---
        {user_generate_paragraph_evaluate_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    response_format = { "type": "json_object" }

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": 2000,
        "response_format": response_format
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content

    print(f"====generate_paragraph_evaluate====")
    print(content)

    data = json.loads(content)
    table_data = [
        ["學測架構|內容（Content）", data['content']['level'], data['content']['explanation']],
        ["學測架構|組織（Organization）", data['organization']['level'], data['organization']['explanation']],
        ["學測架構|文法、句構（Grammar/Sentence Structure）", data['grammar_and_usage']['level'], data['grammar_and_usage']['explanation']],
        ["學測架構|字彙、拼字（Vocabulary/Spelling）", data['vocabulary']['level'], data['vocabulary']['explanation']],
        ["JUTOR 架構|連貫性和連接詞（Coherence and Cohesion）", data['coherence_and_cohesion']['level'], data['coherence_and_cohesion']['explanation']]
    ]
    headers = ["架構", "評分", "解釋"]
    gr_update = gr.update(value=table_data, headers=headers)

    return gr_update


def generate_correct_grammatical_spelling_errors(model, sys_content, eng_level, paragraph, user_correct_grammatical_spelling_errors_prompt):
    """
    根据用户输入的段落，调用OpenAI API生成相关的文法和拼字错误修正。
    """
    user_content = f"""
        level is: {eng_level}
        paragraph is: {paragraph}
        ---
        {user_correct_grammatical_spelling_errors_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]
    response_format = { "type": "json_object" }
    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": 1000,
        "response_format": response_format
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content
    data = json.loads(content)
    print(f"data: {data}")

    corrections_list = [
        [item['original'], item['correction'], item['explanation']]
        for item in data['Corrections and Explanations']
    ]
    headers = ["原文", "建議", "解釋"]

    corrections_list_gr_update = gr.update(value=corrections_list, headers=headers, wrap=True)
    reverse_paragraph_gr_update = gr.update(value=data["Revised Paragraph"])
    
    return corrections_list_gr_update, reverse_paragraph_gr_update

def highlight_diff_texts(highlight_list, text):
    # Convert DataFrame to JSON string
    highlight_list_json = highlight_list.to_json()

    # Print the JSON string to see its structure
    print("=======highlight_list_json=======")
    print(highlight_list_json)

    # Parse JSON string back to dictionary
    highlight_list_dict = json.loads(highlight_list_json)

    # Extract suggestions from the parsed JSON
    suggestions = [highlight_list_dict['建議'][str(i)] for i in range(len(highlight_list_dict['建議']))]

    # Initialize the HTML for text
    text_html = f"<p>{text}</p>"

    # Replace each suggestion in text with highlighted version
    for suggestion in suggestions:
        text_html = text_html.replace(suggestion, f'<span style="color:red;">{suggestion}</span>')

    return text_html

def update_paragraph_correct_grammatical_spelling_errors_input(paragraph):
    return paragraph

def generate_refine_paragraph(model, sys_content, eng_level, paragraph, user_refine_paragraph_prompt):
    """
    根据用户输入的段落，调用OpenAI API生成相关的段落改善建议。
    """
    user_content = f"""
        eng_level is: {eng_level}
        paragraph is: {paragraph}
        ---
        {user_refine_paragraph_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    response_format = { "type": "json_object" }

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": 4000,
        "response_format": response_format
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content
    data = json.loads(content)
    headers = ["原文", "建議", "解釋"]
    table_data = [
        [item['origin'], item['suggestion'], item['explanation']]
        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"])

    return refine_paragraph_gr_update, revised_paragraph_gr_update

def update_paragraph_refine_input(text):
    return text

def generate_paragraph_history(scenario_input,
                        topic_output,
                        points_output,
                        topic_sentence_input,
                        supporting_sentences_input,
                        conclusion_sentence_input,
                        paragraph_output,
                        paragraph_evaluate_output,
                        correct_grammatical_spelling_errors_output_table,
                        refine_output_table,
                        refine_output):
    """
    生成段落歷史紀錄
    """

    return scenario_input, \
            topic_output, \
            points_output, \
            topic_sentence_input, \
            supporting_sentences_input, \
            conclusion_sentence_input, \
            paragraph_output, \
            paragraph_evaluate_output, \
            correct_grammatical_spelling_errors_output_table, \
            refine_output_table, \
            refine_output
        

def paragraph_save_and_tts(paragraph_text):
    """
    Saves the paragraph text and generates an audio file using OpenAI's TTS.
    """
    try:
        # Call OpenAI's TTS API to generate speech from text
        response = OPEN_AI_CLIENT.audio.speech.create(
            model="tts-1",
            voice="alloy",
            input=paragraph_text,
        )

        with tempfile.NamedTemporaryFile(suffix=".mp3", delete=False) as temp_file:
            temp_file.write(response.content)

        # Get the file path of the temp file
        audio_path = temp_file.name

        # Return the path to the audio file along with the text
        return paragraph_text, audio_path

    except Exception as e:
        print(f"An error occurred while generating TTS: {e}")
        # Handle the error appropriately (e.g., return an error message or a default audio path)
        return paragraph_text, None

def update_history_accordion():
    history_accordion_gr_update = gr.update(open=True)
    return history_accordion_gr_update


def generate_chinese_evaluation_table(model, sys_content, user_prompt, text):
    # https://www.ceec.edu.tw/files/file_pool/1/0j052575870800204600/1216%E5%9C%8B%E6%96%87%E4%BD%9C%E6%96%87%E5%88%86%E9%A0%85%E5%BC%8F%E8%A9%95%E5%88%86%E6%8C%87%E6%A8%99.pdf

    user_content = f"""
        本篇作文：{text}
        ---
        {user_prompt}
    """
    messages = [
        {"role": "system", "content": sys_content},
        {"role": "user", "content": user_content}
    ]

    response_format = { "type": "json_object" }

    request_payload = {
        "model": model,
        "messages": messages,
        "max_tokens": 2000,
        "response_format": response_format
    }

    response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
    content = response.choices[0].message.content

    print(f"====generate_chinese_evaluation_table====")
    print(content)

    data = json.loads(content)["results"]
    headers = ["架構", "評分", "解釋"]
    table_data = [
        ["題旨發揮", data['題旨發揮']['level'], data['題旨發揮']['explanation']],
        ["資料掌握", data['資料掌握']['level'], data['資料掌握']['explanation']],
        ["結構安排", data['結構安排']['level'], data['結構安排']['explanation']],
        ["字句運用", data['字句運用']['level'], data['字句運用']['explanation']]
    ]
    
    gr_update = gr.update(value=table_data, headers=headers)

    return gr_update

def load_exam_data():
    with open("exams.json", "r") as file:
        data = json.load(file)
    return data

def update_exam_contents(selected_title):
    exams = load_exam_data()["exams"]
    for exam in exams:
        if exam["title"] == selected_title:
            return exam["title"], exam["question"], exam["hint"], exam["image_url"]

# elem_classes=['accordion-prompts']
CSS = """
    .accordion-prompts {
        background-color: orange;
    }
"""

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="英文段落寫作練習"):
        # ===== 基礎級使用者 =====
        with gr.Row(visible=False) as default_params:
            model = gr.Radio(["gpt-4o", "gpt-4-turbo"], label="Model", value="gpt-4o")
            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")

        # 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 1. 確定段落主題
        with gr.Row():
            with gr.Column():      
                with gr.Row():
                    gr.Markdown("# Step 1. 確定段落主題")
                with gr.Row():
                    with gr.Column():
                        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 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"]
                    """
                    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="選擇合適的主題或是自定義：")
                    with gr.Column():
                        generate_topics_button = gr.Button("✨ JUTOR 隨機產生 10 個段落主題，再挑選一個來練習吧！", variant="primary")
                        topic_output = gr.Textbox(label="AI Generated Topic 主題", visible=True, value=[])

                        generate_topics_button.click(
                            fn=generate_topics,
                            inputs=[
                                model, 
                                max_tokens, 
                                sys_content_input, 
                                scenario_input, 
                                eng_level_input,
                                user_generate_topics_prompt
                            ],
                            outputs=[topic_output]
                        )

                        @gr.render(inputs=topic_output)
                        def render_topics(topics):    
                            topics_list = json.loads(topics)
                            topic_radio = gr.Radio(topics_list, label="Topics", elem_id="topic_button")
                            topic_radio.select(
                                fn=update_topic_input, 
                                inputs=[topic_radio], 
                                outputs=[topic_input]
                            )
                            return topic_radio
        
        # Step 2. 寫出關鍵字
        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 2. 寫出關鍵字")
                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=[])

                        generate_points_button.click(
                            fn=generate_points,
                            inputs=[
                                model, 
                                max_tokens, 
                                sys_content_input, 
                                scenario_input, 
                                eng_level_input,
                                topic_input,
                                user_generate_points_prompt
                            ],
                            outputs=points_output
                        )

                        @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 3. 選定主題句
        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 主題句", value=[])
                    
                        generate_topic_sentences_button.click(
                            fn=generate_topic_sentences,
                            inputs=[
                                model, 
                                max_tokens, 
                                sys_content_input, 
                                scenario_input, 
                                eng_level_input,
                                topic_input,
                                points_input,
                                user_generate_topic_sentences_prompt
                            ],
                            outputs=topic_sentence_output
                        )

                        @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
        
        # Step 4.寫出支持句
        with gr.Row():
            with gr.Column():
                with gr.Row() as supporting_sentences_params:
                    default_generate_supporting_sentences_prompt = """
                        I'm aiming to improve my writing. I have a topic sentence as topic_sentence_input. 
                        Please assist me by "Developing supporting detials" based on the keyword: points to write three sentences as an example.

                        Rules:
                        - Make sure any revised vocabulary aligns with the eng_level. 
                        - Guidelines for Length and Complexity: 
                        - Please keep the example concise and straightforward, 

                        Restrictions:
                        - avoiding overly technical language. 
                        - Total word-count is around 50. no more explanation either no more extra non-relation sentences.
                        - just output supporting sentences, don't output topic sentence at this step.
                        - don't output bullet points, just output sentences.
                        - don't number the sentences.

                        EXAMPLE:
                        - Washing your hands often helps you stay healthy. It removes dirt and germs that can make you sick. Clean hands prevent the spread of diseases. You protect yourself and others by washing your hands regularly.
                    """
                    user_generate_supporting_sentences_prompt = gr.Textbox(label="Supporting Sentences Prompt", value=default_generate_supporting_sentences_prompt, visible=False)
                
                with gr.Row() as supporting_sentences_html:
                    gr.Markdown("# Step 4. 寫出支持句")
                with gr.Row():
                    with gr.Column():
                        with gr.Row():
                            gr.Markdown("## 請根據主題句，練習寫出支持句")
                        with gr.Row():
                            gr.Markdown("### 支持句：以支持句來解釋要點，必要時舉例説明，來支持主題句。這些句子應該按照邏輯順序來組織，例如時間順序、空間順序、重要性順序、因果關係等。並使用轉折詞來引導讀者從一個 idea 到下一個 idea，讓讀者讀起來很順暢，不需反覆閱讀。")
                    with gr.Column():
                        with gr.Accordion("參考指引：撰寫支持句的方法？", open=False):
                            gr.Markdown("""
                                - Explanation 解釋説明：說明居住城市的優點，例如住在城市可享受便利的交通。
                                - Fact 陳述事實：説明運動可以增強心肺功能和肌肉力量，對於身體健康有正面影響。
                                - Cause and Effect 原因結果：解釋為何必須家事分工，例如家事分工更容易維護家庭環境的整齊清潔。
                                - Compare and Contrast 比較與對比：將主題與其他相關事物進行比較。例如比較傳統教學與線上學習。
                                - Incident 事件：利用事件來做説明。例如誤用表情符號造成困擾的事件，或葡式蛋塔風行的跟瘋事件。
                                - Evidence 提供證據：引用相關數據、研究或事實來佐證。例如全球互聯網用戶數已經突破了 50 億人，佔全球總人口近 65%。
                                - Example 舉例：舉自家為例，説明如何將家事的責任分配給每個家庭成員。
                            """)
                        with gr.Accordion("參考指引：針對要點的支持句，要寫幾句呢？", open=False):
                            gr.Markdown("""
                                - 一個關鍵字，寫 3-6 句
                                - 兩個關鍵字，每個要點寫 2-3 句
                                - 三個關鍵字，每個要點寫 1-2 句
                            """)
                with gr.Row():
                    with gr.Column():
                        gr.Markdown("### 寫出關於「關鍵字」的支持句")
                        supporting_sentences_input = gr.Textbox(label="Supporting Sentences")
                    with gr.Column():
                        generate_supporting_sentences_button = gr.Button("讓 JUTOR 產生例句，幫助你撰寫支持句。", variant="primary")
                        supporting_sentences_output = gr.Radio(choices=[],label="AI Generated Supporting Sentences 支持句", elem_id="supporting_sentences_button")
                    
                        generate_supporting_sentences_button.click(
                            fn=generate_supporting_sentences,
                            inputs=[
                                model, 
                                max_tokens, 
                                sys_content_input, 
                                scenario_input, 
                                eng_level_input,
                                topic_input, 
                                points_input,
                                topic_sentence_input,
                                user_generate_supporting_sentences_prompt
                            ],
                            outputs=supporting_sentences_output
                        )

                        supporting_sentences_output.select(
                            fn=update_supporting_sentences_input, 
                            inputs=[supporting_sentences_output], 
                            outputs= [supporting_sentences_input]
                        )
        
        # Step 5. 寫出結論句
        with gr.Row():
            with gr.Column():
                with gr.Row() as conclusion_sentences_params:
                    default_generate_conclusion_sentence_prompt = """
                        I'm aiming to improve my writing. 
                        By the topic sentence, please assist me by "Developing conclusion sentences" 
                        based on keywords of points to finish a paragrpah as an example.
                        
                        Rules:
                        - Make sure any revised vocabulary aligns with the correctly eng_level. 
                        - Guidelines for Length and Complexity: 
                        - Please keep the example concise and straightforward, 
                        - Total word-count is around 20. 

                        Restrictions:
                        - avoiding overly technical language. 
                        - no more explanation either no more extra non-relation sentences. this is very important.

                        Output use JSON format
                        EXAMPLE:
                        {{"results": "Thus, drinking water every day keeps us healthy and strong."}}
                    """
                    user_generate_conclusion_sentence_prompt = gr.Textbox(label="Conclusion Sentence Prompt", value=default_generate_conclusion_sentence_prompt, visible=False)
                
                with gr.Row() as conclusion_sentences_html:
                    gr.Markdown("# Step 6. 寫出結論句")
                with gr.Row():
                    with gr.Column():
                        gr.Markdown("## 總結主要觀點，強化整個資訊的傳遞。重述、摘要、回應或評論主題句。")
                    with gr.Column():
                        with gr.Accordion("參考指引：撰寫「結論句」的方法？", open=False):
                            gr.Markdown("""
                                - 以換句話說 (paraphrase) 的方式把主題句再說一次
                                - 摘要三要點方式寫結論句
                                - 回應或評論主題句的方式來寫結論句（例如主題句要從事課外活動，就說課外活動有這麼多好處，應該多參加課外活動等等）
                            """)
                with gr.Row():
                    with gr.Column():
                        conclusion_sentence_input = gr.Textbox(label="寫出總結段落的結論句")
                    with gr.Column():
                        generate_conclusion_sentence_button = gr.Button("讓 JUTOR 產生例句，幫助你撰寫結論句。", variant="primary")
                        conclusion_sentence_output = gr.Radio(choices=[], label="AI Generated Conclusion Sentence 結論句")

                        generate_conclusion_sentence_button.click(
                            fn=generate_conclusion_sentences,
                            inputs=[
                                model, 
                                max_tokens, 
                                sys_content_input, 
                                scenario_input, 
                                eng_level_input,
                                topic_input, 
                                points_input,
                                topic_sentence_input,
                                user_generate_conclusion_sentence_prompt
                            ],
                            outputs=conclusion_sentence_output
                        )

                        conclusion_sentence_output.select(
                            fn=update_conclusion_sentence_input, 
                            inputs=[conclusion_sentence_output], 
                            outputs= [conclusion_sentence_input]
                        )
        
        # Step 6. 段落確認與修訂
        with gr.Row():
            with gr.Column():
                with gr.Row():
                    gr.Markdown("# Step 6. 段落確認與修訂")
                with gr.Row():
                    with gr.Column():
                        gr.Markdown("""### 你已經完成段落草稿，可再檢視幾次：
                                        1. 找出文法、拼字或標點錯誤
                                        2. 需要之處加入合適的轉折詞，例如：first, second, however, moreover, etc.
                                        3. 整個段落是否連貫、流暢、容易理解
                                    """)
                    with gr.Column():
                        with gr.Accordion("參考指引：什麼是段落的連貫性？", open=False):
                            gr.Markdown("""
                                - 能夠以清晰、邏輯的方式表達自己的想法，使讀者易於理解。
                                - 連貫的段落應該有一個清晰的主題句來介紹主要想法（main idea），接著是支持句，提供更多細節和例子來支持主題句。
                                - 支持句應該按照邏輯制序，引導讀者從一個idea順利讀懂下一個idea。
                                - 有些句子間邏輯關係不清楚，還需要使用轉折詞（邏輯膠水）做連結，來引導讀者，例如：
                                    - first, second, finally 表示段落要點的秩序
                                    - moreover, furthermore, additionally 表示介紹另外一個要點
                                    - however, nevertheless 表示下面句子是相反的關係
                                    - therefore, as a result表示下面句子是結果
                                    - in comparison, by contrast表示下面句子比較的關係
                                    - for example, for instance 表示下面句子是舉例
                                - 最後，段落應該有一個結論句，總結主要觀點，強化所要傳遞的資訊。
                            """)
                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.Row() 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_evaluate_button.click(
                        fn=generate_paragraph_evaluate,
                        inputs=[
                            model,
                            sys_content_input,
                            paragraph_output,
                            user_generate_paragraph_evaluate_prompt
                        ],
                        outputs=paragraph_evaluate_output
                    )
        
        # 修訂文法與拼字錯誤
        with gr.Row():
            with gr.Column():
                with gr.Row() as paragraph_correct_grammatical_spelling_errors_params:
                    default_user_correct_grammatical_spelling_errors_prompt = """
                        I'm aiming to improve my writing. 
                        Please assist me by "Correcting Grammatical and Spelling Errors" in the provided paragraph. 
                        For every correction you make, I'd like an "Explanation" to understand the reasoning behind it. 
                        
                        Rules:
                        - Paragraph for Correction: [paragraph split by punctuation mark]    
                        - The sentence to remain unchanged: [sentence_to_remain_unchanged]
                        - When explaining, use Traditional Chinese (Taiwan, 繁體中文) for clarity. 
                        - But others(original, Correction, revised_paragraph) in English.
                        - Make sure any revised vocabulary aligns with the eng_level. 
                        - Prepositions Followed by Gerunds: After a preposition, a gerund (the -ing form of a verb) should be used. For example: "interested in reading."
                        - Two Main Verbs in a Sentence: When a sentence has two main verbs, it is necessary to use conjunctions, infinitives, clauses, or participles to correctly organize and connect the verbs, avoiding confusion in the sentence structure.
                        
                        Guidelines for Length and Complexity: 
                        - Please keep explanations concise and straightforward
                        - if there are no grammatical or spelling errors, don't need to revise either no more suggestions to show in the revised paragraph.
                        
                        Restrictions:
                        - avoiding overly technical language.
                        - don't give any suggestions about the sentence to remain unchanged.
                        - don't give suggestions about the Period, Comma etc.
                        - Do not change the original text's case.
                        - if no mistakes, don't need to revise.

                        The response should strictly be in the below JSON format and nothing else:

                        EXAMPLE:
                        {{ 
                            "Corrections and Explanations": [ 
                                {{ "original": "# original_sentence1", "correction": "#correction_1", "explanation": "#explanation_1(in_traditional_chinese ZH-TW)" }}, 
                                {{ "original": "# original_sentence2", "correction": "#correction_2", "explanation": "#explanation_2(in_traditional_chinese ZH-TW)" }}, 
                                ... 
                            ], 
                            "Revised Paragraph": "#revised_paragraph" 
                        }}
                    """
                    user_correct_grammatical_spelling_errors_prompt = gr.Textbox(label="Correct Grammatical and Spelling Errors Prompt", value=default_user_correct_grammatical_spelling_errors_prompt, visible=False)
                
                with gr.Row() as paragraph_correct_grammatical_spelling_errors_html:
                    gr.Markdown("# Step 8. 修訂文法與拼字錯誤")
                with gr.Row():
                    with gr.Column():
                        gr.Markdown("## 修訂文法與拼字錯誤（Correct Grammatical and Spelling Errors）")
                    with gr.Column():
                        with gr.Accordion("參考指引：AI 的混淆狀況？", open=False):
                            gr.Markdown("""
                                - 段落寫作的過程，如果全程採用 JUTOR 的建議例句，則不會有文法與拼字錯誤。JUTOR 有時後仍會挑出一些字詞修訂，並非原本字詞錯誤，而是改換不同說法，你可以參考。
                                - 若是自行完成段落寫作，則不會發生自我修訂的混淆狀況。
                            """)
                with gr.Row():
                    with gr.Column():
                        paragraph_correct_grammatical_spelling_errors_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的改正，你可以選擇是否修改：")
                    with gr.Column():
                        generate_correct_grammatical_spelling_errors_button = gr.Button("修訂文法與拼字錯誤", variant="primary")
                        correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False)
                        revised_paragraph_output = gr.Textbox(label="Revised Paragraph", show_copy_button=True, visible=False)
                        gr.Markdown("## 修訂結果")
                        revised_paragraph_diff = gr.HTML()

                        generate_correct_grammatical_spelling_errors_button.click(
                            fn=generate_correct_grammatical_spelling_errors,
                            inputs=[
                                model,
                                sys_content_input,
                                eng_level_input,
                                paragraph_output,
                                user_correct_grammatical_spelling_errors_prompt,
                            ],
                            outputs=[
                                correct_grammatical_spelling_errors_output_table, 
                                revised_paragraph_output
                            ]
                        ).then(
                            fn=highlight_diff_texts,
                            inputs=[correct_grammatical_spelling_errors_output_table, revised_paragraph_output],
                            outputs=revised_paragraph_diff
                        ).then(
                            fn=update_paragraph_correct_grammatical_spelling_errors_input,
                            inputs=[paragraph_output],
                            outputs=paragraph_correct_grammatical_spelling_errors_input
                        )

        # 段落改善建議
        with gr.Row():
            with gr.Column():
                with gr.Row() as paragraph_refine_params:
                    default_user_refine_paragraph_prompt = """
                        I need assistance with revising a paragraph. Please "Refine" the "Revised Version 1" and immediately "Provide Explanations" for each suggestion you made. 
                        - Revised Version 1 (for correction): paragraph_ai_modification(split by punctuation mark)
                        - Do not modify the sentence: topicSentence" 
                        - Make sure any revised vocabulary aligns with the eng_level. 
                        - When explaining, use Traditional Chinese (Taiwan, 繁體中文 zh-TW) for clarity.
                        - But others(Origin, Suggestion, revised_paragraph_v2) use English, that's very important.
                        
                        Guidelines for Length and Complexity: 
                        - Please keep explanations concise and straightforward
                        - if there are no problems, don't need to revise either no more suggestions to show in the revised paragraph.
                        
                        Restrictions:
                        - avoiding overly technical language.
                        - don't change the original text's case.
                        - don't give suggestions about the Period, Comma etc.
                        
                        The response should strictly be in the below JSON format and nothing else:
                        
                        EXAMPLE:
                        {
                        "Suggestions and Explanations": [ 
                            { "origin": "#original_text_1", "suggestion": "#suggestion_1", "explanation": "#explanation_1(in_traditional_chinese zh-TW)" }, 
                            { "origin": "#original_text_2", "suggestion": "#suggestion_2", "explanation": "#explanation_2(in_traditional_chinese zh-TW)" }, 
                        ... ],
                        "Revised Paragraph": "#revised_paragraph_v2"
                        }  
                    """
                    user_refine_paragraph_prompt = gr.Textbox(label="Refine Paragraph Prompt", value=default_user_refine_paragraph_prompt, visible=False)
                
                with gr.Row() as paragraph_refine_html:
                    gr.Markdown("# Step 9. 段落改善建議（Refine Paragraph）")
                    with gr.Accordion("參考指引：段落改善建議？", open=False ):
                        gr.Markdown("""
                            - 段落寫作的過程，如果全程採用 JUTOR 的建議例句，在這部分的批改可能會發生自我修訂的現象。例如：為了符合級別需求，JUTOR 會將自已建議的例句，以換句話說的方式再次修改，你可以忽略。
                            - 若是自行完成段落寫作，則不會發生自我修訂的混淆狀況。
                        """)
                with gr.Row():
                    with gr.Column():
                        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="Refine Paragraph 段落改善建議", wrap=True, interactive=False)
                        refine_output = gr.HTML(label="修改建議", visible=False)
                        gr.Markdown("## 修改結果")
                        refine_output_diff = gr.HTML()

                        generate_refine_paragraph_button.click(
                            fn=generate_refine_paragraph,
                            inputs=[
                                model,
                                sys_content_input,
                                eng_level_input,
                                paragraph_correct_grammatical_spelling_errors_input,
                                user_refine_paragraph_prompt
                            ],
                            outputs=[refine_output_table, refine_output]
                        ).then(
                            fn=highlight_diff_texts,
                            inputs=[refine_output_table, refine_output],
                            outputs=refine_output_diff
                        ).then(
                            fn=update_paragraph_refine_input,
                            inputs=[paragraph_correct_grammatical_spelling_errors_input],
                            outputs=paragraph_refine_input
                        )
                
        # Final Step. 寫作完成
        with gr.Row():
            with gr.Column():
                with gr.Row():
                    gr.Markdown("## Final Step. 寫作完成 Save and Share")
                with gr.Row():
                    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)
                        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)
                with gr.Row():
                    audio_output = gr.Audio(label="音檔", type="filepath")

                    paragraph_save_button.click(
                        fn=generate_paragraph_history,
                        inputs=[
                            scenario_input,
                            topic_input,
                            points_input,
                            topic_sentence_input,
                            supporting_sentences_input,
                            conclusion_sentence_input,
                            paragraph_output,
                            paragraph_evaluate_output,
                            correct_grammatical_spelling_errors_output_table,
                            refine_output_table,
                            refine_output
                        ],
                        outputs=[
                            scenario_input_history,
                            topic_input_history,
                            points_input_history,
                            topic_sentence_input_history,
                            supporting_sentences_input_history,
                            conclusion_sentence_input_history,
                            paragraph_output_history,
                            paragraph_evaluate_output_history,
                            correct_grammatical_spelling_errors_output_table_history,
                            refine_output_table_history,
                            refine_output_history,
                        ]
                    ).then(
                        fn=paragraph_save_and_tts,
                        inputs=[
                            paragraph_refine_input
                        ],
                        outputs=[
                            paragraph_save_output, 
                            audio_output
                        ]
                    ).then(
                        fn=update_history_accordion,
                        inputs=[],
                        outputs=history_accordion
                    )

    # ====="英文全文批改"=====
    with gr.Tab("英文全文批改"):
        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.")
            default_user_generate_full_paragraph_evaluate_prompt = default_user_generate_paragraph_evaluate_prompt
            user_generate_full_paragraph_evaluate_prompt = gr.Textbox(label="Paragraph evaluate Prompt", value=default_user_generate_full_paragraph_evaluate_prompt, visible=False)
        
        # 輸入段落全文
        with gr.Row():
            gr.Markdown("# 輸入段落全文")
        with gr.Row():
            with gr.Column():
                full_paragraph_input = gr.Textbox(label="輸入段落全文", lines=5)
            with gr.Column():
                with gr.Row():
                    full_paragraph_evaluate_button = gr.Button("段落全文分析", variant="primary")
                with gr.Row():
                    full_paragraph_evaluate_output = gr.Dataframe(label="段落全文分析", wrap=True, column_widths=[35, 15, 50], interactive=False)

        # JUTOR 段落批改與整體建議
        with gr.Row():
            gr.Markdown("# JUTOR 段落批改與整體建議")
        with gr.Row():
            gr.Markdown("## 修訂文法與拼字錯誤（Correct Grammatical and Spelling Errors）")
        with gr.Row():
            with gr.Column():
                full_paragraph_correct_grammatical_spelling_errors_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：")
            with gr.Column():
                generate_full_paragraph_correct_grammatical_spelling_errors_button = gr.Button("修訂文法與拼字錯誤", variant="primary")
                full_paragraph_correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False, column_widths=[30, 30, 40])
                revised_full_paragraph_output = gr.Textbox(label="Revised Paragraph", show_copy_button=True, visible=False)
                gr.Markdown("## 修訂結果")
                revised_full_paragraph_diff = gr.HTML()

        # JUTOR 段落批改與整體建議
        with gr.Row():
            gr.Markdown("# JUTOR 段落批改與整體建議")
        with gr.Row():
            gr.Markdown("## 段落改善建議（Refine Paragraph）")
        with gr.Row():
            with gr.Column():
                full_paragraph_refine_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：", show_copy_button=True)
            with gr.Column():
                generate_full_paragraph_refine_button = gr.Button("段落改善建議", variant="primary")
                full_paragraph_refine_output_table = gr.DataFrame(label="Refine Paragraph 段落改善建議", wrap=True, interactive=False)
                full_paragraph_refine_output = gr.HTML(label="修改建議", visible=False)
                gr.Markdown("## 修改結果")
                full_paragraph_refine_output_diff = gr.HTML()

        # 寫作完成
        with gr.Row():
            gr.Markdown("# 寫作完成")
        with gr.Row():
            full_paragraph_save_button = gr.Button("輸出結果", variant="primary")
        with gr.Row():
            full_paragraph_save_output = gr.Textbox(label="最後結果")
            full_audio_output = gr.Audio(label="音檔", type="filepath")


        full_paragraph_evaluate_button.click(
            fn=generate_paragraph_evaluate,
            inputs=[model, sys_content_input, full_paragraph_input, user_generate_full_paragraph_evaluate_prompt],
            outputs=full_paragraph_evaluate_output
        ).then(
            fn=update_paragraph_correct_grammatical_spelling_errors_input,
            inputs=[full_paragraph_input],
            outputs=full_paragraph_correct_grammatical_spelling_errors_input
        )
        
        generate_full_paragraph_correct_grammatical_spelling_errors_button.click(
            fn=generate_correct_grammatical_spelling_errors,
            inputs=[model, sys_content_input, eng_level_input, full_paragraph_correct_grammatical_spelling_errors_input, user_correct_grammatical_spelling_errors_prompt],
            outputs=[full_paragraph_correct_grammatical_spelling_errors_output_table, revised_full_paragraph_output]
        ).then(
            fn=highlight_diff_texts,
            inputs=[full_paragraph_correct_grammatical_spelling_errors_output_table, revised_full_paragraph_output],
            outputs=revised_full_paragraph_diff
        ).then(
            fn=update_paragraph_refine_input,
            inputs=[full_paragraph_correct_grammatical_spelling_errors_input],
            outputs=full_paragraph_refine_input
        )

        generate_full_paragraph_refine_button.click(
            fn=generate_refine_paragraph,
            inputs=[
                model, 
                sys_content_input, 
                eng_level_input, 
                full_paragraph_refine_input, 
                user_refine_paragraph_prompt
            ],
            outputs=[full_paragraph_refine_output_table, full_paragraph_refine_output]
        ).then(
            fn=highlight_diff_texts,
            inputs=[full_paragraph_refine_output_table, full_paragraph_refine_output],
            outputs=full_paragraph_refine_output_diff
        )

        full_paragraph_save_button.click(
            fn=paragraph_save_and_tts,
            inputs=[full_paragraph_refine_input],
            outputs=[full_paragraph_save_output, full_audio_output]
        )

     # ====="考古題寫作練習"=====
    
    # ====="英文考古題寫作練習====="
    with gr.Tab("英文考古題寫作練習"):
        with gr.Row():
            with gr.Column():
                with gr.Row():
                    gr.Markdown("# 考古題寫作練習")
                with gr.Row():
                    gr.Markdown("## 選擇考古題")
                with gr.Row():
                    exams_data = load_exam_data()
                    past_exam_choices = [exam["title"] for exam in exams_data["exams"]]
                    past_exam_dropdown = gr.Radio(label="選擇考古題", choices=past_exam_choices)
                with gr.Row():
                    past_exam_title = gr.Markdown()
                with gr.Row():
                    with gr.Column():
                        with gr.Row():
                            past_exam_question = gr.Markdown()
                        with gr.Row():
                            with gr.Accordion("提示", open=False):
                                with gr.Row():
                                    past_exam_hint = gr.Markdown()
                    with gr.Column():
                        past_exam_image = gr.Image()
                    
                    past_exam_dropdown.select(
                        fn=update_exam_contents,
                        inputs=[past_exam_dropdown],
                        outputs=[past_exam_title, past_exam_question, past_exam_hint, past_exam_image]
                    )

                # 評分
                with gr.Row():
                    with gr.Column():
                        with gr.Row():
                            past_exam_evaluation_sys_content_prompt = gr.Textbox(label="System Prompt", value="You are an English teacher who is practicing with me to improve my English writing skill.", visible=False)
                            past_exam_evaluation_user_prompt = gr.Textbox(label="Paragraph evaluate Prompt", value=default_user_generate_paragraph_evaluate_prompt, visible=False)
                            past_exam_evaluation_input = gr.Textbox("",lines= 10, label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：")
                    with gr.Column():
                        with gr.Row():
                            past_exam_evaluation_button = gr.Button("評分", variant="primary")
                        with gr.Row():
                            past_exam_evaluation_output = gr.Dataframe(label="評分結果", wrap=True, column_widths=[20, 15, 65], interactive=False)
                    
                # 修正錯字、語法
                with gr.Row():
                    with gr.Column():
                        past_exam_correct_grammatical_spelling_errors_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：",lines= 10, show_copy_button=True)
                    with gr.Column():
                        with gr.Row():
                            with gr.Accordion("prompt 提供微調測試", open=False, elem_classes=['accordion-prompts'], visible=False):
                                past_exam_correct_grammatical_spelling_errors_prompt = gr.Textbox(label="Correct Grammatical and Spelling Errors Prompt", value=default_user_correct_grammatical_spelling_errors_prompt, lines= 20)
                        with gr.Row():
                            past_exam_generate_correct_grammatical_spelling_errors_button = gr.Button("修訂文法與拼字錯誤", variant="primary")
                        with gr.Row():
                            past_exam_correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False, column_widths=[30, 30, 40])
                        with gr.Row():
                            past_exam_revised_output = gr.Textbox(label="Revised Paragraph", show_copy_button=True, visible=False)
                        with gr.Row():
                            gr.Markdown("## 修訂結果")
                        with gr.Row():
                            past_exam_revised_diff = gr.HTML()

                # 修正段落
                with gr.Row():
                    with gr.Column():
                        past_exam_refine_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：", show_copy_button=True,lines= 10)
                    with gr.Column():
                        with gr.Row():
                            with gr.Accordion("prompt 提供微調測試", open=False, elem_classes=['accordion-prompts'], visible=False):
                                past_exam_refine_paragraph_prompt = gr.Textbox(label="Refine Paragraph Prompt", value=default_user_refine_paragraph_prompt, lines= 20)
                        with gr.Row():
                            past_exam_generate_refine_button = gr.Button("段落改善建議", variant="primary")
                        with gr.Row():
                            past_exam_refine_output_table = gr.DataFrame(label="Refine Paragraph 段落改善建議", wrap=True, interactive=False)
                        with gr.Row():
                            past_exam_refine_output = gr.HTML(label="修改建議", visible=False)
                        with gr.Row():
                            gr.Markdown("## 修改結果")
                        with gr.Row():
                            past_exam_refine_output_diff = gr.HTML()
                    
                    past_exam_evaluation_button.click(
                        fn=generate_paragraph_evaluate,
                        inputs=[model, past_exam_evaluation_sys_content_prompt, past_exam_evaluation_input, past_exam_evaluation_user_prompt],
                        outputs=past_exam_evaluation_output
                    ).then(
                        fn=update_paragraph_correct_grammatical_spelling_errors_input,
                        inputs=[past_exam_evaluation_input],
                        outputs=past_exam_correct_grammatical_spelling_errors_input
                    )

                    past_exam_generate_correct_grammatical_spelling_errors_button.click(
                        fn=generate_correct_grammatical_spelling_errors,
                        inputs=[model, past_exam_evaluation_sys_content_prompt, eng_level_input, past_exam_correct_grammatical_spelling_errors_input, past_exam_correct_grammatical_spelling_errors_prompt],
                        outputs=[past_exam_correct_grammatical_spelling_errors_output_table, past_exam_revised_output]
                    ).then(
                        fn=highlight_diff_texts,
                        inputs=[past_exam_correct_grammatical_spelling_errors_output_table, past_exam_revised_output],
                        outputs=past_exam_revised_diff
                    ).then(
                        fn=update_paragraph_refine_input,
                        inputs=[past_exam_correct_grammatical_spelling_errors_input],
                        outputs=past_exam_refine_input
                    )
                    
                    past_exam_generate_refine_button.click(
                        fn=generate_refine_paragraph,
                        inputs=[model, past_exam_evaluation_sys_content_prompt, eng_level_input, past_exam_refine_input, past_exam_refine_paragraph_prompt],
                        outputs=[past_exam_refine_output_table, past_exam_refine_output]
                    ).then(
                        fn=highlight_diff_texts,
                        inputs=[past_exam_refine_output_table, past_exam_refine_output],
                        outputs=past_exam_refine_output_diff
                    )

    # =====中文全文批改=====
    with gr.Tab("中文全文批改"):
        with gr.Row(visible=False) as chinese_full_paragraph_params:
            chinese_full_paragraph_sys_content_input = gr.Textbox(label="System Prompt", value="You are an Chinese teacher who is practicing with me to improve my Chinese writing skill.")
            default_user_generate_chinese_full_paragraph_evaluate_prompt =  """
                你是一位國文老師，負責評分學生的作文。請根據以下的評分標準，對這篇作文進行詳細評價：
                請根據「國文作文評分標準」，對這篇作文進行詳細評價：

                評分標準：
                題旨發揮 (40%):
                A 等 - 能掌握題幹要求，緊扣題旨發揮；內容充實，思路清晰；感發得宜，想像豐富；情感真摯，表達適當，體悟深刻；論述周延，富有創意。
                B 等 - 尚能掌握題幹要求，依照題旨發揮；內容平實，思路尚稱清晰；感發尚稱得宜，想像平淡；情感表達尚稱適當，體悟稍欠深刻；論述尚稱周延，略有創意。
                C 等 - 未能掌握題幹要求，題旨不明或偏離題旨；內容浮泛，思路不清；感發未能得宜，想像不足；情感表達不當，體悟膚淺或全無體悟；論述不周延，缺乏創意。

                資料掌握 (20%):
                A 等 - 能融會貫通題幹資料；能深刻回應引導內容；能善用成語及典故；舉證詳實貼切；材料運用恰當。
                B 等 - 僅側重部分題幹資料；僅大致回應引導內容；尚能運用成語及典故；舉證平淡疏略；材料運用尚稱恰當。
                C 等 - 誤解題幹資料；大部分抄襲引導內容；錯誤運用成語及典故；舉證鬆散模糊；材料運用不當。

                結構安排 (20%):
                A 等 - 結構嚴謹；前後通貫；脈絡清楚；條理分明；照應緊密。
                B 等 - 結構大致完整；前後尚能通貫；脈絡大致清楚；條理尚稱分明；略有照應。
                C 等 - 結構鬆散；前後矛盾；脈絡不清；條理紛雜；全無照應。

                字句運用 (20%):
                A 等 - 字句妥切，邏輯清晰；用詞精確，造句工穩；描寫細膩，論述精彩；文筆流暢，修辭優美；標點符號使用正確。
                B 等 - 字句尚稱適當，邏輯尚稱清晰；用詞通順，造句平淡；描寫平淡，論述平實；文筆平順，修辭尚可；標點符號使用大致正確。
                C 等 - 字句欠當，邏輯不通；用詞粗率，造句冗贅；描寫粗陋，論述空洞；文筆蕪蔓，修辭粗俗；標點符號使用多有錯誤。

                請根據這些標準，對這篇作文進行評級，並詳細解釋每個維度的得分理由。

                等級可以細分為 A+、A、A-、B+、B、B-、C+、C、C- 九個等級。

                please use Chinese language (ZH-TW) to evaluate the paragraph and output use JSON format:
                EXAMPLE:
                "results": {{
                    "題旨發揮": {{
                        "level": "A+",
                        "explanation": "#中文解釋 ZH-TW"
                    }},
                    "資料掌握": {{
                        "level": "B+",
                        "explanation": "#中文解釋 ZH-TW"
                    }},
                    "結構安排": {{
                        "level": "C",
                        "explanation": "#中文解釋 ZH-TW"
                    }},
                    "字句運用": {{
                        "level": "C-",
                        "explanation": "#中文解釋 ZH-TW"
                    }}
                }}

                Restrictions:
                - ALL the content should be in Traditional Chinese (zh-TW), it's very important.
            """
            user_generate_chinese_full_paragraph_evaluate_prompt = gr.Textbox(label="Paragraph evaluate Prompt", value=default_user_generate_chinese_full_paragraph_evaluate_prompt)
        with gr.Row():
            gr.Markdown("# 輸入段落全文")
        with gr.Row():
            with gr.Column():
                chinese_full_paragraph_input = gr.Textbox(label="輸入段落全文", lines=5)
            with gr.Column():
                with gr.Row():
                    chinese_full_paragraph_evaluate_button = gr.Button("段落全文分析", variant="primary")
                with gr.Row():
                    chinese_full_paragraph_evaluate_output = gr.Dataframe(label="段落全文分析", wrap=True, column_widths=[20, 15, 65], interactive=False)

                    
        
        # JUTOR 段落批改與整體建議
        with gr.Row():
            gr.Markdown("# JUTOR 段落批改與整體建議")
        with gr.Row():
            gr.Markdown("## 修訂文法與拼字錯誤")
        with gr.Row():
            with gr.Column():
                chinese_full_paragraph_correct_grammatical_spelling_errors_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：")
            with gr.Column():
                generate_chinese_full_paragraph_correct_grammatical_spelling_errors_button = gr.Button("修訂文法與拼字錯誤", variant="primary")
                chinese_full_paragraph_correct_grammatical_spelling_errors_output_table = gr.Dataframe(label="修訂文法與拼字錯誤", interactive=False, column_widths=[30, 30, 40])
                revised_chinese_full_paragraph_output = gr.Textbox(label="Revised Paragraph", show_copy_button=True, visible=False)
                gr.Markdown("## 修訂結果")
                revised_chinese_full_paragraph_diff = gr.HTML()

                
        # JUTOR 段落批改與整體建議
        with gr.Row():
            gr.Markdown("## 段落改善建議")
        with gr.Row():
            with gr.Column():
                chinese_full_paragraph_refine_input = gr.Textbox(label="這是你的原始寫作內容，參考 JUTOR 的建議，你可以選擇是否修改：", show_copy_button=True)
            with gr.Column():
                generate_chinese_full_paragraph_refine_button = gr.Button("段落改善建議", variant="primary")
                chinese_full_paragraph_refine_output_table = gr.DataFrame(label="Refine Paragraph 段落改善建議", wrap=True, interactive=False)
                chinese_full_paragraph_refine_output = gr.HTML(label="修改建議", visible=False)
                gr.Markdown("## 修改結果")
                chinese_full_paragraph_refine_output_diff = gr.HTML()

                
        
        # 寫作完成
        with gr.Row():
            gr.Markdown("# 寫作完成")
        with gr.Row():
            chinese_full_paragraph_save_button = gr.Button("輸出結果", variant="primary")
        with gr.Row():
            chinese_full_paragraph_save_output = gr.Textbox(label="最後結果")
            chinese_full_audio_output = gr.Audio(label="音檔", type="filepath")
            
        chinese_full_paragraph_evaluate_button.click(
            fn=generate_chinese_evaluation_table,
            inputs=[model, chinese_full_paragraph_sys_content_input, user_generate_chinese_full_paragraph_evaluate_prompt, chinese_full_paragraph_input],
            outputs=chinese_full_paragraph_evaluate_output
        ).then(
            fn=update_paragraph_correct_grammatical_spelling_errors_input,
            inputs=[chinese_full_paragraph_input],
            outputs=chinese_full_paragraph_correct_grammatical_spelling_errors_input
        )

        generate_chinese_full_paragraph_correct_grammatical_spelling_errors_button.click(
            fn=generate_correct_grammatical_spelling_errors,
            inputs=[model, chinese_full_paragraph_sys_content_input, eng_level_input, chinese_full_paragraph_correct_grammatical_spelling_errors_input, user_correct_grammatical_spelling_errors_prompt],
            outputs=[chinese_full_paragraph_correct_grammatical_spelling_errors_output_table, revised_chinese_full_paragraph_output]
        ).then(
            fn=highlight_diff_texts,
            inputs=[chinese_full_paragraph_correct_grammatical_spelling_errors_output_table, revised_chinese_full_paragraph_output],
            outputs=revised_chinese_full_paragraph_diff
        ).then(
            fn=update_paragraph_refine_input,
            inputs=[chinese_full_paragraph_correct_grammatical_spelling_errors_input],
            outputs=chinese_full_paragraph_refine_input
        )

        generate_chinese_full_paragraph_refine_button.click(
            fn=generate_refine_paragraph,
            inputs=[model, chinese_full_paragraph_sys_content_input, eng_level_input, chinese_full_paragraph_refine_input, user_refine_paragraph_prompt],
            outputs=[chinese_full_paragraph_refine_output_table, chinese_full_paragraph_refine_output]
        ).then(
            fn=highlight_diff_texts,
            inputs=[chinese_full_paragraph_refine_output_table, chinese_full_paragraph_refine_output],
            outputs=chinese_full_paragraph_refine_output_diff
        )

        chinese_full_paragraph_save_button.click(
            fn=paragraph_save_and_tts,
            inputs=[chinese_full_paragraph_refine_input],
            outputs=[chinese_full_paragraph_save_output, chinese_full_audio_output]
        )

   
demo.launch()