Update app.py

app.py

@@ -2,218 +2,13 @@ import gradio as gr
 import requests
 from html import escape
 import re
-from typing import List, Dict
-import time
+from typing import List, Tuple
 
 # API configuration
 API_URL = "https://aham2api-3.onrender.com/v1/chat/completions"
 MODELS_URL = "https://aham2api-3.onrender.com/v1/models"
 
-# Modern CSS with dark/light mode support
-css = """
-:root {
-    --primary: #6366f1;
-    --primary-dark: #4f46e5;
-    --bg-color: #ffffff;
-    --text-color: #111827;
-    --card-bg: #f9fafb;
-    --border-color: #e5e7eb;
-    --user-bubble: #e0e7ff;
-    --bot-bubble: #f3f4f6;
-    --latex-bg: #f8f9fa;
-    --error-color: #ef4444;
-}
-
-.dark {
-    --bg-color: #1f2937;
-    --text-color: #f9fafb;
-    --card-bg: #374151;
-    --border-color: #4b5563;
-    --user-bubble: #4338ca;
-    --bot-bubble: #4b5563;
-    --latex-bg: #1e293b;
-    --error-color: #f87171;
-}
-
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto;
-    background: var(--bg-color) !important;
-    color: var(--text-color) !important;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-}
-
-.app-header {
-    text-align: center;
-    padding: 1rem 0;
-    border-bottom: 1px solid var(--border-color);
-    margin-bottom: 1.5rem;
-}
-
-.app-title {
-    font-size: 1.8rem;
-    font-weight: 700;
-    margin: 0;
-    color: var(--primary);
-}
-
-.app-subtitle {
-    font-size: 0.9rem;
-    opacity: 0.8;
-    margin-top: 0.5rem;
-}
-
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    height: 75vh;
-    gap: 0;
-    background: var(--card-bg);
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
-    overflow: hidden;
-}
-
-.chatbot {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    scroll-behavior: smooth;
-}
-
-.chat-controls {
-    padding: 1rem;
-    background: var(--card-bg);
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
-}
-
-.message {
-    padding: 0.75rem 1rem;
-    border-radius: 12px;
-    margin-bottom: 0.75rem;
-    max-width: 85%;
-    line-height: 1.6;
-    font-size: 1rem;
-    animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.user-message {
-    background: var(--user-bubble);
-    margin-left: auto;
-    border-bottom-right-radius: 4px;
-    color: var(--text-color);
-}
-
-.bot-message {
-    background: var(--bot-bubble);
-    margin-right: auto;
-    border-bottom-left-radius: 4px;
-    color: var(--text-color);
-}
-
-.message-content {
-    overflow-wrap: anywhere;
-}
-
-.latex-block {
-    background: var(--latex-bg);
-    padding: 1rem;
-    margin: 1rem 0;
-    border-radius: 8px;
-    overflow-x: auto;
-    font-family: 'CMU Serif', 'Latin Modern', serif;
-}
-
-.latex-inline {
-    background: var(--latex-bg);
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
-    font-family: 'CMU Serif', 'Latin Modern', serif;
-}
-
-.model-selector {
-    flex: 1;
-    max-width: 300px;
-}
-
-.text-input {
-    flex: 3;
-}
-
-.send-button {
-    flex: 0.5;
-    max-width: 100px;
-}
-
-.clear-button {
-    flex: 0.5;
-    max-width: 100px;
-}
-
-.toggle-container {
-    display: flex;
-    justify-content: flex-end;
-    padding: 0.5rem 1.5rem;
-}
-
-.error-message {
-    color: var(--error-color);
-    font-size: 0.9rem;
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    background-color: rgba(239, 68, 68, 0.1);
-    margin-top: 0.5rem;
-}
-
-.typing-indicator {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.5rem 1rem;
-    background: var(--bot-bubble);
-    border-radius: 12px;
-}
-
-.typing-dot {
-    width: 8px;
-    height: 8px;
-    background: var(--text-color);
-    border-radius: 50%;
-    opacity: 0.4;
-    animation: typingAnimation 1.4s infinite ease-in-out;
-}
-
-.typing-dot:nth-child(1) { animation-delay: 0s; }
-.typing-dot:nth-child(2) { animation-delay: 0.2s; }
-.typing-dot:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typingAnimation {
-    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
-    30% { transform: translateY(-5px); opacity: 1; }
-}
-
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 0 1rem !important;
-    }
-    .chat-controls {
-        flex-direction: column;
-    }
-    .model-selector, .text-input, .send-button, .clear-button {
-        max-width: 100% !important;
-        width: 100%;
-    }
-}
-"""
-
+# Function to get available models
 def get_available_models() -> List[str]:
     try:
         response = requests.get(MODELS_URL, timeout=10)
