Update app.py

app.py

@@ -11,49 +11,70 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for styling
+# Custom CSS for styling with beautiful colors
 st.markdown("""
     <style>
         .stApp {
-            background-image: linear-gradient(to right, #f5f7fa, #c3cfe2);
+            background-image: linear-gradient(135deg, #f5f7fa 0%, #e4f0f8 100%);
         }
         .sidebar .sidebar-content {
-            background-image: linear-gradient(to bottom, #667eea, #764ba2);
+            background-image: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
             color: white;
         }
         .stTextInput>div>div>input {
             border-radius: 20px;
             padding: 10px 15px;
+            border: 1px solid #d1d5db;
         }
         .stButton>button {
             border-radius: 20px;
             padding: 10px 25px;
-            background-image: linear-gradient(to right, #667eea, #764ba2);
+            background-image: linear-gradient(to right, #6B73FF 0%, #000DFF 100%);
             color: white;
             border: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
         }
         .stButton>button:hover {
-            background-image: linear-gradient(to right, #764ba2, #667eea);
+            background-image: linear-gradient(to right, #000DFF 0%, #6B73FF 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .chat-container {
-            background-color: rgba(255, 255, 255, 0.9);
+            background-color: rgba(255, 255, 255, 0.95);
             border-radius: 15px;
             padding: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+            border: 1px solid #e5e7eb;
         }
         .title {
-            color: #4a4a4a;
+            color: #2d3748;
             text-align: center;
             margin-bottom: 30px;
+            font-weight: 600;
+        }
+        .stSelectbox>div>div>select {
+            border-radius: 12px;
+            padding: 8px 12px;
+        }
+        .stSlider>div>div>div>div {
+            background-color: #6B73FF;
+        }
+        .st-expander {
+            border-radius: 12px;
+            border: 1px solid #e5e7eb;
+        }
+        .stMarkdown h1 {
+            color: #2d3748;
         }
     </style>
 """, unsafe_allow_html=True)
 
 # Sidebar
 with st.sidebar:
-    st.title("🤖 Chatbot Settings")
+    st.title("⚙️ Chatbot Settings")
     st.markdown("""
-    ### About
+    ### ✨ About
     This is a ChatGPT-style chatbot powered by a fine-tuned LLM.
     """)
     
@@ -65,13 +86,13 @@ with st.sidebar:
     )
     
     # Advanced settings
-    with st.expander("Advanced Settings"):
+    with st.expander("🔧 Advanced Settings"):
         max_length = st.slider("Max response length", 50, 500, 100)
         temperature = st.slider("Temperature", 0.1, 1.0, 0.7)
         top_p = st.slider("Top-p", 0.1, 1.0, 0.9)
     
     st.markdown("---")
-    st.markdown("Built with ❤️ using [Streamlit](https://streamlit.io/) and [Hugging Face](https://huggingface.co/)")
+    st.markdown("🚀 Built with ❤️ using [Streamlit](https://streamlit.io/) and [Hugging Face](https://huggingface.co/)")
 
 # Initialize chat history
 if 'generated' not in st.session_state:
@@ -135,7 +156,7 @@ st.markdown("""
 chat_container = st.container()
 
 # Load model button
-if st.button("Load Model"):
+if st.button("🚀 Load Model"):
     with st.spinner(f"Loading {model_name}..."):
         st.session_state['model'], st.session_state['tokenizer'] = load_model(model_name)
     st.success(f"Model {model_name} loaded successfully!")
@@ -150,17 +171,17 @@ with chat_container:
 # User input
 with st.form(key='chat_form', clear_on_submit=True):
     user_input = st.text_input("You:", key='input', placeholder="Type your message here...")
-    submit_button = st.form_submit_button(label='Send')
+    submit_button = st.form_submit_button(label='Send ➤')
 
 if submit_button and user_input:
     if st.session_state['model'] is None or st.session_state['tokenizer'] is None:
-        st.warning("Please load the model first!")
+        st.warning("⚠️ Please load the model first!")
     else:
         # Add user message to chat history
         st.session_state['past'].append(user_input)
         
         # Generate response
-        with st.spinner("Thinking..."):
+        with st.spinner("🤔 Thinking..."):
             response = generate_response(user_input)
         
         # Add bot response to chat history