Updated the Gradio UI

app.py

@@ -9,47 +9,90 @@ from src.tools_loader import get_tools
 _ = get_tools()
 
 # ------------------------------------------------------------------
-# 2. Helper: streaming generator
+# 2. Helper: streaming generator with progress
 # ------------------------------------------------------------------
 def process_upload(image_path: str):
     """
-    Streamed generator: yields placeholder first,
-    then final report with inference time.
-    Gradio automatically shows a spinner / progress bar
-    while the function is running.
+    Streamed generator: yields loading states then final report.
+    Gradio shows spinner automatically during execution.
     """
     if image_path is None:
-        yield "Please upload a chest-X-ray image."
+        yield " **Please upload a chest X-ray image to begin analysis.**"
         return
 
     start = time.time()
-    # Initial placeholder so the textarea updates immediately
-    yield " **Generating report...**\n\nThis may take a few seconds..."
-
-    # Optional manual progress bar
-    # with gr.Progress(track_tqdm=True) as progress:
-    #     report = generate_report(image_path, progress=progress)
-
+    
+    # Show loading state immediately
+    yield " **Analyzing X-ray image...**\n\nThis might take a couple of seconds..."
+    
+    # Generate the actual report
     report = generate_report(image_path)
-
+    
     elapsed = time.time() - start
-    yield f"### Radiology Report\n{report}\n\n---\n*Generated in `{elapsed:0.1f}` s*"
+    
+    # Return final formatted report
+    yield f"""### Radiology Report
 
-# ------------------------------------------------------------------
-# 3. Gradio UI
-# ------------------------------------------------------------------
-with gr.Blocks() as demo:
-    gr.Markdown("# Multi-Agent Radiology Assistant")
-    with gr.Row():
-        input_image = gr.Image(type="filepath", label="Upload Chest X-ray", height=400)
-        output_report = gr.Markdown()
+{report}
 
-    generate_btn = gr.Button("Generate Report")
+---
+*Generated in {elapsed:.1f} seconds*"""
 
+# ------------------------------------------------------------------
+# 3. Gradio UI - Vertical Layout
+# ------------------------------------------------------------------
+with gr.Blocks(
+    theme=gr.themes.Soft(),
+    title="Multi-Agent Radiology Assistant",
+    css="""
+    .image-container { max-width: 600px; margin: 0 auto; }
+    .report-container { margin-top: 20px; }
+    .generate-btn { margin: 20px auto; display: block; }
+    """
+) as demo:
+    
+    # Header
+    gr.Markdown(
+        "# Multi-Agent Radiology Assistant\n"
+        "Upload a chest X-ray image to receive a professional radiology report"
+    )
+    
+    # Image upload section (centered, top)
+    with gr.Column():
+        input_image = gr.Image(
+            type="filepath",
+            label="Upload Chest X-ray Image",
+            height=400,
+            elem_classes=["image-container"]
+        )
+        
+        # Generate button (centered)
+        generate_btn = gr.Button(
+            "Generate Report",
+            variant="primary",
+            size="lg",
+            elem_classes=["generate-btn"]
+        )
+    
+    # Report output section (bottom)
+    with gr.Column(elem_classes=["report-container"]):
+        output_report = gr.Markdown(
+            value="**Ready to analyze**\n\nUpload an X-ray image above and click 'Generate Report' to begin.",
+            label="Analysis Results"
+        )
+    
+    # Event handler
     generate_btn.click(
-        fn=process_upload,            # generator function
+        fn=process_upload,
         inputs=input_image,
-        outputs=output_report
+        outputs=output_report,
+        show_progress="full"  # Shows Gradio's built-in progress bar
+    )
+    
+    # Footer with example hint
+    gr.Markdown(
+        "### Need an example?\n"
+        "Download and use any frontal chest X-ray PNG/JPG file and click **Generate Report**."
     )
 
 if __name__ == "__main__":