UI update

app.py

@@ -35,14 +35,7 @@ def handle_conversation_turn(user_input: str, user_image: Image.Image, history:
 
     try:
         system_prompt = (
-            "You are an expert, empathetic AI medical assistant conducting a virtual consultation. "
-            "Your primary goal is to ask clarifying questions to understand the user's symptoms thoroughly. "
-            "Do NOT provide a diagnosis or a list of possibilities right away. Ask only one or two focused questions per turn. "
-            "If the user provides an image, your first step is to analyze it from an expert perspective. Briefly describe the key findings from the image. "
-            "Then, use this analysis to ask relevant follow-up questions about the user's symptoms or medical history to better understand the context. "
-            "For example, after seeing a rash, you might say, 'I see a reddish rash with well-defined borders on the forearm. To help me understand more, could you tell me when you first noticed this? Is it itchy, painful, or does it have any other sensation?'"
-            "After several turns of asking questions, when you feel you have gathered enough information, you must FIRST state that you are ready to provide a summary. "
-            "THEN, in the SAME response, provide a list of possible conditions, your reasoning, and a clear, actionable next-steps plan."
+            "You are an expert, empathetic AI medical assistant conducting a virtual consultation. Your primary goal is to ask clarifying questions to understand the user's symptoms thoroughly. Do NOT provide a diagnosis or a list of possibilities right away. Ask only one or two focused questions per turn. If the user provides an image, your first step is to analyze it from an expert perspective. Briefly describe the key findings from the image. Then, use this analysis to ask relevant follow-up questions about the user's symptoms or medical history to better understand the context. For example, after seeing a rash, you might say, 'I see a reddish rash with well-defined borders on the forearm. To help me understand more, could you tell me when you first noticed this? Is it itchy, painful, or does it have any other sensation?' After several turns of asking questions, when you feel you have gathered enough information, you must FIRST state that you are ready to provide a summary. THEN, in the SAME response, provide a list of possible conditions, your reasoning, and a clear, actionable next-steps plan."
         )
 
         generation_args = {"max_new_tokens": 1024, "do_sample": True, "temperature": 0.7}
@@ -80,13 +73,14 @@ def handle_conversation_turn(user_input: str, user_image: Image.Image, history:
         print(f"An exception occurred during conversation turn: {type(e).__name__}: {e}")
         yield history, history
 
-# --- UI MODIFICATION: Professional CSS for a clean, modern chat interface ---
+# --- UI MODIFICATION: Professional CSS for a polished chat interface ---
 css = """
 /* Main App Styling */
-body, .gradio-container { background-color: #f9fafb; font-family: 'Inter', sans-serif; }
-#chat-container { flex-grow: 1; overflow-y: auto; padding-bottom: 150px; }
+body, .gradio-container { background-color: #f9fafb !important; }
+#chat-container { flex-grow: 1; overflow-y: auto; padding-bottom: 200px !important; }
 /* Chat Bubble Styling */
-.message-bubble { border-radius: 15px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.user .message-bubble { background-color: #dbeafe !important; color: #1f2937 !important; }
+.bot .message-bubble  { background-color: #f3f4f6 !important; color: #1f2937 !important; }
 /* Sticky Footer Input Bar */
 #footer-container {
     position: fixed !important; bottom: 0; left: 0; width: 100%;
@@ -96,82 +90,68 @@ body, .gradio-container { background-color: #f9fafb; font-family: 'Inter', sans-
 }
 /* Text Input Box Styling */
 #user-textbox textarea {
-    background-color: #f9fafb !important;
+    background-color: #ffffff !important;
     border: 1px solid #d1d5db !important;
     border-radius: 10px !important;
-    color: #111827 !important; /* Darker text color */
+    color: #111827 !important; /* Darker input text */
 }
-/* Icon Button Styling */
+/* Icon Button General Styling */
 .icon-btn {
-    min-width: 45px !important; max-width: 45px !important;
-    height: 45px !important; font-size: 1.2rem !important;
-    border: 1px solid #e5e7eb !important;
+    min-width: 50px !important; max-width: 50px !important;
+    height: 50px !important; font-size: 1.5rem !important;
+    border: none !important; border-radius: 10px !important;
 }
+/* Specific Icon Button Colors */
+#restart-btn { background-color: #fee2e2 !important; color: #ef4444 !important; }
+#upload-btn, #send-btn { background-color: #3b82f6 !important; color: white !important; }
 """
 
 with gr.Blocks(theme=gr.themes.Base(), title="AI Doctor Consultation", css=css) as demo:
     conversation_history = gr.State([])
 
     with gr.Column(elem_id="chat-container"):
-        chatbot_display = gr.Chatbot(label="Consultation", show_copy_button=True, bubble_full_width=False)
+        chatbot_display = gr.Chatbot(label="Consultation", show_copy_button=True, bubble_full_width=False, avatar_images=("./images/user.png", "./images/bot.png"))
 
     with gr.Column(elem_id="footer-container"):
         with gr.Row():
-            # The image preview is hidden by default
-            image_preview = gr.Image(type="pil", height=60, width=60, visible=False, show_label=False, container=False)
-            
-            # The new icon-based upload button
-            upload_button = gr.UploadButton("📷", file_types=["image"], scale=1, elem_classes="icon-btn")
-            
+            image_preview = gr.Image(type="pil", height=60, width=60, visible=False, show_label=False, container=False, scale=1)
+            upload_button = gr.UploadButton("📷", file_types=["image"], elem_id="upload-btn", elem_classes="icon-btn", scale=1)
             user_textbox = gr.Textbox(
                 elem_id="user-textbox",
                 placeholder="Type your message, or upload an image...", 
                 show_label=False, scale=5, container=False
             )
-            
-            send_button = gr.Button("➤", variant="primary", scale=1, elem_classes="icon-btn")
-            clear_button = gr.Button("🗑️", scale=1, elem_classes="icon-btn")
+            send_button = gr.Button("➤", elem_id="send-btn", elem_classes="icon-btn", scale=1)
+            clear_button = gr.Button("🔄", elem_id="restart-btn", elem_classes="icon-btn", scale=1)
 
-    # --- Event Handlers for the new UI ---
-    
-    # This handler makes the image preview appear when a user uploads a file.
     def show_image_preview(image_file):
-        # When a file is uploaded, make the preview Image component visible and set its value.
         return gr.Image(value=image_file, visible=True)
 
     upload_button.upload(fn=show_image_preview, inputs=upload_button, outputs=image_preview)
 
-    # Main function to handle the conversation flow
     def submit_message_and_stream(user_input: str, user_image: Image.Image, history: list):
         if not user_input.strip() and user_image is None:
             return history, history, None
-
-        # 1. Instantly add the user's message (and image) to the chat UI
         history.append((user_input, None))
         yield history, history, None
-        
-        # 2. Start the generator to get the AI's response stream
         for updated_history, new_state in handle_conversation_turn(user_input, user_image, history):
-            yield updated_history, new_state, None # Pass None to image_preview to clear it
+            yield updated_history, new_state
             
-    # Function to clear the textbox and image preview after submission
     def clear_inputs():
         return "", None
 
-    # Wire up the send and submit events
     send_button.click(
         fn=submit_message_and_stream,
         inputs=[user_textbox, image_preview, conversation_history],
-        outputs=[chatbot_display, conversation_history, image_preview],
+        outputs=[chatbot_display, conversation_history],
     ).then(fn=clear_inputs, outputs=[user_textbox, image_preview])
     
     user_textbox.submit(
         fn=submit_message_and_stream,
         inputs=[user_textbox, image_preview, conversation_history],
-        outputs=[chatbot_display, conversation_history, image_preview],
+        outputs=[chatbot_display, conversation_history],
     ).then(fn=clear_inputs, outputs=[user_textbox, image_preview])
 
-    # Wire up the clear button
     clear_button.click(
         lambda: ([], [], None, ""), 
         outputs=[chatbot_display, conversation_history, image_preview, user_textbox]