Update app.py

app.py

@@ -88,6 +88,7 @@ def predict(message,history):
     response = handle_query(message)
     return response
 
+
 # Create the chat interface with a custom layout function
 css = '''
   /* Style the chat container */
@@ -102,28 +103,36 @@ css = '''
     background-color: #fff;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     position: relative;
+    height: 600px; /* Adjust the height of the container */
   }
 
-  /* Style the logo and title container */
-  .gradio-header {
+  /* Style the logo */
+  .gradio-logo {
     display: flex;
-    align-items: center;
+    justify-content: center;
     margin-bottom: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #ddd;
   }
 
   .gradio-logo img {
-    height: 50px;
-    margin-right: 10px;
+    width: 100%;
+    max-width: 300px;
   }
 
+  /* Style the title */
+  .gradio-title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: #4A90E2;
+  }
 
   /* Style the chat history */
   .gradio-chat-history {
     flex: 1;
     overflow-y: auto;
     padding: 15px;
+    border-bottom: 1px solid #ddd;
     background-color: #f9f9f9;
     border-radius: 5px;
     margin-bottom: 10px;
@@ -163,61 +172,38 @@ css = '''
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
 
-  /* Style the user input field */
-  .gradio-chat-input {
+  /* Style the footer */
+  .gradio-footer {
     display: flex;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    padding: 10px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    background-color: #fff;
-  }
-
-  .gradio-chat-input input {
-    width: 100%;
     padding: 10px;
-    border: none;
-    outline: none;
-    font-size: 16px;
-    border-radius: 20px;
-  }
-
-  .gradio-chat-input button {
-    padding: 10px 15px;
-    background-color: #4A90E2;
-    border: none;
-    border-radius: 20px;
-    color: white;
-    font-size: 16px;
-    cursor: pointer;
-    margin-left: 10px;
-  }
-
-  .gradio-chat-input button:hover {
-    background-color: #357ABD;
+    border-top: 1px solid #ddd;
+    background-color: #F8D7DA; /* Light red background color */
+    position: absolute;
+    bottom: 0;
+    width: calc(100% - 40px); /* Adjust width to match container padding */
   }
 
   /* Remove Gradio footer */
   footer {
     display: none !important;
+    background-color: #F8D7DA;
   }
 '''
 
-# Create a custom HTML block for the logo and title
-header_html = '''
-<div class="gradio-header">
-  <div class="gradio-logo">
-    <img src="https://redfernstech.com/wp-content/uploads/2024/05/RedfernsLogo_FinalV1.0-3-2048x575.png" alt="Company Logo">
-  </div>
+# Create a custom HTML block for the logo
+logo_html = '''
+<div class="gradio-logo">
+  <img src="https://redfernstech.com/wp-content/uploads/2024/05/RedfernsLogo_FinalV1.0-3-2048x575.png" alt="Company Logo">
 </div>
 '''
 
 # Create a Blocks layout with the custom HTML and ChatInterface
 with gr.Blocks(css=css) as demo:
-    gr.HTML(header_html)
+    gr.HTML(logo_html)
     gr.ChatInterface(predict)
 
 # Launch the interface
 demo.launch()
 
 
+