app.py

import os
import gradio as gr
from datetime import datetime

# Handle notion-client import
try:
    from notion_client import Client
except ImportError:
    os.system('pip install notion-client')
    from notion_client import Client

# Handle groq import
try:
    from groq import Groq
except ImportError:
    os.system('pip install groq')
    from groq import Groq

# Initialize Groq client
client = Groq(api_key=os.getenv('groq_key'))

# Initialize Notion client
notion = Client(auth=os.getenv('NOTION_API_KEY'))
NOTION_DB_ID = os.getenv('NOTION_DB_ID')

# Define custom CSS first
custom_css = """
.math-container .katex { 
    font-size: 1.1em;
    display: inline-block !important;
    white-space: nowrap !important;
}
.input-box {
    font-size: 1.1em;
}
.output-box {
    font-size: 1.1em;
    line-height: 2;
    min-height: 200px;
    padding: 1em;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 1em;
}
.title {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 1em;
    color: #2a4365;
}
#chatbot {
    height: 600px;
    overflow-y: auto;
}
.message {
    padding: 1em;
    margin: 0.5em;
    border-radius: 8px;
    white-space: normal !important;
}
.user-message {
    background-color: #e2e8f0;
}
.bot-message {
    background-color: #edf2f7;
}
.contains-math {
    white-space: normal !important;
}
.math-inline {
    display: inline !important;
    white-space: nowrap !important;
}
.gradio-markdown {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}
"""

def log_to_notion(name, chinese_term="", user_input="", bot_response=""):
    """Log interaction to Notion database"""
    try:
        notion.pages.create(
            parent={"database_id": NOTION_DB_ID},
            properties={
                "Name": {"title": [{"text": {"content": name}}]},
                "Timestamp": {"date": {"start": datetime.now().isoformat()}},
                "Chinese Term": {"rich_text": [{"text": {"content": chinese_term}}]},
                "User Input": {"rich_text": [{"text": {"content": user_input}}]},
                "Bot Response": {"rich_text": [{"text": {"content": bot_response}}]}
            }
        )
    except Exception as e:
        print(f"Error logging to Notion: {e}")

def translate_to_english(name, word):
    """Generate math-related English translation with bilingual explanation"""
    messages = [
        {
            "role": "system",
            "content": """你是一個數學翻譯專家。請用以下規則提供翻譯：

格式規範：
1. 文字和數學式必須在同一行，不得換行
2. 在需要換行處使用 <br> 標記
3. 所有數學式用 $$...$$ 包覆

示例格式：
對數是指若 $$b^y = x$$，則 $$y$$ 稱為 $$x$$ 以 $$b$$ 為底的對數，記為 $$\log_b x$$。<br>
換底公式為 $$\log_a x = \frac{\log_c x}{\log_c a}$$。

請按此格式提供：
1. 英文翻譯：[列出數學相關的英文翻譯]<br>

2. 中文解釋：[連貫的中文解釋，所有數學式與文字在同一行]<br>

3. English Explanation：[連貫的英文解釋，所有數學式與文字在同一行]<br>

4. 數學使用場景：[數學使用場景說明，公式與文字在同一行]<br>

5. Mathematical Context：[英文場景說明，公式與文字在同一行]"""
        },
        {
            "role": "user",
            "content": f"請提供中文詞彙 '{word}' 在數學上的英文翻譯和詳細解釋。"
        }
    ]

    completion = client.chat.completions.create(
        model="llama-3.3-70b-versatile",
        messages=messages,
        temperature=0.7,
        max_tokens=400,
        stream=False
    )
    response = completion.choices[0].message.content

    # Log to Notion
    log_to_notion(name=name, chinese_term=word, bot_response=response)
    return response

def generate_example(name, word):
    """Generate math-related example sentence for Chinese word"""
    messages = [
        {
            "role": "system",
            "content": """你是一個數學教師。請用以下規則提供例句：

1. 英文例句：[寫出一個數學相關的英文例句]
- 數學公式必須用 $$...$$ 包覆，並與文字在同一行
- 例如：The solution of $$\log_2 x = 3$$ is $$x = 8$$<br>

2. 中文翻譯：[該例句的中文翻譯]
- 保持相同的 LaTeX 數學式格式，確保與文字在同一行
- 例如：方程式 $$\log_2 x = 3$$ 的解為 $$x = 8$$<br>

3. 句子解釋：[用中文解釋這個例句中的數學概念]
- 所有數學符號和公式都需要用 LaTeX 格式，並與文字在同一行
- 例如：因為 $$2^3 = 8$$，所以 $$\log_2 8 = 3$$<br>

4. Sentence Explanation：[用英文重述上述解釋]
- 保持相同的 LaTeX 數學式格式，確保與文字在同一行"""
        },
        {
            "role": "user",
            "content": f"請用中文詞彙 '{word}' 的英文翻譯造一個數學相關的例句。"
        }
    ]

    completion = client.chat.completions.create(
        model="llama-3.3-70b-versatile",
        messages=messages,
        temperature=0.7,
        max_tokens=400,
        stream=False
    )
    response = completion.choices[0].message.content

    # Log to Notion
    log_to_notion(name=name, chinese_term=word, bot_response=response)
    return response

