Update app.py

app.py

@@ -111,11 +111,11 @@ def openrouter_chat(user_message, history, use_web_search):
     
     return history, ""
 
-# Enhanced CSS with gradient background and visual improvements
+# Clean and professional CSS
 custom_css = """
-/* Gradient background */
+/* Clean gradient background */
 .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: 100vh;
     padding: 20px;
 }
@@ -126,22 +126,22 @@ custom_css = """
     margin: 0 auto;
 }
 
-/* Chat container with glassmorphism effect */
+/* Chat container with subtle glassmorphism */
 #component-0 {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
-    border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    border-radius: 15px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
     padding: 20px;
 }
 
 /* Chatbot styling */
 .chatbot {
-    background: rgba(255, 255, 255, 0.9) !important;
-    border-radius: 15px !important;
-    border: none !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 12px !important;
+    border: 1px solid #e0e0e0 !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
 /* Message bubbles */
@@ -152,70 +152,64 @@ custom_css = """
 }
 
 .user {
-    background-color: #667eea !important;
+    background-color: #4a5568 !important;
     color: white !important;
     margin-left: 20% !important;
 }
 
 .bot {
-    background-color: #f0f0f0 !important;
-    color: #333 !important;
+    background-color: #f7fafc !important;
+    color: #2d3748 !important;
     margin-right: 20% !important;
+    border: 1px solid #e2e8f0 !important;
 }
 
 /* Input styling */
 .textbox {
-    border-radius: 10px !important;
-    border: 2px solid #667eea !important;
-    background: rgba(255, 255, 255, 0.95) !important;
+    border-radius: 8px !important;
+    border: 2px solid #e2e8f0 !important;
+    background: white !important;
     font-size: 16px !important;
 }
 
 .textbox:focus {
-    border-color: #764ba2 !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
+    border-color: #4a5568 !important;
+    box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1) !important;
 }
 
 /* Checkbox styling */
 .checkbox-group {
     background: rgba(255, 255, 255, 0.8) !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     padding: 10px !important;
     margin: 10px 0 !important;
 }
 
 /* Button styling */
 button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    background: #4a5568 !important;
     color: white !important;
     border: none !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     padding: 10px 20px !important;
-    font-weight: bold !important;
-    transition: all 0.3s ease !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
 }
 
 button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+    background: #2d3748 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
 }
 
 /* Title styling */
 h1, h2 {
-    color: white !important;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
-}
-
-/* Markdown styling */
-.markdown-text {
-    color: white !important;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
+    color: #2d3748 !important;
 }
 
-/* Web search results styling */
-.message:has(.search-results) {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
-    border-left: 4px solid #ff6b6b !important;
+/* Remove excessive shadows and effects */
+* {
+    text-shadow: none !important;
 }
 
 /* Responsive design */
@@ -233,62 +227,49 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
     gr.Markdown(
         """
         <div style="text-align: center; padding: 20px;">
-            <h1 style="font-size: 3em; margin-bottom: 10px;">🦜🔗 AI Chat Assistant</h1>
-            <h2 style="font-size: 1.5em; opacity: 0.9;">Powered by Devstral-Small with Brave Search Integration</h2>
+            <h1 style="font-size: 2.5em; margin-bottom: 10px;">🤖 AI Chat Assistant</h1>
+            <p style="font-size: 1.1em; color: #718096;">Powered by Devstral with Web Search</p>
         </div>
         """,
         elem_id="header"
     )
     
+    chatbot = gr.Chatbot(
+        label="Chat History",
+        height=500,
+        elem_classes=["chatbot"],
+        bubble_full_width=False
+    )
+    
     with gr.Row():
-        with gr.Column(scale=4):
-            chatbot = gr.Chatbot(
-                label="💬 Chat History",
-                height=500,
-                elem_classes=["chatbot"],
-                bubble_full_width=False
-            )
-            
-            with gr.Row():
-                msg_in = gr.Textbox(
-                    placeholder="Type your question here… (Press Enter to send)",
-                    label="✍️ Your Message",
-                    scale=4,
-                    lines=2
-                )
-            
-            with gr.Row():
-                use_web_search = gr.Checkbox(
-                    label="🔍 Enable Web Search",
-                    value=True,
-                    info="Search the web for current information before answering"
-                )
-                clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
-        
-        with gr.Column(scale=1):
-            gr.Markdown(
-                """
-                ### 📋 Features
-                - 💬 Real-time chat with AI
-                - 🔍 Web search integration
-                - 📜 Conversation history
-                - 🎨 Beautiful gradient UI
-                
-                ### 🔧 Tips
-                - Enable web search for current events
-                - Ask follow-up questions
-                - Clear chat to start fresh
-                
-                ### ⚡ Shortcuts
-                - Enter: Send message
-                - Shift+Enter: New line
-                """,
-                elem_classes=["markdown-text"]
-            )
+        msg_in = gr.Textbox(
+            placeholder="Type your message here...",
+            label="Message",
+            scale=4,
+            lines=1
+        )
+        submit_btn = gr.Button("Send", scale=1, variant="primary")
+    
+    with gr.Row():
+        use_web_search = gr.Checkbox(
+            label="🔍 Enable Web Search",
+            value=True,
+            scale=2
+        )
+        clear_btn = gr.Button("Clear Chat", scale=1)
     
     # Event handlers
+    def submit_message(msg, history, search):
+        return openrouter_chat(msg, history, search)
+    
     msg_in.submit(
-        openrouter_chat, 
+        submit_message, 
+        inputs=[msg_in, chatbot, use_web_search], 
+        outputs=[chatbot, msg_in]
+    )
+    
+    submit_btn.click(
+        submit_message,
         inputs=[msg_in, chatbot, use_web_search], 
         outputs=[chatbot, msg_in]
     )
@@ -305,7 +286,7 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
             ["What are the current stock market trends?", True]
         ],
         inputs=[msg_in, use_web_search],
-        label="💡 Example Queries"
+        label="Example Queries"
     )
 
 demo.launch()