Update app.py

app.py

@@ -88,53 +88,142 @@ def predict(message,history):
     response = handle_query(message)
     return response
 
-
-def custom_layout(component):
-  css = '''
+# Create the chat interface with a custom layout function
+css = '''
   /* Style the chat container */
   .gradio-container {
     display: flex;
     flex-direction: column;
-    width: 400px;
+    width: 450px;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #ddd;
-    border-radius: 5px;
-    background-color: #eee;
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    position: relative;
+  }
+
+  /* Style the logo and title container */
+  .gradio-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .gradio-logo img {
+    height: 50px;
+    margin-right: 10px;
   }
 
-  /* Style the title */
   .gradio-title {
-    text-align: center;
     font-weight: bold;
-    margin-bottom: 10px;
+    font-size: 24px;
+    color: #4A90E2;
   }
 
   /* Style the chat history */
   .gradio-chat-history {
     flex: 1;
-    overflow-y: scroll;
-    padding: 10px;
-    border-bottom: 1px solid #ddd;
+    overflow-y: auto;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    max-height: 500px; /* Increase the height of the chat history */
   }
 
-  /* Style the chat message */
+  /* Style the chat messages */
   .gradio-message {
+    margin-bottom: 15px;
+    display: flex;
+    flex-direction: column; /* Stack messages vertically */
+  }
+
+  .gradio-message.user .gradio-message-content {
+    background-color: #E1FFC7;
+    align-self: flex-end;
+    border: 1px solid #c3e6cb;
+    border-radius: 15px 15px 0 15px;
+    padding: 10px;
+    font-size: 16px;
     margin-bottom: 5px;
+    max-width: 80%;
+  }
+
+  .gradio-message.bot .gradio-message-content {
+    background-color: #fff;
+    align-self: flex-start;
+    border: 1px solid #ced4da;
+    border-radius: 15px 15px 15px 0;
+    padding: 10px;
+    font-size: 16px;
+    margin-bottom: 5px;
+    max-width: 80%;
+  }
+
+  .gradio-message-content {
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
 
   /* Style the user input field */
+  .gradio-chat-input {
+    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: 1px solid #ccc;
-    border-radius: 3px;
+    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;
+  }
+
+  /* Remove Gradio footer */
+  footer {
+    display: none !important;
   }
-  '''
-  return gr.components.HTML(css)(component)
+'''
+
+# 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>
+  <div class="gradio-title">RedFerns Tech</div>
+</div>
+'''
+
+# Create a Blocks layout with the custom HTML and ChatInterface
+with gr.Blocks(css=css) as demo:
+    gr.HTML(header_html)
+    gr.ChatInterface(predict)
+
+# Launch the interface
+demo.launch()
 
-# Launch the chat interface with custom layout
-interface = gr.ChatInterface(predict, title="RedFerns Tech", layout=custom_layout)
-interface.launch()