Update app.py

app.py

@@ -72,9 +72,8 @@ Question:
     return groq_query(prompt)
 
 # =========================================
-# Redesigned Gradio UI (Fixed & Responsive)
+# Redesigned Gradio UI (Fixed Version)
 # =========================================
-import gradio as gr
 
 # Sample mock questions from your HOD messages
 mock_questions = [
@@ -90,11 +89,11 @@ mock_questions = [
     "Who leads the Languages and Cultural Studies Department?"
 ]
 
-# Callback for mock question buttons
+# Function to set a mock question into the textbox
 def set_question(q_text, txt_box):
     return txt_box.update(value=q_text)
 
-# Callback for sending question to chatbot
+# Function to send question to chatbot
 def respond(message, history):
     if not history:
         history = []
@@ -109,40 +108,50 @@ def respond(message, history):
     return history, ""  # update chat and clear input
 
 with gr.Blocks() as demo:
-    # Top-centered title
-    gr.Markdown("<h1 style='text-align:center; color:#2c3e50;'>🎓 Baltistan Academic Assistant</h1>")
+    # App Title (centered)
+    gr.Markdown(
+        "<h1 style='text-align: center; color: #2c3e50;'>🎓 Baltistan Academic Assistant</h1>"
+    )
 
-    # Paragraph about the application
+    # Description (centered using HTML tags inside Markdown)
     gr.Markdown(
         """
-        Welcome to the Baltistan Academic Assistant! This AI-powered chatbot is built to help students, faculty, and visitors access messages, updates, and academic guidance from all department heads of the University of Baltistan.  
-        The information is sourced from the official university website and compiled to provide accurate answers to your questions about courses, faculty, research, and departmental objectives.
-        """,
-        elem_id="description",
-        style={"text-align": "center", "color": "#34495e"}
+        <div style="text-align:center; color:#34495e; font-size:15px; max-width:900px; margin:auto;">
+        Welcome to the Baltistan Academic Assistant! This AI-based chatbot helps students, faculty, and visitors
+        find official messages and guidance from all department heads of the University of Baltistan.  
+        🧠 It answers questions **strictly based on the official head messages** collected from the university website.
+        </div>
+        """
     )
 
     # Main layout: sidebar + chatbot
     with gr.Row():
-        # Left: Sidebar with mock questions
+        # Left sidebar with mock questions
         with gr.Column(scale=1):
             gr.Markdown("### 💡 Sample Questions")
             
             # The textbox will be shared with buttons
             user_input = gr.Textbox(placeholder="Type your question here...", lines=2)
-            
+
             # Create buttons for each mock question
             for q in mock_questions:
                 gr.Button(q, elem_classes="mock-btn").click(
-                    set_question, inputs=[gr.State(q), user_input], outputs=user_input
+                    set_question,
+                    inputs=[gr.State(q), user_input],
+                    outputs=user_input
                 )
 
-        # Right: Chatbot
+        # Right: Chatbot UI
         with gr.Column(scale=3):
             chatbot = gr.Chatbot()
             send_btn = gr.Button("Send", variant="primary")
 
-            # Connect send button
-            send_btn.click(respond, inputs=[user_input, chatbot], outputs=[chatbot, user_input])
+            # Bind send button to chatbot response
+            send_btn.click(
+                respond,
+                inputs=[user_input, chatbot],
+                outputs=[chatbot, user_input]
+            )
 
+# Launch the redesigned UI
 demo.launch()