Update app.py

app.py

@@ -1,4 +1,234 @@
-# [Previous imports and function definitions remain 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')
+
+# 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:
@@ -60,59 +290,5 @@ with gr.Blocks(css=custom_css) as demo:
         clear = gr.ClearButton([msg, chatbot], value="🗑️ 清除對話 | Clear Chat")
         msg.submit(respond, [name_input, msg, chatbot], [msg, chatbot])
 
-# Update custom CSS to style the new layout
-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;
-}
-"""
-
 if __name__ == "__main__":
     demo.launch()