def chat_response(name, message, chat_history):
    """Generate response for chatbot"""
    messages = [
        {
            "role": "system",
            "content": """你是一個高中數學老師，使用的語言是英文。學生用中文問妳任何字彙，你都可以告訴他那個中文對應的英文和例句，以及在數學上的可能用法以及數學例題和解法。

格式要求：
1. 所有數學公式都要用 LaTeX 格式書寫（使用 $$...$$ 符號包覆）
2. 數學式必須與文字在同一行，中間使用 <br> 換行
3. 變數使用 $$x$$, $$y$$, $$a$$, $$b$$ 等格式
4. 運算符號使用 $$+$$, $$-$$, $$\times$$, $$\div$$ 等格式
5. 分數使用 $$\frac{分子}{分母}$$ 格式
6. 示範解題時，每個步驟的說明文字和數學式要在同一行

示例格式：
讓我們來看一道對數方程式：$$\log_2 x = 3$$<br>
解題步驟：<br>
1. 利用指數的定義：$$2^3 = x$$<br>
2. 計算得到：$$x = 8$$<br>
因此，方程式 $$\log_2 x = 3$$ 的解為 $$x = 8$$。"""
        }
    ]

    for msg in chat_history:
        messages.append({"role": "user", "content": msg[0]})
        if msg[1]:
            messages.append({"role": "assistant", "content": msg[1]})

    messages.append({"role": "user", "content": message})

    completion = client.chat.completions.create(
        model="llama-3.3-70b-versatile",
        messages=messages,
        temperature=1,
        max_tokens=1024,
        stream=False
    )
    response = completion.choices[0].message.content

    # Log to Notion
    log_to_notion(name=name, user_input=message, bot_response=response)
    return response

def respond(name, message, history):
    """Process chatbot response and update history"""
    response = chat_response(name, message, history)
    history.append((message, response))
    return "", history

# Create Gradio interface
with gr.Blocks(css=custom_css) as demo:
    gr.Markdown("# 雙語數學詞彙學習系統 | Bilingual Mathematics Learning System", elem_classes=["title"])

    # Add name input at the top
    name_input = gr.Textbox(
        label="請輸入您的名字 | Enter Your Name",
        placeholder="請輸入您的名字... | Please enter your name...",
        lines=1,
        elem_classes=["input-box"]
    )

    with gr.Tab("📚 單字英譯系統"):
        with gr.Row():
            word_input = gr.Textbox(
                label="請輸入中文詞彙 | Enter Chinese Term",
                placeholder="輸入中文詞彙（例如：向量、函數、極限）...",
                lines=1,
                elem_classes=["input-box"]
            )
        
        with gr.Row():
            with gr.Column(scale=1):
                translate_btn = gr.Button("🔄 英譯 | Translate", variant="primary", size="lg")
                translate_output = gr.Markdown(
                    label="英譯結果 | Translation Result",
                    value="英譯結果將在這裡顯示... | Translation results will be displayed here...",
                    elem_classes=["output-box", "math-container", "contains-math", "gradio-markdown"]
                )
            
            with gr.Column(scale=1):
                example_btn = gr.Button("📝 例句 | Example", size="lg")
                example_output = gr.Markdown(
                    label="例句結果 | Example Result",
                    value="例句結果將在這裡顯示... | Example results will be displayed here...",
                    elem_classes=["output-box", "math-container", "contains-math", "gradio-markdown"]
                )

        translate_btn.click(translate_to_english, inputs=[name_input, word_input], outputs=translate_output)
        example_btn.click(generate_example, inputs=[name_input, word_input], outputs=example_output)

    with gr.Tab("💬 數學對話系統"):
        chatbot = gr.Chatbot(
            [],
            elem_id="chatbot",
            bubble_full_width=False,
            avatar_images=("👨‍🎓", "👨‍🏫"),
            elem_classes=["math-container", "contains-math"]
        )

        msg = gr.Textbox(
            label="發送訊息 | Send Message",
            placeholder="請輸入您的問題... | Enter your question...",
            show_label=False,
            elem_classes=["input-box"]
        )

        clear = gr.ClearButton([msg, chatbot], value="🗑️ 清除對話 | Clear Chat")
        msg.submit(respond, [name_input, msg, chatbot], [msg, chatbot])

if __name__ == "__main__":
    demo.launch()