Update app.py

app.py

@@ -371,146 +371,121 @@ I'm here to help and chat! What would you like to do? 💙"""
 
 **What would you like to try first? 🚀**"""
 
+# Define custom CSS as a global variable
+CUSTOM_CSS = """
+<style>
+    /* Modern gradient background */
+    .gradio-container {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+    }
+    
+    /* Header styling */
+    .animated-title {
+        text-align: center;
+        animation: fadeInDown 0.8s ease-out;
+        padding: 20px;
+    }
+    
+    @keyframes fadeInDown {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    /* Feature cards */
+    .feature-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 15px;
+        margin: 20px 0;
+        padding: 0 20px;
+    }
+    
+    .feature-card {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white;
+        padding: 15px;
+        border-radius: 15px;
+        text-align: center;
+        font-weight: bold;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    
+    .feature-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+    }
+    
+    /* Input field styling */
+    textarea {
+        border: 2px solid #667eea !important;
+        border-radius: 25px !important;
+        padding: 12px 20px !important;
+        font-size: 16px !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    textarea:focus {
+        border-color: #764ba2 !important;
+        box-shadow: 0 0 10px rgba(118, 75, 162, 0.3) !important;
+        outline: none !important;
+    }
+    
+    /* Button styling */
+    button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        border: none !important;
+        border-radius: 25px !important;
+        padding: 10px 25px !important;
+        color: white !important;
+        font-weight: bold !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    button:hover {
+        transform: scale(1.05) !important;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+    }
+    
+    /* Footer styling */
+    .modern-footer {
+        text-align: center;
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 15px;
+        color: white;
+        margin-top: 20px;
+    }
+</style>
+"""
+
 # Modern UI with custom styling
 def create_chatbot():
     """Create a beautiful modern UI for the chatbot"""
     
     bot = ModernChatbot()
     
-    # Custom CSS for modern look
-    custom_css = """
-    <style>
-        /* Modern gradient background */
-        .gradio-container {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-        }
-        
-        /* Modern card design */
-        .main-container {
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            padding: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            margin: 20px;
-        }
-        
-        /* Header styling */
-        .gradio-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 15px;
-            padding: 20px;
-            margin-bottom: 20px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-        }
-        
-        /* Animated title */
-        .animated-title {
-            text-align: center;
-            animation: fadeInDown 0.8s ease-out;
-        }
-        
-        @keyframes fadeInDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        
-        /* Feature cards */
-        .feature-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-            gap: 15px;
-            margin: 20px 0;
-        }
-        
-        .feature-card {
-            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            color: white;
-            padding: 15px;
-            border-radius: 15px;
-            text-align: center;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-        }
-        
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
-        }
-        
-        /* Chat message styling */
-        .message-container {
-            border-radius: 15px;
-            padding: 20px;
-            margin-bottom: 15px;
-        }
-        
-        /* Input field styling */
-        textarea {
-            border: 2px solid #667eea !important;
-            border-radius: 25px !important;
-            padding: 12px 20px !important;
-            font-size: 16px !important;
-            transition: all 0.3s ease !important;
-        }
-        
-        textarea:focus {
-            border-color: #764ba2 !important;
-            box-shadow: 0 0 10px rgba(118, 75, 162, 0.3) !important;
-            outline: none !important;
-        }
-        
-        /* Button styling */
-        button {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-            border: none !important;
-            border-radius: 25px !important;
-            padding: 10px 25px !important;
-            color: white !important;
-            font-weight: bold !important;
-            transition: all 0.3s ease !important;
-        }
-        
-        button:hover {
-            transform: scale(1.05) !important;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
-        }
-        
-        /* Footer styling */
-        .modern-footer {
-            text-align: center;
-            padding: 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 15px;
-            color: white;
-            margin-top: 20px;
-        }
-    </style>
-    """
-    
     with gr.Blocks(title="🤖 Nova AI - Smart Rule-Based Chatbot") as demo:
         
         # Header Section
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("""
-                <div class="animated-title">
-                    <h1 style="font-size: 3em; margin-bottom: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-                        🤖 Nova AI Assistant
-                    </h1>
-                    <p style="font-size: 1.2em; color: #667eea; margin-top: 5px;">
-                        Intelligent Conversations | Instant Responses | Always Here for You
-                    </p>
-                </div>
-                """)
+        gr.HTML("""
+        <div class="animated-title">
+            <h1 style="font-size: 3em; margin-bottom: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                🤖 Nova AI Assistant
+            </h1>
+            <p style="font-size: 1.2em; color: #667eea; margin-top: 5px;">
+                Intelligent Conversations | Instant Responses | Always Here for You
+            </p>
+        </div>
+        """)
         
         # Quick Feature Cards
         gr.HTML("""
