Update app.py

app.py

@@ -1,4 +1,43 @@
-# [Previous imports and initialization code remains the same...]
+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')
+
+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"""
@@ -46,7 +85,98 @@ def translate_to_english(name, word):
     log_to_notion(name=name, chinese_term=word, bot_response=response)
     return response
 
-# 更新 CSS 樣式
+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
+
+# Custom CSS for math rendering and layout
 custom_css = """
 .math-container .katex { 
     font-size: 1.1em;
@@ -129,7 +259,24 @@ with gr.Blocks(css=custom_css) as demo:
         translate_btn.click(translate_to_english, inputs=[name_input, word_input], outputs=output_text)
         example_btn.click(generate_example, inputs=[name_input, word_input], outputs=output_text)
 
-    # [Rest of the interface code remains the same...]
+    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()