Update app.py

app.py

@@ -49,23 +49,32 @@ def translate_to_english(name, word):
 1. 英文翻譯：[列出數學相關的英文翻譯]
 
 2. 中文解釋：[用中文詳細解釋這個詞在數學上的意義]
-- 在解釋中的數學式要用 LaTeX 格式，例如：
-  若 $$b^y = x$$，則 $$y$$ 稱為 $$x$$ 以 $$b$$ 為底的對數，記為 $$\log_b x$$
+- 在解釋中的數學式要用 LaTeX 格式，並且確保數學式與文字在同一行
+- 正確範例：若 $$b^y = x$$，則 $$y$$ 稱為 $$x$$ 以 $$b$$ 為底的對數，記為 $$\log_b x$$
 - 變數請使用 $$x$$, $$y$$, $$a$$, $$b$$ 等格式
 - 運算符號請用 $$+$$, $$-$$, $$\times$$, $$\div$$ 等格式
+- 不要在數學式前後使用換行
+- 如果需要換行，確保完整的數學表達式在同一行
 
 3. English Explanation：[用英文重述上述中文解釋的內容]
 - 使用相同的 LaTeX 格式來表示數學式
 - 例如：If $$b^y = x$$, then $$y$$ is called the logarithm of $$x$$ with base $$b$$, denoted as $$\log_b x$$
+- 保持數學式與周圍文字在同一行
 
 4. 數學使用場景：[說明在哪些數學情境會使用到這個詞]
-- 包含具體的數學公式例子
-- 例如：換底公式 $$\log_a x = \frac{\log_c x}{\log_c a}$$
+- 包含具體的數學公式例子，確保公式與文字在同一行
+- 例如：換底公式為 $$\log_a x = \frac{\log_c x}{\log_c a}$$，這個公式在計算時很有用
 
 5. Mathematical Context：[用英文重述使用場景]
 - 保持相同的 LaTeX 數學式格式
+- 確保公式與文字的連續性
 
-注意：所有數學符號、變數和公式都必須用 $$...$$ 包覆，以確保正確渲染。"""
+格式注意事項：
+1. 所有數學符號、變數和公式都必須用 $$...$$ 包覆
+2. 數學式不應該單獨佔一行，應該與說明文字在同一行
+3. 避免在數學式前後使用換行符
+4. 較長的句子可以換行，但要確保每個數學式都完整地在同一行內
+5. 如果有公式推導，相關的公式應該保持在同一行"""
         },
         {
             "role": "user",
@@ -94,25 +103,29 @@ def generate_example(name, word):
             "content": """你是一個數學教師。請按照以下格式提供例句：
 
 1. 英文例句：[寫出一個數學相關的英文例句]
-- 數學公式必須用 $$...$$ 包覆
-- 例如：The solution to the equation $$\log_2 x = 3$$ is $$x = 8$$
+- 數學公式必須用 $$...$$ 包覆，並與文字在同一行
+- 例如：The equation $$\log_2 x = 3$$ has the solution $$x = 8$$
 
 2. 中文翻譯：[該例句的中文翻譯]
 - 保持相同的 LaTeX 數學式格式
+- 確保數學式與文字在同一行
 - 例如：方程式 $$\log_2 x = 3$$ 的解為 $$x = 8$$
 
 3. 句子解釋：[用中文解釋這個例句中的數學概念]
-- 所有數學符號和公式都需要用 LaTeX 格式
-- 例如：當 $$x = 8$$ 時，$$2^3 = 8$$，所以 $$\log_2 8 = 3$$
+- 所有數學符號和公式都需要用 LaTeX 格式，並與文字在同一行
+- 例如：因為 $$2^3 = 8$$，所以我們可以說 $$\log_2 8 = 3$$
 
 4. Sentence Explanation：[用英文重述上述解釋]
 - 保持相同的 LaTeX 數學式格式
+- 確保所有數學式與文字在同一行
 
-注意：
+注意事項：
 1. 所有數學符號、變數和公式都必須用 $$...$$ 包覆
-2. 使用 $$\times$$ 代替 * 號
-3. 使用 $$\div$$ 代替 / 號
-4. 分數使用 $$\frac{分子}{分母}$$ 格式"""
+2. 數學式必須與說明文字在同一行，不能單獨成行
+3. 使用 $$\times$$ 代替 * 號
+4. 使用 $$\div$$ 代替 / 號
+5. 分數使用 $$\frac{分子}{分母}$$ 格式
+6. 避免在數學式前後使用換行"""
         },
         {
             "role": "user",
@@ -141,13 +154,17 @@ def chat_response(name, message, chat_history):
             "content": """你是一個高中數學老師，使用的語言是英文。學生用中文問妳任何字彙，你都可以告訴他那個中文對應的英文和例句，以及在數學上的可能用法以及數學例題和解法。
 說明數學上的可能用法時，先用中文講一遍再用B1程度的英文複述一遍。
 
-注意：
+格式要求：
 1. 所有數學公式都要用 LaTeX 格式書寫（使用 $$...$$ 符號包覆）
-2. 變數使用 $$x$$, $$y$$, $$a$$, $$b$$ 等格式
-3. 運算符號使用 $$+$$, $$-$$, $$\times$$, $$\div$$ 等格式
-4. 分數使用 $$\frac{分子}{分母}$$ 格式
-5. 示範解題時，每個步驟都要清楚標示，並搭配 LaTeX 數學式
-6. 回答要有條理，適時使用換行來分隔不同段落"""
+2. 數學式必須與文字在同一行，不能單獨成行
+3. 變數使用 $$x$$, $$y$$, $$a$$, $$b$$ 等格式
+4. 運算符號使用 $$+$$, $$-$$, $$\times$$, $$\div$$ 等格式
+5. 分數使用 $$\frac{分子}{分母}$$ 格式
+6. 示範解題時：
+   - 每個步驟的說明文字和數學式要在同一行
+   - 不要在數學式前後使用換行
+   - 確保完整的數學表達式在同一行內
+7. 回答要有條理，適時使用換行來分隔不同段落，但確保每個段落中的數學式不被斷開"""
         }
     ]
 
@@ -181,13 +198,15 @@ def respond(name, message, history):
 custom_css = """
 .math-container .katex { 
     font-size: 1.1em;
+    white-space: normal;
 }
 .input-box {
     font-size: 1.1em;
 }
 .output-box {
     font-size: 1.1em;
-    line-height: 1.5;
+    line-height: 1.6;
+    white-space: pre-line;
 }
 .title {
     text-align: center;
@@ -210,6 +229,13 @@ custom_css = """
 .bot-message {
     background-color: #edf2f7;
 }
+.contains-math {
+    white-space: normal !important;
+}
+.math-inline {
+    display: inline-block;
+    margin: 0 0.2em;
+}
 """
 
 # Create Gradio interface
@@ -240,7 +266,7 @@ with gr.Blocks(css=custom_css) as demo:
         output_text = gr.Markdown(
             label="翻譯結果 | Translation Result",
             value="翻譯結果將在這裡顯示... | Translation results will be displayed here...",
-            elem_classes=["output-box", "math-container"]
+            elem_classes=["output-box", "math-container", "contains-math"]
         )
 
         translate_btn.click(translate_to_english, inputs=[name_input, word_input], outputs=output_text)
@@ -252,7 +278,7 @@ with gr.Blocks(css=custom_css) as demo:
             elem_id="chatbot",
             bubble_full_width=False,
             avatar_images=("👨‍🎓", "👨‍🏫"),
-            elem_classes=["math-container"]
+            elem_classes=["math-container", "contains-math"]
         )
 
         msg = gr.Textbox(