@@ -525,56 +500,48 @@ def create_chatbot():
         """)
         
         # Main Chat Interface
-        with gr.Row():
-            with gr.Column(scale=12):
-                chatbot_interface = gr.ChatInterface(
-                    fn=bot.process_message,
-                    title="💬 Chat with Nova",
-                    description="""
-                    ✨ **Modern AI Assistant** - I understand natural language and respond intelligently!
-                    
-                    💡 **Pro Tip:** Type **'help'** to see all commands | Say **'bye'** to end conversation
-                    """,
-                    examples=[
-                        ["hello 👋"],
-                        ["My name is Sarah"],
-                        ["how are you?"],
-                        ["tell me a joke 😂"],
-                        ["I'm feeling sad today 💙"],
-                        ["recommend an action movie 🎬"],
-                        ["I'm hungry for italian food 🍕"],
-                        ["motivate me please 💪"],
-                        ["what can you do?"],
-                        ["help 📚"],
-                        ["bye 👋"]
-                    ]
-                )
-        
-        # Status and Footer
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("""
-                ---
-                """)
-                
-                gr.HTML("""
-                <div class="modern-footer">
-                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
-                        <div>
-                            <strong>🤖 Nova AI</strong> | Rule-Based Chatbot
-                        </div>
-                        <div>
-                            🐍 Python | ⚡ Gradio | 🎨 Modern UI
-                        </div>
-                        <div>
-                            💡 Built with ❤️ for Great Conversations
-                        </div>
-                    </div>
-                    <div style="margin-top: 15px; font-size: 0.9em;">
-                        ✨ The conversation continues until you type <strong>'bye'</strong> | I remember your name during our chat ✨
-                    </div>
+        gr.ChatInterface(
+            fn=bot.process_message,
+            title="💬 Chat with Nova",
+            description="""
+            ✨ **Modern AI Assistant** - I understand natural language and respond intelligently!
+            
+            💡 **Pro Tip:** Type **'help'** to see all commands | Say **'bye'** to end conversation
+            """,
+            examples=[
+                ["hello 👋"],
+                ["My name is Sarah"],
+                ["how are you?"],
+                ["tell me a joke 😂"],
+                ["I'm feeling sad today 💙"],
+                ["recommend an action movie 🎬"],
+                ["I'm hungry for italian food 🍕"],
+                ["motivate me please 💪"],
+                ["what can you do?"],
+                ["help 📚"],
+                ["bye 👋"]
+            ]
+        )
+        
+        # Footer
+        gr.HTML("""
+        <div class="modern-footer">
+            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+                <div>
+                    <strong>🤖 Nova AI</strong> | Rule-Based Chatbot
+                </div>
+                <div>
+                    🐍 Python | ⚡ Gradio | 🎨 Modern UI
                 </div>
-                """)
+                <div>
+                    💡 Built with ❤️ for Great Conversations
+                </div>
+            </div>
+            <div style="margin-top: 15px; font-size: 0.9em;">
+                ✨ The conversation continues until you type <strong>'bye'</strong> | I remember your name during our chat ✨
+            </div>
+        </div>
+        """)
         
         # JavaScript for feature card clicks
         gr.HTML("""
@@ -591,37 +558,30 @@ def create_chatbot():
                 const inputEvent = new Event('input', { bubbles: true });
                 inputField.dispatchEvent(inputEvent);
                 
-                // Find and click the send button (usually the last button)
+                // Find and click the send button
                 const buttons = document.querySelectorAll('button');
                 const sendButtons = Array.from(buttons).filter(btn => 
                     btn.textContent.includes('Send') || 
                     btn.textContent.includes('Submit') ||
-                    btn.querySelector('svg') // Icon button
+                    btn.querySelector('svg')
                 );
                 
                 if (sendButtons.length > 0) {
-                    // Click the last send button
                     sendButtons[sendButtons.length - 1].click();
                 }
             }
         }
-        
-        // Add CSS for feature cards
-        const style = document.createElement('style');
-        style.textContent = `
-            .feature-card {
-                cursor: pointer;
-                user-select: none;
-            }
-        `;
-        document.head.appendChild(style);
         </script>
         """)
     
-    # Apply theme and CSS in launch
     return demo
 
 # Launch the app
 if __name__ == "__main__":
     demo = create_chatbot()
-    demo.launch(share=True, theme=gr.themes.Soft(primary_hue="purple", secondary_hue="pink"), css=custom_css)
+    # Apply theme and CSS in launch
+    demo.launch(
+        share=True,
+        theme=gr.themes.Soft(primary_hue="purple", secondary_hue="pink"),
+        css=CUSTOM_CSS
+    )