Update app.py

app.py

@@ -84,50 +84,69 @@ print("Processing PDF ingestion from directory:", PDF_DIRECTORY)
 data_ingestion_from_directory()
 
 # Define the function to handle predictions
-def predict(message,history):
+"""def predict(message,history):
     response = handle_query(message)
-    return response
-
+    return response"""
+def predict(message, history):
+    logo_html = '''
+    <div class="circle-logo">
+      <img src="1.jpeg" alt="FernAi">
+    </div>
+    '''
+    response = handle_query(message)
+    response_with_logo = f'<div class="response-with-logo">{logo_html}<div class="response-text">{response}</div></div>'
+    return response_with_logo
 
-# Create the chat interface with a custom layout function
+# Custom CSS for styling
 css = '''
-  /* Style the chat container */
   .gradio-container {
     display: flex;
     flex-direction: column;
-    width: 450px;
+    width: 100%;
+    max-width: 450px;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid #ddd;
     border-radius: 10px;
     background-color: #fff;
     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    position: relative;
-    height: 600px; /* Adjust the height of the container */
+    height: 100%;
+    max-height: 600px;
   }
-
-  /* Style the logo */
   .gradio-logo {
-    display: flex;
-    justify-content: center;
+    text-align: center;
     margin-bottom: 20px;
   }
-
-  .gradio-logo img {
+  .circle-logo {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+  .circle-logo img {
     width: 100%;
-    max-width: 300px;
+    height: 100%;
+    object-fit: cover;
   }
-
-  /* Style the title */
-  .gradio-title {
-    text-align: center;
-    font-weight: bold;
-    font-size: 24px;
-    margin-bottom: 20px;
-    color: #4A90E2;
+  .response-with-logo {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  .response-text {
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    background-color: #fff;
+    border: 1px solid #ced4da;
+    border-radius: 15px 15px 15px 0;
+    padding: 10px;
+    max-width: 80%;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
-
-  /* Style the chat history */
   .gradio-chat-history {
     flex: 1;
     overflow-y: auto;
@@ -136,16 +155,13 @@ css = '''
     background-color: #f9f9f9;
     border-radius: 5px;
     margin-bottom: 10px;
-    max-height: 500px; /* Increase the height of the chat history */
+    max-height: 500px;
   }
-
-  /* Style the chat messages */
   .gradio-message {
     margin-bottom: 15px;
     display: flex;
-    flex-direction: column; /* Stack messages vertically */
+    flex-direction: column;
   }
-
   .gradio-message.user .gradio-message-content {
     background-color: #E1FFC7;
     align-self: flex-end;
@@ -156,7 +172,6 @@ css = '''
     margin-bottom: 5px;
     max-width: 80%;
   }
-
   .gradio-message.bot .gradio-message-content {
     background-color: #fff;
     align-self: flex-start;
@@ -167,45 +182,35 @@ css = '''
     margin-bottom: 5px;
     max-width: 80%;
   }
-
-  .gradio-message-content {
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  }
-
-  /* Style the footer */
   .gradio-footer {
     display: flex;
     padding: 10px;
     border-top: 1px solid #ddd;
-    background-color: #F8D7DA; /* Light red background color */
+    background-color: #F8D7DA;
     position: absolute;
     bottom: 0;
-    width: calc(100% - 40px); /* Adjust width to match container padding */
+    width: calc(100% - 40px);
   }
-
-  /* Remove Gradio footer */
   footer {
     display: none !important;
     background-color: #F8D7DA;
   }
+  .gradio-chat-history .gradio-message.bot .gradio-message-content::before {
+    content: none;
+  }
 '''
 
-# 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">
+  <img src="2.png" alt="FernAi" style="display: block; margin: 0 auto; width: 100px; height: 100px;">
 </div>
 '''
 
-# Create a Blocks layout with the custom HTML and ChatInterface
-with gr.Blocks(theme=gr.themes.Monochrome(), fill_height=True,css=css) as demo:
-    gr.HTML(logo_html)
-    gr.ChatInterface(predict,clear_btn=None, 
-                     undo_btn=None, 
-                     retry_btn=None)
+# Create the Blocks layout with the custom HTML and ChatInterface
+with gr.Blocks(theme=gr.themes.Monochrome(), fill_height=True, css=css) as demo:
+    with gr.Column():
+        gr.HTML(logo_html)
+        gr.ChatInterface(predict, clear_btn=None, undo_btn=None, retry_btn=None)
 
 # Launch the interface
-demo.launch()
-
-
-
+demo.launch()