Update app.py

app.py

@@ -2,32 +2,33 @@ 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 !important;
-    white-space: nowrap !important;
-}
-.math-container p {
     display: inline-block !important;
-    width: 100% !important;
-    white-space: normal !important;
+    white-space: nowrap !important;
 }
 .input-box {
     font-size: 1.1em;
@@ -40,7 +41,6 @@ custom_css = """
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     margin-top: 1em;
-    white-space: normal !important;
 }
 .title {
     text-align: center;
@@ -78,6 +78,7 @@ custom_css = """
 """
 
 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},
@@ -92,62 +93,32 @@ def log_to_notion(name, chinese_term="", user_input="", bot_response=""):
     except Exception as e:
         print(f"Error logging to Notion: {e}")
 
-def format_math_response(response):
-    """Format response to ensure proper LaTeX formatting"""
-    # Replace incorrect LaTeX formatting with correct one
-    response = response.replace(r'$\log_b(x)', r'$$\log_b(x)$$')
-    response = response.replace(r'$\log_', r'$$\log_')
-    response = response.replace('log_', '\\log_')
-    response = response.replace('$x', '$$x$$')
-    response = response.replace('$b$', '$$b$$')
-    response = response.replace('$1', '$$1$$')
-    response = response.replace('$(', '$$(')
-    response = response.replace(')$', ')$$')
-    
-    # Clean up any remaining single dollar signs
-    parts = response.split('$')
-    formatted_parts = []
-    for i, part in enumerate(parts):
-        if i % 2 == 1:  # Inside math expression
-            formatted_parts.append(f'$${part}$$')
-        else:  # Outside math expression
-            formatted_parts.append(part)
-    response = ''.join(formatted_parts)
-    
-    # Fix common spacing issues
-    response = response.replace('$$$$', '$$')
-    response = response.replace('  ', ' ')
-    
-    # Format line breaks
-    lines = [line.strip() for line in response.split('\n') if line.strip()]
-    return '<br>'.join(lines)
-
 def translate_to_english(name, word):
+    """Generate math-related English translation with bilingual explanation"""
     messages = [
         {
             "role": "system",
             "content": """你是一個數學翻譯專家。請用以下規則提供翻譯：
 
-1. 數學式格式規範：
-   - 所有數學式都必須使用 $$...$$
-   - 對數表示：$$\\log_b(x)$$
-   - 變數：$$x$$, $$y$$, $$a$$, $$b$$
-   - 數字：$$1$$, $$2$$, $$3$$
-   - 不要使用單個 $ 符號
-   - 所有數學符號都要用 LaTeX 格式
-
-2. 對數的特別注意事項：
-   - 正確格式：$$\\log_b(x)$$
-   - 底數是 b 時：$$\\log_b$$
-   - 底數是 2 時：$$\\log_2$$
-   - 底數是 e 時：$$\\ln$$
-
-3. 回應格式（每項使用 <br> 分隔）：
-1. 英文翻譯：[包含完整的數學符號]<br>
-2. 中文解釋：[包含完整的數學符號]<br>
-3. English Explanation：[包含完整的數學符號]<br>
-4. 數學使用場景：[包含完整的數學符號]<br>
-5. Mathematical Context：[包含完整的數學符號]<br>"""
+格式規範：
+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",
@@ -163,35 +134,32 @@ def translate_to_english(name, word):
         stream=False
     )
     response = completion.choices[0].message.content
-    formatted_response = format_math_response(response)
-    log_to_notion(name=name, chinese_term=word, bot_response=formatted_response)
-    return formatted_response
+
+    # 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. 數學式格式規範：
-   - 所有數學式都必須使用 $$...$$
-   - 對數表示：$$\\log_b(x)$$
-   - 變數：$$x$$, $$y$$, $$a$$, $$b$$
-   - 數字：$$1$$, $$2$$, $$3$$
-   - 不要使用單個 $ 符號
-   - 所有數學符號都要用 LaTeX 格式
-
-2. 對數的特別注意事項：
-   - 正確格式：$$\\log_b(x)$$
-   - 底數是 b 時：$$\\log_b$$
-   - 底數是 2 時：$$\\log_2$$
-   - 底數是 e 時：$$\\ln$$
-
-3. 回應格式（每項使用 <br> 分隔）：
-1. 英文例句：[包含完整的數學符號]<br>
-2. 中文翻譯：[包含完整的數學符號]<br>
-3. 句子解釋：[包含完整的數學符號]<br>
-4. Sentence Explanation：[包含完整的數學符號]<br>"""
+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",
@@ -207,34 +175,32 @@ def generate_example(name, word):
         stream=False
     )
     response = completion.choices[0].message.content
-    formatted_response = format_math_response(response)
-    log_to_notion(name=name, chinese_term=word, bot_response=formatted_response)
-    return formatted_response
+
+    # 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. 數學式格式規範：
-   - 所有數學式都必須使用 $$...$$
-   - 對數表示：$$\\log_b(x)$$
-   - 變數：$$x$$, $$y$$, $$a$$, $$b$$
-   - 數字：$$1$$, $$2$$, $$3$$
-   - 不要使用單個 $ 符號
-   - 所有數學符號都要用 LaTeX 格式
-
-2. 對數的特別注意事項：
-   - 正確格式：$$\\log_b(x)$$
-   - 底數是 b 時：$$\\log_b$$
-   - 底數是 2 時：$$\\log_2$$
-   - 底數是 e 時：$$\\ln$$
-
-3. 格式要求：
-   - 用 <br> 分隔不同段落
-   - 數學式必須與文字在同一行
-   - 每個步驟的說明文字和數學式都要在同一行"""
+            "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$$。"""
         }
     ]
 
@@ -253,18 +219,22 @@ def chat_response(name, message, chat_history):
         stream=False
     )
     response = completion.choices[0].message.content
-    formatted_response = format_math_response(response)
-    log_to_notion(name=name, user_input=message, bot_response=formatted_response)
-    return formatted_response
+
+    # 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...",
@@ -321,4 +291,4 @@ with gr.Blocks(css=custom_css) as demo:
         msg.submit(respond, [name_input, msg, chatbot], [msg, chatbot])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()