modified

app.py

@@ -135,7 +135,36 @@ def customLLMBot(user_input, uploaded_image, chat_history):
 
 # Gradio Interface
 def chatbot_ui():
-    with gr.Blocks() as demo:
+    with gr.Blocks(css="""
+        #chatbot .chat-message {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 10px;
+        }
+        #chatbot .chat-message.user {
+            justify-content: flex-end;
+        }
+        #chatbot .chat-message.bot img {
+            margin-right: 10px;
+        }
+        #chatbot .chat-message.user img {
+            margin-left: 10px;
+        }
+        #chatbot .chat-message img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+        }
+        #chatbot .chat-message .message-content {
+            max-width: 70%;
+            padding: 10px;
+            border-radius: 8px;
+            background-color: #f0f0f0;
+        }
+        #chatbot .chat-message.user .message-content {
+            background-color: #d4f0ff;
+        }
+    """) as demo:
         gr.Markdown("# Healthcare Chatbot Doctor")
 
         # State for user chat history
@@ -157,24 +186,31 @@ def chatbot_ui():
                 clear_btn = gr.Button("Clear")
                 audio_output = gr.Audio(label="Audio Response")
 
+        # Define user and bot logos
+        user_logo = "user.png"  # Replace with actual path
+        bot_logo = "bot.jpg"   # Replace with actual path
+
         # Define actions
         def handle_submit(user_query, image, history):
             logger.info("User submitted a query.")
             response, audio = customLLMBot(user_query, image, history)
-            return response, audio, None,"",history  # Clear the image after submission
+
+            # Append user and bot messages
+            history = history + [(f'<img src="{user_logo}" /> {user_query}', f'<img src="{bot_logo}" /> {response}')]
+            return history, audio, None, "", history  # Clear the image after submission
 
         # Submit on pressing Enter key
         user_input.submit(
             handle_submit,
             inputs=[user_input, uploaded_image, chat_history],
-            outputs=[chatbot, audio_output, uploaded_image,user_input, chat_history],
+            outputs=[chatbot, audio_output, uploaded_image, user_input, chat_history],
         )
 
         # Submit on button click
         submit_btn.click(
             handle_submit,
             inputs=[user_input, uploaded_image, chat_history],
-            outputs=[chatbot, audio_output, uploaded_image,user_input, chat_history],
+            outputs=[chatbot, audio_output, uploaded_image, user_input, chat_history],
         )
 
         # Action for clearing all fields