@@ -223,7 +18,8 @@ def get_available_models() -> List[str]:
     except Exception:
         return ["samura-gpt-4o", "samura-claude-3-5-sonnet"]
 
-def chat_completion(messages: List[Dict], model: str) -> Dict:
+# Function to handle chatbot responses
+def chat_completion(messages: List[dict], model: str) -> dict:
     headers = {"Content-Type": "application/json"}
     data = {
         "model": model,
@@ -238,168 +34,129 @@ def chat_completion(messages: List[Dict], model: str) -> Dict:
     except Exception as e:
         return {"error": str(e)}
 
+# Function to format messages
 def format_message(text: str) -> str:
     text = escape(text)
-    # Enhanced LaTeX processing with proper HTML escaping
-    text = re.sub(r'(?<!\\)\$(.*?)(?<!\\)\$', r'<span class="latex-inline">\(\1\)</span>', text)
-    text = re.sub(r'(?<!\\)\$\$(.*?)(?<!\\)\$\$', r'<div class="latex-block">\[\1\]</div>', text, flags=re.DOTALL)
-    # Handle code blocks
+    text = re.sub(r'(?<!\\$(.*?)(?<!\\$', r'<span class="latex-inline">\1</span>', text)
+    text = re.sub(r'(?<!\\$\$(.*?)(?<!\\$\$', r'<div class="latex-block">\1</div>', text, flags=re.DOTALL)
     text = re.sub(r'```(.*?)\n(.*?)```', r'<pre><code class="\1">\2</code></pre>', text, flags=re.DOTALL)
-    # Handle bold and italic
     text = re.sub(r'\*\*(.*?)\*\*', r'<strong>\1</strong>', text)
     text = re.sub(r'\*(.*?)\*', r'<em>\1</em>', text)
     return text.replace("\n", "<br>")
 
+# Typing indicator function
 def create_typing_indicator():
-    return {
-        "role": "assistant",
-        "content": """
-        <div class="typing-indicator">
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-            <div class="typing-dot"></div>
-        </div>
-        """
-    }
-
-def convert_to_openai_format(chat_history: List[List[str]]) -> List[Dict]:
-    messages = []
-    for turn in chat_history:
-        if turn[0]:  # User message
-            clean_msg = re.sub('<[^<]+?>', '', turn[0]).replace("<br>", "\n")
-            messages.append({"role": "user", "content": clean_msg})
-        if turn[1] and "typing-indicator" not in turn[1]:  # Bot message (not typing indicator)
-            clean_msg = re.sub('<[^<]+?>', '', turn[1]).replace("<br>", "\n")
-            messages.append({"role": "assistant", "content": clean_msg})
-    return messages
-
-def respond(message: str, chat_history: List[List[str]], model: str):
+    return """
+    <div class="typing-indicator">
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+        <div class="typing-dot"></div>
+    </div>
+    """
+
+# Main function to handle chat messages
+def respond(message: str, chat_history: List[Tuple[str, str]], model: str, theme: str):
     if not message.strip():
-        yield chat_history, ""
+        return chat_history, ""
     
-    # Add user message
     user_message_html = format_message(message)
-    chat_history.append([user_message_html, None])
+    chat_history.append((user_message_html, ""))
     
-    # Add typing indicator
-    typing_msg = create_typing_indicator()
-    chat_history.append([None, typing_msg["content"]])
+    chat_history.append((None, create_typing_indicator()))
     yield chat_history, ""
     
-    # Prepare API messages
-    messages = convert_to_openai_format(chat_history[:-1])  # Exclude typing indicator
+    messages = []
+    for user_msg, bot_msg in chat_history[:-2]:  
+        if user_msg:
+            clean_msg = re.sub('<[^<]+?>', '', user_msg).replace("<br>", "\n")
+            messages.append({"role": "user", "content": clean_msg})
+        if bot_msg and "typing-indicator" not in bot_msg:
+            clean_msg = re.sub('<[^<]+?>', '', bot_msg).replace("<br>", "\n")
+            messages.append({"role": "assistant", "content": clean_msg})
     messages.append({"role": "user", "content": message})
     
-    # Get response
     response = chat_completion(messages, model)
     
-    # Remove typing indicator
     chat_history.pop()
     
     if "error" in response:
         error_message = f"<div class='error-message'>API Error: {response['error']}</div>"
-        chat_history[-1][1] = error_message
+        chat_history[-1] = (chat_history[-1][0], error_message)
     else:
         bot_message = response.get("choices", [{}])[0].get("message", {}).get("content", "No response")
-        chat_history[-1][1] = format_message(bot_message)
+        chat_history[-1] = (chat_history[-1][0], format_message(bot_message))
     
-    yield chat_history, ""
+    return chat_history, ""
 
+# Function to toggle theme
 def toggle_theme(theme: str):
     return gr.themes.Default() if theme == "light" else gr.themes.Dark()
 
-with gr.Blocks(css=css, theme=gr.themes.Default()) as app:
-    # Header section
-    with gr.Column(elem_classes=["app-header"]):
-        gr.Markdown("""<h1 class="app-title">MathGenius AI</h1>""")
-        gr.Markdown("""<p class="app-subtitle">Advanced mathematical reasoning with LaTeX support</p>""")
+# Gradio app layout
+with gr.Blocks(theme=gr.themes.Default()) as app:
+    theme_state = gr.State("light")
+    
+    with gr.Column():
+        gr.Markdown("<h1>MathGenius AI</h1>")
+        gr.Markdown("<p>Advanced mathematical reasoning with LaTeX support</p>")
     
-    # Theme toggle
-    with gr.Row(elem_classes=["toggle-container"]):
+    with gr.Row():
         theme_toggle = gr.Radio(
             ["light", "dark"],
             value="light",
             label="Theme",
             interactive=True,
-            show_label=False,
-            elem_id="theme-toggle"
+            show_label=False
         )
     
-    # Main chat area
-    with gr.Column(elem_classes=["chat-container"]):
+    with gr.Column():
         chatbot = gr.Chatbot(
             elem_id="chatbot",
             show_label=False,
-            avatar_images=(None, None),
-            height="100%",
-            render=False,
-            layout="panel"
+            type="messages",  # FIX: Use recommended OpenAI-style message format
+            height="100%"
         )
         
-        with gr.Row(elem_classes=["chat-controls"]):
+        with gr.Row():
             model_dropdown = gr.Dropdown(
                 choices=get_available_models(),
                 value="samura-gpt-4o",
                 label="Model",
-                interactive=True,
-                elem_classes=["model-selector"],
-                scale=1
+                interactive=True
             )
             
             msg = gr.Textbox(
-                placeholder="Type your math question or equation... (Shift+Enter for new line)",
+                placeholder="Type your math question...",
                 show_label=False,
                 lines=2,
-                max_lines=5,
-                elem_classes=["text-input"],
-                container=False,
-                scale=4
+                max_lines=5
             )
             
-            submit_btn = gr.Button(
-                "Send",
-                variant="primary",
-                elem_classes=["send-button"],
-                scale=1
-            )
-            
-            clear_btn = gr.ClearButton(
-                [msg, chatbot],
-                value="Clear",
-                elem_classes=["clear-button"],
-                scale=1
-            )
-    
-    # Event handlers
+            submit_btn = gr.Button("Send", variant="primary")
+            clear_btn = gr.ClearButton([msg, chatbot], value="Clear")
+
     msg.submit(
         respond,
-        [msg, chatbot, model_dropdown],
-        [chatbot, msg],
-        queue=True
-    ).then(
-        None,
-        None,
-        None,
-        _js="() => document.getElementById('chatbot').scrollTo(0, document.getElementById('chatbot').scrollHeight)"
+        [msg, chatbot, model_dropdown, theme_state],
+        [chatbot, msg]
     )
-    
+
     submit_btn.click(
         respond,
-        [msg, chatbot, model_dropdown],
-        [chatbot, msg],
-        queue=True
-    ).then(
-        None,
-        None,
-        None,
-        _js="() => document.getElementById('chatbot').scrollTo(0, document.getElementById('chatbot').scrollHeight)"
+        [msg, chatbot, model_dropdown, theme_state],
+        [chatbot, msg]
     )
-    
+
+    # FIX: Properly pass `inputs` as a list
     theme_toggle.change(
+        toggle_theme, 
+        [theme_toggle],  # Ensure inputs are in a list
+        None
+    ).then(
+        None,
         None,
-        theme_toggle,
         None,
-        _js="(theme) => document.body.className = theme"
+        js="(theme) => document.body.className = theme"
     )
 
 if __name__ == "__main__":