Update app.py

app.py

@@ -41,38 +41,37 @@ def log_to_notion(name, chinese_term="", user_input="", bot_response=""):
 
 def translate_to_english(name, word):
     """Generate math-related English translation with bilingual explanation"""
-    translations = {
-        "向量": {
-            "english": "Vector",
-            "chinese_explanation": "向量是一種具有大小與方向的數學實體。",
-            "english_explanation": "A vector is a mathematical entity characterized by magnitude and direction.",
-            "math_context": "向量廣泛用於物理學和工程學中的力和位移表示。",
-            "english_context": "Vectors are widely used in physics and engineering to represent forces and displacements."
-        },
-        "函數": {
-            "english": "Function",
-            "chinese_explanation": "函數描述變量之間的依賴關係。",
-            "english_explanation": "A function describes the dependency relationship between variables.",
-            "math_context": "函數是數學分析中的核心概念，常用於表示輸入與輸出之間的關係。",
-            "english_context": "Functions are a core concept in mathematical analysis, often used to represent input-output relationships."
+    messages = [
+        {
+            "role": "system",
+            "content": """你是一個數學翻譯專家。請按照以下格式提供翻譯，注意數學公式要用 LaTeX 格式包覆（使用 $$ 符號）：
+
+1. 英文翻譯：[列出數學相關的英文翻譯]
+
+2. 中文解釋：[用中文詳細解釋這個詞在數學上的意義，需要時使用 LaTeX 數學式]
+
+3. English Explanation：[用英文重述上述中文解釋的內容，需要時使用 LaTeX 數學式]
+
+4. 數學使用場景：[說明在哪些數學情境會使用到這個詞，並舉例使用 LaTeX 數學式]
+
+5. Mathematical Context：[用英文重述使用場景，保留 LaTeX 數學式]
+
+如果該詞彙沒有數學相關的意思，請說明。"""
         },
-        "極限": {
-            "english": "Limit",
-            "chinese_explanation": "極限用於描述函數趨於某一特定值的行為。",
-            "english_explanation": "The limit describes the behavior of a function as it approaches a specific value.",
-            "math_context": "極限是微積分中的基礎概念，用於定義導數和積分。",
-            "english_context": "Limits are a foundational concept in calculus, used to define derivatives and integrals."
+        {
+            "role": "user",
+            "content": f"請提供中文詞彙 '{word}' 在數學上的英文翻譯和詳細解釋。"
         }
-    }
-    if word in translations:
-        t = translations[word]
-        response = f"""1. 英文翻譯：{t['english']}
-2. 中文解釋：{t['chinese_explanation']}
-3. English Explanation: {t['english_explanation']}
-4. 數學使用場景：{t['math_context']}
-5. Mathematical Context: {t['english_context']}"""
-    else:
-        response = 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)
@@ -80,44 +79,112 @@ def translate_to_english(name, word):
 
 def generate_example(name, word):
     """Generate math-related example sentence for Chinese word"""
-    examples = {
-        "向量": {
-            "example": "The vector \\( \\vec{v} = (3, 4) \\) represents a point in 2D space.",
-            "translation": "向量 \\( \\vec{v} = (3, 4) \\) 表示二維空間中的一個點。",
-            "explanation": "此例句中的向量表示從原點到座標 (3, 4) 的方向和距離。"
-        },
-        "函數": {
-            "example": "The function \\( f(x) = x^2 \\) squares the input value.",
-            "translation": "函數 \\( f(x) = x^2 \\) 將輸入值平方。",
-            "explanation": "此例句中的函數描述了輸入值與輸出值之間的關係。"
+    messages = [
+        {
+            "role": "system",
+            "content": """你是一個數學教師。請按照以下格式提供例句，注意數學公式要用 LaTeX 格式包覆（使用 $$ 符號）：
+
+1. 英文例句：[寫出一個數學相關的英文例句，包含 LaTeX 數學式]
+
+2. 中文翻譯：[該例句的中文翻譯，保留 LaTeX 數學式]
+
+3. 句子解釋：[用中文解釋這個例句中的數學概念，需要時使用 LaTeX 數學式]
+
+4. Sentence Explanation：[用英文重述上述解釋，需要時使用 LaTeX 數學式]"""
         },
-        "極限": {
-            "example": "The limit of \\( f(x) = 1/x \\) as x approaches infinity is 0.",
-            "translation": "當 x 趨於無窮大時，\\( f(x) = 1/x \\) 的極限為 0。",
-            "explanation": "此例句中的極限描述了函數在某一趨勢下的行為。"
+        {
+            "role": "user",
+            "content": f"請用中文詞彙 '{word}' 的英文翻譯造一個數學相關的例句。"
         }
-    }
-    if word in examples:
-        e = examples[word]
-        response = f"""1. 英文例句：{e['example']}
-2. 中文翻譯：{e['translation']}
-3. 句子解釋：{e['explanation']}"""
-    else:
-        response = 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": """你是一個高中數學老師，使用的語言是英文。學生用中文問妳任何字彙，你都可以告訴他那個中文對應的英文和例句，以及在數學上的可能用法以及數學例題和解法。
+說明數學上的可能用法時，先用中文講一遍再用B1程度的英文複述一遍。
+
+請注意：
+1. 所有數學公式都要用 LaTeX 格式書寫（使用 $$ 符號包覆）
+2. 示範解題時，每個步驟都要清楚標示，並搭配 LaTeX 數學式
+3. 回答要有條理，適時使用換行來分隔不同段落"""
+        }
+    ]
+
+    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 = f"You asked: {message}. Here's a sample response with math: \\( a^2 + b^2 = c^2 \\)."
+    response = chat_response(name, message, history)
     history.append((message, response))
     return "", history
 
-# Custom CSS remains the same as in your original code
+# Custom CSS for math rendering and layout
 custom_css = """
-[Your existing CSS here]
+.math-container .katex { 
+    font-size: 1.1em;
+}
+.input-box {
+    font-size: 1.1em;
+}
+.output-box {
+    font-size: 1.1em;
+    line-height: 1.5;
+}
+.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;
+}
+.user-message {
+    background-color: #e2e8f0;
+}
+.bot-message {
+    background-color: #edf2f7;
+}
 """
 
 # Create Gradio interface
@@ -140,13 +207,15 @@ with gr.Blocks(css=custom_css) as demo:
                 lines=1,
                 elem_classes=["input-box"]
             )
+        
         with gr.Row():
             translate_btn = gr.Button("🔄 英譯 | Translate", variant="primary")
             example_btn = gr.Button("📝 例句 | Example")
-
+        
         output_text = gr.Markdown(
             label="翻譯結果 | Translation Result",
-            elem_classes=["output-box"]
+            value="翻譯結果將在這裡顯示... | Translation results will be displayed here...",
+            elem_classes=["output-box", "math-container"]
         )
 
         translate_btn.click(translate_to_english, inputs=[name_input, word_input], outputs=output_text)
@@ -157,12 +226,19 @@ with gr.Blocks(css=custom_css) as demo:
             [],
             elem_id="chatbot",
             bubble_full_width=False,
-            avatar_images=("👨‍🎓", "👨‍🏫")
+            avatar_images=("👨‍🎓", "👨‍🏫"),
+            elem_classes=["math-container"]
         )
+
         msg = gr.Textbox(
             label="發送訊息 | Send Message",
             placeholder="請輸入您的問題... | Enter your question...",
             show_label=False,
             elem_classes=["input-box"]
         )
-        clear = gr.ClearButton([msg, chatbot], value="
+
+        clear = gr.ClearButton([msg, chatbot], value="🗑️ 清除對話 | Clear Chat")
+        msg.submit(respond, [name_input, msg, chatbot], [msg, chatbot])
+
+if __name__ == "__main__":
+    demo.launch()