Update app.py

app.py

@@ -28,16 +28,13 @@ If the following pieces provide some information, combine it with your existing
 Include relevant details such as home remedies, medications, and other necessary actions in a clear, point-wise manner for quick readability.
 If any other related questions arise, just say, "I am a healthcare professional.How may i assist you today?"
 If you don't know the answer, just say that you don't know. Don't try to make up an answer.
-
 Context: {context}
 Question: {question}
-
 Only return the helpful answer below and nothing else.
 Helpful answer:
 """
 
 def generate_response(question):
-
     retriever = faiss_index.as_retriever(search_kwargs={'k': 1})
     docs = retriever.get_relevant_documents(question)
     context = "\n".join([doc.page_content for doc in docs])
@@ -53,13 +50,73 @@ def generate_response(question):
     return response.content
 
 st.set_page_config(page_title="HealthCare ChatBot", page_icon="🤖", layout="centered")
-st.header("HealthCare ChatBot 🤖")
 
-user_input = st.text_input("Ask a Healthcare related question:", "")
-st.button("Generate Response")
-st.spinner('Processing')
+st.markdown("""
+    <style>
+        body {
+            background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
+            font-family: 'Poppins', sans-serif;
+        }
+        .main-title {
+            text-align: center;
+            font-size: 38px;
+            font-weight: 700;
+            color: #2C3E50;
+            margin-top: 10px;
+        }
+        .sub-title {
+            text-align: center;
+            font-size: 16px;
+            color: #5D6D7E;
+            margin-bottom: 30px;
+        }
+        .stTextInput > div > div > input {
+            border: 2px solid #9C27B0;
+            border-radius: 12px;
+            padding: 10px;
+        }
+        .response-box {
+            background-color: #FFFFFF;
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0px 2px 10px rgba(0,0,0,0.1);
+            color: #333333;
+            line-height: 1.6;
+        }
+        .footer {
+            text-align: center;
+            font-size: 13px;
+            color: #777;
+            margin-top: 40px;
+        }
+        .stButton>button {
+            background: linear-gradient(90deg, #6A1B9A, #8E24AA);
+            color: white;
+            border-radius: 10px;
+            font-weight: 600;
+            padding: 0.6rem 1.2rem;
+            border: none;
+            transition: 0.3s;
+        }
+        .stButton>button:hover {
+            background: linear-gradient(90deg, #8E24AA, #AB47BC);
+            transform: scale(1.05);
+        }
+    </style>
+""", unsafe_allow_html=True)
+
+st.markdown('<div class="main-title">🩺 HealthCare ChatBot</div>', unsafe_allow_html=True)
+st.markdown('<div class="sub-title">An AI-powered health assistant</div>', unsafe_allow_html=True)
+
+user_input = st.text_input("💬 Ask a healthcare-related question below:", "")
+
+col1, col2, col3 = st.columns([1, 2, 1])
+with col2:
+    generate_clicked = st.button("🚀 Generate Response")
 
-if user_input:
-    user_input = user_input.lower().strip()
-    response = generate_response(user_input)
-    st.write(f"Response: {response}")
+if generate_clicked and user_input:
+    with st.spinner('🔍 Analyzing your question...'):
+        response = generate_response(user_input.lower().strip())
+    st.markdown('<div class="response-box">', unsafe_allow_html=True)
+    st.write(f"**Response:** {response}")
+    st.markdown('</div>', unsafe_allow_html=True)