Update app.py

app.py

@@ -63,31 +63,7 @@ iface = gr.Interface(
 
 iface.launch()
 '''
-css = """
-#content_align {
-    text-align: center;
-    padding: 20px;
-    background-color: #282c34;
-    color: #fff;
-    font-family: Arial, sans-serif;
-}
 
-input[type="text"] {
-    padding: 6px;
-    width: 100%;
-    box-sizing: border-box;
-    margin-top: 6px;
-    margin-bottom: 16px;
-    resize: vertical;
-}
-"""
-
-welcome_message = '''
-<div id="content_align">
-  <h1>AI Medical Chatbot</h1>
-  <p>Ask any medical question and get answers from our AI Medical Chatbot</p>
-  <p>Developed by Ruslan Magana. Visit <a href="https://ruslanmv.com/">https://ruslanmv.com/</a> for more information.</p>
-</div>
 '''
 
 iface = gr.Interface(
@@ -104,3 +80,70 @@ iface = gr.Interface(
 )
 
 iface.launch()
+'''
+
+
+
+import gradio as gr
+
+css = """
+/* General Container Styles */
+.gradio-container {
+    font-family: "IBM Plex Sans", sans-serif;  position: fixed; /* Ensure full-screen coverage */
+    top: 0;
+    left: 0;
+    width: 100vw;  /* Set width to 100% viewport width */
+    height: 100vh; /* Set height to 100% viewport height */
+    margin: 0;    /* Remove margins for full-screen effect */
+    padding: 0;    /* Remove padding fol-screen background */
+    background-color: #212529; /* Dark background color */
+    color: #fff;    /* Light text color for better readability */
+    overflow: hidden; /* Hide potential overflow content */
+    background-image: url("https://huggingface.co/spaces/ruslanmv/AI-Medical-Chatbot/resolve/main/notebook/local/img/background.jpg"); /* Replace with your image path */
+    background-size: cover; /* Stretch the image to cover the container */
+    background-position: center; /* Center the image horizontally and vertically */
+}
+
+/* Button Styles */
+.gr-button {
+    color: white;
+    background: #007bff; /* Use a primary color for the background */
+    white-space: nowrap;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+.gr-button:hover {
+    background-color: #0056b3; /* Darken the background color on hover */
+}
+
+/* Output box styles */
+.gradio-textbox {
+    background-color: #343a40; /* Dark background color */
+    color: #fff; /* Light text color for better readability */
+    border-color: #343a40; /* Dark border color */
+    border-radius: 8px;
+}
+"""
+
+welcome_message = """# AI Medical Chatbot
+Ask any medical question and get answers from our AI Medical Chatbot
+Developed by Ruslan Magana. Visit [https://ruslanmv.com/](https://ruslanmv.com/) for more information."""
+
+
+with gr.Blocks(css=css) as interface:
+    gr.Markdown(welcome_message)  # Display the welcome message
+
+    with gr.Row():
+        with gr.Column():
+            symptoms_input = gr.Textbox(label="Symptoms", placeholder="Enter symptoms here")
+            question_input = gr.Textbox(label="Question", placeholder="Enter question here")
+            generate_button = gr.Button("Ask Me", variant="primary")
+
+    with gr.Row():
+        answer_output = gr.Textbox(type="text", label="Answer")
+
+interface.launch()
+