Update app.py

app.py

@@ -1,16 +1,51 @@
 import gradio as gr
 from chatbot import generate_answer
 
+# Function to display chatbot answer
 def main():
-    # Create Gradio Interface
-    iface = gr.Interface(
-        fn=generate_answer,
-        inputs=gr.Textbox(label="Ask a question"),
-        outputs=gr.Textbox(label="Answer"),
-        title="General Knowledge & Current Affairs Chatbot",
-        description="Ask any question, and the bot will provide answers based on general knowledge and current affairs."
-    )
-    iface.launch()
+    # Define custom CSS for styling the interface
+    css = """
+    .chatbox-container {
+        background-color: #f0f0f0;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+        width: 100%;
+        max-width: 600px;
+        margin: auto;
+    }
+    .chatbox-container h1 {
+        color: #4CAF50;
+        font-size: 2rem;
+        text-align: center;
+        font-family: 'Arial', sans-serif;
+    }
+    .chatbox-container .output-box {
+        padding: 10px;
+        background-color: #fff;
+        border-radius: 5px;
+        font-size: 1.1rem;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+    }
+    .gradio-container {
+        background-color: #fafafa;
+    }
+    .gradio-row {
+        margin-bottom: 20px;
+    }
+    """
+    
+    # Define Gradio interface with a more structured layout
+    with gr.Blocks(css=css) as demo:
+        with gr.Column(elem_id="chatbox-container"):
+            gr.Markdown("<h1>General Knowledge & Current Affairs Chatbot</h1>")
+            chatbot = gr.Chatbot(label="Ask Me Anything")
+            textbox = gr.Textbox(label="Type your question")
+            submit_button = gr.Button("Ask")
+            
+            submit_button.click(generate_answer, inputs=textbox, outputs=chatbot)
+
+    demo.launch()
 
 if __name__ == "__main__":
-    main()
+    main()