UI modification

app.py

@@ -5,7 +5,7 @@ import torch
 import os
 import spaces
 
-# --- Initialize the Model Pipeline ---
+# --- Initialize the Model Pipeline (No changes) ---
 print("Loading MedGemma model...")
 try:
     pipe = pipeline(
@@ -21,15 +21,14 @@ except Exception as e:
     model_loaded = False
     print(f"Error loading model: {e}")
 
-# --- Core CONVERSATIONAL Logic ---
+# --- Core CONVERSATIONAL Logic (No changes) ---
 @spaces.GPU()
 def handle_conversation_turn(user_input: str, user_image: Image.Image, history: list):
     """
-    Manages a single conversation turn with corrected state-management logic.
+    Manages a single conversation turn with state management.
     """
     if not model_loaded:
         history.append((user_input, "Error: The AI model is not loaded."))
-        # *** THE FIX: Return history twice to update both UI and State ***
         return history, history, None
 
     try:
@@ -71,54 +70,71 @@ def handle_conversation_turn(user_input: str, user_image: Image.Image, history:
             ai_response = full_text.split("<start_of_turn>model")[-1].strip()
 
         history.append((user_input, ai_response))
-        # *** THE FIX: Return history twice to update both UI and State ***
         return history, history, None
 
     except Exception as e:
         history.append((user_input, f"An error occurred: {str(e)}"))
         print(f"An exception occurred during conversation turn: {type(e).__name__}: {e}")
-        # *** THE FIX: Return history twice to update both UI and State ***
         return history, history, None
 
-# --- Gradio Interface ---
-with gr.Blocks(theme=gr.themes.Soft(), title="AI Doctor Consultation") as demo:
+# --- UI MODIFICATION: Custom CSS for a more compact layout ---
+css = """
+.header {
+    text-align: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 1rem; /* Reduced padding */
+    border-radius: 10px;
+    margin-bottom: 1rem; /* Reduced margin */
+}
+.header h1 {
+    font-size: 1.8rem; /* Smaller title font */
+    margin-bottom: 0.2rem;
+}
+.warning {
+    background-color: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 8px;
+    padding: 0.75rem; /* Reduced padding */
+    margin: 0.5rem 0 1rem 0; /* Reduced margin */
+    color: #856404;
+}
+"""
+
+# --- Gradio Interface with New Compact Layout ---
+with gr.Blocks(theme=gr.themes.Soft(), title="AI Doctor Consultation", css=css) as demo:
     # The gr.State object that holds the conversation history.
     conversation_history = gr.State([])
 
-    gr.HTML("""
-        <div style="text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 10px; margin-bottom: 2rem;">
-            <h1>🩺 AI Symptom Consultation</h1>
-            <p>A conversational AI to help you understand your symptoms, powered by Google's MedGemma</p>
-        </div>
-    """)
-    gr.HTML("""
-        <div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 1rem; margin: 1rem 0; color: #856404;">
-            <strong>⚠️ Medical Disclaimer:</strong> This is not a diagnosis. This AI is for informational purposes and is not a substitute for professional medical advice.
-        </div>
-    """)
+    # UI MODIFICATION: Using the custom CSS class
+    gr.HTML('<div class="header"><h1>🩺 AI Symptom Consultation</h1><p>A conversational AI to help you understand your symptoms.</p></div>')
+    gr.HTML('<div class="warning"><strong>⚠️ Medical Disclaimer:</strong> This is not a diagnosis. This AI is for informational purposes only.</div>')
 
-    chatbot_display = gr.Chatbot(height=500, label="Consultation")
-    
+    # UI MODIFICATION: Input controls are now at the TOP.
     with gr.Row():
-        image__input = gr.Image(label="Upload Symptom Image (Optional)", type="pil", height=150)
+        image_input = gr.Image(label="Upload Symptom Image (Optional)", type="pil", height=150)
         with gr.Column(scale=4):
             user_textbox = gr.Textbox(label="Your Message", placeholder="Describe your primary symptom to begin...", lines=4)
             send_button = gr.Button("Send Message", variant="primary")
 
-    # The submit action now has `conversation_history` as both an input and an output.
+    # UI MODIFICATION: Chatbot output is now at the BOTTOM with reduced height.
+    chatbot_display = gr.Chatbot(height=380, label="Consultation", show_copy_button=True)
+    
+    # The clear button is now more prominent.
+    clear_button = gr.Button("🗑️ Start New Consultation")
+
+    # Event handlers remain the same but reference the reordered components.
     send_button.click(
         fn=handle_conversation_turn,
-        inputs=[user_textbox, image__input, conversation_history],
-        # *** THE FIX: Add `conversation_history` to the outputs list ***
-        outputs=[chatbot_display, conversation_history, image__input]
+        inputs=[user_textbox, image_input, conversation_history],
+        outputs=[chatbot_display, conversation_history, image_input]
     ).then(
         lambda: "", outputs=user_textbox
     )
     
-    clear_button = gr.Button("🗑️ Start New Consultation")
     clear_button.click(
         lambda: ([], [], None, ""), 
-        outputs=[chatbot_display, conversation_history, image__input, user_textbox]
+        outputs=[chatbot_display, conversation_history, image_input, user_textbox]
     )
 
 if __name__ == "__main__":