Update app.py

app.py

@@ -45,8 +45,6 @@ rag_chain = (
     | llm
     | StrOutputParser()
 )
-
-
 import gradio as gr
 
 # Function to handle prompt and query the RAG chain
@@ -78,32 +76,44 @@ if __name__ == "__main__":
     
     # Use Blocks API for layout customization
     with gr.Blocks() as demo:
-        gr.Markdown("### MediGuide ChatBot", elem_id="title")  # Title
-        gr.Markdown(description, elem_id="description")  # Description
-        
-        with gr.Row(elem_id="chat-container"):
-            chatbot = gr.Chatbot([{"role": "Medical Expert", "content": greetingsmessage}],
-                                 type="messages",
-                                 avatar_images=["./avatar.png", "./avatar.png"])
-        
-        gr.Textbox(label="Ask a question:", placeholder="Type your question here...", 
-                   interactive=True, elem_id="input-box").submit(handle_prompt, chatbot)
-
-    # Apply custom CSS for dimensions
-    demo.launch(css="""
+        gr.HTML("""
+        <style>
         #chat-container {
             width: 800px;
             height: 500px;
             margin: auto;
+            border: 1px solid #ccc;
+            padding: 10px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
         #title {
             text-align: center;
+            font-size: 24px;
+            font-weight: bold;
         }
         #description {
             margin: 20px auto;
             max-width: 700px;
+            font-size: 16px;
         }
         #input-box {
             width: 100%;
+            margin-top: 10px;
         }
-    """)
+        </style>
+        """)  # Include custom CSS
+        
+        gr.Markdown("### MediGuide ChatBot", elem_id="title")  # Title
+        gr.Markdown(description, elem_id="description")  # Description
+        
+        with gr.Row(elem_id="chat-container"):
+            chatbot = gr.Chatbot([{"role": "Medical Expert", "content": greetingsmessage}],
+                                 type="messages",
+                                 avatar_images=["./avatar.png", "./avatar.png"])
+        
+        gr.Textbox(label="Ask a question:", placeholder="Type your question here...", 
+                   interactive=True, elem_id="input-box").submit(handle_prompt, chatbot)
+
+    demo.launch()
+