Update app.py

app.py

@@ -38,14 +38,16 @@ def respond(
         yield response
 
 
-# Gradio Interface with UI Customization
+# Gradio Interface with UI Enhancements and Effects
 with gr.Blocks(theme="soft") as demo:
     gr.HTML(
         """
-        <div style="background-color: #f0f4ff; padding: 10px; border-radius: 10px; text-align: center;">
-            <h1 style="color: #4a90e2;">AI Chat Interface</h1>
-            <p style="font-size: 16px; color: #4a4a4a;">
-                Powered by Hugging Face's Zephyr-7B model. Customize your system message and parameters for a tailored chat experience.
+        <div style="background: linear-gradient(135deg, #4a90e2, #6fc3df); 
+                    padding: 20px; border-radius: 10px; text-align: center; 
+                    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); animation: fadeIn 2s;">
+            <h1 style="color: white; font-size: 36px;">AI Chat Interface</h1>
+            <p style="font-size: 18px; color: white;">
+                Powered by Hugging Face's Zephyr-7B model. Customize parameters for a tailored chat experience.
             </p>
         </div>
         """
@@ -86,7 +88,8 @@ with gr.Blocks(theme="soft") as demo:
         with gr.Column(scale=1):
             gr.HTML(
                 """
-                <div style="background-color: #eaf4f4; padding: 15px; border-radius: 10px;">
+                <div style="background: #eaf4f4; padding: 15px; border-radius: 10px; 
+                            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); animation: slideIn 1.5s;">
                     <h3 style="color: #2c7873;">Tips for Better Interaction:</h3>
                     <ul style="font-size: 14px; color: #4a4a4a;">
                         <li>Provide clear and concise messages for optimal responses.</li>
@@ -97,21 +100,43 @@ with gr.Blocks(theme="soft") as demo:
                 """
             )
 
-    # Styling the background
+    # Styling the background and adding animations
     demo.css = """
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+    
+    @keyframes slideIn {
+        0% { transform: translateX(-50px); opacity: 0; }
+        100% { transform: translateX(0); opacity: 1; }
+    }
+    
     body {
-        background-color: #f9fafb;
+        background: linear-gradient(120deg, #f9fafb, #dfe8f0);
+        font-family: Arial, sans-serif;
     }
     .gr-textbox {
         border: 1px solid #e1e4e8;
         border-radius: 5px;
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+    }
+    .gr-textbox:hover {
+        transform: scale(1.02);
+        border-color: #6fc3df;
     }
     #system_message_box {
         border: 2px dashed #4a90e2;
         background-color: #f0f9ff;
+        transition: background-color 0.3s ease;
+    }
+    #system_message_box:hover {
+        background-color: #eaf6ff;
     }
     .gr-slider {
         background-color: #e9f7fc;
+        box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
     }
     """