Update app.py

app.py

@@ -1,26 +1,57 @@
 import gradio as gr
-import os
-from rag import generate_chat_answer, conversation
 import logging
+from rag import generate_chat_answer, conversation
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
+
+# =====================================================
+# Clear Chat
+# =====================================================
 def clear_chat():
     conversation.clear_history()
-    return "", []
+    return []
+
+
+# =====================================================
+# Respond Function
+# =====================================================
+def respond(query, chat_history):
+
+    if not query.strip():
+        return "", chat_history
+
+    answer = generate_chat_answer(query)
 
+    chat_history.append({
+        "role": "user",
+        "content": query
+    })
+
+    chat_history.append({
+        "role": "assistant",
+        "content": answer
+    })
+
+    logger.info(f"Chat History Updated:\n{chat_history}")
+
+    return "", chat_history
+
+
+# =====================================================
+# UI
+# =====================================================
 custom_css = """
 #container {
     background: white;
     border-radius: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    margin: 20px;
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 20px auto;
+    max-width: 850px;
 }
+
 #header {
     background: #4CAF50;
     padding: 20px;
@@ -29,61 +60,94 @@ custom_css = """
     text-align: center;
     color: white;
 }
+
 #buttons-section {
     display: flex;
     gap: 10px;
     justify-content: center;
     margin-top: 20px;
 }
+
 #submit-btn {
     background: #4CAF50 !important;
     color: white !important;
     border: none !important;
-    border-radius: 5px !important;
+    border-radius: 6px !important;
     padding: 10px 20px !important;
     min-width: 120px;
 }
+
 #clear-btn {
     background: white !important;
     color: #4CAF50 !important;
     border: 1px solid #4CAF50 !important;
-    border-radius: 5px !important;
+    border-radius: 6px !important;
     padding: 10px 20px !important;
     min-width: 120px;
 }
 """
 
-with gr.Blocks() as interface:
+
+with gr.Blocks(css=custom_css) as interface:
+
     with gr.Column(elem_id="container"):
+
         with gr.Column(elem_id="header"):
             gr.Markdown("""
-            # 🌿 Health & Nutrition Assistant 
-            ### Your AI-powered healthcare knowledge companion
-            """)
+# 🌿 Health & Nutrition Assistant
+### AI-powered medical & nutrition chatbot
+""")
+
+        # =================================================
+        # Chatbot (NEW FORMAT)
+        # =================================================
+        chatbot = gr.Chatbot(
+            label="Chat History",
+            type="messages",
+            height=500
+        )
 
-        chatbot = gr.Chatbot(label="Chat History", elem_id="chatbot")
         query = gr.Textbox(
-            label="Ask me anything about health and nutrition",
-            placeholder="Example: What are the best sources of plant-based protein?",
-            lines=3,
-            elem_id="query-input"
+            label="Ask your question",
+            placeholder="Example: What are protein-rich foods?",
+            lines=3
         )
 
         with gr.Row(elem_id="buttons-section"):
-            submit_btn = gr.Button("Send", elem_id="submit-btn")
-            clear_btn = gr.Button("Clear Chat", elem_id="clear-btn")
 
-        def respond(query, chat_history):
-            if not query.strip():
-                return "Please enter a valid question.", chat_history
-            answer = generate_chat_answer(query)
-            chat_history.append({"role": "user", "content": query})
-            chat_history.append({"role": "assistant", "content": answer})
-            logger.info(f"Updated Chat History:\n{chat_history}")
-            return "", chat_history
+            submit_btn = gr.Button(
+                "Send",
+                elem_id="submit-btn"
+            )
+
+            clear_btn = gr.Button(
+                "Clear Chat",
+                elem_id="clear-btn"
+            )
+
+        # =================================================
+        # Events
+        # =================================================
+        submit_btn.click(
+            fn=respond,
+            inputs=[query, chatbot],
+            outputs=[query, chatbot]
+        )
+
+        query.submit(
+            fn=respond,
+            inputs=[query, chatbot],
+            outputs=[query, chatbot]
+        )
+
+        clear_btn.click(
+            fn=clear_chat,
+            outputs=[chatbot]
+        )
 
-        submit_btn.click(fn=respond, inputs=[query, chatbot], outputs=[query, chatbot])
-        clear_btn.click(fn=clear_chat, outputs=[query, chatbot])
 
+# =====================================================
+# Launch
+# =====================================================
 if __name__ == "__main__":
-    interface.launch(css=custom_css)
+    interface.launch()