Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,57 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+venv/
+ENV/
+env/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Gradio
+flagged/
+gradio_cached_examples/
+
+# Project specific
+*.dcm
+*.dicom
+IM_*
+test_images/
+temp/
+.gradio/

README.md

@@ -1,12 +1,1026 @@
+
 ---
-title: Gradio Medical Image Analyzer
-emoji: 🚀
-colorFrom: purple
-colorTo: indigo
+title: Medical Image Analyzer Component
+emoji: 🏥
+colorFrom: blue
+colorTo: green
 sdk: gradio
 sdk_version: 5.33.0
-app_file: app.py
+app_file: demo/app.py
 pinned: false
+license: apache-2.0
+tags:
+  - custom-component-track
+  - medical-imaging
+  - gradio-custom-component
+  - hackathon-2025
+  - ai-agents
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_medical_image_analyzer`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/markusclauss/gradio-medical-image-analyzer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+AI-agent optimized medical image analysis component for Gradio
+
+## ⚠️ IMPORTANT MEDICAL DISCLAIMER ⚠️
+
+**THIS SOFTWARE IS FOR RESEARCH AND EDUCATIONAL PURPOSES ONLY**
+
+🚨 **DO NOT USE FOR CLINICAL DIAGNOSIS OR MEDICAL DECISION MAKING** 🚨
+
+This component is in **EARLY DEVELOPMENT** and is intended as a **proof of concept** for medical image analysis integration with Gradio. The results produced by this software:
+
+- **ARE NOT** validated for clinical use
+- **ARE NOT** FDA approved or CE marked
+- **SHOULD NOT** be used for patient diagnosis or treatment decisions
+- **SHOULD NOT** replace professional medical judgment
+- **MAY CONTAIN** significant errors or inaccuracies
+- **ARE PROVIDED** without any warranty of accuracy or fitness for medical purposes
+
+**ALWAYS CONSULT QUALIFIED HEALTHCARE PROFESSIONALS** for medical image interpretation and clinical decisions. This software is intended solely for:
+- Research and development purposes
+- Educational demonstrations
+- Technical integration testing
+- Non-clinical experimental use
+
+By using this software, you acknowledge that you understand these limitations and agree not to use it for any clinical or medical diagnostic purposes.
+
+## Installation
+
+```bash
+pip install gradio_medical_image_analyzer
+```
+
+## Usage
+
+```python
+#!/usr/bin/env python3
+"""
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css="""
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        """
+    ) as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown("""
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    """)
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown("""
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            """)
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+```
+
+## `MedicalImageAnalyzer`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, typing.Any], None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[float][float, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[typing.List[str], str, NoneType][
+    typing.List[str][str], str, None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[int, str, NoneType][int, str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>analysis_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"structured"</code></td>
+<td align="left">"structured" for AI agents, "visual" for human interpretation</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_confidence</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Include confidence scores in results</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_reasoning</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Include reasoning/explanation for findings</td>
+</tr>
+
+<tr>
+<td align="left"><code>segmentation_types</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.List[str][str]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of segmentation types to perform</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the MedicalImageAnalyzer changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `select` | Event listener for when the user selects or deselects the MedicalImageAnalyzer. Uses event data gradio.SelectData to carry `value` referring to the label of the MedicalImageAnalyzer, and `selected` to refer to state of the MedicalImageAnalyzer. See EventData documentation on how to use this event data |
+| `upload` | This listener is triggered when the user uploads a file into the MedicalImageAnalyzer. |
+| `clear` | This listener is triggered when the user clears the MedicalImageAnalyzer using the clear button for the component. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+ def predict(
+     value: typing.Dict[str, typing.Any][str, typing.Any]
+ ) -> typing.Dict[str, typing.Any][str, typing.Any]:
+     return value
+ ```
+
+---
+
+Developed for veterinary medicine with ❤️ and cutting-edge web technology
+
+**Gradio Agents & MCP Hackathon 2025 - Track 2 Submission**

app.py

@@ -0,0 +1,693 @@
+#!/usr/bin/env python3
+"""
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css="""
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        """
+    ) as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown("""
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    """)
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown("""
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            """)
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()

app_with_frontend.py

@@ -0,0 +1,197 @@
+#!/usr/bin/env python3
+"""
+Demo für MedicalImageAnalyzer mit Frontend Component
+Zeigt die Verwendung der vollständigen Gradio Custom Component
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+# Example data for demos
+EXAMPLE_DATA = [
+    {
+        "image": {"url": "examples/ct_chest.png"},
+        "analysis": {
+            "modality": "CT",
+            "point_analysis": {
+                "tissue_type": {"icon": "🟡", "type": "fat"},
+                "hu_value": -75.0
+            },
+            "segmentation": {
+                "interpretation": {
+                    "obesity_risk": "moderate"
+                }
+            }
+        }
+    },
+    {
+        "image": {"url": "examples/xray_chest.png"},
+        "analysis": {
+            "modality": "CR",
+            "point_analysis": {
+                "tissue_type": {"icon": "🦴", "type": "bone"}
+            }
+        }
+    }
+]
+
+def create_demo():
+    with gr.Blocks(title="Medical Image Analyzer - Component Demo") as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer - Frontend Component Demo
+        
+        Diese Demo zeigt die vollständige Gradio Custom Component mit Frontend-Integration.
+        Unterstützt DICOM-Dateien und alle gängigen Bildformate.
+        """)
+        
+        with gr.Row():
+            with gr.Column():
+                # Configuration
+                gr.Markdown("### ⚙️ Konfiguration")
+                
+                analysis_mode = gr.Radio(
+                    choices=["structured", "visual"],
+                    value="structured",
+                    label="Analyse-Modus",
+                    info="structured: für AI Agents, visual: für Menschen"
+                )
+                
+                include_confidence = gr.Checkbox(
+                    value=True,
+                    label="Konfidenzwerte einschließen"
+                )
+                
+                include_reasoning = gr.Checkbox(
+                    value=True,
+                    label="Reasoning einschließen"
+                )
+                
+            with gr.Column(scale=2):
+                # The custom component
+                analyzer = MedicalImageAnalyzer(
+                    label="Medical Image Analyzer",
+                    analysis_mode="structured",
+                    include_confidence=True,
+                    include_reasoning=True,
+                    elem_id="medical-analyzer"
+                )
+        
+        # Examples section
+        gr.Markdown("### 📁 Beispiele")
+        
+        examples = gr.Examples(
+            examples=EXAMPLE_DATA,
+            inputs=analyzer,
+            label="Beispiel-Analysen"
+        )
+        
+        # Info section
+        gr.Markdown("""
+        ### 📝 Verwendung
+        
+        1. **Datei hochladen**: Ziehen Sie eine DICOM- oder Bilddatei in den Upload-Bereich
+        2. **Modalität wählen**: CT, CR, DX, RX, oder DR
+        3. **Analyse-Task**: Punktanalyse, Fettsegmentierung, oder vollständige Analyse
+        4. **ROI aktivieren**: Klicken Sie auf das Bild, um einen Analysepunkt zu wählen
+        
+        ### 🔧 Features
+        
+        - **DICOM Support**: Automatische Erkennung von Modalität und HU-Werten
+        - **Multi-Tissue Segmentation**: Erkennt Knochen, Weichgewebe, Luft, Metall, Fett, Flüssigkeit
+        - **Klinische Bewertung**: Adipositas-Risiko, Gewebeverteilung, Anomalieerkennung
+        - **AI-Agent Ready**: Strukturierte JSON-Ausgabe für Integration
+        
+        ### 🔗 Integration
+        
+        ```python
+        import gradio as gr
+        from gradio_medical_image_analyzer import MedicalImageAnalyzer
+        
+        analyzer = MedicalImageAnalyzer(
+            analysis_mode="structured",
+            include_confidence=True
+        )
+        
+        # Use in your Gradio app
+        with gr.Blocks() as app:
+            analyzer_component = analyzer
+            # ... rest of your app
+        ```
+        """)
+        
+        # Event handlers
+        def update_config(mode, conf, reason):
+            # This would update the component configuration
+            # In real implementation, this would be handled by the component
+            return gr.update(
+                analysis_mode=mode,
+                include_confidence=conf,
+                include_reasoning=reason
+            )
+        
+        # Connect configuration changes
+        for config in [analysis_mode, include_confidence, include_reasoning]:
+            config.change(
+                fn=update_config,
+                inputs=[analysis_mode, include_confidence, include_reasoning],
+                outputs=analyzer
+            )
+        
+        # Handle analysis results
+        def handle_analysis_complete(data):
+            if data and "analysis" in data:
+                analysis = data["analysis"]
+                report = data.get("report", "")
+                
+                # Log to console for debugging
+                print("Analysis completed:")
+                print(f"Modality: {analysis.get('modality', 'Unknown')}")
+                if "point_analysis" in analysis:
+                    print(f"Tissue: {analysis['point_analysis'].get('tissue_type', {}).get('type', 'Unknown')}")
+                
+                return data
+            return data
+        
+        analyzer.change(
+            fn=handle_analysis_complete,
+            inputs=analyzer,
+            outputs=analyzer
+        )
+    
+    return demo
+
+
+def create_simple_demo():
+    """Einfache Demo ohne viel Konfiguration"""
+    with gr.Blocks(title="Medical Image Analyzer - Simple Demo") as demo:
+        gr.Markdown("# 🏥 Medical Image Analyzer")
+        
+        analyzer = MedicalImageAnalyzer(
+            label="Laden Sie ein medizinisches Bild hoch (DICOM, PNG, JPG)",
+            analysis_mode="visual",  # Visual mode for human-readable output
+            elem_id="analyzer"
+        )
+        
+        # Auto-analyze on upload
+        @analyzer.upload
+        def auto_analyze(file_data):
+            # The component handles the analysis internally
+            return file_data
+        
+    return demo
+
+
+if __name__ == "__main__":
+    # You can switch between demos
+    # demo = create_demo()  # Full demo with configuration
+    demo = create_simple_demo()  # Simple demo
+    
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

space.py

@@ -0,0 +1,813 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MedicalImageAnalyzer': {'description': 'A Gradio component for AI-agent compatible medical image analysis.\n\nProvides structured output for:\n- HU value analysis (CT only)\n- Tissue classification\n- Fat segmentation (subcutaneous, visceral)\n- Confidence scores and reasoning', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, typing.Any], None\n]', 'default': 'None', 'description': None}, 'label': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'info': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'every': {'type': 'typing.Optional[float][float, None]', 'default': 'None', 'description': None}, 'show_label': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'container': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'scale': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'min_width': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'visible': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'elem_id': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'render': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'key': {'type': 'typing.Union[int, str, NoneType][int, str, None]', 'default': 'None', 'description': None}, 'analysis_mode': {'type': 'str', 'default': '"structured"', 'description': '"structured" for AI agents, "visual" for human interpretation'}, 'include_confidence': {'type': 'bool', 'default': 'True', 'description': 'Include confidence scores in results'}, 'include_reasoning': {'type': 'bool', 'default': 'True', 'description': 'Include reasoning/explanation for findings'}, 'segmentation_types': {'type': 'typing.List[str][str]', 'default': 'None', 'description': 'List of segmentation types to perform'}}, 'postprocess': {'value': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the MedicalImageAnalyzer changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the MedicalImageAnalyzer. Uses event data gradio.SelectData to carry `value` referring to the label of the MedicalImageAnalyzer, and `selected` to refer to state of the MedicalImageAnalyzer. See EventData documentation on how to use this event data'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the MedicalImageAnalyzer.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the MedicalImageAnalyzer using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MedicalImageAnalyzer': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_medical_image_analyzer`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/yourusername/gradio-medical-image-analyzer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+AI-agent optimized medical image analysis component for Gradio
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_medical_image_analyzer
+```
+
+## Usage
+
+```python
+#!/usr/bin/env python3
+\"\"\"
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+\"\"\"
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    \"\"\"Draw ROI circle on the image\"\"\"
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    \"\"\"Create overlay image with fat segmentation highlighted\"\"\"
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    \"\"\"
+    Processes uploaded file and performs analysis
+    \"\"\"
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    \"\"\"Creates a visual HTML report with improved styling\"\"\"
+    html = f\"\"\"
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    \"\"\"
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f\"\"\"
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        \"\"\"
+        
+        if results.get('modality') == 'CT':
+            html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            \"\"\"
+        else:
+            html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            \"\"\"
+        
+        html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        \"\"\"
+        
+        if 'reasoning' in pa:
+            html += f\"\"\"
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            \"\"\"
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f\"\"\"
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            \"\"\"
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f\"\"\"
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                \"\"\"
+                
+                if interp.get('recommendations'):
+                    html += \"\"\"
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    \"\"\"
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f\"\"\"
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        \"\"\"
+        
+        if quality.get('issues'):
+            html += f\"\"\"
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            \"\"\"
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css=\"\"\"
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        \"\"\"
+    ) as demo:
+        gr.Markdown(\"\"\"
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        \"\"\")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown(\"\"\"
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    \"\"\")
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown(\"\"\"
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            \"\"\")
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MedicalImageAnalyzer`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MedicalImageAnalyzer"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MedicalImageAnalyzer"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: typing.Dict[str, typing.Any][str, typing.Any]
+) -> typing.Dict[str, typing.Any][str, typing.Any]:
+    return value
+```
+""", elem_classes=["md-custom", "MedicalImageAnalyzer-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MedicalImageAnalyzer: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,57 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+venv/
+ENV/
+env/
+.venv
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Gradio
+flagged/
+gradio_cached_examples/
+
+# Project specific
+*.dcm
+*.dicom
+IM_*
+test_images/
+temp/
+.gradio/

src/FILE_UPLOAD_IMPLEMENTATION.md

@@ -0,0 +1,99 @@
+# File Upload Implementation for Medical Image Analyzer
+
+## Overview
+The medical_image_analyzer now fully supports uploading files without extensions (like IM_0001), matching the vetdicomviewer implementation.
+
+## Key Implementation Details
+
+### 1. Backend (medical_image_analyzer.py)
+```python
+# Line 674 in process_file method
+ds = pydicom.dcmread(file_path, force=True)
+```
+- Uses `force=True` parameter to read any file as DICOM first
+- Falls back to regular image processing if DICOM reading fails
+- No filename filtering - accepts all files
+
+### 2. Frontend File Upload (wrapper_test.py & app.py)
+```python
+file_input = gr.File(
+    label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+    file_count="single",
+    type="filepath",
+    elem_classes="file-upload"
+    # Note: NO file_types parameter = accepts ALL files
+)
+```
+- No `file_types` parameter means ALL files are accepted
+- Clear labeling mentions "IM_*" files
+- Custom CSS styling for better UX
+
+### 3. Svelte Component (Index.svelte)
+```javascript
+// Always try DICOM first for files without extensions
+if (!file_ext || file_ext === 'dcm' || file_ext === 'dicom' || 
+    file.type === 'application/dicom' || file.name.startsWith('IM_')) {
+    // Process as DICOM
+}
+```
+- Prioritizes DICOM processing for files without extensions
+- Specifically checks for files starting with "IM_"
+
+## Features Added
+
+### 1. ROI Visualization
+- Draw ROI circle on the image
+- Visual feedback for point analysis location
+- Toggle to show/hide overlay
+
+### 2. Fat Segmentation Overlay
+- Display fat percentages on CT images
+- Color-coded visualization (when masks available)
+- Legend for subcutaneous vs visceral fat
+
+### 3. Enhanced UI
+- Two-tab view: Original Image | Overlay View
+- File information display with metadata
+- Improved text contrast and styling
+- English interface (no German text)
+
+## Testing
+Run the test script to verify IM_0001 support:
+```bash
+python test_im_files.py
+```
+
+Output confirms:
+- ✅ IM_0001 files load successfully
+- ✅ DICOM metadata extracted properly
+- ✅ Analysis functions work correctly
+- ✅ HU values calculated for CT images
+
+## File Type Support
+1. **DICOM files**: .dcm, .dicom
+2. **Files without extensions**: IM_0001, IM_0002, etc.
+3. **Regular images**: .png, .jpg, .jpeg, .tiff, .bmp
+4. **Any other file**: Will attempt DICOM first, then image
+
+## Usage Example
+```python
+# Both wrapper_test.py and app.py now support:
+# 1. Upload any medical image file
+# 2. Automatic modality detection for DICOM
+# 3. ROI visualization on demand
+# 4. Fat segmentation info overlay
+
+# The file upload is unrestricted:
+# - Accepts ALL file types
+# - Uses force=True for DICOM reading
+# - Graceful fallback to image processing
+```
+
+## Summary
+The medical_image_analyzer now matches vetdicomviewer's file handling capabilities:
+- ✅ Supports files without extensions (IM_0001)
+- ✅ ROI visualization on images
+- ✅ Fat segmentation overlay (text-based currently)
+- ✅ Enhanced UI with better contrast
+- ✅ English-only interface
+- ✅ Synchronized app.py with wrapper_test.py features

src/README.md

@@ -0,0 +1,1026 @@
+
+---
+title: Medical Image Analyzer Component
+emoji: 🏥
+colorFrom: blue
+colorTo: green
+sdk: gradio
+sdk_version: 5.33.0
+app_file: demo/app.py
+pinned: false
+license: apache-2.0
+tags:
+  - custom-component-track
+  - medical-imaging
+  - gradio-custom-component
+  - hackathon-2025
+  - ai-agents
+---
+
+# `gradio_medical_image_analyzer`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/markusclauss/gradio-medical-image-analyzer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+AI-agent optimized medical image analysis component for Gradio
+
+## ⚠️ IMPORTANT MEDICAL DISCLAIMER ⚠️
+
+**THIS SOFTWARE IS FOR RESEARCH AND EDUCATIONAL PURPOSES ONLY**
+
+🚨 **DO NOT USE FOR CLINICAL DIAGNOSIS OR MEDICAL DECISION MAKING** 🚨
+
+This component is in **EARLY DEVELOPMENT** and is intended as a **proof of concept** for medical image analysis integration with Gradio. The results produced by this software:
+
+- **ARE NOT** validated for clinical use
+- **ARE NOT** FDA approved or CE marked
+- **SHOULD NOT** be used for patient diagnosis or treatment decisions
+- **SHOULD NOT** replace professional medical judgment
+- **MAY CONTAIN** significant errors or inaccuracies
+- **ARE PROVIDED** without any warranty of accuracy or fitness for medical purposes
+
+**ALWAYS CONSULT QUALIFIED HEALTHCARE PROFESSIONALS** for medical image interpretation and clinical decisions. This software is intended solely for:
+- Research and development purposes
+- Educational demonstrations
+- Technical integration testing
+- Non-clinical experimental use
+
+By using this software, you acknowledge that you understand these limitations and agree not to use it for any clinical or medical diagnostic purposes.
+
+## Installation
+
+```bash
+pip install gradio_medical_image_analyzer
+```
+
+## Usage
+
+```python
+#!/usr/bin/env python3
+"""
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css="""
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        """
+    ) as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown("""
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    """)
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown("""
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            """)
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+```
+
+## `MedicalImageAnalyzer`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[typing.Dict[str, typing.Any]][
+    typing.Dict[str, typing.Any][str, typing.Any], None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[float][float, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[int][int, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[str][str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[typing.List[str], str, NoneType][
+    typing.List[str][str], str, None
+]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Optional[bool][bool, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Union[int, str, NoneType][int, str, None]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>analysis_mode</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str
+```
+
+</td>
+<td align="left"><code>"structured"</code></td>
+<td align="left">"structured" for AI agents, "visual" for human interpretation</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_confidence</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Include confidence scores in results</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_reasoning</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Include reasoning/explanation for findings</td>
+</tr>
+
+<tr>
+<td align="left"><code>segmentation_types</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.List[str][str]
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of segmentation types to perform</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the MedicalImageAnalyzer changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `select` | Event listener for when the user selects or deselects the MedicalImageAnalyzer. Uses event data gradio.SelectData to carry `value` referring to the label of the MedicalImageAnalyzer, and `selected` to refer to state of the MedicalImageAnalyzer. See EventData documentation on how to use this event data |
+| `upload` | This listener is triggered when the user uploads a file into the MedicalImageAnalyzer. |
+| `clear` | This listener is triggered when the user clears the MedicalImageAnalyzer using the clear button for the component. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+ def predict(
+     value: typing.Dict[str, typing.Any][str, typing.Any]
+ ) -> typing.Dict[str, typing.Any][str, typing.Any]:
+     return value
+ ```
+
+---
+
+Developed for veterinary medicine with ❤️ and cutting-edge web technology
+
+**Gradio Agents & MCP Hackathon 2025 - Track 2 Submission**

src/backend/gradio_medical_image_analyzer/__init__.py

@@ -0,0 +1,3 @@
+from .medical_image_analyzer import MedicalImageAnalyzer
+
+__all__ = ['MedicalImageAnalyzer']

src/backend/gradio_medical_image_analyzer/fat_segmentation.py

@@ -0,0 +1,377 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Fat Segmentation Module for Medical Image Analyzer
+Implements subcutaneous and visceral fat detection using HU values
+Adapted for multi-species veterinary and human medical imaging
+"""
+
+import numpy as np
+from scipy import ndimage
+from skimage import morphology, measure
+from typing import Tuple, Dict, Any, Optional
+import cv2
+
+
+class FatSegmentationEngine:
+    """
+    Engine for detecting and segmenting fat tissue in medical CT images
+    Supports both human and veterinary applications
+    """
+    
+    # HU ranges for different tissues
+    FAT_HU_RANGE = (-190, -30)  # Fat tissue Hounsfield Units
+    MUSCLE_HU_RANGE = (30, 80)   # Muscle tissue for body outline
+    
+    def __init__(self):
+        self.fat_mask = None
+        self.subcutaneous_mask = None
+        self.visceral_mask = None
+        self.body_outline = None
+        
+    def segment_fat_tissue(self, hu_array: np.ndarray, species: str = "human") -> Dict[str, Any]:
+        """
+        Segment fat tissue into subcutaneous and visceral components
+        
+        Args:
+            hu_array: 2D array of Hounsfield Unit values
+            species: Species type for specific adjustments
+            
+        Returns:
+            Dictionary containing segmentation results and statistics
+        """
+        # Step 1: Detect all fat tissue based on HU values
+        self.fat_mask = self._detect_fat_tissue(hu_array)
+        
+        # Step 2: Detect body outline for subcutaneous/visceral separation
+        self.body_outline = self._detect_body_outline(hu_array)
+        
+        # Step 3: Separate subcutaneous and visceral fat
+        self.subcutaneous_mask, self.visceral_mask = self._separate_fat_types(
+            self.fat_mask, self.body_outline, species
+        )
+        
+        # Step 4: Calculate statistics
+        stats = self._calculate_fat_statistics(hu_array)
+        
+        # Step 5: Add clinical assessment
+        assessment = self.assess_obesity_risk(stats, species)
+        
+        return {
+            'fat_mask': self.fat_mask,
+            'subcutaneous_mask': self.subcutaneous_mask,
+            'visceral_mask': self.visceral_mask,
+            'body_outline': self.body_outline,
+            'statistics': stats,
+            'assessment': assessment,
+            'overlay_colors': self._generate_overlay_colors()
+        }
+    
+    def _detect_fat_tissue(self, hu_array: np.ndarray) -> np.ndarray:
+        """Detect fat tissue based on HU range"""
+        fat_mask = (hu_array >= self.FAT_HU_RANGE[0]) & (hu_array <= self.FAT_HU_RANGE[1])
+        
+        # Clean up noise with morphological operations
+        fat_mask = morphology.binary_opening(fat_mask, morphology.disk(2))
+        fat_mask = morphology.binary_closing(fat_mask, morphology.disk(3))
+        
+        return fat_mask.astype(np.uint8)
+    
+    def _detect_body_outline(self, hu_array: np.ndarray) -> np.ndarray:
+        """
+        Detect body outline to separate subcutaneous from visceral fat
+        Uses muscle tissue and air/tissue boundaries
+        """
+        # Threshold for air/tissue boundary (around -500 HU)
+        tissue_mask = hu_array > -500
+        
+        # Fill holes and smooth the outline
+        tissue_mask = ndimage.binary_fill_holes(tissue_mask)
+        tissue_mask = morphology.binary_closing(tissue_mask, morphology.disk(5))
+        
+        # Find the largest connected component (main body)
+        labeled = measure.label(tissue_mask)
+        props = measure.regionprops(labeled)
+        
+        if props:
+            largest_region = max(props, key=lambda x: x.area)
+            body_mask = (labeled == largest_region.label)
+            
+            # Get the outline/contour
+            outline = morphology.binary_erosion(body_mask, morphology.disk(10))
+            outline = body_mask & ~outline
+            
+            return outline.astype(np.uint8)
+        
+        return np.zeros_like(hu_array, dtype=np.uint8)
+    
+    def _separate_fat_types(self, fat_mask: np.ndarray, body_outline: np.ndarray, 
+                           species: str = "human") -> Tuple[np.ndarray, np.ndarray]:
+        """
+        Separate subcutaneous and visceral fat based on body outline
+        """
+        # Distance transform from body outline
+        distance_from_outline = ndimage.distance_transform_edt(~body_outline.astype(bool))
+        
+        # Adjust threshold based on species
+        distance_thresholds = {
+            "human": 25,
+            "dog": 20,
+            "cat": 15,
+            "horse": 30,
+            "cattle": 35
+        }
+        
+        threshold = distance_thresholds.get(species.lower(), 20)
+        
+        # Subcutaneous fat: fat tissue close to body surface
+        subcutaneous_mask = fat_mask & (distance_from_outline <= threshold)
+        
+        # Visceral fat: remaining fat tissue inside the body
+        visceral_mask = fat_mask & ~subcutaneous_mask
+        
+        # Additional filtering for visceral fat (inside body cavity)
+        body_center = self._find_body_center(body_outline)
+        visceral_mask = self._filter_visceral_fat(visceral_mask, body_center, species)
+        
+        return subcutaneous_mask.astype(np.uint8), visceral_mask.astype(np.uint8)
+    
+    def _find_body_center(self, body_outline: np.ndarray) -> Tuple[int, int]:
+        """Find the center of the body for visceral fat filtering"""
+        y_coords, x_coords = np.where(body_outline > 0)
+        if len(y_coords) > 0:
+            center_y = int(np.mean(y_coords))
+            center_x = int(np.mean(x_coords))
+            return (center_y, center_x)
+        return (body_outline.shape[0] // 2, body_outline.shape[1] // 2)
+    
+    def _filter_visceral_fat(self, visceral_mask: np.ndarray, body_center: Tuple[int, int],
+                            species: str = "human") -> np.ndarray:
+        """
+        Filter visceral fat to ensure it's inside the body cavity
+        """
+        # Create a mask for the central body region
+        center_y, center_x = body_center
+        h, w = visceral_mask.shape
+        
+        # Adjust ellipse size based on species
+        ellipse_factors = {
+            "human": (0.35, 0.35),
+            "dog": (0.3, 0.3),
+            "cat": (0.25, 0.25),
+            "horse": (0.4, 0.35),
+            "cattle": (0.4, 0.4)
+        }
+        
+        x_factor, y_factor = ellipse_factors.get(species.lower(), (0.3, 0.3))
+        
+        # Create elliptical region around body center for visceral fat
+        y, x = np.ogrid[:h, :w]
+        ellipse_mask = ((x - center_x) / (w * x_factor))**2 + ((y - center_y) / (h * y_factor))**2 <= 1
+        
+        # Keep only visceral fat within the central body region
+        filtered_visceral = visceral_mask & ellipse_mask
+        
+        return filtered_visceral.astype(np.uint8)
+    
+    def _calculate_fat_statistics(self, hu_array: np.ndarray) -> Dict[str, float]:
+        """Calculate fat tissue statistics"""
+        total_pixels = hu_array.size
+        fat_pixels = np.sum(self.fat_mask > 0)
+        subcutaneous_pixels = np.sum(self.subcutaneous_mask > 0)
+        visceral_pixels = np.sum(self.visceral_mask > 0)
+        
+        # Calculate percentages
+        fat_percentage = (fat_pixels / total_pixels) * 100
+        subcutaneous_percentage = (subcutaneous_pixels / total_pixels) * 100
+        visceral_percentage = (visceral_pixels / total_pixels) * 100
+        
+        # Calculate ratio
+        visceral_subcutaneous_ratio = (
+            visceral_pixels / subcutaneous_pixels 
+            if subcutaneous_pixels > 0 else 0
+        )
+        
+        # Calculate mean HU values for each tissue type
+        fat_hu_mean = np.mean(hu_array[self.fat_mask > 0]) if fat_pixels > 0 else 0
+        
+        return {
+            'total_fat_percentage': round(fat_percentage, 2),
+            'subcutaneous_fat_percentage': round(subcutaneous_percentage, 2),
+            'visceral_fat_percentage': round(visceral_percentage, 2),
+            'visceral_subcutaneous_ratio': round(visceral_subcutaneous_ratio, 3),
+            'total_fat_pixels': int(fat_pixels),
+            'subcutaneous_fat_pixels': int(subcutaneous_pixels),
+            'visceral_fat_pixels': int(visceral_pixels),
+            'fat_mean_hu': round(float(fat_hu_mean), 1)
+        }
+    
+    def _generate_overlay_colors(self) -> Dict[str, Tuple[int, int, int]]:
+        """Generate color overlays for visualization"""
+        return {
+            'subcutaneous': (255, 255, 0, 128),  # Yellow with transparency
+            'visceral': (255, 0, 0, 128),        # Red with transparency
+            'body_outline': (0, 255, 0, 255)     # Green outline
+        }
+    
+    def create_overlay_image(self, base_image: np.ndarray) -> np.ndarray:
+        """
+        Create overlay image with fat segmentation highlighted
+        
+        Args:
+            base_image: Original grayscale DICOM image (0-255)
+            
+        Returns:
+            RGB image with fat overlays
+        """
+        # Convert to RGB
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+        
+        colors = self._generate_overlay_colors()
+        
+        # Apply subcutaneous fat overlay (yellow)
+        if self.subcutaneous_mask is not None:
+            yellow_overlay = np.zeros_like(overlay_img)
+            yellow_overlay[self.subcutaneous_mask > 0] = colors['subcutaneous'][:3]
+            overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+        
+        # Apply visceral fat overlay (red)
+        if self.visceral_mask is not None:
+            red_overlay = np.zeros_like(overlay_img)
+            red_overlay[self.visceral_mask > 0] = colors['visceral'][:3]
+            overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+        
+        # Add body outline (green)
+        if self.body_outline is not None:
+            overlay_img[self.body_outline > 0] = colors['body_outline'][:3]
+        
+        return overlay_img
+    
+    def assess_obesity_risk(self, fat_stats: Dict[str, float], species: str = "human") -> Dict[str, Any]:
+        """
+        Assess obesity based on fat percentage and species-specific thresholds
+        
+        Args:
+            fat_stats: Fat statistics from segmentation
+            species: Species type (human, dog, cat, etc.)
+            
+        Returns:
+            Obesity assessment with recommendations
+        """
+        # Species-specific fat percentage thresholds
+        thresholds = {
+            'human': {
+                'normal': (10, 20),
+                'overweight': (20, 30),
+                'obese': (30, float('inf'))
+            },
+            'dog': {
+                'normal': (5, 15),
+                'overweight': (15, 25),
+                'obese': (25, float('inf'))
+            },
+            'cat': {
+                'normal': (10, 20),
+                'overweight': (20, 30),
+                'obese': (30, float('inf'))
+            },
+            'horse': {
+                'normal': (8, 18),
+                'overweight': (18, 28),
+                'obese': (28, float('inf'))
+            },
+            'cattle': {
+                'normal': (10, 25),
+                'overweight': (25, 35),
+                'obese': (35, float('inf'))
+            }
+        }
+        
+        fat_percentage = fat_stats['total_fat_percentage']
+        species_thresholds = thresholds.get(species.lower(), thresholds['human'])
+        
+        # Determine weight category
+        if fat_percentage <= species_thresholds['normal'][1]:
+            category = "Normal Weight"
+            color = "green"
+            recommendation = "Maintain current diet and exercise routine."
+        elif fat_percentage <= species_thresholds['overweight'][1]:
+            category = "Overweight"
+            color = "orange"
+            recommendation = "Consider dietary adjustments and increased exercise."
+        else:
+            category = "Obese"
+            color = "red"
+            recommendation = "Medical consultation recommended for weight management plan."
+        
+        # Risk assessment based on visceral fat ratio
+        vs_ratio = fat_stats['visceral_subcutaneous_ratio']
+        if vs_ratio < 0.5:
+            risk_level = "Low Risk"
+            risk_color = "green"
+        elif vs_ratio < 1.0:
+            risk_level = "Moderate Risk"
+            risk_color = "orange"
+        else:
+            risk_level = "High Risk - Excess visceral fat"
+            risk_color = "red"
+        
+        return {
+            'category': category,
+            'color': color,
+            'recommendation': recommendation,
+            'fat_percentage': fat_percentage,
+            'visceral_subcutaneous_ratio': vs_ratio,
+            'risk_level': risk_level,
+            'risk_color': risk_color,
+            'species': species
+        }
+
+
+# Convenience functions for integration
+def segment_fat(hu_array: np.ndarray, species: str = "human") -> Dict[str, Any]:
+    """
+    Convenience function for fat segmentation
+    
+    Args:
+        hu_array: 2D array of Hounsfield Unit values
+        species: Species type for specific adjustments
+        
+    Returns:
+        Segmentation results dictionary
+    """
+    engine = FatSegmentationEngine()
+    return engine.segment_fat_tissue(hu_array, species)
+
+
+def create_fat_overlay(base_image: np.ndarray, segmentation_results: Dict[str, Any]) -> np.ndarray:
+    """
+    Create overlay visualization from segmentation results
+    
+    Args:
+        base_image: Original grayscale image
+        segmentation_results: Results from segment_fat function
+        
+    Returns:
+        RGB overlay image
+    """
+    engine = FatSegmentationEngine()
+    engine.fat_mask = segmentation_results.get('fat_mask')
+    engine.subcutaneous_mask = segmentation_results.get('subcutaneous_mask')
+    engine.visceral_mask = segmentation_results.get('visceral_mask')
+    engine.body_outline = segmentation_results.get('body_outline')
+    
+    return engine.create_overlay_image(base_image)
+
+
+# Example usage
+if __name__ == "__main__":
+    print("🔬 Fat Segmentation Engine for Medical Image Analyzer")
+    print("Features:")
+    print("  - Multi-species support (human, dog, cat, horse, cattle)")
+    print("  - HU-based fat tissue detection")
+    print("  - Subcutaneous vs visceral fat separation")
+    print("  - Species-specific obesity assessment")
+    print("  - Clinical risk evaluation")
+    print("  - Visual overlay generation")
+    print("  - Comprehensive fat statistics")

src/backend/gradio_medical_image_analyzer/medical_image_analyzer.py

@@ -0,0 +1,788 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Gradio Custom Component: Medical Image Analyzer
+AI-Agent optimized component for medical image analysis
+"""
+
+from __future__ import annotations
+from typing import Any, Dict, List, Optional, Tuple, Union
+import gradio as gr
+from gradio.components.base import Component
+from gradio.events import Events
+import numpy as np
+import json
+from pathlib import Path
+from PIL import Image
+try:
+    import pydicom
+    PYDICOM_AVAILABLE = True
+except ImportError:
+    PYDICOM_AVAILABLE = False
+
+# Import our existing analyzers
+try:
+    from .fat_segmentation import FatSegmentationEngine, segment_fat, create_fat_overlay
+    FAT_SEGMENTATION_AVAILABLE = True
+except ImportError:
+    FAT_SEGMENTATION_AVAILABLE = False
+    FatSegmentationEngine = None
+    segment_fat = None
+    create_fat_overlay = None
+
+try:
+    from .xray_analyzer import XRayAnalyzer, analyze_xray, classify_xray_tissue
+    XRAY_ANALYZER_AVAILABLE = True
+except ImportError:
+    XRAY_ANALYZER_AVAILABLE = False
+    XRayAnalyzer = None
+    analyze_xray = None
+    classify_xray_tissue = None
+
+
+class MedicalImageAnalyzer(Component):
+    """
+    A Gradio component for AI-agent compatible medical image analysis.
+    
+    Provides structured output for:
+    - HU value analysis (CT only)
+    - Tissue classification
+    - Fat segmentation (subcutaneous, visceral)
+    - Confidence scores and reasoning
+    """
+    
+    EVENTS = [
+        Events.change,
+        Events.select,
+        Events.upload,
+        Events.clear,
+    ]
+    
+    # HU ranges for tissue classification (CT only)
+    HU_RANGES = {
+        'air': {'min': -1000, 'max': -500, 'icon': '🌫️'},
+        'fat': {'min': -100, 'max': -50, 'icon': '🟡'},
+        'water': {'min': -10, 'max': 10, 'icon': '💧'},
+        'soft_tissue': {'min': 30, 'max': 80, 'icon': '🔴'},
+        'bone': {'min': 200, 'max': 3000, 'icon': '🦴'}
+    }
+    
+    def __init__(
+        self,
+        value: Optional[Dict[str, Any]] = None,
+        *,
+        label: Optional[str] = None,
+        info: Optional[str] = None,
+        every: Optional[float] = None,
+        show_label: Optional[bool] = None,
+        container: Optional[bool] = None,
+        scale: Optional[int] = None,
+        min_width: Optional[int] = None,
+        visible: Optional[bool] = None,
+        elem_id: Optional[str] = None,
+        elem_classes: Optional[List[str] | str] = None,
+        render: Optional[bool] = None,
+        key: Optional[int | str] = None,
+        # Custom parameters
+        analysis_mode: str = "structured",  # "structured" for agents, "visual" for humans
+        include_confidence: bool = True,
+        include_reasoning: bool = True,
+        segmentation_types: List[str] = None,
+        **kwargs,
+    ):
+        """
+        Initialize the Medical Image Analyzer component.
+        
+        Args:
+            analysis_mode: "structured" for AI agents, "visual" for human interpretation
+            include_confidence: Include confidence scores in results
+            include_reasoning: Include reasoning/explanation for findings
+            segmentation_types: List of segmentation types to perform
+        """
+        self.analysis_mode = analysis_mode
+        self.include_confidence = include_confidence
+        self.include_reasoning = include_reasoning
+        self.segmentation_types = segmentation_types or ["fat_total", "fat_subcutaneous", "fat_visceral"]
+        
+        if FAT_SEGMENTATION_AVAILABLE:
+            self.fat_engine = FatSegmentationEngine()
+        else:
+            self.fat_engine = None
+            
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+            **kwargs,
+        )
+    
+    def preprocess(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Preprocess input from frontend.
+        Expected format:
+        {
+            "image": numpy array or base64,
+            "modality": "CT" or "XR",
+            "pixel_spacing": [x, y] (optional),
+            "roi": {"x": int, "y": int, "radius": int} (optional),
+            "task": "analyze_point" | "segment_fat" | "full_analysis"
+        }
+        """
+        if payload is None:
+            return None
+            
+        # Validate required fields
+        if "image" not in payload:
+            return {"error": "No image provided"}
+            
+        return payload
+    
+    def postprocess(self, value: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Postprocess output for frontend.
+        Returns structured data for AI agents or formatted HTML for visual mode.
+        """
+        if value is None:
+            return None
+            
+        if "error" in value:
+            return value
+            
+        # For visual mode, convert to HTML
+        if self.analysis_mode == "visual":
+            value["html_report"] = self._create_html_report(value)
+            
+        return value
+    
+    def analyze_image(
+        self, 
+        image: np.ndarray,
+        modality: str = "CT",
+        pixel_spacing: Optional[List[float]] = None,
+        roi: Optional[Dict[str, int]] = None,
+        task: str = "full_analysis",
+        clinical_context: Optional[Dict[str, Any]] = None
+    ) -> Dict[str, Any]:
+        """
+        Main analysis function for medical images.
+        
+        Args:
+            image: 2D numpy array of pixel values
+            modality: "CT" or "XR" (X-Ray)
+            pixel_spacing: [x, y] spacing in mm
+            roi: Region of interest {"x": int, "y": int, "radius": int}
+            task: Analysis task
+            clinical_context: Additional context for guided analysis
+            
+        Returns:
+            Structured analysis results
+        """
+        # Handle None or invalid image
+        if image is None:
+            return {"error": "No image provided", "modality": modality}
+            
+        results = {
+            "modality": modality,
+            "timestamp": self._get_timestamp(),
+            "measurements": {},
+            "findings": [],
+            "segmentation": {},
+            "quality_metrics": self._assess_image_quality(image)
+        }
+        
+        if task == "analyze_point" and roi:
+            # Analyze specific point/region
+            results["point_analysis"] = self._analyze_roi(image, modality, roi)
+            
+        elif task == "segment_fat" and modality == "CT":
+            # Fat segmentation
+            results["segmentation"] = self._perform_fat_segmentation(image, pixel_spacing)
+            
+        elif task == "full_analysis":
+            # Complete analysis
+            if roi:
+                results["point_analysis"] = self._analyze_roi(image, modality, roi)
+            if modality == "CT":
+                results["segmentation"] = self._perform_fat_segmentation(image, pixel_spacing)
+            elif modality in ["CR", "DX", "RX", "DR", "X-Ray"]:
+                results["segmentation"] = self._perform_xray_analysis(image)
+            results["statistics"] = self._calculate_image_statistics(image)
+            
+        # Add clinical interpretation if context provided
+        if clinical_context:
+            results["clinical_correlation"] = self._correlate_with_clinical(
+                results, clinical_context
+            )
+            
+        return results
+    
+    def _analyze_roi(self, image: np.ndarray, modality: str, roi: Dict[str, int]) -> Dict[str, Any]:
+        """Analyze a specific region of interest"""
+        x, y, radius = roi.get("x", 0), roi.get("y", 0), roi.get("radius", 5)
+        
+        # Extract ROI
+        y_min = max(0, y - radius)
+        y_max = min(image.shape[0], y + radius)
+        x_min = max(0, x - radius)
+        x_max = min(image.shape[1], x + radius)
+        
+        roi_pixels = image[y_min:y_max, x_min:x_max]
+        
+        analysis = {
+            "location": {"x": x, "y": y},
+            "roi_size": {"width": x_max - x_min, "height": y_max - y_min},
+            "statistics": {
+                "mean": float(np.mean(roi_pixels)),
+                "std": float(np.std(roi_pixels)),
+                "min": float(np.min(roi_pixels)),
+                "max": float(np.max(roi_pixels))
+            }
+        }
+        
+        if modality == "CT":
+            # HU-based analysis
+            center_value = float(image[y, x])
+            analysis["hu_value"] = center_value
+            analysis["tissue_type"] = self._classify_tissue_by_hu(center_value)
+            
+            if self.include_confidence:
+                analysis["confidence"] = self._calculate_confidence(roi_pixels, center_value)
+                
+            if self.include_reasoning:
+                analysis["reasoning"] = self._generate_reasoning(
+                    center_value, analysis["tissue_type"], roi_pixels
+                )
+        else:
+            # Intensity-based analysis for X-Ray
+            analysis["intensity"] = float(image[y, x])
+            analysis["tissue_type"] = self._classify_xray_intensity(
+                image[y, x], x, y, image
+            )
+            
+        return analysis
+    
+    def _classify_tissue_by_hu(self, hu_value: float) -> Dict[str, str]:
+        """Classify tissue type based on HU value"""
+        for tissue_type, ranges in self.HU_RANGES.items():
+            if ranges['min'] <= hu_value <= ranges['max']:
+                return {
+                    'type': tissue_type,
+                    'icon': ranges['icon'],
+                    'hu_range': f"{ranges['min']} to {ranges['max']}"
+                }
+        
+        # Edge cases
+        if hu_value < -1000:
+            return {'type': 'air', 'icon': '🌫️', 'hu_range': '< -1000'}
+        else:
+            return {'type': 'metal/artifact', 'icon': '⚙️', 'hu_range': '> 3000'}
+    
+    def _classify_xray_intensity(self, intensity: float, x: int, y: int, image: np.ndarray) -> Dict[str, str]:
+        """Classify tissue in X-Ray based on intensity"""
+        if XRAY_ANALYZER_AVAILABLE:
+            # Use the advanced XRay analyzer
+            analyzer = XRayAnalyzer()
+            # Normalize the intensity  
+            stats = self._calculate_image_statistics(image)
+            normalized = (intensity - stats['min']) / (stats['max'] - stats['min'])
+            result = analyzer.classify_pixel(normalized, x, y, image)
+            return {
+                'type': result['type'],
+                'icon': result['icon'],
+                'confidence': result['confidence'],
+                'color': result['color']
+            }
+        else:
+            # Fallback to simple classification
+            normalized = (intensity - stats['min']) / (stats['max'] - stats['min'])
+            
+            if normalized > 0.9:
+                return {'type': 'bone/metal', 'icon': '🦴', 'intensity_range': 'very high'}
+            elif normalized > 0.6:
+                return {'type': 'bone', 'icon': '🦴', 'intensity_range': 'high'}
+            elif normalized > 0.3:
+                return {'type': 'soft_tissue', 'icon': '🔴', 'intensity_range': 'medium'}
+            else:
+                return {'type': 'air/lung', 'icon': '🌫️', 'intensity_range': 'low'}
+    
+    def _perform_fat_segmentation(
+        self, 
+        image: np.ndarray, 
+        pixel_spacing: Optional[List[float]] = None
+    ) -> Dict[str, Any]:
+        """Perform fat segmentation using our existing engine"""
+        if not self.fat_engine:
+            return {"error": "Fat segmentation not available"}
+        
+        # Use existing fat segmentation
+        segmentation_result = self.fat_engine.segment_fat_tissue(image)
+        
+        results = {
+            "statistics": segmentation_result.get("statistics", {}),
+            "segments": {}
+        }
+        
+        # Calculate areas if pixel spacing provided
+        if pixel_spacing:
+            pixel_area_mm2 = pixel_spacing[0] * pixel_spacing[1]
+            for segment_type in ["total", "subcutaneous", "visceral"]:
+                pixel_key = f"{segment_type}_fat_pixels"
+                if pixel_key in results["statistics"]:
+                    area_mm2 = results["statistics"][pixel_key] * pixel_area_mm2
+                    results["segments"][segment_type] = {
+                        "pixels": results["statistics"][pixel_key],
+                        "area_mm2": area_mm2,
+                        "area_cm2": area_mm2 / 100
+                    }
+        
+        # Add interpretation
+        if "total_fat_percentage" in results["statistics"]:
+            results["interpretation"] = self._interpret_fat_results(
+                results["statistics"]
+            )
+            
+        return results
+    
+    def _interpret_fat_results(self, stats: Dict[str, float]) -> Dict[str, Any]:
+        """Interpret fat segmentation results"""
+        interpretation = {
+            "obesity_risk": "normal",
+            "visceral_risk": "normal",
+            "recommendations": []
+        }
+        
+        total_fat = stats.get("total_fat_percentage", 0)
+        visceral_ratio = stats.get("visceral_subcutaneous_ratio", 0)
+        
+        # Obesity assessment
+        if total_fat > 40:
+            interpretation["obesity_risk"] = "severe"
+            interpretation["recommendations"].append("Immediate weight management required")
+        elif total_fat > 30:
+            interpretation["obesity_risk"] = "moderate"
+            interpretation["recommendations"].append("Weight reduction recommended")
+        elif total_fat > 25:
+            interpretation["obesity_risk"] = "mild"
+            interpretation["recommendations"].append("Monitor weight trend")
+            
+        # Visceral fat assessment
+        if visceral_ratio > 0.5:
+            interpretation["visceral_risk"] = "high"
+            interpretation["recommendations"].append("High visceral fat - metabolic risk")
+        elif visceral_ratio > 0.3:
+            interpretation["visceral_risk"] = "moderate"
+            
+        return interpretation
+    
+    def _perform_xray_analysis(self, image: np.ndarray) -> Dict[str, Any]:
+        """Perform comprehensive X-ray analysis using XRayAnalyzer"""
+        if not XRAY_ANALYZER_AVAILABLE:
+            return {"error": "X-ray analysis not available"}
+        
+        # Use the XRay analyzer
+        analysis_results = analyze_xray(image)
+        
+        results = {
+            "segments": {},
+            "tissue_distribution": {},
+            "clinical_findings": []
+        }
+        
+        # Process segmentation results
+        if "segments" in analysis_results:
+            for tissue_type, mask in analysis_results["segments"].items():
+                if np.any(mask):
+                    pixel_count = np.sum(mask)
+                    percentage = analysis_results["percentages"].get(tissue_type, 0)
+                    results["segments"][tissue_type] = {
+                        "pixels": int(pixel_count),
+                        "percentage": round(percentage, 2),
+                        "present": True
+                    }
+        
+        # Add tissue distribution
+        if "percentages" in analysis_results:
+            results["tissue_distribution"] = analysis_results["percentages"]
+        
+        # Add clinical analysis
+        if "clinical_analysis" in analysis_results:
+            clinical = analysis_results["clinical_analysis"]
+            
+            # Quality assessment
+            if "quality_assessment" in clinical:
+                results["quality"] = clinical["quality_assessment"]
+            
+            # Abnormality detection
+            if "abnormality_detection" in clinical:
+                abnorm = clinical["abnormality_detection"]
+                if abnorm.get("detected", False):
+                    for finding in abnorm.get("findings", []):
+                        results["clinical_findings"].append({
+                            "type": finding.get("type", "unknown"),
+                            "description": finding.get("description", ""),
+                            "confidence": finding.get("confidence", "low")
+                        })
+            
+            # Tissue distribution analysis
+            if "tissue_distribution" in clinical:
+                dist = clinical["tissue_distribution"]
+                if "bone_to_soft_ratio" in dist:
+                    results["bone_soft_ratio"] = dist["bone_to_soft_ratio"]
+        
+        # Add interpretation
+        results["interpretation"] = self._interpret_xray_results(results)
+        
+        return results
+    
+    def _interpret_xray_results(self, results: Dict[str, Any]) -> Dict[str, Any]:
+        """Interpret X-ray analysis results"""
+        interpretation = {
+            "summary": "Normal X-ray appearance",
+            "findings": [],
+            "recommendations": []
+        }
+        
+        # Check for abnormal findings
+        if results.get("clinical_findings"):
+            interpretation["summary"] = "Abnormal findings detected"
+            for finding in results["clinical_findings"]:
+                interpretation["findings"].append(finding["description"])
+        
+        # Check tissue distribution
+        tissue_dist = results.get("tissue_distribution", {})
+        if tissue_dist.get("metal", 0) > 0.5:
+            interpretation["findings"].append("Metal artifact/implant present")
+        
+        if tissue_dist.get("fluid", 0) > 5:
+            interpretation["findings"].append("Possible fluid accumulation")
+            interpretation["recommendations"].append("Clinical correlation recommended")
+        
+        # Check quality
+        quality = results.get("quality", {})
+        if quality.get("overall") in ["poor", "fair"]:
+            interpretation["recommendations"].append("Consider repeat imaging for better quality")
+        
+        return interpretation
+    
+    def _calculate_confidence(self, roi_pixels: np.ndarray, center_value: float) -> float:
+        """Calculate confidence score based on ROI homogeneity"""
+        if roi_pixels.size == 0:
+            return 0.0
+        
+        # Handle single pixel or uniform regions
+        if roi_pixels.size == 1 or np.all(roi_pixels == roi_pixels.flat[0]):
+            return 1.0  # Perfect confidence for uniform regions
+            
+        # Check how consistent the ROI is
+        std = np.std(roi_pixels)
+        mean = np.mean(roi_pixels)
+        
+        # Handle zero std (uniform region)
+        if std == 0:
+            return 1.0
+        
+        # How close is center value to mean
+        center_deviation = abs(center_value - mean) / std
+        
+        # Coefficient of variation
+        cv = std / (abs(mean) + 1e-6)
+        
+        # Lower CV = more homogeneous = higher confidence
+        # Also consider if center value is close to mean
+        confidence = max(0.0, min(1.0, 1.0 - cv))
+        
+        # Reduce confidence if center is far from mean
+        if center_deviation > 2:  # More than 2 standard deviations
+            confidence *= 0.8
+        
+        return round(confidence, 2)
+    
+    def _generate_reasoning(
+        self, 
+        hu_value: float, 
+        tissue_type: Dict[str, str], 
+        roi_pixels: np.ndarray
+    ) -> str:
+        """Generate reasoning for the classification"""
+        reasoning_parts = []
+        
+        # HU value interpretation
+        reasoning_parts.append(f"HU value of {hu_value:.1f} falls within {tissue_type['type']} range")
+        
+        # Homogeneity assessment
+        std = np.std(roi_pixels)
+        if std < 10:
+            reasoning_parts.append("Homogeneous region suggests uniform tissue")
+        elif std < 30:
+            reasoning_parts.append("Moderate heterogeneity observed")
+        else:
+            reasoning_parts.append("High heterogeneity - possible mixed tissues or pathology")
+            
+        return ". ".join(reasoning_parts)
+    
+    def _calculate_image_statistics(self, image: np.ndarray) -> Dict[str, float]:
+        """Calculate comprehensive image statistics"""
+        return {
+            "min": float(np.min(image)),
+            "max": float(np.max(image)),
+            "mean": float(np.mean(image)),
+            "std": float(np.std(image)),
+            "median": float(np.median(image)),
+            "p5": float(np.percentile(image, 5)),
+            "p95": float(np.percentile(image, 95))
+        }
+    
+    def _assess_image_quality(self, image: np.ndarray) -> Dict[str, Any]:
+        """Assess image quality metrics"""
+        # Simple quality metrics
+        dynamic_range = np.max(image) - np.min(image)
+        snr = np.mean(image) / (np.std(image) + 1e-6)
+        
+        quality = {
+            "dynamic_range": float(dynamic_range),
+            "snr": float(snr),
+            "assessment": "good" if snr > 10 and dynamic_range > 100 else "poor"
+        }
+        
+        return quality
+    
+    def _correlate_with_clinical(
+        self, 
+        analysis_results: Dict[str, Any], 
+        clinical_context: Dict[str, Any]
+    ) -> Dict[str, Any]:
+        """Correlate findings with clinical context"""
+        correlation = {
+            "relevant_findings": [],
+            "clinical_significance": "unknown"
+        }
+        
+        # Example correlation logic
+        if "symptoms" in clinical_context:
+            symptoms = clinical_context["symptoms"]
+            
+            if "dyspnea" in symptoms and analysis_results.get("modality") == "CT":
+                # Check for lung pathology indicators
+                if "segmentation" in analysis_results:
+                    fat_percent = analysis_results["segmentation"]["statistics"].get(
+                        "total_fat_percentage", 0
+                    )
+                    if fat_percent > 35:
+                        correlation["relevant_findings"].append(
+                            "High body fat may contribute to dyspnea"
+                        )
+                        
+        return correlation
+    
+    def _create_html_report(self, results: Dict[str, Any]) -> str:
+        """Create HTML report for visual mode"""
+        html_parts = ['<div class="medical-analysis-report">']
+        
+        # Header
+        html_parts.append(f'<h3>Medical Image Analysis Report</h3>')
+        html_parts.append(f'<p><strong>Modality:</strong> {results.get("modality", "Unknown")}</p>')
+        
+        # Point analysis
+        if "point_analysis" in results:
+            pa = results["point_analysis"]
+            html_parts.append('<div class="point-analysis">')
+            html_parts.append('<h4>Point Analysis</h4>')
+            
+            if "hu_value" in pa:
+                html_parts.append(f'<p>HU Value: {pa["hu_value"]:.1f}</p>')
+            
+            tissue = pa.get("tissue_type", {})
+            html_parts.append(
+                f'<p>Tissue Type: {tissue.get("icon", "")} {tissue.get("type", "Unknown")}</p>'
+            )
+            
+            if "confidence" in pa:
+                html_parts.append(f'<p>Confidence: {pa["confidence"]*100:.0f}%</p>')
+                
+            if "reasoning" in pa:
+                html_parts.append(f'<p><em>{pa["reasoning"]}</em></p>')
+                
+            html_parts.append('</div>')
+        
+        # Segmentation results
+        if "segmentation" in results and "statistics" in results["segmentation"]:
+            stats = results["segmentation"]["statistics"]
+            html_parts.append('<div class="segmentation-results">')
+            html_parts.append('<h4>Fat Segmentation Analysis</h4>')
+            html_parts.append(f'<p>Total Fat: {stats.get("total_fat_percentage", 0):.1f}%</p>')
+            html_parts.append(f'<p>Subcutaneous: {stats.get("subcutaneous_fat_percentage", 0):.1f}%</p>')
+            html_parts.append(f'<p>Visceral: {stats.get("visceral_fat_percentage", 0):.1f}%</p>')
+            
+            if "interpretation" in results["segmentation"]:
+                interp = results["segmentation"]["interpretation"]
+                html_parts.append(f'<p><strong>Risk:</strong> {interp.get("obesity_risk", "normal")}</p>')
+                
+            html_parts.append('</div>')
+        
+        html_parts.append('</div>')
+        
+        # Add CSS
+        html_parts.insert(0, '''<style>
+        .medical-analysis-report {
+            font-family: Arial, sans-serif;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 8px;
+        }
+        .medical-analysis-report h3, .medical-analysis-report h4 {
+            color: #2c3e50;
+            margin-top: 10px;
+        }
+        .point-analysis, .segmentation-results {
+            background: white;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        </style>''')
+        
+        return ''.join(html_parts)
+    
+    def process_file(self, file_path: str) -> Tuple[np.ndarray, np.ndarray, Dict[str, Any]]:
+        """
+        Process uploaded file (DICOM or regular image)
+        
+        Returns:
+            pixel_array: numpy array of pixel values
+            display_array: normalized array for display (0-255)
+            metadata: file metadata including modality
+        """
+        if not file_path:
+            raise ValueError("No file provided")
+        
+        file_ext = Path(file_path).suffix.lower()
+        
+        # Try DICOM first - always try to read as DICOM regardless of extension
+        if PYDICOM_AVAILABLE:
+            try:
+                ds = pydicom.dcmread(file_path, force=True)
+                
+                # Extract pixel array
+                pixel_array = ds.pixel_array.astype(float)
+                
+                # Get modality
+                modality = ds.get('Modality', 'CT')
+                
+                # Apply DICOM transformations
+                if 'RescaleSlope' in ds and 'RescaleIntercept' in ds:
+                    pixel_array = pixel_array * ds.RescaleSlope + ds.RescaleIntercept
+                
+                # Normalize for display
+                if modality == 'CT':
+                    # CT: typically -1000 to 3000 HU
+                    display_array = np.clip((pixel_array + 1000) / 4000 * 255, 0, 255).astype(np.uint8)
+                else:
+                    # X-ray: normalize to full range
+                    pmin, pmax = np.percentile(pixel_array, [1, 99])
+                    display_array = np.clip((pixel_array - pmin) / (pmax - pmin) * 255, 0, 255).astype(np.uint8)
+                
+                metadata = {
+                    'modality': modality,
+                    'shape': pixel_array.shape,
+                    'patient_name': str(ds.get('PatientName', 'Anonymous')),
+                    'study_date': str(ds.get('StudyDate', '')),
+                    'file_type': 'DICOM'
+                }
+                
+                if 'WindowCenter' in ds and 'WindowWidth' in ds:
+                    metadata['window_center'] = float(ds.WindowCenter if isinstance(ds.WindowCenter, (int, float)) else ds.WindowCenter[0])
+                    metadata['window_width'] = float(ds.WindowWidth if isinstance(ds.WindowWidth, (int, float)) else ds.WindowWidth[0])
+                
+                return pixel_array, display_array, metadata
+                
+            except Exception:
+                # If DICOM reading fails, try as regular image
+                pass
+        
+        # Handle regular images
+        try:
+            img = Image.open(file_path)
+            
+            # Convert to grayscale if needed
+            if img.mode != 'L':
+                img = img.convert('L')
+            
+            pixel_array = np.array(img).astype(float)
+            display_array = pixel_array.astype(np.uint8)
+            
+            # Guess modality from filename
+            filename_lower = Path(file_path).name.lower()
+            if 'ct' in filename_lower:
+                modality = 'CT'
+            else:
+                modality = 'CR'  # Default to X-ray
+            
+            metadata = {
+                'modality': modality,
+                'shape': pixel_array.shape,
+                'file_type': 'Image',
+                'format': img.format
+            }
+            
+            return pixel_array, display_array, metadata
+            
+        except Exception as e:
+            raise ValueError(f"Could not load file: {str(e)}")
+    
+    def _get_timestamp(self) -> str:
+        """Get current timestamp"""
+        from datetime import datetime
+        return datetime.now().isoformat()
+    
+    def api_info(self) -> Dict[str, Any]:
+        """Return API information for the component"""
+        return {
+            "info": {
+                "type": "object",
+                "description": "Medical image analysis results",
+                "properties": {
+                    "modality": {"type": "string"},
+                    "measurements": {"type": "object"},
+                    "findings": {"type": "array"},
+                    "segmentation": {"type": "object"},
+                    "quality_metrics": {"type": "object"}
+                }
+            },
+            "serialized_info": True
+        }
+    
+    def example_inputs(self) -> List[Any]:
+        """Provide example inputs"""
+        return [
+            {
+                "image": np.zeros((512, 512)),
+                "modality": "CT",
+                "task": "analyze_point",
+                "roi": {"x": 256, "y": 256, "radius": 10}
+            }
+        ]
+    
+    def example_outputs(self) -> List[Any]:
+        """Provide example outputs"""
+        return [
+            {
+                "modality": "CT",
+                "point_analysis": {
+                    "hu_value": -50.0,
+                    "tissue_type": {"type": "fat", "icon": "🟡"},
+                    "confidence": 0.95,
+                    "reasoning": "HU value of -50.0 falls within fat range. Homogeneous region suggests uniform tissue"
+                }
+            }
+        ]

src/backend/gradio_medical_image_analyzer/medical_image_analyzer.pyi

@@ -0,0 +1,984 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+Gradio Custom Component: Medical Image Analyzer
+AI-Agent optimized component for medical image analysis
+"""
+
+from __future__ import annotations
+from typing import Any, Dict, List, Optional, Tuple, Union
+import gradio as gr
+from gradio.components.base import Component
+from gradio.events import Events
+import numpy as np
+import json
+
+# Import our existing analyzers
+try:
+    from .fat_segmentation import FatSegmentationEngine, segment_fat, create_fat_overlay
+    FAT_SEGMENTATION_AVAILABLE = True
+except ImportError:
+    FAT_SEGMENTATION_AVAILABLE = False
+    FatSegmentationEngine = None
+    segment_fat = None
+    create_fat_overlay = None
+
+try:
+    from .xray_analyzer import XRayAnalyzer, analyze_xray, classify_xray_tissue
+    XRAY_ANALYZER_AVAILABLE = True
+except ImportError:
+    XRAY_ANALYZER_AVAILABLE = False
+    XRayAnalyzer = None
+    analyze_xray = None
+    classify_xray_tissue = None
+
+from gradio.events import Dependency
+
+class MedicalImageAnalyzer(Component):
+    """
+    A Gradio component for AI-agent compatible medical image analysis.
+    
+    Provides structured output for:
+    - HU value analysis (CT only)
+    - Tissue classification
+    - Fat segmentation (subcutaneous, visceral)
+    - Confidence scores and reasoning
+    """
+    
+    EVENTS = [
+        Events.change,
+        Events.select,
+        Events.upload,
+        Events.clear,
+    ]
+    
+    # HU ranges for tissue classification (CT only)
+    HU_RANGES = {
+        'air': {'min': -1000, 'max': -500, 'icon': '🌫️'},
+        'fat': {'min': -100, 'max': -50, 'icon': '🟡'},
+        'water': {'min': -10, 'max': 10, 'icon': '💧'},
+        'soft_tissue': {'min': 30, 'max': 80, 'icon': '🔴'},
+        'bone': {'min': 200, 'max': 3000, 'icon': '🦴'}
+    }
+    
+    def __init__(
+        self,
+        value: Optional[Dict[str, Any]] = None,
+        *,
+        label: Optional[str] = None,
+        info: Optional[str] = None,
+        every: Optional[float] = None,
+        show_label: Optional[bool] = None,
+        container: Optional[bool] = None,
+        scale: Optional[int] = None,
+        min_width: Optional[int] = None,
+        visible: Optional[bool] = None,
+        elem_id: Optional[str] = None,
+        elem_classes: Optional[List[str] | str] = None,
+        render: Optional[bool] = None,
+        key: Optional[int | str] = None,
+        # Custom parameters
+        analysis_mode: str = "structured",  # "structured" for agents, "visual" for humans
+        include_confidence: bool = True,
+        include_reasoning: bool = True,
+        segmentation_types: List[str] = None,
+        **kwargs,
+    ):
+        """
+        Initialize the Medical Image Analyzer component.
+        
+        Args:
+            analysis_mode: "structured" for AI agents, "visual" for human interpretation
+            include_confidence: Include confidence scores in results
+            include_reasoning: Include reasoning/explanation for findings
+            segmentation_types: List of segmentation types to perform
+        """
+        self.analysis_mode = analysis_mode
+        self.include_confidence = include_confidence
+        self.include_reasoning = include_reasoning
+        self.segmentation_types = segmentation_types or ["fat_total", "fat_subcutaneous", "fat_visceral"]
+        
+        if FAT_SEGMENTATION_AVAILABLE:
+            self.fat_engine = FatSegmentationEngine()
+        else:
+            self.fat_engine = None
+            
+        super().__init__(
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+            **kwargs,
+        )
+    
+    def preprocess(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Preprocess input from frontend.
+        Expected format:
+        {
+            "image": numpy array or base64,
+            "modality": "CT" or "XR",
+            "pixel_spacing": [x, y] (optional),
+            "roi": {"x": int, "y": int, "radius": int} (optional),
+            "task": "analyze_point" | "segment_fat" | "full_analysis"
+        }
+        """
+        if payload is None:
+            return None
+            
+        # Validate required fields
+        if "image" not in payload:
+            return {"error": "No image provided"}
+            
+        return payload
+    
+    def postprocess(self, value: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Postprocess output for frontend.
+        Returns structured data for AI agents or formatted HTML for visual mode.
+        """
+        if value is None:
+            return None
+            
+        if "error" in value:
+            return value
+            
+        # For visual mode, convert to HTML
+        if self.analysis_mode == "visual":
+            value["html_report"] = self._create_html_report(value)
+            
+        return value
+    
+    def analyze_image(
+        self, 
+        image: np.ndarray,
+        modality: str = "CT",
+        pixel_spacing: Optional[List[float]] = None,
+        roi: Optional[Dict[str, int]] = None,
+        task: str = "full_analysis",
+        clinical_context: Optional[Dict[str, Any]] = None
+    ) -> Dict[str, Any]:
+        """
+        Main analysis function for medical images.
+        
+        Args:
+            image: 2D numpy array of pixel values
+            modality: "CT" or "XR" (X-Ray)
+            pixel_spacing: [x, y] spacing in mm
+            roi: Region of interest {"x": int, "y": int, "radius": int}
+            task: Analysis task
+            clinical_context: Additional context for guided analysis
+            
+        Returns:
+            Structured analysis results
+        """
+        # Handle None or invalid image
+        if image is None:
+            return {"error": "No image provided", "modality": modality}
+            
+        results = {
+            "modality": modality,
+            "timestamp": self._get_timestamp(),
+            "measurements": {},
+            "findings": [],
+            "segmentation": {},
+            "quality_metrics": self._assess_image_quality(image)
+        }
+        
+        if task == "analyze_point" and roi:
+            # Analyze specific point/region
+            results["point_analysis"] = self._analyze_roi(image, modality, roi)
+            
+        elif task == "segment_fat" and modality == "CT":
+            # Fat segmentation
+            results["segmentation"] = self._perform_fat_segmentation(image, pixel_spacing)
+            
+        elif task == "full_analysis":
+            # Complete analysis
+            if roi:
+                results["point_analysis"] = self._analyze_roi(image, modality, roi)
+            if modality == "CT":
+                results["segmentation"] = self._perform_fat_segmentation(image, pixel_spacing)
+            elif modality in ["CR", "DX", "RX", "DR", "X-Ray"]:
+                results["segmentation"] = self._perform_xray_analysis(image)
+            results["statistics"] = self._calculate_image_statistics(image)
+            
+        # Add clinical interpretation if context provided
+        if clinical_context:
+            results["clinical_correlation"] = self._correlate_with_clinical(
+                results, clinical_context
+            )
+            
+        return results
+    
+    def _analyze_roi(self, image: np.ndarray, modality: str, roi: Dict[str, int]) -> Dict[str, Any]:
+        """Analyze a specific region of interest"""
+        x, y, radius = roi.get("x", 0), roi.get("y", 0), roi.get("radius", 5)
+        
+        # Extract ROI
+        y_min = max(0, y - radius)
+        y_max = min(image.shape[0], y + radius)
+        x_min = max(0, x - radius)
+        x_max = min(image.shape[1], x + radius)
+        
+        roi_pixels = image[y_min:y_max, x_min:x_max]
+        
+        analysis = {
+            "location": {"x": x, "y": y},
+            "roi_size": {"width": x_max - x_min, "height": y_max - y_min},
+            "statistics": {
+                "mean": float(np.mean(roi_pixels)),
+                "std": float(np.std(roi_pixels)),
+                "min": float(np.min(roi_pixels)),
+                "max": float(np.max(roi_pixels))
+            }
+        }
+        
+        if modality == "CT":
+            # HU-based analysis
+            center_value = float(image[y, x])
+            analysis["hu_value"] = center_value
+            analysis["tissue_type"] = self._classify_tissue_by_hu(center_value)
+            
+            if self.include_confidence:
+                analysis["confidence"] = self._calculate_confidence(roi_pixels, center_value)
+                
+            if self.include_reasoning:
+                analysis["reasoning"] = self._generate_reasoning(
+                    center_value, analysis["tissue_type"], roi_pixels
+                )
+        else:
+            # Intensity-based analysis for X-Ray
+            analysis["intensity"] = float(image[y, x])
+            analysis["tissue_type"] = self._classify_xray_intensity(
+                image[y, x], x, y, image
+            )
+            
+        return analysis
+    
+    def _classify_tissue_by_hu(self, hu_value: float) -> Dict[str, str]:
+        """Classify tissue type based on HU value"""
+        for tissue_type, ranges in self.HU_RANGES.items():
+            if ranges['min'] <= hu_value <= ranges['max']:
+                return {
+                    'type': tissue_type,
+                    'icon': ranges['icon'],
+                    'hu_range': f"{ranges['min']} to {ranges['max']}"
+                }
+        
+        # Edge cases
+        if hu_value < -1000:
+            return {'type': 'air', 'icon': '🌫️', 'hu_range': '< -1000'}
+        else:
+            return {'type': 'metal/artifact', 'icon': '⚙️', 'hu_range': '> 3000'}
+    
+    def _classify_xray_intensity(self, intensity: float, x: int, y: int, image: np.ndarray) -> Dict[str, str]:
+        """Classify tissue in X-Ray based on intensity"""
+        if XRAY_ANALYZER_AVAILABLE:
+            # Use the advanced XRay analyzer
+            analyzer = XRayAnalyzer()
+            # Normalize the intensity  
+            stats = self._calculate_image_statistics(image)
+            normalized = (intensity - stats['min']) / (stats['max'] - stats['min'])
+            result = analyzer.classify_pixel(normalized, x, y, image)
+            return {
+                'type': result['type'],
+                'icon': result['icon'],
+                'confidence': result['confidence'],
+                'color': result['color']
+            }
+        else:
+            # Fallback to simple classification
+            normalized = (intensity - stats['min']) / (stats['max'] - stats['min'])
+            
+            if normalized > 0.9:
+                return {'type': 'bone/metal', 'icon': '🦴', 'intensity_range': 'very high'}
+            elif normalized > 0.6:
+                return {'type': 'bone', 'icon': '🦴', 'intensity_range': 'high'}
+            elif normalized > 0.3:
+                return {'type': 'soft_tissue', 'icon': '🔴', 'intensity_range': 'medium'}
+            else:
+                return {'type': 'air/lung', 'icon': '🌫️', 'intensity_range': 'low'}
+    
+    def _perform_fat_segmentation(
+        self, 
+        image: np.ndarray, 
+        pixel_spacing: Optional[List[float]] = None
+    ) -> Dict[str, Any]:
+        """Perform fat segmentation using our existing engine"""
+        if not self.fat_engine:
+            return {"error": "Fat segmentation not available"}
+        
+        # Use existing fat segmentation
+        segmentation_result = self.fat_engine.segment_fat_tissue(image)
+        
+        results = {
+            "statistics": segmentation_result.get("statistics", {}),
+            "segments": {}
+        }
+        
+        # Calculate areas if pixel spacing provided
+        if pixel_spacing:
+            pixel_area_mm2 = pixel_spacing[0] * pixel_spacing[1]
+            for segment_type in ["total", "subcutaneous", "visceral"]:
+                pixel_key = f"{segment_type}_fat_pixels"
+                if pixel_key in results["statistics"]:
+                    area_mm2 = results["statistics"][pixel_key] * pixel_area_mm2
+                    results["segments"][segment_type] = {
+                        "pixels": results["statistics"][pixel_key],
+                        "area_mm2": area_mm2,
+                        "area_cm2": area_mm2 / 100
+                    }
+        
+        # Add interpretation
+        if "total_fat_percentage" in results["statistics"]:
+            results["interpretation"] = self._interpret_fat_results(
+                results["statistics"]
+            )
+            
+        return results
+    
+    def _interpret_fat_results(self, stats: Dict[str, float]) -> Dict[str, Any]:
+        """Interpret fat segmentation results"""
+        interpretation = {
+            "obesity_risk": "normal",
+            "visceral_risk": "normal",
+            "recommendations": []
+        }
+        
+        total_fat = stats.get("total_fat_percentage", 0)
+        visceral_ratio = stats.get("visceral_subcutaneous_ratio", 0)
+        
+        # Obesity assessment
+        if total_fat > 40:
+            interpretation["obesity_risk"] = "severe"
+            interpretation["recommendations"].append("Immediate weight management required")
+        elif total_fat > 30:
+            interpretation["obesity_risk"] = "moderate"
+            interpretation["recommendations"].append("Weight reduction recommended")
+        elif total_fat > 25:
+            interpretation["obesity_risk"] = "mild"
+            interpretation["recommendations"].append("Monitor weight trend")
+            
+        # Visceral fat assessment
+        if visceral_ratio > 0.5:
+            interpretation["visceral_risk"] = "high"
+            interpretation["recommendations"].append("High visceral fat - metabolic risk")
+        elif visceral_ratio > 0.3:
+            interpretation["visceral_risk"] = "moderate"
+            
+        return interpretation
+    
+    def _perform_xray_analysis(self, image: np.ndarray) -> Dict[str, Any]:
+        """Perform comprehensive X-ray analysis using XRayAnalyzer"""
+        if not XRAY_ANALYZER_AVAILABLE:
+            return {"error": "X-ray analysis not available"}
+        
+        # Use the XRay analyzer
+        analysis_results = analyze_xray(image)
+        
+        results = {
+            "segments": {},
+            "tissue_distribution": {},
+            "clinical_findings": []
+        }
+        
+        # Process segmentation results
+        if "segments" in analysis_results:
+            for tissue_type, mask in analysis_results["segments"].items():
+                if np.any(mask):
+                    pixel_count = np.sum(mask)
+                    percentage = analysis_results["percentages"].get(tissue_type, 0)
+                    results["segments"][tissue_type] = {
+                        "pixels": int(pixel_count),
+                        "percentage": round(percentage, 2),
+                        "present": True
+                    }
+        
+        # Add tissue distribution
+        if "percentages" in analysis_results:
+            results["tissue_distribution"] = analysis_results["percentages"]
+        
+        # Add clinical analysis
+        if "clinical_analysis" in analysis_results:
+            clinical = analysis_results["clinical_analysis"]
+            
+            # Quality assessment
+            if "quality_assessment" in clinical:
+                results["quality"] = clinical["quality_assessment"]
+            
+            # Abnormality detection
+            if "abnormality_detection" in clinical:
+                abnorm = clinical["abnormality_detection"]
+                if abnorm.get("detected", False):
+                    for finding in abnorm.get("findings", []):
+                        results["clinical_findings"].append({
+                            "type": finding.get("type", "unknown"),
+                            "description": finding.get("description", ""),
+                            "confidence": finding.get("confidence", "low")
+                        })
+            
+            # Tissue distribution analysis
+            if "tissue_distribution" in clinical:
+                dist = clinical["tissue_distribution"]
+                if "bone_to_soft_ratio" in dist:
+                    results["bone_soft_ratio"] = dist["bone_to_soft_ratio"]
+        
+        # Add interpretation
+        results["interpretation"] = self._interpret_xray_results(results)
+        
+        return results
+    
+    def _interpret_xray_results(self, results: Dict[str, Any]) -> Dict[str, Any]:
+        """Interpret X-ray analysis results"""
+        interpretation = {
+            "summary": "Normal X-ray appearance",
+            "findings": [],
+            "recommendations": []
+        }
+        
+        # Check for abnormal findings
+        if results.get("clinical_findings"):
+            interpretation["summary"] = "Abnormal findings detected"
+            for finding in results["clinical_findings"]:
+                interpretation["findings"].append(finding["description"])
+        
+        # Check tissue distribution
+        tissue_dist = results.get("tissue_distribution", {})
+        if tissue_dist.get("metal", 0) > 0.5:
+            interpretation["findings"].append("Metal artifact/implant present")
+        
+        if tissue_dist.get("fluid", 0) > 5:
+            interpretation["findings"].append("Possible fluid accumulation")
+            interpretation["recommendations"].append("Clinical correlation recommended")
+        
+        # Check quality
+        quality = results.get("quality", {})
+        if quality.get("overall") in ["poor", "fair"]:
+            interpretation["recommendations"].append("Consider repeat imaging for better quality")
+        
+        return interpretation
+    
+    def _calculate_confidence(self, roi_pixels: np.ndarray, center_value: float) -> float:
+        """Calculate confidence score based on ROI homogeneity"""
+        if roi_pixels.size == 0:
+            return 0.0
+        
+        # Handle single pixel or uniform regions
+        if roi_pixels.size == 1 or np.all(roi_pixels == roi_pixels.flat[0]):
+            return 1.0  # Perfect confidence for uniform regions
+            
+        # Check how consistent the ROI is
+        std = np.std(roi_pixels)
+        mean = np.mean(roi_pixels)
+        
+        # Handle zero std (uniform region)
+        if std == 0:
+            return 1.0
+        
+        # How close is center value to mean
+        center_deviation = abs(center_value - mean) / std
+        
+        # Coefficient of variation
+        cv = std / (abs(mean) + 1e-6)
+        
+        # Lower CV = more homogeneous = higher confidence
+        # Also consider if center value is close to mean
+        confidence = max(0.0, min(1.0, 1.0 - cv))
+        
+        # Reduce confidence if center is far from mean
+        if center_deviation > 2:  # More than 2 standard deviations
+            confidence *= 0.8
+        
+        return round(confidence, 2)
+    
+    def _generate_reasoning(
+        self, 
+        hu_value: float, 
+        tissue_type: Dict[str, str], 
+        roi_pixels: np.ndarray
+    ) -> str:
+        """Generate reasoning for the classification"""
+        reasoning_parts = []
+        
+        # HU value interpretation
+        reasoning_parts.append(f"HU value of {hu_value:.1f} falls within {tissue_type['type']} range")
+        
+        # Homogeneity assessment
+        std = np.std(roi_pixels)
+        if std < 10:
+            reasoning_parts.append("Homogeneous region suggests uniform tissue")
+        elif std < 30:
+            reasoning_parts.append("Moderate heterogeneity observed")
+        else:
+            reasoning_parts.append("High heterogeneity - possible mixed tissues or pathology")
+            
+        return ". ".join(reasoning_parts)
+    
+    def _calculate_image_statistics(self, image: np.ndarray) -> Dict[str, float]:
+        """Calculate comprehensive image statistics"""
+        return {
+            "min": float(np.min(image)),
+            "max": float(np.max(image)),
+            "mean": float(np.mean(image)),
+            "std": float(np.std(image)),
+            "median": float(np.median(image)),
+            "p5": float(np.percentile(image, 5)),
+            "p95": float(np.percentile(image, 95))
+        }
+    
+    def _assess_image_quality(self, image: np.ndarray) -> Dict[str, Any]:
+        """Assess image quality metrics"""
+        # Simple quality metrics
+        dynamic_range = np.max(image) - np.min(image)
+        snr = np.mean(image) / (np.std(image) + 1e-6)
+        
+        quality = {
+            "dynamic_range": float(dynamic_range),
+            "snr": float(snr),
+            "assessment": "good" if snr > 10 and dynamic_range > 100 else "poor"
+        }
+        
+        return quality
+    
+    def _correlate_with_clinical(
+        self, 
+        analysis_results: Dict[str, Any], 
+        clinical_context: Dict[str, Any]
+    ) -> Dict[str, Any]:
+        """Correlate findings with clinical context"""
+        correlation = {
+            "relevant_findings": [],
+            "clinical_significance": "unknown"
+        }
+        
+        # Example correlation logic
+        if "symptoms" in clinical_context:
+            symptoms = clinical_context["symptoms"]
+            
+            if "dyspnea" in symptoms and analysis_results.get("modality") == "CT":
+                # Check for lung pathology indicators
+                if "segmentation" in analysis_results:
+                    fat_percent = analysis_results["segmentation"]["statistics"].get(
+                        "total_fat_percentage", 0
+                    )
+                    if fat_percent > 35:
+                        correlation["relevant_findings"].append(
+                            "High body fat may contribute to dyspnea"
+                        )
+                        
+        return correlation
+    
+    def _create_html_report(self, results: Dict[str, Any]) -> str:
+        """Create HTML report for visual mode"""
+        html_parts = ['<div class="medical-analysis-report">']
+        
+        # Header
+        html_parts.append(f'<h3>Medical Image Analysis Report</h3>')
+        html_parts.append(f'<p><strong>Modality:</strong> {results.get("modality", "Unknown")}</p>')
+        
+        # Point analysis
+        if "point_analysis" in results:
+            pa = results["point_analysis"]
+            html_parts.append('<div class="point-analysis">')
+            html_parts.append('<h4>Point Analysis</h4>')
+            
+            if "hu_value" in pa:
+                html_parts.append(f'<p>HU Value: {pa["hu_value"]:.1f}</p>')
+            
+            tissue = pa.get("tissue_type", {})
+            html_parts.append(
+                f'<p>Tissue Type: {tissue.get("icon", "")} {tissue.get("type", "Unknown")}</p>'
+            )
+            
+            if "confidence" in pa:
+                html_parts.append(f'<p>Confidence: {pa["confidence"]*100:.0f}%</p>')
+                
+            if "reasoning" in pa:
+                html_parts.append(f'<p><em>{pa["reasoning"]}</em></p>')
+                
+            html_parts.append('</div>')
+        
+        # Segmentation results
+        if "segmentation" in results and "statistics" in results["segmentation"]:
+            stats = results["segmentation"]["statistics"]
+            html_parts.append('<div class="segmentation-results">')
+            html_parts.append('<h4>Fat Segmentation Analysis</h4>')
+            html_parts.append(f'<p>Total Fat: {stats.get("total_fat_percentage", 0):.1f}%</p>')
+            html_parts.append(f'<p>Subcutaneous: {stats.get("subcutaneous_fat_percentage", 0):.1f}%</p>')
+            html_parts.append(f'<p>Visceral: {stats.get("visceral_fat_percentage", 0):.1f}%</p>')
+            
+            if "interpretation" in results["segmentation"]:
+                interp = results["segmentation"]["interpretation"]
+                html_parts.append(f'<p><strong>Risk:</strong> {interp.get("obesity_risk", "normal")}</p>')
+                
+            html_parts.append('</div>')
+        
+        html_parts.append('</div>')
+        
+        # Add CSS
+        html_parts.insert(0, '''<style>
+        .medical-analysis-report {
+            font-family: Arial, sans-serif;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 8px;
+        }
+        .medical-analysis-report h3, .medical-analysis-report h4 {
+            color: #2c3e50;
+            margin-top: 10px;
+        }
+        .point-analysis, .segmentation-results {
+            background: white;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 5px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        </style>''')
+        
+        return ''.join(html_parts)
+    
+    def process_file(self, file_path: str) -> Tuple[np.ndarray, np.ndarray, Dict[str, Any]]:
+        """
+        Process uploaded file (DICOM or regular image)
+        
+        Returns:
+            pixel_array: numpy array of pixel values
+            display_array: normalized array for display (0-255)
+            metadata: file metadata including modality
+        """
+        if not file_path:
+            raise ValueError("No file provided")
+        
+        file_ext = Path(file_path).suffix.lower()
+        
+        # Try DICOM first - always try to read as DICOM regardless of extension
+        if PYDICOM_AVAILABLE:
+            try:
+                ds = pydicom.dcmread(file_path, force=True)
+                
+                # Extract pixel array
+                pixel_array = ds.pixel_array.astype(float)
+                
+                # Get modality
+                modality = ds.get('Modality', 'CT')
+                
+                # Apply DICOM transformations
+                if 'RescaleSlope' in ds and 'RescaleIntercept' in ds:
+                    pixel_array = pixel_array * ds.RescaleSlope + ds.RescaleIntercept
+                
+                # Normalize for display
+                if modality == 'CT':
+                    # CT: typically -1000 to 3000 HU
+                    display_array = np.clip((pixel_array + 1000) / 4000 * 255, 0, 255).astype(np.uint8)
+                else:
+                    # X-ray: normalize to full range
+                    pmin, pmax = np.percentile(pixel_array, [1, 99])
+                    display_array = np.clip((pixel_array - pmin) / (pmax - pmin) * 255, 0, 255).astype(np.uint8)
+                
+                metadata = {
+                    'modality': modality,
+                    'shape': pixel_array.shape,
+                    'patient_name': str(ds.get('PatientName', 'Anonymous')),
+                    'study_date': str(ds.get('StudyDate', '')),
+                    'file_type': 'DICOM'
+                }
+                
+                if 'WindowCenter' in ds and 'WindowWidth' in ds:
+                    metadata['window_center'] = float(ds.WindowCenter if isinstance(ds.WindowCenter, (int, float)) else ds.WindowCenter[0])
+                    metadata['window_width'] = float(ds.WindowWidth if isinstance(ds.WindowWidth, (int, float)) else ds.WindowWidth[0])
+                
+                return pixel_array, display_array, metadata
+                
+            except Exception:
+                # If DICOM reading fails, try as regular image
+                pass
+        
+        # Handle regular images
+        try:
+            img = Image.open(file_path)
+            
+            # Convert to grayscale if needed
+            if img.mode != 'L':
+                img = img.convert('L')
+            
+            pixel_array = np.array(img).astype(float)
+            display_array = pixel_array.astype(np.uint8)
+            
+            # Guess modality from filename
+            filename_lower = Path(file_path).name.lower()
+            if 'ct' in filename_lower:
+                modality = 'CT'
+            else:
+                modality = 'CR'  # Default to X-ray
+            
+            metadata = {
+                'modality': modality,
+                'shape': pixel_array.shape,
+                'file_type': 'Image',
+                'format': img.format
+            }
+            
+            return pixel_array, display_array, metadata
+            
+        except Exception as e:
+            raise ValueError(f"Could not load file: {str(e)}")
+    
+    def _get_timestamp(self) -> str:
+        """Get current timestamp"""
+        from datetime import datetime
+        return datetime.now().isoformat()
+    
+    def api_info(self) -> Dict[str, Any]:
+        """Return API information for the component"""
+        return {
+            "info": {
+                "type": "object",
+                "description": "Medical image analysis results",
+                "properties": {
+                    "modality": {"type": "string"},
+                    "measurements": {"type": "object"},
+                    "findings": {"type": "array"},
+                    "segmentation": {"type": "object"},
+                    "quality_metrics": {"type": "object"}
+                }
+            },
+            "serialized_info": True
+        }
+    
+    def example_inputs(self) -> List[Any]:
+        """Provide example inputs"""
+        return [
+            {
+                "image": np.zeros((512, 512)),
+                "modality": "CT",
+                "task": "analyze_point",
+                "roi": {"x": 256, "y": 256, "radius": 10}
+            }
+        ]
+    
+    def example_outputs(self) -> List[Any]:
+        """Provide example outputs"""
+        return [
+            {
+                "modality": "CT",
+                "point_analysis": {
+                    "hu_value": -50.0,
+                    "tissue_type": {"type": "fat", "icon": "���"},
+                    "confidence": 0.95,
+                    "reasoning": "HU value of -50.0 falls within fat range. Homogeneous region suggests uniform tissue"
+                }
+            }
+        ]
+    from typing import Callable, Literal, Sequence, Any, TYPE_CHECKING
+    from gradio.blocks import Block
+    if TYPE_CHECKING:
+        from gradio.components import Timer
+        from gradio.components.base import Component
+
+    
+    def change(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        show_progress_on: Component | Sequence[Component] | None = None,
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | Literal[True] | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, will use the functions name as the endpoint route. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            show_progress_on: Component or list of components to show the progress animation on. If None, will show the progress animation on all of the output components.
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+            key: A unique key for this event listener to be used in @gr.render(). If set, this value identifies an event as identical across re-renders when the key is identical.
+        
+        """
+        ...
+    
+    def select(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        show_progress_on: Component | Sequence[Component] | None = None,
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | Literal[True] | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, will use the functions name as the endpoint route. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            show_progress_on: Component or list of components to show the progress animation on. If None, will show the progress animation on all of the output components.
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+            key: A unique key for this event listener to be used in @gr.render(). If set, this value identifies an event as identical across re-renders when the key is identical.
+        
+        """
+        ...
+    
+    def upload(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        show_progress_on: Component | Sequence[Component] | None = None,
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | Literal[True] | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, will use the functions name as the endpoint route. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            show_progress_on: Component or list of components to show the progress animation on. If None, will show the progress animation on all of the output components.
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+            key: A unique key for this event listener to be used in @gr.render(). If set, this value identifies an event as identical across re-renders when the key is identical.
+        
+        """
+        ...
+    
+    def clear(self,
+        fn: Callable[..., Any] | None = None,
+        inputs: Block | Sequence[Block] | set[Block] | None = None,
+        outputs: Block | Sequence[Block] | None = None,
+        api_name: str | None | Literal[False] = None,
+        scroll_to_output: bool = False,
+        show_progress: Literal["full", "minimal", "hidden"] = "full",
+        show_progress_on: Component | Sequence[Component] | None = None,
+        queue: bool | None = None,
+        batch: bool = False,
+        max_batch_size: int = 4,
+        preprocess: bool = True,
+        postprocess: bool = True,
+        cancels: dict[str, Any] | list[dict[str, Any]] | None = None,
+        every: Timer | float | None = None,
+        trigger_mode: Literal["once", "multiple", "always_last"] | None = None,
+        js: str | Literal[True] | None = None,
+        concurrency_limit: int | None | Literal["default"] = "default",
+        concurrency_id: str | None = None,
+        show_api: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+    
+        ) -> Dependency:
+        """
+        Parameters:
+            fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
+            inputs: list of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
+            outputs: list of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
+            api_name: defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, will use the functions name as the endpoint route. If set to a string, the endpoint will be exposed in the api docs with the given name.
+            scroll_to_output: if True, will scroll to output component on completion
+            show_progress: how to show the progress animation while event is running: "full" shows a spinner which covers the output component area as well as a runtime display in the upper right corner, "minimal" only shows the runtime display, "hidden" shows no progress animation at all
+            show_progress_on: Component or list of components to show the progress animation on. If None, will show the progress animation on all of the output components.
+            queue: if True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
+            batch: if True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.
+            max_batch_size: maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
+            preprocess: if False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
+            postprocess: if False, will not run postprocessing of component data before returning 'fn' output to the browser.
+            cancels: a list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
+            every: continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            trigger_mode: if "once" (default for all events except `.change()`) would not allow any submissions while an event is pending. If set to "multiple", unlimited submissions are allowed while pending, and "always_last" (default for `.change()` and `.key_up()` events) would allow a second submission after the pending event is complete.
+            js: optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
+            concurrency_limit: if set, this is the maximum number of this event that can be running simultaneously. Can be set to None to mean no concurrency_limit (any number of this event can be running simultaneously). Set to "default" to use the default concurrency limit (defined by the `default_concurrency_limit` parameter in `Blocks.queue()`, which itself is 1 by default).
+            concurrency_id: if set, this is the id of the concurrency group. Events with the same concurrency_id will be limited by the lowest set concurrency_limit.
+            show_api: whether to show this event in the "view API" page of the Gradio app, or in the ".view_api()" method of the Gradio clients. Unlike setting api_name to False, setting show_api to False will still allow downstream apps as well as the Clients to use this event. If fn is None, show_api will automatically be set to False.
+            key: A unique key for this event listener to be used in @gr.render(). If set, this value identifies an event as identical across re-renders when the key is identical.
+        
+        """
+        ...

src/backend/gradio_medical_image_analyzer/templates/component.py

@@ -0,0 +1,5 @@
+# This file is required for Gradio custom components
+# It exports the component class
+from ..medical_image_analyzer import MedicalImageAnalyzer
+
+__all__ = ["MedicalImageAnalyzer"]

src/backend/gradio_medical_image_analyzer/templates/component/index.js

@@ -0,0 +1,775 @@
+const {
+  HtmlTagHydration: Te,
+  SvelteComponent: Ee,
+  add_render_callback: ye,
+  append_hydration: g,
+  assign: Ne,
+  attr: R,
+  check_outros: Ue,
+  children: V,
+  claim_component: te,
+  claim_element: p,
+  claim_html_tag: Se,
+  claim_space: F,
+  claim_text: he,
+  create_component: le,
+  destroy_component: ne,
+  detach: h,
+  element: v,
+  empty: me,
+  get_spread_object: De,
+  get_spread_update: Ae,
+  get_svelte_dataset: j,
+  group_outros: Fe,
+  init: Me,
+  insert_hydration: U,
+  listen: fe,
+  mount_component: ie,
+  noop: Le,
+  run_all: Pe,
+  safe_not_equal: je,
+  select_option: de,
+  select_value: ke,
+  set_data: qe,
+  set_input_value: Q,
+  set_style: q,
+  space: M,
+  src_url_equal: Ce,
+  text: pe,
+  transition_in: W,
+  transition_out: Y
+} = window.__gradio__svelte__internal;
+function Ve(o) {
+  let e, t, l, a, s, r, u = "CT", m, I = "CR (X-Ray)", C, z = "DX (X-Ray)", k, B = "RX (X-Ray)", c, b = "DR (X-Ray)", S, w, O, Z = "Point Analysis", T, G = "Fat Segmentation (CT)", E, X = "Full Analysis", H, D, A, se, ae, L, oe, x, $, re, _e;
+  l = new IconButton({ props: { Icon: UploadIcon } }), l.$on(
+    "click",
+    /*handle_clear*/
+    o[21]
+  );
+  let n = (
+    /*uploaded_file*/
+    o[15] && we(o)
+  ), i = (
+    /*visual_report*/
+    o[17] && Oe(o)
+  ), f = (
+    /*analysis_mode*/
+    o[14] === "structured" && /*analysis_results*/
+    o[16] && Re(o)
+  );
+  return {
+    c() {
+      e = v("div"), t = v("div"), le(l.$$.fragment), a = M(), s = v("select"), r = v("option"), r.textContent = u, m = v("option"), m.textContent = I, C = v("option"), C.textContent = z, k = v("option"), k.textContent = B, c = v("option"), c.textContent = b, S = M(), w = v("select"), O = v("option"), O.textContent = Z, T = v("option"), T.textContent = G, E = v("option"), E.textContent = X, H = M(), D = v("label"), A = v("input"), se = pe(`
+					Show ROI`), ae = M(), L = v("div"), n && n.c(), oe = M(), i && i.c(), x = M(), f && f.c(), this.h();
+    },
+    l(_) {
+      e = p(_, "DIV", { class: !0 });
+      var d = V(e);
+      t = p(d, "DIV", { class: !0 });
+      var N = V(t);
+      te(l.$$.fragment, N), a = F(N), s = p(N, "SELECT", { class: !0 });
+      var P = V(s);
+      r = p(P, "OPTION", { "data-svelte-h": !0 }), j(r) !== "svelte-1uwvdsi" && (r.textContent = u), m = p(P, "OPTION", { "data-svelte-h": !0 }), j(m) !== "svelte-iiiy1a" && (m.textContent = I), C = p(P, "OPTION", { "data-svelte-h": !0 }), j(C) !== "svelte-16a5ymm" && (C.textContent = z), k = p(P, "OPTION", { "data-svelte-h": !0 }), j(k) !== "svelte-bjfw5q" && (k.textContent = B), c = p(P, "OPTION", { "data-svelte-h": !0 }), j(c) !== "svelte-121hs3y" && (c.textContent = b), P.forEach(h), S = F(N), w = p(N, "SELECT", { class: !0 });
+      var K = V(w);
+      O = p(K, "OPTION", { "data-svelte-h": !0 }), j(O) !== "svelte-17yivkd" && (O.textContent = Z), T = p(K, "OPTION", { "data-svelte-h": !0 }), j(T) !== "svelte-cf7bpu" && (T.textContent = G), E = p(K, "OPTION", { "data-svelte-h": !0 }), j(E) !== "svelte-d3m60d" && (E.textContent = X), K.forEach(h), H = F(N), D = p(N, "LABEL", { class: !0 });
+      var ee = V(D);
+      A = p(ee, "INPUT", { type: !0 }), se = he(ee, `
+					Show ROI`), ee.forEach(h), N.forEach(h), ae = F(d), L = p(d, "DIV", { class: !0 });
+      var ce = V(L);
+      n && n.l(ce), ce.forEach(h), oe = F(d), i && i.l(d), x = F(d), f && f.l(d), d.forEach(h), this.h();
+    },
+    h() {
+      r.__value = "CT", Q(r, r.__value), m.__value = "CR", Q(m, m.__value), C.__value = "DX", Q(C, C.__value), k.__value = "RX", Q(k, k.__value), c.__value = "DR", Q(c, c.__value), R(s, "class", "modality-select svelte-197pbtm"), /*modality*/
+      o[1] === void 0 && ye(() => (
+        /*select0_change_handler*/
+        o[27].call(s)
+      )), O.__value = "analyze_point", Q(O, O.__value), T.__value = "segment_fat", Q(T, T.__value), E.__value = "full_analysis", Q(E, E.__value), R(w, "class", "task-select svelte-197pbtm"), /*task*/
+      o[2] === void 0 && ye(() => (
+        /*select1_change_handler*/
+        o[28].call(w)
+      )), R(A, "type", "checkbox"), R(D, "class", "roi-toggle svelte-197pbtm"), R(t, "class", "controls svelte-197pbtm"), R(L, "class", "image-container svelte-197pbtm"), R(e, "class", "analyzer-container svelte-197pbtm");
+    },
+    m(_, d) {
+      U(_, e, d), g(e, t), ie(l, t, null), g(t, a), g(t, s), g(s, r), g(s, m), g(s, C), g(s, k), g(s, c), de(
+        s,
+        /*modality*/
+        o[1],
+        !0
+      ), g(t, S), g(t, w), g(w, O), g(w, T), g(w, E), de(
+        w,
+        /*task*/
+        o[2],
+        !0
+      ), g(t, H), g(t, D), g(D, A), A.checked = /*show_roi*/
+      o[19], g(D, se), g(e, ae), g(e, L), n && n.m(L, null), g(e, oe), i && i.m(e, null), g(e, x), f && f.m(e, null), $ = !0, re || (_e = [
+        fe(
+          s,
+          "change",
+          /*select0_change_handler*/
+          o[27]
+        ),
+        fe(
+          w,
+          "change",
+          /*select1_change_handler*/
+          o[28]
+        ),
+        fe(
+          A,
+          "change",
+          /*input_change_handler*/
+          o[29]
+        ),
+        fe(
+          L,
+          "click",
+          /*handle_roi_click*/
+          o[22]
+        )
+      ], re = !0);
+    },
+    p(_, d) {
+      d[0] & /*modality*/
+      2 && de(
+        s,
+        /*modality*/
+        _[1]
+      ), d[0] & /*task*/
+      4 && de(
+        w,
+        /*task*/
+        _[2]
+      ), d[0] & /*show_roi*/
+      524288 && (A.checked = /*show_roi*/
+      _[19]), /*uploaded_file*/
+      _[15] ? n ? n.p(_, d) : (n = we(_), n.c(), n.m(L, null)) : n && (n.d(1), n = null), /*visual_report*/
+      _[17] ? i ? i.p(_, d) : (i = Oe(_), i.c(), i.m(e, x)) : i && (i.d(1), i = null), /*analysis_mode*/
+      _[14] === "structured" && /*analysis_results*/
+      _[16] ? f ? f.p(_, d) : (f = Re(_), f.c(), f.m(e, null)) : f && (f.d(1), f = null);
+    },
+    i(_) {
+      $ || (W(l.$$.fragment, _), $ = !0);
+    },
+    o(_) {
+      Y(l.$$.fragment, _), $ = !1;
+    },
+    d(_) {
+      _ && h(e), ne(l), n && n.d(), i && i.d(), f && f.d(), re = !1, Pe(_e);
+    }
+  };
+}
+function Xe(o) {
+  let e, t;
+  return e = new Upload({
+    props: {
+      filetype: "*",
+      root: (
+        /*root*/
+        o[8]
+      ),
+      dragging: Qe,
+      $$slots: { default: [Be] },
+      $$scope: { ctx: o }
+    }
+  }), e.$on(
+    "load",
+    /*handle_upload*/
+    o[20]
+  ), {
+    c() {
+      le(e.$$.fragment);
+    },
+    l(l) {
+      te(e.$$.fragment, l);
+    },
+    m(l, a) {
+      ie(e, l, a), t = !0;
+    },
+    p(l, a) {
+      const s = {};
+      a[0] & /*root*/
+      256 && (s.root = /*root*/
+      l[8]), a[0] & /*gradio*/
+      8192 | a[1] & /*$$scope*/
+      4 && (s.$$scope = { dirty: a, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (W(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      Y(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      ne(e, l);
+    }
+  };
+}
+function we(o) {
+  let e, t, l, a, s = (
+    /*show_roi*/
+    o[19] && Ie(o)
+  );
+  return {
+    c() {
+      e = v("img"), l = M(), s && s.c(), a = me(), this.h();
+    },
+    l(r) {
+      e = p(r, "IMG", { src: !0, alt: !0, class: !0 }), l = F(r), s && s.l(r), a = me(), this.h();
+    },
+    h() {
+      Ce(e.src, t = URL.createObjectURL(
+        /*uploaded_file*/
+        o[15]
+      )) || R(e, "src", t), R(e, "alt", "Medical scan"), R(e, "class", "svelte-197pbtm");
+    },
+    m(r, u) {
+      U(r, e, u), U(r, l, u), s && s.m(r, u), U(r, a, u);
+    },
+    p(r, u) {
+      u[0] & /*uploaded_file*/
+      32768 && !Ce(e.src, t = URL.createObjectURL(
+        /*uploaded_file*/
+        r[15]
+      )) && R(e, "src", t), /*show_roi*/
+      r[19] ? s ? s.p(r, u) : (s = Ie(r), s.c(), s.m(a.parentNode, a)) : s && (s.d(1), s = null);
+    },
+    d(r) {
+      r && (h(e), h(l), h(a)), s && s.d(r);
+    }
+  };
+}
+function Ie(o) {
+  let e;
+  return {
+    c() {
+      e = v("div"), this.h();
+    },
+    l(t) {
+      e = p(t, "DIV", { class: !0, style: !0 }), V(e).forEach(h), this.h();
+    },
+    h() {
+      R(e, "class", "roi-marker svelte-197pbtm"), q(
+        e,
+        "left",
+        /*roi*/
+        o[18].x + "px"
+      ), q(
+        e,
+        "top",
+        /*roi*/
+        o[18].y + "px"
+      ), q(
+        e,
+        "width",
+        /*roi*/
+        o[18].radius * 2 + "px"
+      ), q(
+        e,
+        "height",
+        /*roi*/
+        o[18].radius * 2 + "px"
+      );
+    },
+    m(t, l) {
+      U(t, e, l);
+    },
+    p(t, l) {
+      l[0] & /*roi*/
+      262144 && q(
+        e,
+        "left",
+        /*roi*/
+        t[18].x + "px"
+      ), l[0] & /*roi*/
+      262144 && q(
+        e,
+        "top",
+        /*roi*/
+        t[18].y + "px"
+      ), l[0] & /*roi*/
+      262144 && q(
+        e,
+        "width",
+        /*roi*/
+        t[18].radius * 2 + "px"
+      ), l[0] & /*roi*/
+      262144 && q(
+        e,
+        "height",
+        /*roi*/
+        t[18].radius * 2 + "px"
+      );
+    },
+    d(t) {
+      t && h(e);
+    }
+  };
+}
+function Oe(o) {
+  let e, t;
+  return {
+    c() {
+      e = v("div"), t = new Te(!1), this.h();
+    },
+    l(l) {
+      e = p(l, "DIV", { class: !0 });
+      var a = V(e);
+      t = Se(a, !1), a.forEach(h), this.h();
+    },
+    h() {
+      t.a = null, R(e, "class", "report-container svelte-197pbtm");
+    },
+    m(l, a) {
+      U(l, e, a), t.m(
+        /*visual_report*/
+        o[17],
+        e
+      );
+    },
+    p(l, a) {
+      a[0] & /*visual_report*/
+      131072 && t.p(
+        /*visual_report*/
+        l[17]
+      );
+    },
+    d(l) {
+      l && h(e);
+    }
+  };
+}
+function Re(o) {
+  let e, t, l = "JSON Output (for AI Agents)", a, s, r = JSON.stringify(
+    /*analysis_results*/
+    o[16],
+    null,
+    2
+  ) + "", u;
+  return {
+    c() {
+      e = v("details"), t = v("summary"), t.textContent = l, a = M(), s = v("pre"), u = pe(r), this.h();
+    },
+    l(m) {
+      e = p(m, "DETAILS", { class: !0 });
+      var I = V(e);
+      t = p(I, "SUMMARY", { class: !0, "data-svelte-h": !0 }), j(t) !== "svelte-16bwjzd" && (t.textContent = l), a = F(I), s = p(I, "PRE", { class: !0 });
+      var C = V(s);
+      u = he(C, r), C.forEach(h), I.forEach(h), this.h();
+    },
+    h() {
+      R(t, "class", "svelte-197pbtm"), R(s, "class", "svelte-197pbtm"), R(e, "class", "json-output svelte-197pbtm");
+    },
+    m(m, I) {
+      U(m, e, I), g(e, t), g(e, a), g(e, s), g(s, u);
+    },
+    p(m, I) {
+      I[0] & /*analysis_results*/
+      65536 && r !== (r = JSON.stringify(
+        /*analysis_results*/
+        m[16],
+        null,
+        2
+      ) + "") && qe(u, r);
+    },
+    d(m) {
+      m && h(e);
+    }
+  };
+}
+function ze(o) {
+  let e, t, l, a, s = "Supports: DICOM (.dcm), Images (.png, .jpg), and files without extensions (IM_0001, etc.)";
+  return {
+    c() {
+      e = pe("Drop Medical Image File Here - or - Click to Upload"), t = v("br"), l = M(), a = v("span"), a.textContent = s, this.h();
+    },
+    l(r) {
+      e = he(r, "Drop Medical Image File Here - or - Click to Upload"), t = p(r, "BR", {}), l = F(r), a = p(r, "SPAN", { style: !0, "data-svelte-h": !0 }), j(a) !== "svelte-l91joy" && (a.textContent = s), this.h();
+    },
+    h() {
+      q(a, "font-size", "0.9em"), q(a, "color", "var(--body-text-color-subdued)");
+    },
+    m(r, u) {
+      U(r, e, u), U(r, t, u), U(r, l, u), U(r, a, u);
+    },
+    p: Le,
+    d(r) {
+      r && (h(e), h(t), h(l), h(a));
+    }
+  };
+}
+function Be(o) {
+  let e, t;
+  return e = new UploadText({
+    props: {
+      i18n: (
+        /*gradio*/
+        o[13].i18n
+      ),
+      type: "file",
+      $$slots: { default: [ze] },
+      $$scope: { ctx: o }
+    }
+  }), {
+    c() {
+      le(e.$$.fragment);
+    },
+    l(l) {
+      te(e.$$.fragment, l);
+    },
+    m(l, a) {
+      ie(e, l, a), t = !0;
+    },
+    p(l, a) {
+      const s = {};
+      a[0] & /*gradio*/
+      8192 && (s.i18n = /*gradio*/
+      l[13].i18n), a[1] & /*$$scope*/
+      4 && (s.$$scope = { dirty: a, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (W(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      Y(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      ne(e, l);
+    }
+  };
+}
+function He(o) {
+  let e, t, l, a, s, r, u, m;
+  const I = [
+    {
+      autoscroll: (
+        /*gradio*/
+        o[13].autoscroll
+      )
+    },
+    { i18n: (
+      /*gradio*/
+      o[13].i18n
+    ) },
+    /*loading_status*/
+    o[9]
+  ];
+  let C = {};
+  for (let c = 0; c < I.length; c += 1)
+    C = Ne(C, I[c]);
+  e = new StatusTracker({ props: C }), l = new BlockLabel({
+    props: {
+      show_label: (
+        /*show_label*/
+        o[7]
+      ),
+      Icon: Image,
+      label: (
+        /*label*/
+        o[6] || "Medical Image Analyzer"
+      )
+    }
+  });
+  const z = [Xe, Ve], k = [];
+  function B(c, b) {
+    return (
+      /*value*/
+      c[0] === null || !/*uploaded_file*/
+      c[15] ? 0 : 1
+    );
+  }
+  return s = B(o), r = k[s] = z[s](o), {
+    c() {
+      le(e.$$.fragment), t = M(), le(l.$$.fragment), a = M(), r.c(), u = me();
+    },
+    l(c) {
+      te(e.$$.fragment, c), t = F(c), te(l.$$.fragment, c), a = F(c), r.l(c), u = me();
+    },
+    m(c, b) {
+      ie(e, c, b), U(c, t, b), ie(l, c, b), U(c, a, b), k[s].m(c, b), U(c, u, b), m = !0;
+    },
+    p(c, b) {
+      const S = b[0] & /*gradio, loading_status*/
+      8704 ? Ae(I, [
+        b[0] & /*gradio*/
+        8192 && {
+          autoscroll: (
+            /*gradio*/
+            c[13].autoscroll
+          )
+        },
+        b[0] & /*gradio*/
+        8192 && { i18n: (
+          /*gradio*/
+          c[13].i18n
+        ) },
+        b[0] & /*loading_status*/
+        512 && De(
+          /*loading_status*/
+          c[9]
+        )
+      ]) : {};
+      e.$set(S);
+      const w = {};
+      b[0] & /*show_label*/
+      128 && (w.show_label = /*show_label*/
+      c[7]), b[0] & /*label*/
+      64 && (w.label = /*label*/
+      c[6] || "Medical Image Analyzer"), l.$set(w);
+      let O = s;
+      s = B(c), s === O ? k[s].p(c, b) : (Fe(), Y(k[O], 1, 1, () => {
+        k[O] = null;
+      }), Ue(), r = k[s], r ? r.p(c, b) : (r = k[s] = z[s](c), r.c()), W(r, 1), r.m(u.parentNode, u));
+    },
+    i(c) {
+      m || (W(e.$$.fragment, c), W(l.$$.fragment, c), W(r), m = !0);
+    },
+    o(c) {
+      Y(e.$$.fragment, c), Y(l.$$.fragment, c), Y(r), m = !1;
+    },
+    d(c) {
+      c && (h(t), h(a), h(u)), ne(e, c), ne(l, c), k[s].d(c);
+    }
+  };
+}
+function Je(o) {
+  let e, t;
+  return e = new Block({
+    props: {
+      visible: (
+        /*visible*/
+        o[5]
+      ),
+      elem_id: (
+        /*elem_id*/
+        o[3]
+      ),
+      elem_classes: (
+        /*elem_classes*/
+        o[4]
+      ),
+      container: (
+        /*container*/
+        o[10]
+      ),
+      scale: (
+        /*scale*/
+        o[11]
+      ),
+      min_width: (
+        /*min_width*/
+        o[12]
+      ),
+      allow_overflow: !1,
+      padding: !0,
+      $$slots: { default: [He] },
+      $$scope: { ctx: o }
+    }
+  }), {
+    c() {
+      le(e.$$.fragment);
+    },
+    l(l) {
+      te(e.$$.fragment, l);
+    },
+    m(l, a) {
+      ie(e, l, a), t = !0;
+    },
+    p(l, a) {
+      const s = {};
+      a[0] & /*visible*/
+      32 && (s.visible = /*visible*/
+      l[5]), a[0] & /*elem_id*/
+      8 && (s.elem_id = /*elem_id*/
+      l[3]), a[0] & /*elem_classes*/
+      16 && (s.elem_classes = /*elem_classes*/
+      l[4]), a[0] & /*container*/
+      1024 && (s.container = /*container*/
+      l[10]), a[0] & /*scale*/
+      2048 && (s.scale = /*scale*/
+      l[11]), a[0] & /*min_width*/
+      4096 && (s.min_width = /*min_width*/
+      l[12]), a[0] & /*root, gradio, value, uploaded_file, analysis_results, analysis_mode, visual_report, roi, show_roi, task, modality, show_label, label, loading_status*/
+      1041351 | a[1] & /*$$scope*/
+      4 && (s.$$scope = { dirty: a, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (W(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      Y(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      ne(e, l);
+    }
+  };
+}
+let Qe = !1;
+function We(o, e, t) {
+  let { elem_id: l = "" } = e, { elem_classes: a = [] } = e, { visible: s = !0 } = e, { value: r = null } = e, { label: u } = e, { show_label: m } = e, { show_download_button: I } = e, { root: C } = e, { proxy_url: z } = e, { loading_status: k } = e, { container: B = !0 } = e, { scale: c = null } = e, { min_width: b = void 0 } = e, { gradio: S } = e, { analysis_mode: w = "structured" } = e, { include_confidence: O = !0 } = e, { include_reasoning: Z = !0 } = e, { modality: T = "CT" } = e, { task: G = "full_analysis" } = e, E = null, X = { x: 256, y: 256, radius: 10 }, H = !1, D = null, A = "";
+  async function se(n) {
+    var _;
+    const i = URL.createObjectURL(n), f = ((_ = n.name.split(".").pop()) == null ? void 0 : _.toLowerCase()) || "";
+    try {
+      if (!f || f === "dcm" || f === "dicom" || n.type === "application/dicom" || n.name.startsWith("IM_")) {
+        const d = new FormData();
+        d.append("file", n);
+        const N = await fetch(`${C}/process_dicom`, { method: "POST", body: d });
+        if (N.ok)
+          return await N.json();
+      }
+      return {
+        url: i,
+        name: n.name,
+        size: n.size,
+        type: n.type || "application/octet-stream"
+      };
+    } catch (d) {
+      throw console.error("Error loading file:", d), d;
+    }
+  }
+  function ae({ detail: n }) {
+    const i = n;
+    se(i).then((f) => {
+      t(15, E = i), S.dispatch && S.dispatch("upload", { file: i, data: f });
+    }).catch((f) => {
+      console.error("Upload error:", f);
+    });
+  }
+  function L() {
+    t(0, r = null), t(15, E = null), t(16, D = null), t(17, A = ""), S.dispatch("clear");
+  }
+  function oe(n) {
+    if (!H) return;
+    const i = n.target.getBoundingClientRect();
+    t(18, X.x = Math.round(n.clientX - i.left), X), t(18, X.y = Math.round(n.clientY - i.top), X), S.dispatch && S.dispatch("change", { roi: X });
+  }
+  function x(n) {
+    var f, _, d, N, P, K, ee, ce, ve;
+    if (!n) return "";
+    let i = '<div class="medical-report">';
+    if (i += "<h3>🏥 Medical Image Analysis Report</h3>", i += '<div class="report-section">', i += "<h4>📋 Basic Information</h4>", i += `<p><strong>Modality:</strong> ${n.modality || "Unknown"}</p>`, i += `<p><strong>Timestamp:</strong> ${n.timestamp || "N/A"}</p>`, i += "</div>", n.point_analysis) {
+      const y = n.point_analysis;
+      i += '<div class="report-section">', i += "<h4>🎯 Point Analysis</h4>", i += `<p><strong>Location:</strong> (${(f = y.location) == null ? void 0 : f.x}, ${(_ = y.location) == null ? void 0 : _.y})</p>`, n.modality === "CT" ? i += `<p><strong>HU Value:</strong> ${((d = y.hu_value) == null ? void 0 : d.toFixed(1)) || "N/A"}</p>` : i += `<p><strong>Intensity:</strong> ${((N = y.intensity) == null ? void 0 : N.toFixed(3)) || "N/A"}</p>`, y.tissue_type && (i += `<p><strong>Tissue Type:</strong> ${y.tissue_type.icon || ""} ${y.tissue_type.type || "Unknown"}</p>`), O && y.confidence !== void 0 && (i += `<p><strong>Confidence:</strong> ${y.confidence}</p>`), Z && y.reasoning && (i += `<p class="reasoning">💭 ${y.reasoning}</p>`), i += "</div>";
+    }
+    if ((P = n.segmentation) != null && P.statistics) {
+      const y = n.segmentation.statistics;
+      if (n.modality === "CT" && y.total_fat_percentage !== void 0) {
+        if (i += '<div class="report-section">', i += "<h4>🔬 Fat Segmentation</h4>", i += '<div class="stats-grid">', i += `<div><strong>Total Fat:</strong> ${y.total_fat_percentage.toFixed(1)}%</div>`, i += `<div><strong>Subcutaneous:</strong> ${y.subcutaneous_fat_percentage.toFixed(1)}%</div>`, i += `<div><strong>Visceral:</strong> ${y.visceral_fat_percentage.toFixed(1)}%</div>`, i += `<div><strong>V/S Ratio:</strong> ${y.visceral_subcutaneous_ratio.toFixed(2)}</div>`, i += "</div>", n.segmentation.interpretation) {
+          const J = n.segmentation.interpretation;
+          i += '<div class="interpretation">', i += `<p><strong>Obesity Risk:</strong> <span class="risk-${J.obesity_risk}">${J.obesity_risk.toUpperCase()}</span></p>`, i += `<p><strong>Visceral Risk:</strong> <span class="risk-${J.visceral_risk}">${J.visceral_risk.toUpperCase()}</span></p>`, ((K = J.recommendations) == null ? void 0 : K.length) > 0 && (i += "<p><strong>Recommendations:</strong></p>", i += "<ul>", J.recommendations.forEach((ge) => {
+            i += `<li>${ge}</li>`;
+          }), i += "</ul>"), i += "</div>";
+        }
+        i += "</div>";
+      } else if (n.segmentation.tissue_distribution) {
+        i += '<div class="report-section">', i += "<h4>🦴 Tissue Distribution</h4>", i += '<div class="tissue-grid">';
+        const J = n.segmentation.tissue_distribution, ge = {
+          bone: "🦴",
+          soft_tissue: "🔴",
+          air: "🌫️",
+          metal: "⚙️",
+          fat: "🟡",
+          fluid: "💧"
+        };
+        Object.entries(J).forEach(([ue, be]) => {
+          be > 0 && (i += '<div class="tissue-item">', i += `<div class="tissue-icon">${ge[ue] || "📍"}</div>`, i += `<div class="tissue-name">${ue.replace("_", " ")}</div>`, i += `<div class="tissue-percentage">${be.toFixed(1)}%</div>`, i += "</div>");
+        }), i += "</div>", ((ee = n.segmentation.clinical_findings) == null ? void 0 : ee.length) > 0 && (i += '<div class="clinical-findings">', i += "<p><strong>⚠️ Clinical Findings:</strong></p>", i += "<ul>", n.segmentation.clinical_findings.forEach((ue) => {
+          i += `<li>${ue.description} (Confidence: ${ue.confidence})</li>`;
+        }), i += "</ul>", i += "</div>"), i += "</div>";
+      }
+    }
+    if (n.quality_metrics) {
+      const y = n.quality_metrics;
+      i += '<div class="report-section">', i += "<h4>📊 Image Quality</h4>", i += `<p><strong>Overall Quality:</strong> <span class="quality-${y.overall_quality}">${((ce = y.overall_quality) == null ? void 0 : ce.toUpperCase()) || "UNKNOWN"}</span></p>`, ((ve = y.issues) == null ? void 0 : ve.length) > 0 && (i += `<p><strong>Issues:</strong> ${y.issues.join(", ")}</p>`), i += "</div>";
+    }
+    return i += "</div>", i;
+  }
+  function $() {
+    T = ke(this), t(1, T);
+  }
+  function re() {
+    G = ke(this), t(2, G);
+  }
+  function _e() {
+    H = this.checked, t(19, H);
+  }
+  return o.$$set = (n) => {
+    "elem_id" in n && t(3, l = n.elem_id), "elem_classes" in n && t(4, a = n.elem_classes), "visible" in n && t(5, s = n.visible), "value" in n && t(0, r = n.value), "label" in n && t(6, u = n.label), "show_label" in n && t(7, m = n.show_label), "show_download_button" in n && t(23, I = n.show_download_button), "root" in n && t(8, C = n.root), "proxy_url" in n && t(24, z = n.proxy_url), "loading_status" in n && t(9, k = n.loading_status), "container" in n && t(10, B = n.container), "scale" in n && t(11, c = n.scale), "min_width" in n && t(12, b = n.min_width), "gradio" in n && t(13, S = n.gradio), "analysis_mode" in n && t(14, w = n.analysis_mode), "include_confidence" in n && t(25, O = n.include_confidence), "include_reasoning" in n && t(26, Z = n.include_reasoning), "modality" in n && t(1, T = n.modality), "task" in n && t(2, G = n.task);
+  }, o.$$.update = () => {
+    o.$$.dirty[0] & /*analysis_results*/
+    65536 && D && t(17, A = x(D)), o.$$.dirty[0] & /*uploaded_file, analysis_results, visual_report*/
+    229376 && t(0, r = {
+      image: E,
+      analysis: D,
+      report: A
+    });
+  }, [
+    r,
+    T,
+    G,
+    l,
+    a,
+    s,
+    u,
+    m,
+    C,
+    k,
+    B,
+    c,
+    b,
+    S,
+    w,
+    E,
+    D,
+    A,
+    X,
+    H,
+    ae,
+    L,
+    oe,
+    I,
+    z,
+    O,
+    Z,
+    $,
+    re,
+    _e
+  ];
+}
+class Ye extends Ee {
+  constructor(e) {
+    super(), Me(
+      this,
+      e,
+      We,
+      Je,
+      je,
+      {
+        elem_id: 3,
+        elem_classes: 4,
+        visible: 5,
+        value: 0,
+        label: 6,
+        show_label: 7,
+        show_download_button: 23,
+        root: 8,
+        proxy_url: 24,
+        loading_status: 9,
+        container: 10,
+        scale: 11,
+        min_width: 12,
+        gradio: 13,
+        analysis_mode: 14,
+        include_confidence: 25,
+        include_reasoning: 26,
+        modality: 1,
+        task: 2
+      },
+      null,
+      [-1, -1]
+    );
+  }
+}
+export {
+  Ye as default
+};

src/backend/gradio_medical_image_analyzer/templates/component/style.css

@@ -0,0 +1 @@
+.analyzer-container.svelte-197pbtm.svelte-197pbtm{display:flex;flex-direction:column;gap:1rem}.controls.svelte-197pbtm.svelte-197pbtm{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.modality-select.svelte-197pbtm.svelte-197pbtm,.task-select.svelte-197pbtm.svelte-197pbtm{padding:.5rem;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);background:var(--background-fill-primary)}.roi-toggle.svelte-197pbtm.svelte-197pbtm{display:flex;align-items:center;gap:.5rem;cursor:pointer}.image-container.svelte-197pbtm.svelte-197pbtm{position:relative;overflow:hidden;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);cursor:crosshair}.image-container.svelte-197pbtm img.svelte-197pbtm{width:100%;height:auto;display:block}.roi-marker.svelte-197pbtm.svelte-197pbtm{position:absolute;border:2px solid #ff0000;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #ffffff80}.report-container.svelte-197pbtm.svelte-197pbtm{background:var(--background-fill-secondary);border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);padding:1rem;overflow-x:auto}.medical-report{font-family:var(--font);color:var(--body-text-color)}.medical-report h3{color:var(--body-text-color);border-bottom:2px solid var(--color-accent);padding-bottom:.5rem;margin-bottom:1rem}.medical-report h4{color:var(--body-text-color);margin-top:1rem;margin-bottom:.5rem}.report-section{background:var(--background-fill-primary);padding:1rem;border-radius:var(--radius-sm);margin-bottom:1rem}.stats-grid,.tissue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}.tissue-item{text-align:center;padding:.5rem;background:var(--background-fill-secondary);border-radius:var(--radius-sm)}.tissue-icon{font-size:2rem;margin-bottom:.25rem}.tissue-name{font-weight:700;text-transform:capitalize}.tissue-percentage{color:var(--color-accent);font-size:1.2rem;font-weight:700}.reasoning{font-style:italic;color:var(--body-text-color-subdued);margin-top:.5rem}.interpretation{margin-top:1rem;padding:.5rem;background:var(--background-fill-secondary);border-radius:var(--radius-sm)}.risk-normal{color:#27ae60}.risk-moderate{color:#f39c12}.risk-high,.risk-severe{color:#e74c3c}.quality-excellent,.quality-good{color:#27ae60}.quality-fair{color:#f39c12}.quality-poor{color:#e74c3c}.clinical-findings{margin-top:1rem;padding:.5rem;background:#fff3cd;border-left:4px solid #ffc107;border-radius:var(--radius-sm)}.json-output.svelte-197pbtm.svelte-197pbtm{margin-top:1rem;background:var(--background-fill-secondary);border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);padding:1rem}.json-output.svelte-197pbtm summary.svelte-197pbtm{cursor:pointer;font-weight:700;margin-bottom:.5rem}.json-output.svelte-197pbtm pre.svelte-197pbtm{margin:0;overflow-x:auto;font-size:.875rem;background:var(--background-fill-primary);padding:.5rem;border-radius:var(--radius-sm)}

src/backend/gradio_medical_image_analyzer/templates/example/index.js

@@ -0,0 +1,399 @@
+const {
+  SvelteComponent: U,
+  append_hydration: m,
+  attr: f,
+  children: y,
+  claim_element: p,
+  claim_space: k,
+  claim_text: b,
+  detach: c,
+  element: h,
+  get_svelte_dataset: R,
+  init: j,
+  insert_hydration: d,
+  noop: I,
+  safe_not_equal: z,
+  set_data: E,
+  space: C,
+  src_url_equal: w,
+  text: g,
+  toggle_class: v
+} = window.__gradio__svelte__internal;
+function B(n) {
+  let e, a = "No example";
+  return {
+    c() {
+      e = h("div"), e.textContent = a, this.h();
+    },
+    l(l) {
+      e = p(l, "DIV", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-1xsigcs" && (e.textContent = a), this.h();
+    },
+    h() {
+      f(e, "class", "empty-example svelte-16yp9bf");
+    },
+    m(l, t) {
+      d(l, e, t);
+    },
+    p: I,
+    d(l) {
+      l && c(e);
+    }
+  };
+}
+function F(n) {
+  let e, a, l = (
+    /*value*/
+    n[0].image && S(n)
+  ), t = (
+    /*value*/
+    n[0].analysis && A(n)
+  );
+  return {
+    c() {
+      e = h("div"), l && l.c(), a = C(), t && t.c(), this.h();
+    },
+    l(i) {
+      e = p(i, "DIV", { class: !0 });
+      var s = y(e);
+      l && l.l(s), a = k(s), t && t.l(s), s.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "example-content svelte-16yp9bf");
+    },
+    m(i, s) {
+      d(i, e, s), l && l.m(e, null), m(e, a), t && t.m(e, null);
+    },
+    p(i, s) {
+      /*value*/
+      i[0].image ? l ? l.p(i, s) : (l = S(i), l.c(), l.m(e, a)) : l && (l.d(1), l = null), /*value*/
+      i[0].analysis ? t ? t.p(i, s) : (t = A(i), t.c(), t.m(e, null)) : t && (t.d(1), t = null);
+    },
+    d(i) {
+      i && c(e), l && l.d(), t && t.d();
+    }
+  };
+}
+function S(n) {
+  let e;
+  function a(i, s) {
+    return typeof /*value*/
+    i[0].image == "string" ? K : (
+      /*value*/
+      i[0].image.url ? J : H
+    );
+  }
+  let l = a(n), t = l(n);
+  return {
+    c() {
+      e = h("div"), t.c(), this.h();
+    },
+    l(i) {
+      e = p(i, "DIV", { class: !0 });
+      var s = y(e);
+      t.l(s), s.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "image-preview svelte-16yp9bf");
+    },
+    m(i, s) {
+      d(i, e, s), t.m(e, null);
+    },
+    p(i, s) {
+      l === (l = a(i)) && t ? t.p(i, s) : (t.d(1), t = l(i), t && (t.c(), t.m(e, null)));
+    },
+    d(i) {
+      i && c(e), t.d();
+    }
+  };
+}
+function H(n) {
+  let e, a = "📷 Image";
+  return {
+    c() {
+      e = h("div"), e.textContent = a, this.h();
+    },
+    l(l) {
+      e = p(l, "DIV", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-1hvroc5" && (e.textContent = a), this.h();
+    },
+    h() {
+      f(e, "class", "placeholder svelte-16yp9bf");
+    },
+    m(l, t) {
+      d(l, e, t);
+    },
+    p: I,
+    d(l) {
+      l && c(e);
+    }
+  };
+}
+function J(n) {
+  let e, a;
+  return {
+    c() {
+      e = h("img"), this.h();
+    },
+    l(l) {
+      e = p(l, "IMG", { src: !0, alt: !0, class: !0 }), this.h();
+    },
+    h() {
+      w(e.src, a = /*value*/
+      n[0].image.url) || f(e, "src", a), f(e, "alt", "Medical scan example"), f(e, "class", "svelte-16yp9bf");
+    },
+    m(l, t) {
+      d(l, e, t);
+    },
+    p(l, t) {
+      t & /*value*/
+      1 && !w(e.src, a = /*value*/
+      l[0].image.url) && f(e, "src", a);
+    },
+    d(l) {
+      l && c(e);
+    }
+  };
+}
+function K(n) {
+  let e, a;
+  return {
+    c() {
+      e = h("img"), this.h();
+    },
+    l(l) {
+      e = p(l, "IMG", { src: !0, alt: !0, class: !0 }), this.h();
+    },
+    h() {
+      w(e.src, a = /*value*/
+      n[0].image) || f(e, "src", a), f(e, "alt", "Medical scan example"), f(e, "class", "svelte-16yp9bf");
+    },
+    m(l, t) {
+      d(l, e, t);
+    },
+    p(l, t) {
+      t & /*value*/
+      1 && !w(e.src, a = /*value*/
+      l[0].image) && f(e, "src", a);
+    },
+    d(l) {
+      l && c(e);
+    }
+  };
+}
+function A(n) {
+  var r, _, D;
+  let e, a, l, t = (
+    /*value*/
+    n[0].analysis.modality && P(n)
+  ), i = (
+    /*value*/
+    ((r = n[0].analysis.point_analysis) == null ? void 0 : r.tissue_type) && q(n)
+  ), s = (
+    /*value*/
+    ((D = (_ = n[0].analysis.segmentation) == null ? void 0 : _.interpretation) == null ? void 0 : D.obesity_risk) && G(n)
+  );
+  return {
+    c() {
+      e = h("div"), t && t.c(), a = C(), i && i.c(), l = C(), s && s.c(), this.h();
+    },
+    l(o) {
+      e = p(o, "DIV", { class: !0 });
+      var u = y(e);
+      t && t.l(u), a = k(u), i && i.l(u), l = k(u), s && s.l(u), u.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "analysis-preview svelte-16yp9bf");
+    },
+    m(o, u) {
+      d(o, e, u), t && t.m(e, null), m(e, a), i && i.m(e, null), m(e, l), s && s.m(e, null);
+    },
+    p(o, u) {
+      var V, M, N;
+      /*value*/
+      o[0].analysis.modality ? t ? t.p(o, u) : (t = P(o), t.c(), t.m(e, a)) : t && (t.d(1), t = null), /*value*/
+      (V = o[0].analysis.point_analysis) != null && V.tissue_type ? i ? i.p(o, u) : (i = q(o), i.c(), i.m(e, l)) : i && (i.d(1), i = null), /*value*/
+      (N = (M = o[0].analysis.segmentation) == null ? void 0 : M.interpretation) != null && N.obesity_risk ? s ? s.p(o, u) : (s = G(o), s.c(), s.m(e, null)) : s && (s.d(1), s = null);
+    },
+    d(o) {
+      o && c(e), t && t.d(), i && i.d(), s && s.d();
+    }
+  };
+}
+function P(n) {
+  let e, a = (
+    /*value*/
+    n[0].analysis.modality + ""
+  ), l;
+  return {
+    c() {
+      e = h("span"), l = g(a), this.h();
+    },
+    l(t) {
+      e = p(t, "SPAN", { class: !0 });
+      var i = y(e);
+      l = b(i, a), i.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "modality-badge svelte-16yp9bf");
+    },
+    m(t, i) {
+      d(t, e, i), m(e, l);
+    },
+    p(t, i) {
+      i & /*value*/
+      1 && a !== (a = /*value*/
+      t[0].analysis.modality + "") && E(l, a);
+    },
+    d(t) {
+      t && c(e);
+    }
+  };
+}
+function q(n) {
+  let e, a = (
+    /*value*/
+    (n[0].analysis.point_analysis.tissue_type.icon || "") + ""
+  ), l, t, i = (
+    /*value*/
+    (n[0].analysis.point_analysis.tissue_type.type || "Unknown") + ""
+  ), s;
+  return {
+    c() {
+      e = h("span"), l = g(a), t = C(), s = g(i), this.h();
+    },
+    l(r) {
+      e = p(r, "SPAN", { class: !0 });
+      var _ = y(e);
+      l = b(_, a), t = k(_), s = b(_, i), _.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "tissue-type svelte-16yp9bf");
+    },
+    m(r, _) {
+      d(r, e, _), m(e, l), m(e, t), m(e, s);
+    },
+    p(r, _) {
+      _ & /*value*/
+      1 && a !== (a = /*value*/
+      (r[0].analysis.point_analysis.tissue_type.icon || "") + "") && E(l, a), _ & /*value*/
+      1 && i !== (i = /*value*/
+      (r[0].analysis.point_analysis.tissue_type.type || "Unknown") + "") && E(s, i);
+    },
+    d(r) {
+      r && c(e);
+    }
+  };
+}
+function G(n) {
+  let e, a, l = (
+    /*value*/
+    n[0].analysis.segmentation.interpretation.obesity_risk + ""
+  ), t, i;
+  return {
+    c() {
+      e = h("span"), a = g("Risk: "), t = g(l), this.h();
+    },
+    l(s) {
+      e = p(s, "SPAN", { class: !0 });
+      var r = y(e);
+      a = b(r, "Risk: "), t = b(r, l), r.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", i = "risk-badge risk-" + /*value*/
+      n[0].analysis.segmentation.interpretation.obesity_risk + " svelte-16yp9bf");
+    },
+    m(s, r) {
+      d(s, e, r), m(e, a), m(e, t);
+    },
+    p(s, r) {
+      r & /*value*/
+      1 && l !== (l = /*value*/
+      s[0].analysis.segmentation.interpretation.obesity_risk + "") && E(t, l), r & /*value*/
+      1 && i !== (i = "risk-badge risk-" + /*value*/
+      s[0].analysis.segmentation.interpretation.obesity_risk + " svelte-16yp9bf") && f(e, "class", i);
+    },
+    d(s) {
+      s && c(e);
+    }
+  };
+}
+function L(n) {
+  let e;
+  function a(i, s) {
+    return (
+      /*value*/
+      i[0] ? F : B
+    );
+  }
+  let l = a(n), t = l(n);
+  return {
+    c() {
+      e = h("div"), t.c(), this.h();
+    },
+    l(i) {
+      e = p(i, "DIV", { class: !0 });
+      var s = y(e);
+      t.l(s), s.forEach(c), this.h();
+    },
+    h() {
+      f(e, "class", "example-container svelte-16yp9bf"), v(
+        e,
+        "table",
+        /*type*/
+        n[1] === "table"
+      ), v(
+        e,
+        "gallery",
+        /*type*/
+        n[1] === "gallery"
+      ), v(
+        e,
+        "selected",
+        /*selected*/
+        n[2]
+      );
+    },
+    m(i, s) {
+      d(i, e, s), t.m(e, null);
+    },
+    p(i, [s]) {
+      l === (l = a(i)) && t ? t.p(i, s) : (t.d(1), t = l(i), t && (t.c(), t.m(e, null))), s & /*type*/
+      2 && v(
+        e,
+        "table",
+        /*type*/
+        i[1] === "table"
+      ), s & /*type*/
+      2 && v(
+        e,
+        "gallery",
+        /*type*/
+        i[1] === "gallery"
+      ), s & /*selected*/
+      4 && v(
+        e,
+        "selected",
+        /*selected*/
+        i[2]
+      );
+    },
+    i: I,
+    o: I,
+    d(i) {
+      i && c(e), t.d();
+    }
+  };
+}
+function O(n, e, a) {
+  let { value: l } = e, { type: t } = e, { selected: i = !1 } = e;
+  return n.$$set = (s) => {
+    "value" in s && a(0, l = s.value), "type" in s && a(1, t = s.type), "selected" in s && a(2, i = s.selected);
+  }, [l, t, i];
+}
+class Q extends U {
+  constructor(e) {
+    super(), j(this, e, O, L, z, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  Q as default
+};

src/backend/gradio_medical_image_analyzer/templates/example/style.css

@@ -0,0 +1 @@
+.example-container.svelte-16yp9bf.svelte-16yp9bf{overflow:hidden;border-radius:var(--radius-sm);background:var(--background-fill-secondary);position:relative;transition:all .2s ease}.example-container.svelte-16yp9bf.svelte-16yp9bf:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.example-container.selected.svelte-16yp9bf.svelte-16yp9bf{border:2px solid var(--color-accent)}.example-container.table.svelte-16yp9bf.svelte-16yp9bf{display:flex;align-items:center;padding:.5rem;gap:.5rem}.example-container.gallery.svelte-16yp9bf.svelte-16yp9bf{aspect-ratio:1}.example-content.svelte-16yp9bf.svelte-16yp9bf{display:flex;flex-direction:column;height:100%}.table.svelte-16yp9bf .example-content.svelte-16yp9bf{flex-direction:row;align-items:center;gap:.5rem}.image-preview.svelte-16yp9bf.svelte-16yp9bf{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--background-fill-primary)}.gallery.svelte-16yp9bf .image-preview.svelte-16yp9bf{height:70%}.table.svelte-16yp9bf .image-preview.svelte-16yp9bf{width:60px;height:60px;flex:0 0 60px;border-radius:var(--radius-sm)}.image-preview.svelte-16yp9bf img.svelte-16yp9bf{width:100%;height:100%;object-fit:cover}.placeholder.svelte-16yp9bf.svelte-16yp9bf{color:var(--body-text-color-subdued);font-size:2rem;opacity:.5}.analysis-preview.svelte-16yp9bf.svelte-16yp9bf{padding:.5rem;display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;font-size:.875rem}.gallery.svelte-16yp9bf .analysis-preview.svelte-16yp9bf{background:var(--background-fill-primary);border-top:1px solid var(--border-color-primary)}.modality-badge.svelte-16yp9bf.svelte-16yp9bf{background:var(--color-accent);color:#fff;padding:.125rem .5rem;border-radius:var(--radius-sm);font-weight:700;font-size:.75rem}.tissue-type.svelte-16yp9bf.svelte-16yp9bf{background:var(--background-fill-secondary);padding:.125rem .5rem;border-radius:var(--radius-sm);border:1px solid var(--border-color-primary)}.risk-badge.svelte-16yp9bf.svelte-16yp9bf{padding:.125rem .5rem;border-radius:var(--radius-sm);font-weight:700;font-size:.75rem}.risk-normal.svelte-16yp9bf.svelte-16yp9bf{background:#d4edda;color:#155724}.risk-moderate.svelte-16yp9bf.svelte-16yp9bf{background:#fff3cd;color:#856404}.risk-high.svelte-16yp9bf.svelte-16yp9bf,.risk-severe.svelte-16yp9bf.svelte-16yp9bf{background:#f8d7da;color:#721c24}.empty-example.svelte-16yp9bf.svelte-16yp9bf{display:flex;align-items:center;justify-content:center;height:100%;color:var(--body-text-color-subdued);font-style:italic}

src/backend/gradio_medical_image_analyzer/xray_analyzer.py

@@ -0,0 +1,770 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+X-Ray Image Analyzer for bone and tissue segmentation
+Extended for multi-tissue analysis in medical imaging
+"""
+
+import numpy as np
+from scipy import ndimage
+from skimage import filters, morphology, measure
+from skimage.exposure import equalize_adapthist
+from typing import Dict, Any, Optional, List, Tuple
+import cv2
+
+
+class XRayAnalyzer:
+    """Analyze X-Ray images for comprehensive tissue segmentation"""
+    
+    def __init__(self):
+        self.modality_types = ['CR', 'DX', 'RX', 'DR']  # Computed/Digital/Direct Radiography, X-Ray
+        self.tissue_types = ['bone', 'soft_tissue', 'air', 'metal', 'fat', 'fluid']
+    
+    def analyze_xray_image(self, pixel_array: np.ndarray, metadata: dict = None) -> dict:
+        """
+        Analyze X-Ray image and segment different structures
+        
+        Args:
+            pixel_array: 2D numpy array of pixel values
+            metadata: DICOM metadata (optional)
+            
+        Returns:
+            Dictionary with segmentation results
+        """
+        # Normalize image to 0-1 range
+        normalized = self._normalize_image(pixel_array)
+        
+        # Calculate image statistics
+        stats = self._calculate_statistics(normalized)
+        
+        # Segment different structures with enhanced tissue detection
+        segments = {
+            'bone': self._segment_bone(normalized, stats),
+            'soft_tissue': self._segment_soft_tissue(normalized, stats),
+            'air': self._segment_air(normalized, stats),
+            'metal': self._detect_metal(normalized, stats),
+            'fat': self._segment_fat_xray(normalized, stats),
+            'fluid': self._detect_fluid(normalized, stats)
+        }
+        
+        # Calculate percentages
+        total_pixels = pixel_array.size
+        percentages = {
+            name: (np.sum(mask) / total_pixels * 100) 
+            for name, mask in segments.items()
+        }
+        
+        # Perform clinical analysis
+        clinical_analysis = self._perform_clinical_analysis(segments, stats, metadata)
+        
+        return {
+            'segments': segments,
+            'percentages': percentages,
+            'statistics': stats,
+            'clinical_analysis': clinical_analysis,
+            'overlay': self._create_overlay(normalized, segments),
+            'tissue_map': self._create_tissue_map(segments)
+        }
+    
+    def _normalize_image(self, image: np.ndarray) -> np.ndarray:
+        """Normalize image to 0-1 range"""
+        img_min, img_max = image.min(), image.max()
+        if img_max - img_min == 0:
+            return np.zeros_like(image, dtype=np.float32)
+        return (image - img_min) / (img_max - img_min)
+    
+    def _calculate_statistics(self, image: np.ndarray) -> dict:
+        """Calculate comprehensive image statistics for adaptive processing"""
+        return {
+            'mean': np.mean(image),
+            'std': np.std(image),
+            'median': np.median(image),
+            'skewness': float(np.mean(((image - np.mean(image)) / np.std(image)) ** 3)),
+            'kurtosis': float(np.mean(((image - np.mean(image)) / np.std(image)) ** 4) - 3),
+            'percentiles': {
+                f'p{p}': np.percentile(image, p) 
+                for p in [1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 85, 90, 95, 99]
+            },
+            'histogram': np.histogram(image, bins=256)[0]
+        }
+    
+    def _segment_bone(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Enhanced bone segmentation using multiple techniques
+        """
+        percentiles = stats['percentiles']
+        
+        # Method 1: Percentile-based thresholding
+        bone_threshold = percentiles['p80']
+        bone_mask = image > bone_threshold
+        
+        # Method 2: Otsu's method on high-intensity regions
+        high_intensity = image > percentiles['p60']
+        if np.any(high_intensity):
+            otsu_thresh = filters.threshold_otsu(image[high_intensity])
+            bone_mask_otsu = image > otsu_thresh
+            bone_mask = bone_mask | bone_mask_otsu
+        
+        # Method 3: Gradient-based edge detection for cortical bone
+        gradient_magnitude = filters.sobel(image)
+        high_gradient = gradient_magnitude > np.percentile(gradient_magnitude, 90)
+        bone_edges = high_gradient & (image > percentiles['p70'])
+        
+        # Combine methods
+        bone_mask = bone_mask | bone_edges
+        
+        # Clean up using morphological operations
+        bone_mask = morphology.remove_small_objects(bone_mask, min_size=100)
+        bone_mask = morphology.binary_closing(bone_mask, morphology.disk(3))
+        bone_mask = morphology.binary_dilation(bone_mask, morphology.disk(1))
+        
+        return bone_mask.astype(np.uint8)
+    
+    def _segment_soft_tissue(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Enhanced soft tissue segmentation with better discrimination
+        """
+        percentiles = stats['percentiles']
+        
+        # Soft tissue is between air and bone
+        soft_lower = percentiles['p20']
+        soft_upper = percentiles['p75']
+        
+        # Initial mask
+        soft_mask = (image > soft_lower) & (image < soft_upper)
+        
+        # Use adaptive thresholding for better edge detection
+        img_uint8 = (image * 255).astype(np.uint8)
+        
+        # Multiple adaptive threshold scales
+        adaptive_masks = []
+        for block_size in [31, 51, 71]:
+            adaptive_thresh = cv2.adaptiveThreshold(
+                img_uint8, 255, 
+                cv2.ADAPTIVE_THRESH_GAUSSIAN_C,
+                cv2.THRESH_BINARY,
+                blockSize=block_size,
+                C=2
+            )
+            adaptive_masks.append(adaptive_thresh > 0)
+        
+        # Combine adaptive masks
+        combined_adaptive = np.logical_and.reduce(adaptive_masks)
+        soft_mask = soft_mask & combined_adaptive
+        
+        # Remove bone and air regions
+        bone_mask = self._segment_bone(image, stats)
+        air_mask = self._segment_air(image, stats)
+        soft_mask = soft_mask & ~bone_mask & ~air_mask
+        
+        # Clean up
+        soft_mask = morphology.remove_small_objects(soft_mask, min_size=300)
+        soft_mask = morphology.binary_closing(soft_mask, morphology.disk(2))
+        
+        return soft_mask.astype(np.uint8)
+    
+    def _segment_air(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Enhanced air/lung segmentation with better boundary detection
+        """
+        percentiles = stats['percentiles']
+        
+        # Air/lung regions are typically very dark
+        air_threshold = percentiles['p15']
+        air_mask = image < air_threshold
+        
+        # For chest X-rays, lungs are large dark regions
+        # Remove small dark spots (could be noise)
+        air_mask = morphology.remove_small_objects(air_mask, min_size=1000)
+        
+        # Fill holes to get complete lung fields
+        air_mask = ndimage.binary_fill_holes(air_mask)
+        
+        # Refine boundaries using watershed
+        distance = ndimage.distance_transform_edt(air_mask)
+        local_maxima = morphology.local_maxima(distance)
+        markers = measure.label(local_maxima)
+        
+        if np.any(markers):
+            air_mask = morphology.watershed(-distance, markers, mask=air_mask)
+            air_mask = air_mask > 0
+        
+        return air_mask.astype(np.uint8)
+    
+    def _detect_metal(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Enhanced metal detection including surgical implants
+        """
+        percentiles = stats['percentiles']
+        
+        # Metal often saturates the detector
+        metal_threshold = percentiles['p99']
+        metal_mask = image > metal_threshold
+        
+        # Check for high local contrast (characteristic of metal)
+        local_std = ndimage.generic_filter(image, np.std, size=5)
+        high_contrast = local_std > stats['std'] * 2
+        
+        # Saturation detection - completely white areas
+        saturated = image >= 0.99
+        
+        # Combine criteria
+        metal_mask = (metal_mask & high_contrast) | saturated
+        
+        # Metal objects often have sharp edges
+        edges = filters.sobel(image)
+        sharp_edges = edges > np.percentile(edges, 95)
+        metal_mask = metal_mask | (sharp_edges & (image > percentiles['p95']))
+        
+        return metal_mask.astype(np.uint8)
+    
+    def _segment_fat_xray(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Detect fat tissue in X-ray (appears darker than muscle but lighter than air)
+        """
+        percentiles = stats['percentiles']
+        
+        # Fat appears darker than soft tissue but lighter than air
+        fat_lower = percentiles['p15']
+        fat_upper = percentiles['p40']
+        
+        fat_mask = (image > fat_lower) & (image < fat_upper)
+        
+        # Fat has relatively uniform texture
+        texture = ndimage.generic_filter(image, np.std, size=7)
+        low_texture = texture < stats['std'] * 0.5
+        
+        fat_mask = fat_mask & low_texture
+        
+        # Remove air regions
+        air_mask = self._segment_air(image, stats)
+        fat_mask = fat_mask & ~air_mask
+        
+        # Clean up
+        fat_mask = morphology.remove_small_objects(fat_mask, min_size=200)
+        fat_mask = morphology.binary_closing(fat_mask, morphology.disk(2))
+        
+        return fat_mask.astype(np.uint8)
+    
+    def _detect_fluid(self, image: np.ndarray, stats: dict) -> np.ndarray:
+        """
+        Detect fluid accumulation (pleural effusion, ascites, etc.)
+        """
+        percentiles = stats['percentiles']
+        
+        # Fluid has intermediate density between air and soft tissue
+        fluid_lower = percentiles['p25']
+        fluid_upper = percentiles['p60']
+        
+        fluid_mask = (image > fluid_lower) & (image < fluid_upper)
+        
+        # Fluid tends to accumulate in dependent regions and has smooth boundaries
+        # Use gradient to find smooth regions
+        gradient = filters.sobel(image)
+        smooth_regions = gradient < np.percentile(gradient, 30)
+        
+        fluid_mask = fluid_mask & smooth_regions
+        
+        # Fluid collections are usually larger areas
+        fluid_mask = morphology.remove_small_objects(fluid_mask, min_size=500)
+        
+        # Apply closing to fill gaps
+        fluid_mask = morphology.binary_closing(fluid_mask, morphology.disk(5))
+        
+        return fluid_mask.astype(np.uint8)
+    
+    def _create_tissue_map(self, segments: dict) -> np.ndarray:
+        """
+        Create a labeled tissue map where each pixel has a tissue type ID
+        """
+        tissue_map = np.zeros(list(segments.values())[0].shape, dtype=np.uint8)
+        
+        # Assign tissue IDs (higher priority overwrites lower)
+        tissue_priorities = [
+            ('air', 1),
+            ('fat', 2),
+            ('fluid', 3),
+            ('soft_tissue', 4),
+            ('bone', 5),
+            ('metal', 6)
+        ]
+        
+        for tissue_name, tissue_id in tissue_priorities:
+            if tissue_name in segments:
+                tissue_map[segments[tissue_name] > 0] = tissue_id
+        
+        return tissue_map
+    
+    def _create_overlay(self, image: np.ndarray, segments: dict) -> np.ndarray:
+        """Create enhanced color overlay visualization"""
+        # Convert to RGB
+        rgb_image = np.stack([image, image, image], axis=2)
+        
+        # Enhanced color mappings
+        colors = {
+            'bone': [1.0, 1.0, 0.8],       # Light yellow
+            'soft_tissue': [1.0, 0.7, 0.7],  # Light red
+            'air': [0.7, 0.7, 1.0],         # Light blue
+            'metal': [1.0, 0.5, 0.0],       # Orange
+            'fat': [0.9, 0.9, 0.5],         # Pale yellow
+            'fluid': [0.5, 0.8, 1.0]        # Cyan
+        }
+        
+        # Apply colors with transparency
+        alpha = 0.3
+        for name, mask in segments.items():
+            if name in colors and np.any(mask):
+                for i in range(3):
+                    rgb_image[:, :, i] = np.where(
+                        mask,
+                        rgb_image[:, :, i] * (1 - alpha) + colors[name][i] * alpha,
+                        rgb_image[:, :, i]
+                    )
+        
+        return rgb_image
+    
+    def _perform_clinical_analysis(self, segments: dict, stats: dict, 
+                                  metadata: Optional[dict]) -> dict:
+        """
+        Perform clinical analysis based on segmentation results
+        """
+        analysis = {
+            'tissue_distribution': self._analyze_tissue_distribution(segments),
+            'abnormality_detection': self._detect_abnormalities(segments, stats),
+            'quality_assessment': self._assess_image_quality(stats)
+        }
+        
+        # Add body-part specific analysis if metadata available
+        if metadata and 'BodyPartExamined' in metadata:
+            body_part = metadata['BodyPartExamined'].lower()
+            analysis['body_part_analysis'] = self._analyze_body_part(
+                segments, stats, body_part
+            )
+        
+        return analysis
+    
+    def _analyze_tissue_distribution(self, segments: dict) -> dict:
+        """Analyze the distribution of different tissues"""
+        total_pixels = list(segments.values())[0].size
+        
+        distribution = {}
+        for tissue, mask in segments.items():
+            pixels = np.sum(mask)
+            percentage = (pixels / total_pixels) * 100
+            distribution[tissue] = {
+                'pixels': int(pixels),
+                'percentage': round(percentage, 2),
+                'present': pixels > 100  # Minimum threshold
+            }
+        
+        # Calculate ratios
+        if distribution['soft_tissue']['pixels'] > 0:
+            distribution['bone_to_soft_ratio'] = round(
+                distribution['bone']['pixels'] / distribution['soft_tissue']['pixels'], 
+                3
+            )
+        
+        return distribution
+    
+    def _detect_abnormalities(self, segments: dict, stats: dict) -> dict:
+        """Detect potential abnormalities in the image"""
+        abnormalities = {
+            'detected': False,
+            'findings': []
+        }
+        
+        # Check for unusual tissue distributions
+        tissue_dist = self._analyze_tissue_distribution(segments)
+        
+        # High metal content might indicate implants
+        if tissue_dist['metal']['percentage'] > 0.5:
+            abnormalities['detected'] = True
+            abnormalities['findings'].append({
+                'type': 'metal_implant',
+                'confidence': 'high',
+                'description': 'Metal implant or foreign body detected'
+            })
+        
+        # Fluid accumulation
+        if tissue_dist['fluid']['percentage'] > 5:
+            abnormalities['detected'] = True
+            abnormalities['findings'].append({
+                'type': 'fluid_accumulation',
+                'confidence': 'medium',
+                'description': 'Possible fluid accumulation detected'
+            })
+        
+        # Asymmetry detection for bilateral structures
+        if 'air' in segments:
+            asymmetry = self._check_bilateral_symmetry(segments['air'])
+            if asymmetry > 0.3:  # 30% asymmetry threshold
+                abnormalities['detected'] = True
+                abnormalities['findings'].append({
+                    'type': 'asymmetry',
+                    'confidence': 'medium',
+                    'description': f'Bilateral asymmetry detected ({asymmetry:.1%})'
+                })
+        
+        return abnormalities
+    
+    def _check_bilateral_symmetry(self, mask: np.ndarray) -> float:
+        """Check symmetry of bilateral structures"""
+        height, width = mask.shape
+        left_half = mask[:, :width//2]
+        right_half = mask[:, width//2:]
+        
+        # Flip right half for comparison
+        right_half_flipped = np.fliplr(right_half)
+        
+        # Calculate difference
+        if right_half_flipped.shape[1] != left_half.shape[1]:
+            # Handle odd width
+            min_width = min(left_half.shape[1], right_half_flipped.shape[1])
+            left_half = left_half[:, :min_width]
+            right_half_flipped = right_half_flipped[:, :min_width]
+        
+        difference = np.sum(np.abs(left_half.astype(float) - right_half_flipped.astype(float)))
+        total = np.sum(left_half) + np.sum(right_half_flipped)
+        
+        if total == 0:
+            return 0.0
+        
+        return difference / total
+    
+    def _assess_image_quality(self, stats: dict) -> dict:
+        """Assess the quality of the X-ray image"""
+        quality = {
+            'overall': 'good',
+            'issues': []
+        }
+        
+        # Check contrast
+        if stats['std'] < 0.1:
+            quality['overall'] = 'poor'
+            quality['issues'].append('Low contrast')
+        
+        # Check if image is too dark or too bright
+        if stats['mean'] < 0.2:
+            quality['overall'] = 'fair' if quality['overall'] == 'good' else 'poor'
+            quality['issues'].append('Underexposed')
+        elif stats['mean'] > 0.8:
+            quality['overall'] = 'fair' if quality['overall'] == 'good' else 'poor'
+            quality['issues'].append('Overexposed')
+        
+        # Check histogram distribution
+        hist = stats['histogram']
+        if np.max(hist) > 0.5 * np.sum(hist):
+            quality['overall'] = 'fair' if quality['overall'] == 'good' else 'poor'
+            quality['issues'].append('Poor histogram distribution')
+        
+        return quality
+    
+    def _analyze_body_part(self, segments: dict, stats: dict, body_part: str) -> dict:
+        """Perform body-part specific analysis"""
+        if 'chest' in body_part or 'thorax' in body_part:
+            return self._analyze_chest_xray(segments, stats)
+        elif 'abdom' in body_part:
+            return self._analyze_abdominal_xray(segments, stats)
+        elif 'extrem' in body_part or 'limb' in body_part:
+            return self._analyze_extremity_xray(segments, stats)
+        else:
+            return {'body_part': body_part, 'analysis': 'Generic analysis performed'}
+    
+    def _analyze_chest_xray(self, segments: dict, stats: dict) -> dict:
+        """Specific analysis for chest X-rays"""
+        analysis = {
+            'lung_fields': 'not_assessed',
+            'cardiac_size': 'not_assessed',
+            'mediastinum': 'not_assessed'
+        }
+        
+        # Analyze lung fields
+        if 'air' in segments:
+            air_mask = segments['air']
+            labeled = measure.label(air_mask)
+            regions = measure.regionprops(labeled)
+            
+            large_regions = [r for r in regions if r.area > 1000]
+            if len(large_regions) >= 2:
+                analysis['lung_fields'] = 'bilateral_present'
+                # Check symmetry
+                symmetry = self._check_bilateral_symmetry(air_mask)
+                if symmetry < 0.2:
+                    analysis['lung_symmetry'] = 'symmetric'
+                else:
+                    analysis['lung_symmetry'] = 'asymmetric'
+            elif len(large_regions) == 1:
+                analysis['lung_fields'] = 'unilateral_present'
+            else:
+                analysis['lung_fields'] = 'not_visualized'
+        
+        # Analyze cardiac silhouette
+        if 'soft_tissue' in segments:
+            soft_mask = segments['soft_tissue']
+            height, width = soft_mask.shape
+            central_region = soft_mask[height//3:2*height//3, width//3:2*width//3]
+            
+            if np.any(central_region):
+                analysis['cardiac_size'] = 'present'
+                # Simple cardiothoracic ratio estimation
+                cardiac_width = np.sum(np.any(central_region, axis=0))
+                thoracic_width = width
+                ctr = cardiac_width / thoracic_width
+                analysis['cardiothoracic_ratio'] = round(ctr, 2)
+                
+                if ctr > 0.5:
+                    analysis['cardiac_assessment'] = 'enlarged'
+                else:
+                    analysis['cardiac_assessment'] = 'normal'
+        
+        return analysis
+    
+    def _analyze_abdominal_xray(self, segments: dict, stats: dict) -> dict:
+        """Specific analysis for abdominal X-rays"""
+        analysis = {
+            'gas_pattern': 'not_assessed',
+            'soft_tissue_masses': 'not_assessed',
+            'calcifications': 'not_assessed'
+        }
+        
+        # Analyze gas patterns
+        if 'air' in segments:
+            air_mask = segments['air']
+            labeled = measure.label(air_mask)
+            regions = measure.regionprops(labeled)
+            
+            small_gas = [r for r in regions if 50 < r.area < 500]
+            large_gas = [r for r in regions if r.area >= 500]
+            
+            if len(small_gas) > 10:
+                analysis['gas_pattern'] = 'increased_small_bowel_gas'
+            elif len(large_gas) > 3:
+                analysis['gas_pattern'] = 'distended_bowel_loops'
+            else:
+                analysis['gas_pattern'] = 'normal'
+        
+        # Check for calcifications (bright spots)
+        if 'bone' in segments:
+            bone_mask = segments['bone']
+            labeled = measure.label(bone_mask)
+            regions = measure.regionprops(labeled)
+            
+            small_bright = [r for r in regions if r.area < 50]
+            if len(small_bright) > 5:
+                analysis['calcifications'] = 'present'
+            else:
+                analysis['calcifications'] = 'none_detected'
+        
+        return analysis
+    
+    def _analyze_extremity_xray(self, segments: dict, stats: dict) -> dict:
+        """Specific analysis for extremity X-rays"""
+        analysis = {
+            'bone_integrity': 'not_assessed',
+            'joint_spaces': 'not_assessed',
+            'soft_tissue_swelling': 'not_assessed'
+        }
+        
+        # Analyze bone continuity
+        if 'bone' in segments:
+            bone_mask = segments['bone']
+            
+            # Check for discontinuities (potential fractures)
+            skeleton = morphology.skeletonize(bone_mask)
+            endpoints = self._find_endpoints(skeleton)
+            
+            if len(endpoints) > 4:  # More than expected endpoints
+                analysis['bone_integrity'] = 'possible_discontinuity'
+            else:
+                analysis['bone_integrity'] = 'continuous'
+            
+            # Analyze bone density
+            analysis['bone_density'] = self._assess_bone_density_pattern(bone_mask)
+        
+        # Check for soft tissue swelling
+        if 'soft_tissue' in segments:
+            soft_mask = segments['soft_tissue']
+            soft_area = np.sum(soft_mask)
+            total_area = soft_mask.size
+            
+            soft_percentage = (soft_area / total_area) * 100
+            if soft_percentage > 40:
+                analysis['soft_tissue_swelling'] = 'increased'
+            else:
+                analysis['soft_tissue_swelling'] = 'normal'
+        
+        return analysis
+    
+    def _find_endpoints(self, skeleton: np.ndarray) -> List[Tuple[int, int]]:
+        """Find endpoints in a skeletonized image"""
+        endpoints = []
+        
+        # Define 8-connectivity kernel
+        kernel = np.array([[1, 1, 1],
+                          [1, 0, 1],
+                          [1, 1, 1]])
+        
+        # Find points with only one neighbor
+        for i in range(1, skeleton.shape[0] - 1):
+            for j in range(1, skeleton.shape[1] - 1):
+                if skeleton[i, j]:
+                    neighbors = np.sum(kernel * skeleton[i-1:i+2, j-1:j+2])
+                    if neighbors == 1:
+                        endpoints.append((i, j))
+        
+        return endpoints
+    
+    def _assess_bone_density_pattern(self, bone_mask: np.ndarray) -> str:
+        """Assess bone density patterns"""
+        # Simple assessment based on coverage
+        bone_pixels = np.sum(bone_mask)
+        total_pixels = bone_mask.size
+        coverage = bone_pixels / total_pixels
+        
+        if coverage > 0.15:
+            return 'normal'
+        elif coverage > 0.10:
+            return 'mildly_decreased'
+        else:
+            return 'significantly_decreased'
+    
+    def classify_pixel(self, pixel_value: float, x: int, y: int, 
+                      image_array: np.ndarray) -> dict:
+        """
+        Enhanced pixel classification with spatial context
+        
+        Args:
+            pixel_value: Normalized pixel value (0-1)
+            x, y: Pixel coordinates
+            image_array: Full image array for context
+            
+        Returns:
+            Classification result with confidence
+        """
+        # Get local statistics
+        window_size = 5
+        half_window = window_size // 2
+        
+        # Ensure we don't go out of bounds
+        x_start = max(0, x - half_window)
+        x_end = min(image_array.shape[1], x + half_window + 1)
+        y_start = max(0, y - half_window)
+        y_end = min(image_array.shape[0], y + half_window + 1)
+        
+        local_region = image_array[y_start:y_end, x_start:x_end]
+        local_mean = np.mean(local_region)
+        local_std = np.std(local_region)
+        
+        # Calculate image statistics if not provided
+        image_stats = self._calculate_statistics(image_array)
+        percentiles = image_stats['percentiles']
+        
+        # Enhanced classification with confidence
+        if pixel_value > percentiles['p95']:
+            tissue_type = 'Metal/Implant'
+            icon = '⚙️'
+            color = '#FFA500'
+            confidence = 'high' if pixel_value > percentiles['p99'] else 'medium'
+        elif pixel_value > percentiles['p80']:
+            tissue_type = 'Bone'
+            icon = '🦴'
+            color = '#FFFACD'
+            # Check local texture for bone confidence
+            if local_std > image_stats['std'] * 0.8:
+                confidence = 'high'
+            else:
+                confidence = 'medium'
+        elif pixel_value > percentiles['p60']:
+            tissue_type = 'Dense Soft Tissue'
+            icon = '💪'
+            color = '#FFB6C1'
+            confidence = 'medium'
+        elif pixel_value > percentiles['p40']:
+            tissue_type = 'Soft Tissue'
+            icon = '🔴'
+            color = '#FFC0CB'
+            confidence = 'high' if local_std < image_stats['std'] * 0.5 else 'medium'
+        elif pixel_value > percentiles['p20']:
+            # Could be fat or fluid
+            if local_std < image_stats['std'] * 0.3:
+                tissue_type = 'Fat'
+                icon = '🟡'
+                color = '#FFFFE0'
+            else:
+                tissue_type = 'Fluid'
+                icon = '💧'
+                color = '#87CEEB'
+            confidence = 'medium'
+        else:
+            tissue_type = 'Air/Lung'
+            icon = '🌫️'
+            color = '#ADD8E6'
+            confidence = 'high' if pixel_value < percentiles['p10'] else 'medium'
+        
+        return {
+            'type': tissue_type,
+            'icon': icon,
+            'color': color,
+            'confidence': confidence,
+            'pixel_value': round(pixel_value, 3),
+            'local_context': {
+                'mean': round(local_mean, 3),
+                'std': round(local_std, 3)
+            }
+        }
+
+
+# Convenience functions for integration
+def analyze_xray(pixel_array: np.ndarray, body_part: Optional[str] = None, 
+                metadata: Optional[dict] = None) -> dict:
+    """
+    Convenience function for X-ray analysis
+    
+    Args:
+        pixel_array: X-ray image array
+        body_part: Optional body part specification
+        metadata: Optional DICOM metadata
+        
+    Returns:
+        Comprehensive analysis results
+    """
+    analyzer = XRayAnalyzer()
+    results = analyzer.analyze_xray_image(pixel_array, metadata)
+    
+    # Add body part specific analysis if specified
+    if body_part and 'clinical_analysis' in results:
+        results['clinical_analysis']['body_part_analysis'] = analyzer._analyze_body_part(
+            results['segments'], results['statistics'], body_part
+        )
+    
+    return results
+
+
+def classify_xray_tissue(pixel_value: float, x: int, y: int, 
+                        image_array: np.ndarray) -> dict:
+    """
+    Convenience function for tissue classification at a specific pixel
+    
+    Args:
+        pixel_value: Normalized pixel value
+        x, y: Pixel coordinates
+        image_array: Full image for context
+        
+    Returns:
+        Tissue classification result
+    """
+    analyzer = XRayAnalyzer()
+    return analyzer.classify_pixel(pixel_value, x, y, image_array)
+
+
+# Example usage
+if __name__ == "__main__":
+    print("🔬 Advanced X-Ray Analyzer for Medical Image Analysis")
+    print("Features:")
+    print("  - Multi-tissue segmentation (bone, soft tissue, air, metal, fat, fluid)")
+    print("  - Clinical abnormality detection")
+    print("  - Body-part specific analysis (chest, abdomen, extremity)")
+    print("  - Image quality assessment")
+    print("  - Spatial context-aware tissue classification")
+    print("  - Symmetry and structural analysis")
+    print("  - Comprehensive statistical analysis")

src/build_frontend.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+# Build script for Medical Image Analyzer frontend
+
+echo "🏥 Building Medical Image Analyzer frontend..."
+
+# Navigate to frontend directory
+cd frontend
+
+# Install dependencies
+echo "📦 Installing dependencies..."
+npm install
+
+# Build the component
+echo "🔨 Building component..."
+npm run build
+
+# Copy built files to templates
+echo "📋 Copying built files to templates..."
+mkdir -p ../backend/gradio_medical_image_analyzer/templates
+cp -r dist/* ../backend/gradio_medical_image_analyzer/templates/
+
+echo "✅ Frontend build complete!"

src/demo/app.py

@@ -0,0 +1,693 @@
+#!/usr/bin/env python3
+"""
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css="""
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        """
+    ) as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown("""
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    """)
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown("""
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            """)
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()

src/demo/app_with_frontend.py

@@ -0,0 +1,197 @@
+#!/usr/bin/env python3
+"""
+Demo für MedicalImageAnalyzer mit Frontend Component
+Zeigt die Verwendung der vollständigen Gradio Custom Component
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+# Example data for demos
+EXAMPLE_DATA = [
+    {
+        "image": {"url": "examples/ct_chest.png"},
+        "analysis": {
+            "modality": "CT",
+            "point_analysis": {
+                "tissue_type": {"icon": "🟡", "type": "fat"},
+                "hu_value": -75.0
+            },
+            "segmentation": {
+                "interpretation": {
+                    "obesity_risk": "moderate"
+                }
+            }
+        }
+    },
+    {
+        "image": {"url": "examples/xray_chest.png"},
+        "analysis": {
+            "modality": "CR",
+            "point_analysis": {
+                "tissue_type": {"icon": "🦴", "type": "bone"}
+            }
+        }
+    }
+]
+
+def create_demo():
+    with gr.Blocks(title="Medical Image Analyzer - Component Demo") as demo:
+        gr.Markdown("""
+        # 🏥 Medical Image Analyzer - Frontend Component Demo
+        
+        Diese Demo zeigt die vollständige Gradio Custom Component mit Frontend-Integration.
+        Unterstützt DICOM-Dateien und alle gängigen Bildformate.
+        """)
+        
+        with gr.Row():
+            with gr.Column():
+                # Configuration
+                gr.Markdown("### ⚙️ Konfiguration")
+                
+                analysis_mode = gr.Radio(
+                    choices=["structured", "visual"],
+                    value="structured",
+                    label="Analyse-Modus",
+                    info="structured: für AI Agents, visual: für Menschen"
+                )
+                
+                include_confidence = gr.Checkbox(
+                    value=True,
+                    label="Konfidenzwerte einschließen"
+                )
+                
+                include_reasoning = gr.Checkbox(
+                    value=True,
+                    label="Reasoning einschließen"
+                )
+                
+            with gr.Column(scale=2):
+                # The custom component
+                analyzer = MedicalImageAnalyzer(
+                    label="Medical Image Analyzer",
+                    analysis_mode="structured",
+                    include_confidence=True,
+                    include_reasoning=True,
+                    elem_id="medical-analyzer"
+                )
+        
+        # Examples section
+        gr.Markdown("### 📁 Beispiele")
+        
+        examples = gr.Examples(
+            examples=EXAMPLE_DATA,
+            inputs=analyzer,
+            label="Beispiel-Analysen"
+        )
+        
+        # Info section
+        gr.Markdown("""
+        ### 📝 Verwendung
+        
+        1. **Datei hochladen**: Ziehen Sie eine DICOM- oder Bilddatei in den Upload-Bereich
+        2. **Modalität wählen**: CT, CR, DX, RX, oder DR
+        3. **Analyse-Task**: Punktanalyse, Fettsegmentierung, oder vollständige Analyse
+        4. **ROI aktivieren**: Klicken Sie auf das Bild, um einen Analysepunkt zu wählen
+        
+        ### 🔧 Features
+        
+        - **DICOM Support**: Automatische Erkennung von Modalität und HU-Werten
+        - **Multi-Tissue Segmentation**: Erkennt Knochen, Weichgewebe, Luft, Metall, Fett, Flüssigkeit
+        - **Klinische Bewertung**: Adipositas-Risiko, Gewebeverteilung, Anomalieerkennung
+        - **AI-Agent Ready**: Strukturierte JSON-Ausgabe für Integration
+        
+        ### 🔗 Integration
+        
+        ```python
+        import gradio as gr
+        from gradio_medical_image_analyzer import MedicalImageAnalyzer
+        
+        analyzer = MedicalImageAnalyzer(
+            analysis_mode="structured",
+            include_confidence=True
+        )
+        
+        # Use in your Gradio app
+        with gr.Blocks() as app:
+            analyzer_component = analyzer
+            # ... rest of your app
+        ```
+        """)
+        
+        # Event handlers
+        def update_config(mode, conf, reason):
+            # This would update the component configuration
+            # In real implementation, this would be handled by the component
+            return gr.update(
+                analysis_mode=mode,
+                include_confidence=conf,
+                include_reasoning=reason
+            )
+        
+        # Connect configuration changes
+        for config in [analysis_mode, include_confidence, include_reasoning]:
+            config.change(
+                fn=update_config,
+                inputs=[analysis_mode, include_confidence, include_reasoning],
+                outputs=analyzer
+            )
+        
+        # Handle analysis results
+        def handle_analysis_complete(data):
+            if data and "analysis" in data:
+                analysis = data["analysis"]
+                report = data.get("report", "")
+                
+                # Log to console for debugging
+                print("Analysis completed:")
+                print(f"Modality: {analysis.get('modality', 'Unknown')}")
+                if "point_analysis" in analysis:
+                    print(f"Tissue: {analysis['point_analysis'].get('tissue_type', {}).get('type', 'Unknown')}")
+                
+                return data
+            return data
+        
+        analyzer.change(
+            fn=handle_analysis_complete,
+            inputs=analyzer,
+            outputs=analyzer
+        )
+    
+    return demo
+
+
+def create_simple_demo():
+    """Einfache Demo ohne viel Konfiguration"""
+    with gr.Blocks(title="Medical Image Analyzer - Simple Demo") as demo:
+        gr.Markdown("# 🏥 Medical Image Analyzer")
+        
+        analyzer = MedicalImageAnalyzer(
+            label="Laden Sie ein medizinisches Bild hoch (DICOM, PNG, JPG)",
+            analysis_mode="visual",  # Visual mode for human-readable output
+            elem_id="analyzer"
+        )
+        
+        # Auto-analyze on upload
+        @analyzer.upload
+        def auto_analyze(file_data):
+            # The component handles the analysis internally
+            return file_data
+        
+    return demo
+
+
+if __name__ == "__main__":
+    # You can switch between demos
+    # demo = create_demo()  # Full demo with configuration
+    demo = create_simple_demo()  # Simple demo
+    
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/space.py

@@ -0,0 +1,813 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MedicalImageAnalyzer': {'description': 'A Gradio component for AI-agent compatible medical image analysis.\n\nProvides structured output for:\n- HU value analysis (CT only)\n- Tissue classification\n- Fat segmentation (subcutaneous, visceral)\n- Confidence scores and reasoning', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Dict[str, typing.Any]][\n    typing.Dict[str, typing.Any][str, typing.Any], None\n]', 'default': 'None', 'description': None}, 'label': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'info': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'every': {'type': 'typing.Optional[float][float, None]', 'default': 'None', 'description': None}, 'show_label': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'container': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'scale': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'min_width': {'type': 'typing.Optional[int][int, None]', 'default': 'None', 'description': None}, 'visible': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'elem_id': {'type': 'typing.Optional[str][str, None]', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'typing.Union[typing.List[str], str, NoneType][\n    typing.List[str][str], str, None\n]', 'default': 'None', 'description': None}, 'render': {'type': 'typing.Optional[bool][bool, None]', 'default': 'None', 'description': None}, 'key': {'type': 'typing.Union[int, str, NoneType][int, str, None]', 'default': 'None', 'description': None}, 'analysis_mode': {'type': 'str', 'default': '"structured"', 'description': '"structured" for AI agents, "visual" for human interpretation'}, 'include_confidence': {'type': 'bool', 'default': 'True', 'description': 'Include confidence scores in results'}, 'include_reasoning': {'type': 'bool', 'default': 'True', 'description': 'Include reasoning/explanation for findings'}, 'segmentation_types': {'type': 'typing.List[str][str]', 'default': 'None', 'description': 'List of segmentation types to perform'}}, 'postprocess': {'value': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}}, 'preprocess': {'return': {'type': 'typing.Dict[str, typing.Any][str, typing.Any]', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the MedicalImageAnalyzer changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the MedicalImageAnalyzer. Uses event data gradio.SelectData to carry `value` referring to the label of the MedicalImageAnalyzer, and `selected` to refer to state of the MedicalImageAnalyzer. See EventData documentation on how to use this event data'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the MedicalImageAnalyzer.'}, 'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the MedicalImageAnalyzer using the clear button for the component.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'MedicalImageAnalyzer': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_medical_image_analyzer`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/yourusername/gradio-medical-image-analyzer/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+AI-agent optimized medical image analysis component for Gradio
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_medical_image_analyzer
+```
+
+## Usage
+
+```python
+#!/usr/bin/env python3
+\"\"\"
+Demo for MedicalImageAnalyzer - Enhanced with file upload and overlay visualization
+\"\"\"
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+import cv2
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    \"\"\"Draw ROI circle on the image\"\"\"
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    \"\"\"Create overlay image with fat segmentation highlighted\"\"\"
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    \"\"\"
+    Processes uploaded file and performs analysis
+    \"\"\"
+    if file_obj is None:
+        return None, "No file selected", None, {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata if it's a DICOM
+        if metadata.get('file_type') == 'DICOM' and 'modality' in metadata:
+            modality = metadata['modality']
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = {"symptoms": symptoms}
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x_scaled, roi_y_scaled, roi_radius)
+            
+            # For fat segmentation overlay (simplified version since we don't have masks in current implementation)
+            elif task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # For now, just draw ROI since we don't have actual masks
+                overlay_image = display_array.copy()
+                if len(overlay_image.shape) == 2:
+                    overlay_image = cv2.cvtColor(overlay_image, cv2.COLOR_GRAY2RGB)
+                # Add text overlay about fat percentages
+                if 'statistics' in results['segmentation']:
+                    stats = results['segmentation']['statistics']
+                    cv2.putText(overlay_image, f"Total Fat: {stats.get('total_fat_percentage', 0):.1f}%", 
+                               (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Subcutaneous: {stats.get('subcutaneous_fat_percentage', 0):.1f}%", 
+                               (10, 60), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+                    cv2.putText(overlay_image, f"Visceral: {stats.get('visceral_fat_percentage', 0):.1f}%", 
+                               (10, 90), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+def create_visual_report(results, metadata):
+    \"\"\"Creates a visual HTML report with improved styling\"\"\"
+    html = f\"\"\"
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    \"\"\"
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f\"\"\"
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        \"\"\"
+        
+        if results.get('modality') == 'CT':
+            html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            \"\"\"
+        else:
+            html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            \"\"\"
+        
+        html += f\"\"\"
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        \"\"\"
+        
+        if 'reasoning' in pa:
+            html += f\"\"\"
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #dbeafe; 
+                        border-left: 3px solid #3b82f6; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #1e40af !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            \"\"\"
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f\"\"\"
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            \"\"\"
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#16a34a" if interp.get("obesity_risk") == "normal" else "#d97706" if interp.get("obesity_risk") == "moderate" else "#dc2626"
+                visceral_color = "#16a34a" if interp.get("visceral_risk") == "normal" else "#d97706" if interp.get("visceral_risk") == "moderate" else "#dc2626"
+                
+                html += f\"\"\"
+                <div style='margin-top: 16px; padding: 16px; background: #f3f4f6; border-radius: 6px;'>
+                    <h4 style='color: #374151 !important; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #6b7280 !important; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color} !important; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                \"\"\"
+                
+                if interp.get('recommendations'):
+                    html += \"\"\"
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e7eb;'>
+                        <h5 style='color: #374151 !important; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #4b5563 !important;'>
+                    \"\"\"
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#16a34a',
+            'good': '#16a34a',
+            'fair': '#d97706',
+            'poor': '#dc2626',
+            'unknown': '#6b7280'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#6b7280')
+        
+        html += f\"\"\"
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        \"\"\"
+        
+        if quality.get('issues'):
+            html += f\"\"\"
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fef3c7; 
+                        border-left: 3px solid #f59e0b; 
+                        border-radius: 4px;'>
+                <strong style='color: #92400e !important;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #92400e !important;'>
+            \"\"\"
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def create_demo():
+    with gr.Blocks(
+        title="Medical Image Analyzer - Enhanced Demo", 
+        theme=gr.themes.Soft(
+            primary_hue="blue",
+            secondary_hue="blue",
+            neutral_hue="slate",
+            text_size="md",
+            spacing_size="md",
+            radius_size="md",
+        ).set(
+            # Medical blue theme colors
+            body_background_fill="*neutral_950",
+            body_background_fill_dark="*neutral_950",
+            block_background_fill="*neutral_900",
+            block_background_fill_dark="*neutral_900",
+            border_color_primary="*primary_600",
+            border_color_primary_dark="*primary_600",
+            # Text colors for better contrast
+            body_text_color="*neutral_100",
+            body_text_color_dark="*neutral_100",
+            body_text_color_subdued="*neutral_300",
+            body_text_color_subdued_dark="*neutral_300",
+            # Button colors
+            button_primary_background_fill="*primary_600",
+            button_primary_background_fill_dark="*primary_600",
+            button_primary_text_color="white",
+            button_primary_text_color_dark="white",
+        ),
+        css=\"\"\"
+        /* Medical blue theme with high contrast */
+        :root {
+            --medical-blue: #1e40af;
+            --medical-blue-light: #3b82f6;
+            --medical-blue-dark: #1e3a8a;
+            --text-primary: #f9fafb;
+            --text-secondary: #e5e7eb;
+            --bg-primary: #0f172a;
+            --bg-secondary: #1e293b;
+            --bg-tertiary: #334155;
+        }
+        
+        /* Override default text colors for medical theme */
+        * {
+            color: var(--text-primary) !important;
+        }
+        
+        /* Style the file upload area */
+        .file-upload {
+            border: 2px dashed var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 20px !important;
+            text-align: center !important;
+            background: var(--bg-secondary) !important;
+            transition: all 0.3s ease !important;
+            color: var(--text-primary) !important;
+        }
+        
+        .file-upload:hover {
+            border-color: var(--medical-blue) !important;
+            background: var(--bg-tertiary) !important;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+        }
+        
+        /* Ensure report text is readable with white background */
+        .medical-report {
+            background: #ffffff !important;
+            border: 2px solid var(--medical-blue-light) !important;
+            border-radius: 8px !important;
+            padding: 16px !important;
+            color: #1a1a1a !important;
+        }
+        
+        .medical-report * {
+            color: #1f2937 !important; /* Dark gray text */
+        }
+        
+        .medical-report h2 {
+            color: #1e40af !important; /* Medical blue for main heading */
+        }
+        
+        .medical-report h3, .medical-report h4 {
+            color: #1e3a8a !important; /* Darker medical blue for subheadings */
+        }
+        
+        .medical-report strong {
+            color: #374151 !important; /* Darker gray for labels */
+        }
+        
+        .medical-report td {
+            color: #1f2937 !important; /* Ensure table text is dark */
+        }
+        
+        /* Report sections with light blue background */
+        .medical-report > div {
+            background: #f0f9ff !important;
+            color: #1f2937 !important;
+        }
+        
+        /* Medical blue accents for UI elements */
+        .gr-button-primary {
+            background: var(--medical-blue) !important;
+            border-color: var(--medical-blue) !important;
+        }
+        
+        .gr-button-primary:hover {
+            background: var(--medical-blue-dark) !important;
+            border-color: var(--medical-blue-dark) !important;
+        }
+        
+        /* Tab styling */
+        .gr-tab-item {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        .gr-tab-item.selected {
+            background: var(--medical-blue) !important;
+            color: white !important;
+        }
+        
+        /* Accordion styling */
+        .gr-accordion {
+            border-color: var(--medical-blue-light) !important;
+        }
+        
+        /* Slider track in medical blue */
+        input[type="range"]::-webkit-slider-track {
+            background: var(--bg-tertiary) !important;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            background: var(--medical-blue) !important;
+        }
+        \"\"\"
+    ) as demo:
+        gr.Markdown(\"\"\"
+        # 🏥 Medical Image Analyzer
+        
+        Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+        \"\"\")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # File upload - no file type restrictions
+                with gr.Group():
+                    gr.Markdown("### 📤 Upload Medical Image")
+                    file_input = gr.File(
+                        label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                        file_count="single",
+                        type="filepath",
+                        elem_classes="file-upload"
+                        # Note: NO file_types parameter = accepts ALL files
+                    )
+                    gr.Markdown(\"\"\"
+                    <small style='color: #666;'>
+                    Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                    and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                    </small>
+                    \"\"\")
+                
+                # Modality selection
+                modality = gr.Radio(
+                    choices=["CT", "CR", "DX", "RX", "DR"],
+                    value="CT",
+                    label="Modality",
+                    info="Will be auto-detected for DICOM files"
+                )
+                
+                # Task selection
+                task = gr.Dropdown(
+                    choices=[
+                        ("🎯 Point Analysis", "analyze_point"),
+                        ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                        ("📊 Full Analysis", "full_analysis")
+                    ],
+                    value="full_analysis",
+                    label="Analysis Task"
+                )
+                
+                # ROI settings
+                with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                    roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                    roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                    roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+                
+                # Clinical context
+                with gr.Accordion("🏥 Clinical Context", open=False):
+                    symptoms = gr.CheckboxGroup(
+                        choices=[
+                            "dyspnea", "chest_pain", "abdominal_pain",
+                            "trauma", "obesity_screening", "routine_check"
+                        ],
+                        label="Symptoms/Indication"
+                    )
+                
+                # Visualization options
+                with gr.Accordion("🎨 Visualization Options", open=True):
+                    show_overlay = gr.Checkbox(
+                        label="Show ROI/Segmentation Overlay",
+                        value=True,
+                        info="Display ROI circle or fat segmentation info on the image"
+                    )
+                
+                analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+            
+            with gr.Column(scale=2):
+                # Results with tabs for different views
+                with gr.Tab("🖼️ Original Image"):
+                    image_display = gr.Image(label="Medical Image", type="numpy")
+                    
+                with gr.Tab("🎯 Overlay View"):
+                    overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+                
+                file_info = gr.Textbox(label="File Information", lines=1)
+                
+                with gr.Tab("📊 Visual Report"):
+                    report_html = gr.HTML()
+                
+                with gr.Tab("🔧 JSON Output"):
+                    json_output = gr.JSON(label="Structured Data for AI Agents")
+        
+        # Examples and help
+        with gr.Row():
+            gr.Markdown(\"\"\"
+            ### 📁 Supported Formats
+            - **DICOM**: Automatic HU value extraction and modality detection
+            - **PNG/JPG**: Interpreted based on selected modality
+            - **All Formats**: Automatic grayscale conversion
+            - **Files without extension**: Supported (e.g., IM_0001) - will try DICOM first
+            
+            ### 🎯 Usage
+            1. Upload a medical image file
+            2. Select modality (auto-detected for DICOM)
+            3. Choose analysis task
+            4. Adjust ROI position for point analysis
+            5. Click "Analyze"
+            
+            ### 💡 Features
+            - **ROI Visualization**: See the exact area being analyzed
+            - **Fat Segmentation**: Visual percentages for CT scans
+            - **Multi-format Support**: Works with any medical image format
+            - **AI Agent Ready**: Structured JSON output for integration
+            \"\"\")
+        
+        # Connect the interface
+        analyze_btn.click(
+            fn=process_and_analyze,
+            inputs=[file_input, modality, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+            outputs=[image_display, file_info, report_html, json_output, overlay_display]
+        )
+        
+        # Auto-update ROI limits when image is loaded
+        def update_roi_on_upload(file_obj):
+            if file_obj is None:
+                return gr.update(), gr.update()
+            
+            try:
+                analyzer = MedicalImageAnalyzer()
+                _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+                
+                if 'shape' in metadata:
+                    h, w = metadata['shape']
+                    return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+            except:
+                pass
+            
+            return gr.update(), gr.update()
+        
+        file_input.change(
+            fn=update_roi_on_upload,
+            inputs=[file_input],
+            outputs=[roi_x, roi_y]
+        )
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch()
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MedicalImageAnalyzer`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MedicalImageAnalyzer"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MedicalImageAnalyzer"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: typing.Dict[str, typing.Any][str, typing.Any]
+) -> typing.Dict[str, typing.Any][str, typing.Any]:
+    return value
+```
+""", elem_classes=["md-custom", "MedicalImageAnalyzer-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          MedicalImageAnalyzer: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/demo/wrapper_test.py

@@ -0,0 +1,835 @@
+#!/usr/bin/env python3
+"""
+Frontend Wrapper Test für Medical Image Analyzer
+Nutzt Standard Gradio Komponenten um die Backend-Funktionalität zu testen
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+import cv2
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", "", {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata
+        modality = metadata.get('modality', 'CR')
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = ", ".join(symptoms)
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        if analyzer.analysis_mode == "visual":
+            visual_report = analyzer._create_html_report(results)
+        else:
+            # Create our own visual report
+            visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x, roi_y, roi_radius)
+            
+            # For fat segmentation overlay
+            if task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # Get segmentation masks from results
+                seg_results = {
+                    'segments': {
+                        'subcutaneous': {'mask': None},
+                        'visceral': {'mask': None}
+                    }
+                }
+                
+                # Check if we have actual mask data
+                if 'segments' in results['segmentation']:
+                    seg_results = results['segmentation']
+                
+                overlay_image = create_fat_overlay(display_array.copy(), seg_results)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #f0f7ff; 
+                        border-left: 3px solid #0066cc; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #4b5563 !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#27ae60" if interp.get("obesity_risk") == "normal" else "#f39c12" if interp.get("obesity_risk") == "moderate" else "#e74c3c"
+                visceral_color = "#27ae60" if interp.get("visceral_risk") == "normal" else "#f39c12" if interp.get("visceral_risk") == "moderate" else "#e74c3c"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f8f9fa; border-radius: 6px;'>
+                    <h4 style='color: #333; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #666; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color}; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #666; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color}; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0;'>
+                        <h5 style='color: #333; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #555;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+        
+        elif 'tissue_distribution' in seg:
+            # X-ray tissue distribution
+            html += f"""
+            <div style='background: white; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #333; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🦴 Tissue Distribution
+                </h3>
+                <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;'>
+            """
+            
+            tissue_dist = seg['tissue_distribution']
+            tissue_icons = {
+                'bone': '🦴', 'soft_tissue': '🔴', 'air': '🌫️',
+                'metal': '⚙️', 'fat': '🟡', 'fluid': '💧'
+            }
+            
+            tissue_colors = {
+                'bone': '#fff7e6',
+                'soft_tissue': '#fee',
+                'air': '#e6f3ff',
+                'metal': '#f0f0f0',
+                'fat': '#fffbe6',
+                'fluid': '#e6f7ff'
+            }
+            
+            for tissue, percentage in tissue_dist.items():
+                if percentage > 0:
+                    icon = tissue_icons.get(tissue, '📍')
+                    bg_color = tissue_colors.get(tissue, '#f8f9fa')
+                    html += f"""
+                    <div style='text-align: center; 
+                                padding: 16px; 
+                                background: {bg_color}; 
+                                border-radius: 8px;
+                                transition: transform 0.2s;'>
+                        <div style='font-size: 2.5em; margin-bottom: 8px;'>{icon}</div>
+                        <div style='font-weight: 600; 
+                                    color: #333; 
+                                    font-size: 14px; 
+                                    margin-bottom: 4px;'>
+                            {tissue.replace('_', ' ').title()}
+                        </div>
+                        <div style='color: #0066cc; 
+                                    font-size: 20px; 
+                                    font-weight: 700;'>
+                            {percentage:.1f}%
+                        </div>
+                    </div>
+                    """
+            
+            html += "</div>"
+            
+            if seg.get('clinical_findings'):
+                html += """
+                <div style='margin-top: 16px; 
+                            padding: 16px; 
+                            background: #fff3cd; 
+                            border-left: 4px solid #ffc107; 
+                            border-radius: 4px;'>
+                    <h4 style='color: #856404; 
+                               font-size: 16px; 
+                               font-weight: 600; 
+                               margin: 0 0 8px 0;'>
+                        ⚠️ Clinical Findings
+                    </h4>
+                    <ul style='margin: 0; padding-left: 20px; color: #856404;'>
+                """
+                for finding in seg['clinical_findings']:
+                    html += f"<li style='margin: 4px 0;'>{finding.get('description', 'Unknown finding')}</li>"
+                html += "</ul></div>"
+            
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#27ae60',
+            'good': '#27ae60',
+            'fair': '#f39c12',
+            'poor': '#e74c3c',
+            'unknown': '#95a5a6'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#95a5a6')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fff3cd; 
+                        border-left: 3px solid #ffc107; 
+                        border-radius: 4px;'>
+                <strong style='color: #856404;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #856404;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+
+# Create Gradio interface
+with gr.Blocks(
+    title="Medical Image Analyzer - Wrapper Test", 
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="blue",
+        neutral_hue="slate",
+        text_size="md",
+        spacing_size="md",
+        radius_size="md",
+    ).set(
+        # Medical blue theme colors
+        body_background_fill="*neutral_950",
+        body_background_fill_dark="*neutral_950",
+        block_background_fill="*neutral_900",
+        block_background_fill_dark="*neutral_900",
+        border_color_primary="*primary_600",
+        border_color_primary_dark="*primary_600",
+        # Text colors for better contrast
+        body_text_color="*neutral_100",
+        body_text_color_dark="*neutral_100",
+        body_text_color_subdued="*neutral_300",
+        body_text_color_subdued_dark="*neutral_300",
+        # Button colors
+        button_primary_background_fill="*primary_600",
+        button_primary_background_fill_dark="*primary_600",
+        button_primary_text_color="white",
+        button_primary_text_color_dark="white",
+    ),
+    css="""
+    /* Medical blue theme with high contrast */
+    :root {
+        --medical-blue: #1e40af;
+        --medical-blue-light: #3b82f6;
+        --medical-blue-dark: #1e3a8a;
+        --text-primary: #f9fafb;
+        --text-secondary: #e5e7eb;
+        --bg-primary: #0f172a;
+        --bg-secondary: #1e293b;
+        --bg-tertiary: #334155;
+    }
+    
+    /* Override default text colors for medical theme */
+    * {
+        color: var(--text-primary) !important;
+    }
+    
+    /* Fix text contrast issues */
+    .svelte-12ioyct { color: var(--text-primary) !important; }
+    
+    /* Override table cell colors for better readability */
+    td { 
+        color: var(--text-primary) !important; 
+        padding: 8px 12px !important;
+    }
+    td strong { 
+        color: var(--text-primary) !important; 
+        font-weight: 600 !important; 
+    }
+    
+    /* Fix upload component text and translate */
+    .wrap.svelte-12ioyct::before {
+        content: 'Drop file here' !important;
+        color: var(--text-primary) !important;
+    }
+    .wrap.svelte-12ioyct::after {
+        content: 'Click to upload' !important;
+        color: var(--text-secondary) !important;
+    }
+    .wrap.svelte-12ioyct span { 
+        display: none !important; /* Hide German text */
+    }
+    
+    /* Style the file upload area */
+    .file-upload {
+        border: 2px dashed var(--medical-blue-light) !important;
+        border-radius: 8px !important;
+        padding: 20px !important;
+        text-align: center !important;
+        background: var(--bg-secondary) !important;
+        transition: all 0.3s ease !important;
+        color: var(--text-primary) !important;
+    }
+    
+    .file-upload:hover {
+        border-color: var(--medical-blue) !important;
+        background: var(--bg-tertiary) !important;
+        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+    }
+    
+    /* Make sure all text in tables is readable */
+    table { 
+        width: 100%;
+        border-collapse: collapse;
+    }
+    th { 
+        font-weight: 600; 
+        background: var(--bg-tertiary);
+        padding: 8px 12px;
+    }
+    
+    /* Ensure report text is readable with white background */
+    .medical-report {
+        background: #ffffff !important;
+        border: 2px solid var(--medical-blue-light) !important;
+        border-radius: 8px !important;
+        padding: 16px !important;
+        color: #1a1a1a !important;
+    }
+    
+    .medical-report * {
+        color: #1f2937 !important; /* Dark gray text */
+    }
+    
+    .medical-report h2 {
+        color: #1e40af !important; /* Medical blue for main heading */
+    }
+    
+    .medical-report h3, .medical-report h4 {
+        color: #1e3a8a !important; /* Darker medical blue for subheadings */
+    }
+    
+    .medical-report strong {
+        color: #374151 !important; /* Darker gray for labels */
+    }
+    
+    .medical-report td {
+        color: #1f2937 !important; /* Ensure table text is dark */
+    }
+    
+    /* Report sections with light blue background */
+    .medical-report > div {
+        background: #f0f9ff !important;
+        color: #1f2937 !important;
+    }
+    
+    /* Medical blue accents for UI elements */
+    .gr-button-primary {
+        background: var(--medical-blue) !important;
+        border-color: var(--medical-blue) !important;
+    }
+    
+    .gr-button-primary:hover {
+        background: var(--medical-blue-dark) !important;
+        border-color: var(--medical-blue-dark) !important;
+    }
+    
+    /* Accordion styling with medical theme */
+    .gr-accordion {
+        border-color: var(--medical-blue-light) !important;
+    }
+    
+    /* Slider track in medical blue */
+    input[type="range"]::-webkit-slider-track {
+        background: var(--bg-tertiary) !important;
+    }
+    
+    input[type="range"]::-webkit-slider-thumb {
+        background: var(--medical-blue) !important;
+    }
+    
+    /* Tab styling */
+    .gr-tab-item {
+        border-color: var(--medical-blue-light) !important;
+    }
+    
+    .gr-tab-item.selected {
+        background: var(--medical-blue) !important;
+        color: white !important;
+    }
+    """
+) as demo:
+    gr.Markdown("""
+    # 🏥 Medical Image Analyzer
+    
+    Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            # File upload with custom styling - no file type restrictions
+            with gr.Group():
+                gr.Markdown("### 📤 Upload Medical Image")
+                file_input = gr.File(
+                    label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                    file_count="single",
+                    type="filepath",
+                    elem_classes="file-upload"
+                    # Note: NO file_types parameter = accepts ALL files
+                )
+                gr.Markdown("""
+                <small style='color: #666;'>
+                Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                </small>
+                """)
+            
+            # Task selection
+            task = gr.Dropdown(
+                choices=[
+                    ("🎯 Point Analysis", "analyze_point"),
+                    ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                    ("📊 Full Analysis", "full_analysis")
+                ],
+                value="full_analysis",
+                label="Analysis Task"
+            )
+            
+            # ROI settings
+            with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+            
+            # Clinical context
+            with gr.Accordion("🏥 Clinical Context", open=False):
+                symptoms = gr.CheckboxGroup(
+                    choices=[
+                        "Dyspnea", "Chest Pain", "Abdominal Pain",
+                        "Trauma", "Obesity Screening", "Routine Check"
+                    ],
+                    label="Symptoms/Indication"
+                )
+            
+            # Visualization options
+            with gr.Accordion("🎨 Visualization Options", open=True):
+                show_overlay = gr.Checkbox(
+                    label="Show ROI/Segmentation Overlay",
+                    value=True,
+                    info="Display ROI circle or fat segmentation overlay on the image"
+                )
+            
+            analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+        
+        with gr.Column(scale=2):
+            # Results with tabs for different views
+            with gr.Tab("🖼️ Original Image"):
+                image_display = gr.Image(label="Medical Image", type="numpy")
+                
+            with gr.Tab("🎯 Overlay View"):
+                overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+            
+            file_info = gr.Textbox(label="File Information", lines=1)
+            
+            with gr.Tab("📊 Visual Report"):
+                report_html = gr.HTML()
+            
+            with gr.Tab("🔧 JSON Output"):
+                json_output = gr.JSON(label="Structured Data for AI Agents")
+    
+    # Examples and help
+    with gr.Row():
+        gr.Markdown("""
+        ### 📁 Supported Formats
+        - **DICOM**: Automatic HU value extraction and modality detection
+        - **PNG/JPG**: Interpreted as X-ray (CR) unless filename contains 'CT'
+        - **All Formats**: Automatic grayscale conversion
+        - **Files without extension**: Supported (e.g., IM_0001)
+        
+        ### 🎯 Usage
+        1. Upload a medical image file
+        2. Select the desired analysis task
+        3. For point analysis: Adjust the ROI position
+        4. Click "Analyze"
+        
+        ### 💡 Tips
+        - The ROI sliders will automatically adjust to your image size
+        - CT images show HU values, X-rays show intensity values
+        - Fat segmentation is only available for CT images
+        """)
+    
+    # Connect the interface
+    analyze_btn.click(
+        fn=process_and_analyze,
+        inputs=[file_input, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+        outputs=[image_display, file_info, report_html, json_output, overlay_display]
+    )
+    
+    # Auto-update ROI limits when image is loaded
+    def update_roi_on_upload(file_obj):
+        if file_obj is None:
+            return gr.update(), gr.update()
+        
+        try:
+            analyzer = MedicalImageAnalyzer()
+            _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+            
+            if 'shape' in metadata:
+                h, w = metadata['shape']
+                return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+        except:
+            pass
+        
+        return gr.update(), gr.update()
+    
+    file_input.change(
+        fn=update_roi_on_upload,
+        inputs=[file_input],
+        outputs=[roi_x, roi_y]
+    )
+
+    # Add custom JavaScript to translate upload text
+    demo.load(
+        None,
+        None,
+        None,
+        js="""
+        () => {
+            // Wait for the page to load
+            setTimeout(() => {
+                // Find and replace German text in upload component
+                const uploadElements = document.querySelectorAll('.wrap.svelte-12ioyct');
+                uploadElements.forEach(el => {
+                    if (el.textContent.includes('Datei hier ablegen')) {
+                        el.innerHTML = el.innerHTML
+                            .replace('Datei hier ablegen', 'Drop file here')
+                            .replace('oder', 'or')
+                            .replace('Hochladen', 'Click to upload');
+                    }
+                });
+                
+                // Also update the button text if it exists
+                const uploadButtons = document.querySelectorAll('button');
+                uploadButtons.forEach(btn => {
+                    if (btn.textContent.includes('Hochladen')) {
+                        btn.textContent = 'Upload';
+                    }
+                });
+            }, 100);
+        }
+        """
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	export let value: {
+		image?: any;
+		analysis?: any;
+		report?: string;
+	} | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class="example-container"
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{#if value}
+		<div class="example-content">
+			{#if value.image}
+				<div class="image-preview">
+					{#if typeof value.image === 'string'}
+						<img src={value.image} alt="Medical scan example" />
+					{:else if value.image.url}
+						<img src={value.image.url} alt="Medical scan example" />
+					{:else}
+						<div class="placeholder">📷 Image</div>
+					{/if}
+				</div>
+			{/if}
+			
+			{#if value.analysis}
+				<div class="analysis-preview">
+					{#if value.analysis.modality}
+						<span class="modality-badge">{value.analysis.modality}</span>
+					{/if}
+					
+					{#if value.analysis.point_analysis?.tissue_type}
+						<span class="tissue-type">
+							{value.analysis.point_analysis.tissue_type.icon || ''} 
+							{value.analysis.point_analysis.tissue_type.type || 'Unknown'}
+						</span>
+					{/if}
+					
+					{#if value.analysis.segmentation?.interpretation?.obesity_risk}
+						<span class="risk-badge risk-{value.analysis.segmentation.interpretation.obesity_risk}">
+							Risk: {value.analysis.segmentation.interpretation.obesity_risk}
+						</span>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{:else}
+		<div class="empty-example">No example</div>
+	{/if}
+</div>
+
+<style>
+	.example-container {
+		overflow: hidden;
+		border-radius: var(--radius-sm);
+		background: var(--background-fill-secondary);
+		position: relative;
+		transition: all 0.2s ease;
+	}
+	
+	.example-container:hover {
+		transform: translateY(-2px);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	}
+	
+	.example-container.selected {
+		border: 2px solid var(--color-accent);
+	}
+	
+	.example-container.table {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem;
+		gap: 0.5rem;
+	}
+	
+	.example-container.gallery {
+		aspect-ratio: 1;
+	}
+	
+	.example-content {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+	
+	.table .example-content {
+		flex-direction: row;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	
+	.image-preview {
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--background-fill-primary);
+	}
+	
+	.gallery .image-preview {
+		height: 70%;
+	}
+	
+	.table .image-preview {
+		width: 60px;
+		height: 60px;
+		flex: 0 0 60px;
+		border-radius: var(--radius-sm);
+	}
+	
+	.image-preview img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	
+	.placeholder {
+		color: var(--body-text-color-subdued);
+		font-size: 2rem;
+		opacity: 0.5;
+	}
+	
+	.analysis-preview {
+		padding: 0.5rem;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		align-items: center;
+		font-size: 0.875rem;
+	}
+	
+	.gallery .analysis-preview {
+		background: var(--background-fill-primary);
+		border-top: 1px solid var(--border-color-primary);
+	}
+	
+	.modality-badge {
+		background: var(--color-accent);
+		color: white;
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--radius-sm);
+		font-weight: bold;
+		font-size: 0.75rem;
+	}
+	
+	.tissue-type {
+		background: var(--background-fill-secondary);
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border-color-primary);
+	}
+	
+	.risk-badge {
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--radius-sm);
+		font-weight: bold;
+		font-size: 0.75rem;
+	}
+	
+	.risk-normal {
+		background: #d4edda;
+		color: #155724;
+	}
+	
+	.risk-moderate {
+		background: #fff3cd;
+		color: #856404;
+	}
+	
+	.risk-high, .risk-severe {
+		background: #f8d7da;
+		color: #721c24;
+	}
+	
+	.empty-example {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		color: var(--body-text-color-subdued);
+		font-style: italic;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,526 @@
+<script lang="ts">
+	import { Block, BlockLabel, Empty, IconButton, Upload, UploadText } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { _ } from "svelte-i18n";
+	import { tick } from "svelte";
+	import { Upload as UploadIcon } from "@gradio/icons";
+	
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: {
+		image?: any;
+		analysis?: any;
+		report?: string;
+	} | null = null;
+	export let label: string;
+	export let show_label: boolean;
+	export let show_download_button: boolean;
+	export let root: string;
+	export let proxy_url: null | string;
+	export let loading_status: LoadingStatus;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let gradio: any;
+	
+	// Analysis parameters
+	export let analysis_mode: "structured" | "visual" = "structured";
+	export let include_confidence = true;
+	export let include_reasoning = true;
+	export let modality: "CT" | "CR" | "DX" | "RX" | "DR" = "CT";
+	export let task: "analyze_point" | "segment_fat" | "full_analysis" = "full_analysis";
+	
+	let dragging = false;
+	let pending_upload = false;
+	let uploaded_file: File | null = null;
+	let roi = { x: 256, y: 256, radius: 10 };
+	let show_roi = false;
+	let analysis_results: any = null;
+	let visual_report = "";
+	
+	$: value = {
+		image: uploaded_file,
+		analysis: analysis_results,
+		report: visual_report
+	};
+	
+	// DICOM and image loading
+	async function load_file(file: File) {
+		const file_url = URL.createObjectURL(file);
+		const file_ext = file.name.split('.').pop()?.toLowerCase() || '';
+		
+		try {
+			// Always try DICOM first for files without extensions or with DICOM extensions
+			// This matches the backend behavior with force=True
+			if (!file_ext || file_ext === 'dcm' || file_ext === 'dicom' || 
+				file.type === 'application/dicom' || file.name.startsWith('IM_')) {
+				// For DICOM, we need server-side processing
+				// Send to backend for processing
+				const formData = new FormData();
+				formData.append('file', file);
+				
+				// This would call the backend to process DICOM
+				const response = await fetch(`${root}/process_dicom`, {
+					method: 'POST',
+					body: formData
+				});
+				
+				if (response.ok) {
+					const data = await response.json();
+					return data;
+				}
+			}
+			
+			// Fallback to regular image handling
+			return {
+				url: file_url,
+				name: file.name,
+				size: file.size,
+				type: file.type || 'application/octet-stream'
+			};
+		} catch (error) {
+			console.error("Error loading file:", error);
+			throw error;
+		}
+	}
+	
+	function handle_upload({ detail }: CustomEvent<File>) {
+		pending_upload = true;
+		const file = detail;
+		
+		load_file(file).then((data) => {
+			uploaded_file = file;
+			pending_upload = false;
+			
+			// Trigger analysis
+			if (gradio.dispatch) {
+				gradio.dispatch("upload", {
+					file: file,
+					data: data
+				});
+			}
+		}).catch((error) => {
+			console.error("Upload error:", error);
+			pending_upload = false;
+		});
+	}
+	
+	function handle_clear() {
+		value = null;
+		uploaded_file = null;
+		analysis_results = null;
+		visual_report = "";
+		gradio.dispatch("clear");
+	}
+	
+	function handle_roi_click(event: MouseEvent) {
+		if (!show_roi) return;
+		
+		const rect = (event.target as HTMLElement).getBoundingClientRect();
+		roi.x = Math.round(event.clientX - rect.left);
+		roi.y = Math.round(event.clientY - rect.top);
+		
+		// Use change event for ROI updates
+		if (gradio.dispatch) {
+			gradio.dispatch("change", { roi });
+		}
+	}
+	
+	function create_visual_report(results: any) {
+		if (!results) return "";
+		
+		let html = `<div class="medical-report">`;
+		html += `<h3>🏥 Medical Image Analysis Report</h3>`;
+		
+		// Basic info
+		html += `<div class="report-section">`;
+		html += `<h4>📋 Basic Information</h4>`;
+		html += `<p><strong>Modality:</strong> ${results.modality || 'Unknown'}</p>`;
+		html += `<p><strong>Timestamp:</strong> ${results.timestamp || 'N/A'}</p>`;
+		html += `</div>`;
+		
+		// Point analysis
+		if (results.point_analysis) {
+			const pa = results.point_analysis;
+			html += `<div class="report-section">`;
+			html += `<h4>🎯 Point Analysis</h4>`;
+			html += `<p><strong>Location:</strong> (${pa.location?.x}, ${pa.location?.y})</p>`;
+			
+			if (results.modality === 'CT') {
+				html += `<p><strong>HU Value:</strong> ${pa.hu_value?.toFixed(1) || 'N/A'}</p>`;
+			} else {
+				html += `<p><strong>Intensity:</strong> ${pa.intensity?.toFixed(3) || 'N/A'}</p>`;
+			}
+			
+			if (pa.tissue_type) {
+				html += `<p><strong>Tissue Type:</strong> ${pa.tissue_type.icon || ''} ${pa.tissue_type.type || 'Unknown'}</p>`;
+			}
+			
+			if (include_confidence && pa.confidence !== undefined) {
+				html += `<p><strong>Confidence:</strong> ${pa.confidence}</p>`;
+			}
+			
+			if (include_reasoning && pa.reasoning) {
+				html += `<p class="reasoning">💭 ${pa.reasoning}</p>`;
+			}
+			
+			html += `</div>`;
+		}
+		
+		// Segmentation results
+		if (results.segmentation?.statistics) {
+			const stats = results.segmentation.statistics;
+			
+			if (results.modality === 'CT' && stats.total_fat_percentage !== undefined) {
+				html += `<div class="report-section">`;
+				html += `<h4>🔬 Fat Segmentation</h4>`;
+				html += `<div class="stats-grid">`;
+				html += `<div><strong>Total Fat:</strong> ${stats.total_fat_percentage.toFixed(1)}%</div>`;
+				html += `<div><strong>Subcutaneous:</strong> ${stats.subcutaneous_fat_percentage.toFixed(1)}%</div>`;
+				html += `<div><strong>Visceral:</strong> ${stats.visceral_fat_percentage.toFixed(1)}%</div>`;
+				html += `<div><strong>V/S Ratio:</strong> ${stats.visceral_subcutaneous_ratio.toFixed(2)}</div>`;
+				html += `</div>`;
+				
+				if (results.segmentation.interpretation) {
+					const interp = results.segmentation.interpretation;
+					html += `<div class="interpretation">`;
+					html += `<p><strong>Obesity Risk:</strong> <span class="risk-${interp.obesity_risk}">${interp.obesity_risk.toUpperCase()}</span></p>`;
+					html += `<p><strong>Visceral Risk:</strong> <span class="risk-${interp.visceral_risk}">${interp.visceral_risk.toUpperCase()}</span></p>`;
+					
+					if (interp.recommendations?.length > 0) {
+						html += `<p><strong>Recommendations:</strong></p>`;
+						html += `<ul>`;
+						interp.recommendations.forEach((rec: string) => {
+							html += `<li>${rec}</li>`;
+						});
+						html += `</ul>`;
+					}
+					html += `</div>`;
+				}
+				html += `</div>`;
+			} else if (results.segmentation.tissue_distribution) {
+				html += `<div class="report-section">`;
+				html += `<h4>🦴 Tissue Distribution</h4>`;
+				html += `<div class="tissue-grid">`;
+				
+				const tissues = results.segmentation.tissue_distribution;
+				const icons: Record<string, string> = {
+					bone: '🦴',
+					soft_tissue: '🔴',
+					air: '🌫️',
+					metal: '⚙️',
+					fat: '🟡',
+					fluid: '💧'
+				};
+				
+				Object.entries(tissues).forEach(([tissue, percentage]) => {
+					if (percentage as number > 0) {
+						html += `<div class="tissue-item">`;
+						html += `<div class="tissue-icon">${icons[tissue] || '📍'}</div>`;
+						html += `<div class="tissue-name">${tissue.replace('_', ' ')}</div>`;
+						html += `<div class="tissue-percentage">${(percentage as number).toFixed(1)}%</div>`;
+						html += `</div>`;
+					}
+				});
+				
+				html += `</div>`;
+				
+				if (results.segmentation.clinical_findings?.length > 0) {
+					html += `<div class="clinical-findings">`;
+					html += `<p><strong>⚠️ Clinical Findings:</strong></p>`;
+					html += `<ul>`;
+					results.segmentation.clinical_findings.forEach((finding: any) => {
+						html += `<li>${finding.description} (Confidence: ${finding.confidence})</li>`;
+					});
+					html += `</ul>`;
+					html += `</div>`;
+				}
+				
+				html += `</div>`;
+			}
+		}
+		
+		// Quality metrics
+		if (results.quality_metrics) {
+			const quality = results.quality_metrics;
+			html += `<div class="report-section">`;
+			html += `<h4>📊 Image Quality</h4>`;
+			html += `<p><strong>Overall Quality:</strong> <span class="quality-${quality.overall_quality}">${quality.overall_quality?.toUpperCase() || 'UNKNOWN'}</span></p>`;
+			
+			if (quality.issues?.length > 0) {
+				html += `<p><strong>Issues:</strong> ${quality.issues.join(', ')}</p>`;
+			}
+			
+			html += `</div>`;
+		}
+		
+		html += `</div>`;
+		
+		return html;
+	}
+	
+	// Update visual report when analysis changes
+	$: if (analysis_results) {
+		visual_report = create_visual_report(analysis_results);
+	}
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	padding={true}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+	
+	<BlockLabel
+		{show_label}
+		Icon={Image}
+		label={label || "Medical Image Analyzer"}
+	/>
+	
+	{#if value === null || !uploaded_file}
+		<Upload
+			on:load={handle_upload}
+			filetype="*"
+			{root}
+			{dragging}
+		>
+			<UploadText i18n={gradio.i18n} type="file">
+			Drop Medical Image File Here - or - Click to Upload<br/>
+			<span style="font-size: 0.9em; color: var(--body-text-color-subdued);">
+				Supports: DICOM (.dcm), Images (.png, .jpg), and files without extensions (IM_0001, etc.)
+			</span>
+		</UploadText>
+		</Upload>
+	{:else}
+		<div class="analyzer-container">
+			<div class="controls">
+				<IconButton Icon={UploadIcon} on:click={handle_clear} />
+				
+				<select bind:value={modality} class="modality-select">
+					<option value="CT">CT</option>
+					<option value="CR">CR (X-Ray)</option>
+					<option value="DX">DX (X-Ray)</option>
+					<option value="RX">RX (X-Ray)</option>
+					<option value="DR">DR (X-Ray)</option>
+				</select>
+				
+				<select bind:value={task} class="task-select">
+					<option value="analyze_point">Point Analysis</option>
+					<option value="segment_fat">Fat Segmentation (CT)</option>
+					<option value="full_analysis">Full Analysis</option>
+				</select>
+				
+				<label class="roi-toggle">
+					<input type="checkbox" bind:checked={show_roi} />
+					Show ROI
+				</label>
+			</div>
+			
+			<div class="image-container" on:click={handle_roi_click}>
+				{#if uploaded_file}
+					<img src={URL.createObjectURL(uploaded_file)} alt="Medical scan" />
+					
+					{#if show_roi}
+						<div 
+							class="roi-marker" 
+							style="left: {roi.x}px; top: {roi.y}px; width: {roi.radius * 2}px; height: {roi.radius * 2}px;"
+						/>
+					{/if}
+				{/if}
+			</div>
+			
+			{#if visual_report}
+				<div class="report-container">
+					{@html visual_report}
+				</div>
+			{/if}
+			
+			{#if analysis_mode === "structured" && analysis_results}
+				<details class="json-output">
+					<summary>JSON Output (for AI Agents)</summary>
+					<pre>{JSON.stringify(analysis_results, null, 2)}</pre>
+				</details>
+			{/if}
+		</div>
+	{/if}
+</Block>
+
+<style>
+	.analyzer-container {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+	
+	.controls {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	
+	.modality-select, .task-select {
+		padding: 0.5rem;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		background: var(--background-fill-primary);
+	}
+	
+	.roi-toggle {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
+	
+	.image-container {
+		position: relative;
+		overflow: hidden;
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		cursor: crosshair;
+	}
+	
+	.image-container img {
+		width: 100%;
+		height: auto;
+		display: block;
+	}
+	
+	.roi-marker {
+		position: absolute;
+		border: 2px solid #ff0000;
+		border-radius: 50%;
+		pointer-events: none;
+		transform: translate(-50%, -50%);
+		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+	}
+	
+	.report-container {
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: 1rem;
+		overflow-x: auto;
+	}
+	
+	:global(.medical-report) {
+		font-family: var(--font);
+		color: var(--body-text-color);
+	}
+	
+	:global(.medical-report h3) {
+		color: var(--body-text-color);
+		border-bottom: 2px solid var(--color-accent);
+		padding-bottom: 0.5rem;
+		margin-bottom: 1rem;
+	}
+	
+	:global(.medical-report h4) {
+		color: var(--body-text-color);
+		margin-top: 1rem;
+		margin-bottom: 0.5rem;
+	}
+	
+	:global(.report-section) {
+		background: var(--background-fill-primary);
+		padding: 1rem;
+		border-radius: var(--radius-sm);
+		margin-bottom: 1rem;
+	}
+	
+	:global(.stats-grid), :global(.tissue-grid) {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+	
+	:global(.tissue-item) {
+		text-align: center;
+		padding: 0.5rem;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+	}
+	
+	:global(.tissue-icon) {
+		font-size: 2rem;
+		margin-bottom: 0.25rem;
+	}
+	
+	:global(.tissue-name) {
+		font-weight: bold;
+		text-transform: capitalize;
+	}
+	
+	:global(.tissue-percentage) {
+		color: var(--color-accent);
+		font-size: 1.2rem;
+		font-weight: bold;
+	}
+	
+	:global(.reasoning) {
+		font-style: italic;
+		color: var(--body-text-color-subdued);
+		margin-top: 0.5rem;
+	}
+	
+	:global(.interpretation) {
+		margin-top: 1rem;
+		padding: 0.5rem;
+		background: var(--background-fill-secondary);
+		border-radius: var(--radius-sm);
+	}
+	
+	:global(.risk-normal) { color: #27ae60; }
+	:global(.risk-moderate) { color: #f39c12; }
+	:global(.risk-high), :global(.risk-severe) { color: #e74c3c; }
+	
+	:global(.quality-excellent), :global(.quality-good) { color: #27ae60; }
+	:global(.quality-fair) { color: #f39c12; }
+	:global(.quality-poor) { color: #e74c3c; }
+	
+	:global(.clinical-findings) {
+		margin-top: 1rem;
+		padding: 0.5rem;
+		background: #fff3cd;
+		border-left: 4px solid #ffc107;
+		border-radius: var(--radius-sm);
+	}
+	
+	.json-output {
+		margin-top: 1rem;
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: 1rem;
+	}
+	
+	.json-output summary {
+		cursor: pointer;
+		font-weight: bold;
+		margin-bottom: 0.5rem;
+	}
+	
+	.json-output pre {
+		margin: 0;
+		overflow-x: auto;
+		font-size: 0.875rem;
+		background: var(--background-fill-primary);
+		padding: 0.5rem;
+		border-radius: var(--radius-sm);
+	}
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gradio_medical_image_analyzer",
+  "version": "0.0.1",
+  "description": "Gradio Medical Image Analyzer custom component",
+  "type": "module",
+  "author": "",
+  "license": "MIT",
+  "private": false,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.1",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.12",
+    "@gradio/utils": "0.10.2"
+  },
+  "devDependencies": {
+    "@gradio/preview": "^0.13.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  }
+}

src/frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["svelte"]
+  },
+  "include": ["**/*.ts", "**/*.js", "**/*.svelte"],
+  "exclude": ["node_modules"]
+}

src/pyproject.toml

@@ -0,0 +1,60 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_medical_image_analyzer"
+version = "0.0.1"
+description = "AI-agent optimized medical image analysis component for Gradio"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "Markus Clauss Vetsuisse Uni Zurich", email = "markus@data-and-ai-dude.ch" }]
+keywords = [
+  "gradio-custom-component",
+  "medical-imaging",
+  "ai-agents",
+  "image-analysis",
+  "gradio-template-MedicalImageAnalyzer"
+]
+# Add dependencies here
+dependencies = [
+  "gradio>=4.0,<6.0",
+  "numpy>=1.21.0",
+  "pillow>=10.0.0",
+  "scikit-image>=0.19.0",
+  "scipy>=1.7.0",
+  "opencv-python>=4.5.0",
+  "pydicom>=2.3.0"
+]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering :: Medical Science Apps.',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+]
+
+[project.urls]
+repository = "https://github.com/datadudech/gradio-medical-image-analyzer"
+documentation = "https://github.com/datadudech/gradio-medical-image-analyzer#readme"
+issues = "https://github.com/datadudech/gradio-medical-image-analyzer/issues"
+space = "https://huggingface.co/spaces/abdullahisamarkus/medical-image-analyzer"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_medical_image_analyzer/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_medical_image_analyzer"]

src/test_im_files.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+"""Test handling of IM_0001 and other files without extensions"""
+
+import sys
+import os
+import tempfile
+import shutil
+
+# Add backend to path  
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def test_im_files():
+    """Test files without extensions like IM_0001"""
+    
+    print("🏥 Testing Medical Image Analyzer with IM_0001 Files")
+    print("=" * 50)
+    
+    analyzer = MedicalImageAnalyzer()
+    
+    # Create test directory
+    temp_dir = tempfile.mkdtemp()
+    
+    try:
+        # Look for a test DICOM file
+        test_dicom = None
+        possible_paths = [
+            "../vetdicomviewer/tools/data/CTImage.dcm",
+            "tools/data/CTImage.dcm",
+            "../tests/data/CTImage.dcm"
+        ]
+        
+        for path in possible_paths:
+            if os.path.exists(path):
+                test_dicom = path
+                break
+        
+        if test_dicom:
+            # Create IM_0001 file (copy DICOM without extension)
+            im_file = os.path.join(temp_dir, "IM_0001")
+            shutil.copy(test_dicom, im_file)
+            
+            print(f"📁 Created test file: IM_0001 (from {os.path.basename(test_dicom)})")
+            print(f"📍 Location: {im_file}")
+            print(f"📏 Size: {os.path.getsize(im_file)} bytes")
+            print()
+            
+            # Test processing
+            print("🔬 Processing IM_0001 file...")
+            try:
+                pixel_array, display_array, metadata = analyzer.process_file(im_file)
+                
+                print("✅ Successfully processed IM_0001!")
+                print(f"  - Shape: {pixel_array.shape}")
+                print(f"  - Modality: {metadata.get('modality', 'Unknown')}")
+                print(f"  - File type: {metadata.get('file_type', 'Unknown')}")
+                
+                if metadata.get('file_type') == 'DICOM':
+                    print(f"  - Patient: {metadata.get('patient_name', 'Anonymous')}")
+                    print(f"  - Study date: {metadata.get('study_date', 'N/A')}")
+                    
+                    if 'window_center' in metadata:
+                        print(f"  - Window Center: {metadata['window_center']:.0f}")
+                        print(f"  - Window Width: {metadata['window_width']:.0f}")
+                
+                # Perform analysis
+                print("\n🎯 Performing point analysis...")
+                result = analyzer.analyze_image(
+                    image=pixel_array,
+                    modality=metadata.get('modality', 'CT'),
+                    task="analyze_point",
+                    roi={"x": pixel_array.shape[1]//2, "y": pixel_array.shape[0]//2, "radius": 10}
+                )
+                
+                if 'point_analysis' in result:
+                    pa = result['point_analysis']
+                    print(f"  - HU Value: {pa.get('hu_value', 'N/A')}")
+                    tissue = pa.get('tissue_type', {})
+                    print(f"  - Tissue: {tissue.get('icon', '')} {tissue.get('type', 'Unknown')}")
+                    print(f"  - Confidence: {pa.get('confidence', 'N/A')}")
+                
+            except Exception as e:
+                print(f"❌ Error processing IM_0001: {str(e)}")
+                import traceback
+                traceback.print_exc()
+        else:
+            print("⚠️  No test DICOM file found to create IM_0001")
+            print("  You can manually test by renaming any DICOM file to IM_0001")
+        
+        print("\n" + "=" * 50)
+        print("📝 Implementation Details:")
+        print("1. Backend uses: pydicom.dcmread(file_path, force=True)")
+        print("2. This allows reading files without extensions")
+        print("3. The force=True parameter tells pydicom to try reading as DICOM")
+        print("4. If DICOM reading fails, it falls back to regular image processing")
+        print("5. Frontend accepts all file types (no restrictions)")
+        
+    finally:
+        # Cleanup
+        shutil.rmtree(temp_dir)
+        
+    print("\n✅ The medical_image_analyzer fully supports IM_0001 files!")
+
+if __name__ == "__main__":
+    test_im_files()

src/test_integration.py

@@ -0,0 +1,185 @@
+#!/usr/bin/env python3
+"""
+Test script for Medical Image Analyzer integration
+"""
+
+import numpy as np
+import sys
+import os
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+
+def test_ct_analysis():
+    """Test CT image analysis with fat segmentation"""
+    print("Testing CT Analysis...")
+    
+    # Create a simulated CT image with different tissue types
+    ct_image = np.zeros((512, 512), dtype=np.float32)
+    
+    # Add different tissue regions based on HU values
+    # Air region (-1000 HU)
+    ct_image[50:150, 50:150] = -1000
+    
+    # Fat region (-75 HU)
+    ct_image[200:300, 200:300] = -75
+    
+    # Soft tissue region (40 HU)
+    ct_image[350:450, 350:450] = 40
+    
+    # Bone region (300 HU)
+    ct_image[100:200, 350:450] = 300
+    
+    # Create analyzer
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    # Test point analysis
+    print("\n1. Testing point analysis...")
+    result = analyzer.process_image(
+        image=ct_image,
+        modality="CT",
+        task="analyze_point",
+        roi={"x": 250, "y": 250, "radius": 10}
+    )
+    
+    print(f"   HU Value: {result.get('point_analysis', {}).get('hu_value', 'N/A')}")
+    print(f"   Tissue Type: {result.get('point_analysis', {}).get('tissue_type', {}).get('type', 'N/A')}")
+    print(f"   Confidence: {result.get('point_analysis', {}).get('confidence', 'N/A')}")
+    
+    # Test fat segmentation
+    print("\n2. Testing fat segmentation...")
+    result = analyzer.process_image(
+        image=ct_image,
+        modality="CT",
+        task="segment_fat"
+    )
+    
+    if "error" in result.get("segmentation", {}):
+        print(f"   Error: {result['segmentation']['error']}")
+    else:
+        stats = result.get("segmentation", {}).get("statistics", {})
+        print(f"   Total Fat %: {stats.get('total_fat_percentage', 'N/A')}")
+        print(f"   Subcutaneous Fat %: {stats.get('subcutaneous_fat_percentage', 'N/A')}")
+        print(f"   Visceral Fat %: {stats.get('visceral_fat_percentage', 'N/A')}")
+    
+    # Test full analysis
+    print("\n3. Testing full analysis...")
+    result = analyzer.process_image(
+        image=ct_image,
+        modality="CT",
+        task="full_analysis",
+        clinical_context="Patient with obesity concerns"
+    )
+    
+    print(f"   Modality: {result.get('modality', 'N/A')}")
+    print(f"   Quality: {result.get('quality_metrics', {}).get('overall_quality', 'N/A')}")
+    if "clinical_correlation" in result:
+        print(f"   Clinical Note: {result['clinical_correlation'].get('summary', 'N/A')}")
+
+
+def test_xray_analysis():
+    """Test X-ray image analysis"""
+    print("\n\nTesting X-Ray Analysis...")
+    
+    # Create a simulated X-ray image with different intensities
+    xray_image = np.zeros((512, 512), dtype=np.float32)
+    
+    # Background soft tissue
+    xray_image[:, :] = 0.4
+    
+    # Bone region (high intensity)
+    xray_image[100:400, 200:250] = 0.8  # Femur-like structure
+    
+    # Air/lung region (low intensity)
+    xray_image[50:200, 50:200] = 0.1
+    xray_image[50:200, 312:462] = 0.1
+    
+    # Metal implant (very high intensity)
+    xray_image[250:280, 220:230] = 0.95
+    
+    # Create analyzer
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    # Test full X-ray analysis
+    print("\n1. Testing full X-ray analysis...")
+    result = analyzer.process_image(
+        image=xray_image,
+        modality="X-Ray",
+        task="full_analysis"
+    )
+    
+    if "segmentation" in result:
+        segments = result["segmentation"].get("segments", {})
+        print("   Detected tissues:")
+        for tissue, info in segments.items():
+            if info.get("present", False):
+                print(f"     - {tissue}: {info.get('percentage', 0):.1f}%")
+        
+        # Check for findings
+        findings = result["segmentation"].get("clinical_findings", [])
+        if findings:
+            print("   Clinical findings:")
+            for finding in findings:
+                print(f"     - {finding.get('description', 'Unknown finding')}")
+    
+    # Test point analysis on X-ray
+    print("\n2. Testing X-ray point analysis...")
+    result = analyzer.process_image(
+        image=xray_image,
+        modality="X-Ray",
+        task="analyze_point",
+        roi={"x": 225, "y": 265, "radius": 5}  # Metal implant region
+    )
+    
+    point_analysis = result.get("point_analysis", {})
+    print(f"   Tissue Type: {point_analysis.get('tissue_type', {}).get('type', 'N/A')}")
+    print(f"   Intensity: {point_analysis.get('intensity', 'N/A')}")
+
+
+def test_error_handling():
+    """Test error handling"""
+    print("\n\nTesting Error Handling...")
+    
+    analyzer = MedicalImageAnalyzer()
+    
+    # Test with invalid image
+    print("\n1. Testing with None image...")
+    result = analyzer.process_image(
+        image=None,
+        modality="CT",
+        task="full_analysis"
+    )
+    print(f"   Error handled: {'error' in result}")
+    
+    # Test with invalid modality
+    print("\n2. Testing with invalid modality...")
+    result = analyzer.process_image(
+        image=np.zeros((100, 100)),
+        modality="MRI",  # Not supported
+        task="full_analysis"
+    )
+    print(f"   Processed as: {result.get('modality', 'Unknown')}")
+
+
+if __name__ == "__main__":
+    print("Medical Image Analyzer Integration Test")
+    print("=" * 50)
+    
+    test_ct_analysis()
+    test_xray_analysis()
+    test_error_handling()
+    
+    print("\n" + "=" * 50)
+    print("Integration test completed!")
+    print("\nNote: This test uses simulated data.")
+    print("For real medical images, results will be more accurate.")

wrapper_test.py

@@ -0,0 +1,835 @@
+#!/usr/bin/env python3
+"""
+Frontend Wrapper Test für Medical Image Analyzer
+Nutzt Standard Gradio Komponenten um die Backend-Funktionalität zu testen
+"""
+
+import gradio as gr
+import numpy as np
+import sys
+import os
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, os.path.join(os.path.dirname(os.path.dirname(__file__)), 'backend'))
+
+from gradio_medical_image_analyzer import MedicalImageAnalyzer
+import cv2
+
+def draw_roi_on_image(image, roi_x, roi_y, roi_radius):
+    """Draw ROI circle on the image"""
+    # Convert to RGB if grayscale
+    if len(image.shape) == 2:
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    else:
+        image_rgb = image.copy()
+    
+    # Draw ROI circle
+    center = (int(roi_x), int(roi_y))
+    radius = int(roi_radius)
+    
+    # Draw outer circle (white)
+    cv2.circle(image_rgb, center, radius, (255, 255, 255), 2)
+    # Draw inner circle (red)
+    cv2.circle(image_rgb, center, radius-1, (255, 0, 0), 2)
+    # Draw center cross
+    cv2.line(image_rgb, (center[0]-5, center[1]), (center[0]+5, center[1]), (255, 0, 0), 2)
+    cv2.line(image_rgb, (center[0], center[1]-5), (center[0], center[1]+5), (255, 0, 0), 2)
+    
+    return image_rgb
+
+def create_fat_overlay(base_image, segmentation_results):
+    """Create overlay image with fat segmentation highlighted"""
+    # Convert to RGB
+    if len(base_image.shape) == 2:
+        overlay_img = cv2.cvtColor(base_image, cv2.COLOR_GRAY2RGB)
+    else:
+        overlay_img = base_image.copy()
+    
+    # Check if we have segmentation masks
+    if not segmentation_results or 'segments' not in segmentation_results:
+        return overlay_img
+    
+    segments = segmentation_results.get('segments', {})
+    
+    # Apply subcutaneous fat overlay (yellow)
+    if 'subcutaneous' in segments and segments['subcutaneous'].get('mask') is not None:
+        mask = segments['subcutaneous']['mask']
+        yellow_overlay = np.zeros_like(overlay_img)
+        yellow_overlay[mask > 0] = [255, 255, 0]  # Yellow
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, yellow_overlay, 0.3, 0)
+    
+    # Apply visceral fat overlay (red)
+    if 'visceral' in segments and segments['visceral'].get('mask') is not None:
+        mask = segments['visceral']['mask']
+        red_overlay = np.zeros_like(overlay_img)
+        red_overlay[mask > 0] = [255, 0, 0]  # Red
+        overlay_img = cv2.addWeighted(overlay_img, 0.7, red_overlay, 0.3, 0)
+    
+    # Add legend
+    cv2.putText(overlay_img, "Yellow: Subcutaneous Fat", (10, 30), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 255, 0), 2)
+    cv2.putText(overlay_img, "Red: Visceral Fat", (10, 60), 
+                cv2.FONT_HERSHEY_SIMPLEX, 0.7, (255, 0, 0), 2)
+    
+    return overlay_img
+
+def process_and_analyze(file_obj, task, roi_x, roi_y, roi_radius, symptoms, show_overlay=False):
+    """
+    Processes uploaded file and performs analysis
+    """
+    if file_obj is None:
+        return None, "No file selected", "", {}, None
+    
+    # Create analyzer instance
+    analyzer = MedicalImageAnalyzer(
+        analysis_mode="structured",
+        include_confidence=True,
+        include_reasoning=True
+    )
+    
+    try:
+        # Process the file (DICOM or image)
+        file_path = file_obj.name if hasattr(file_obj, 'name') else str(file_obj)
+        pixel_array, display_array, metadata = analyzer.process_file(file_path)
+        
+        # Update modality from file metadata
+        modality = metadata.get('modality', 'CR')
+        
+        # Prepare analysis parameters
+        analysis_params = {
+            "image": pixel_array,
+            "modality": modality,
+            "task": task
+        }
+        
+        # Add ROI if applicable
+        if task in ["analyze_point", "full_analysis"]:
+            # Scale ROI coordinates to image size
+            h, w = pixel_array.shape
+            roi_x_scaled = int(roi_x * w / 512)  # Assuming slider max is 512
+            roi_y_scaled = int(roi_y * h / 512)
+            
+            analysis_params["roi"] = {
+                "x": roi_x_scaled,
+                "y": roi_y_scaled,
+                "radius": roi_radius
+            }
+        
+        # Add clinical context
+        if symptoms:
+            analysis_params["clinical_context"] = ", ".join(symptoms)
+        
+        # Perform analysis
+        results = analyzer.analyze_image(**analysis_params)
+        
+        # Create visual report
+        if analyzer.analysis_mode == "visual":
+            visual_report = analyzer._create_html_report(results)
+        else:
+            # Create our own visual report
+            visual_report = create_visual_report(results, metadata)
+        
+        # Add metadata info
+        info = f"📄 {metadata.get('file_type', 'Unknown')} | "
+        info += f"🏥 {modality} | "
+        info += f"📐 {metadata.get('shape', 'Unknown')}"
+        
+        if metadata.get('window_center'):
+            info += f" | Window C:{metadata['window_center']:.0f} W:{metadata['window_width']:.0f}"
+        
+        # Create overlay image if requested
+        overlay_image = None
+        if show_overlay:
+            # For ROI visualization
+            if task in ["analyze_point", "full_analysis"] and roi_x and roi_y:
+                overlay_image = draw_roi_on_image(display_array.copy(), roi_x, roi_y, roi_radius)
+            
+            # For fat segmentation overlay
+            if task == "segment_fat" and 'segmentation' in results and modality == 'CT':
+                # Get segmentation masks from results
+                seg_results = {
+                    'segments': {
+                        'subcutaneous': {'mask': None},
+                        'visceral': {'mask': None}
+                    }
+                }
+                
+                # Check if we have actual mask data
+                if 'segments' in results['segmentation']:
+                    seg_results = results['segmentation']
+                
+                overlay_image = create_fat_overlay(display_array.copy(), seg_results)
+        
+        return display_array, info, visual_report, results, overlay_image
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        return None, error_msg, f"<div style='color: red;'>❌ {error_msg}</div>", {"error": error_msg}, None
+
+
+def create_visual_report(results, metadata):
+    """Creates a visual HTML report with improved styling"""
+    html = f"""
+    <div class='medical-report' style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
+                padding: 24px; 
+                background: #ffffff; 
+                border-radius: 12px; 
+                max-width: 100%; 
+                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+                color: #1a1a1a !important;'>
+        
+        <h2 style='color: #1e40af !important; 
+                   border-bottom: 3px solid #3b82f6; 
+                   padding-bottom: 12px; 
+                   margin-bottom: 20px;
+                   font-size: 24px;
+                   font-weight: 600;'>
+            🏥 Medical Image Analysis Report
+        </h2>
+        
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📋 Metadata
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>File Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('file_type', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Modality:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('modality', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Image Size:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{metadata.get('shape', 'Unknown')}</td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Timestamp:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{results.get('timestamp', 'N/A')}</td>
+                </tr>
+            </table>
+        </div>
+    """
+    
+    # Point Analysis
+    if 'point_analysis' in results:
+        pa = results['point_analysis']
+        tissue = pa.get('tissue_type', {})
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                🎯 Point Analysis
+            </h3>
+            <table style='width: 100%; border-collapse: collapse;'>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important; width: 40%;'><strong style='color: #374151 !important;'>Position:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>({pa.get('location', {}).get('x', 'N/A')}, {pa.get('location', {}).get('y', 'N/A')})</td>
+                </tr>
+        """
+        
+        if results.get('modality') == 'CT':
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>HU Value:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important; font-weight: 500;'>{pa.get('hu_value', 'N/A'):.1f}</td>
+                </tr>
+            """
+        else:
+            html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Intensity:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('intensity', 'N/A'):.3f}</td>
+                </tr>
+            """
+        
+        html += f"""
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Tissue Type:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>
+                        <span style='font-size: 1.3em; vertical-align: middle;'>{tissue.get('icon', '')}</span> 
+                        <span style='font-weight: 500; text-transform: capitalize;'>{tissue.get('type', 'Unknown').replace('_', ' ')}</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td style='padding: 8px 0; color: #4b5563 !important;'><strong style='color: #374151 !important;'>Confidence:</strong></td>
+                    <td style='padding: 8px 0; color: #1f2937 !important;'>{pa.get('confidence', 'N/A')}</td>
+                </tr>
+            </table>
+        """
+        
+        if 'reasoning' in pa:
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #f0f7ff; 
+                        border-left: 3px solid #0066cc; 
+                        border-radius: 4px;'>
+                <p style='margin: 0; color: #4b5563 !important; font-style: italic;'>
+                    💭 {pa['reasoning']}
+                </p>
+            </div>
+            """
+        
+        html += "</div>"
+    
+    # Segmentation Results
+    if 'segmentation' in results and results['segmentation']:
+        seg = results['segmentation']
+        
+        if 'statistics' in seg:
+            # Fat segmentation for CT
+            stats = seg['statistics']
+            html += f"""
+            <div style='background: #f0f9ff; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #1e3a8a !important; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🔬 Fat Segmentation Analysis
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 16px;'>
+                    <div style='padding: 16px; background: #ffffff; border-radius: 6px; border: 1px solid #e5e7eb;'>
+                        <h4 style='color: #6b7280 !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Total Fat</h4>
+                        <p style='color: #1f2937 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('total_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fffbeb; border-radius: 6px; border: 1px solid #fbbf24;'>
+                        <h4 style='color: #92400e !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Subcutaneous</h4>
+                        <p style='color: #d97706 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('subcutaneous_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #fef2f2; border-radius: 6px; border: 1px solid #fca5a5;'>
+                        <h4 style='color: #991b1b !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>Visceral</h4>
+                        <p style='color: #dc2626 !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_fat_percentage', 0):.1f}%</p>
+                    </div>
+                    <div style='padding: 16px; background: #eff6ff; border-radius: 6px; border: 1px solid #93c5fd;'>
+                        <h4 style='color: #1e3a8a !important; font-size: 14px; margin: 0 0 8px 0; font-weight: 500;'>V/S Ratio</h4>
+                        <p style='color: #1e40af !important; font-size: 24px; font-weight: 600; margin: 0;'>{stats.get('visceral_subcutaneous_ratio', 0):.2f}</p>
+                    </div>
+                </div>
+            """
+            
+            if 'interpretation' in seg:
+                interp = seg['interpretation']
+                obesity_color = "#27ae60" if interp.get("obesity_risk") == "normal" else "#f39c12" if interp.get("obesity_risk") == "moderate" else "#e74c3c"
+                visceral_color = "#27ae60" if interp.get("visceral_risk") == "normal" else "#f39c12" if interp.get("visceral_risk") == "moderate" else "#e74c3c"
+                
+                html += f"""
+                <div style='margin-top: 16px; padding: 16px; background: #f8f9fa; border-radius: 6px;'>
+                    <h4 style='color: #333; font-size: 16px; font-weight: 600; margin-bottom: 8px;'>Risk Assessment</h4>
+                    <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 12px;'>
+                        <div>
+                            <span style='color: #666; font-size: 14px;'>Obesity Risk:</span>
+                            <span style='color: {obesity_color}; font-weight: 600; margin-left: 8px;'>{interp.get('obesity_risk', 'N/A').upper()}</span>
+                        </div>
+                        <div>
+                            <span style='color: #666; font-size: 14px;'>Visceral Risk:</span>
+                            <span style='color: {visceral_color}; font-weight: 600; margin-left: 8px;'>{interp.get('visceral_risk', 'N/A').upper()}</span>
+                        </div>
+                    </div>
+                """
+                
+                if interp.get('recommendations'):
+                    html += """
+                    <div style='margin-top: 12px; padding-top: 12px; border-top: 1px solid #e0e0e0;'>
+                        <h5 style='color: #333; font-size: 14px; font-weight: 600; margin-bottom: 8px;'>💡 Recommendations</h5>
+                        <ul style='margin: 0; padding-left: 20px; color: #555;'>
+                    """
+                    for rec in interp['recommendations']:
+                        html += f"<li style='margin: 4px 0;'>{rec}</li>"
+                    html += "</ul></div>"
+                
+                html += "</div>"
+            html += "</div>"
+        
+        elif 'tissue_distribution' in seg:
+            # X-ray tissue distribution
+            html += f"""
+            <div style='background: white; 
+                        padding: 20px; 
+                        margin: 16px 0; 
+                        border-radius: 8px; 
+                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+                <h3 style='color: #333; 
+                           font-size: 18px; 
+                           font-weight: 600; 
+                           margin-bottom: 12px;'>
+                    🦴 Tissue Distribution
+                </h3>
+                <div style='display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;'>
+            """
+            
+            tissue_dist = seg['tissue_distribution']
+            tissue_icons = {
+                'bone': '🦴', 'soft_tissue': '🔴', 'air': '🌫️',
+                'metal': '⚙️', 'fat': '🟡', 'fluid': '💧'
+            }
+            
+            tissue_colors = {
+                'bone': '#fff7e6',
+                'soft_tissue': '#fee',
+                'air': '#e6f3ff',
+                'metal': '#f0f0f0',
+                'fat': '#fffbe6',
+                'fluid': '#e6f7ff'
+            }
+            
+            for tissue, percentage in tissue_dist.items():
+                if percentage > 0:
+                    icon = tissue_icons.get(tissue, '📍')
+                    bg_color = tissue_colors.get(tissue, '#f8f9fa')
+                    html += f"""
+                    <div style='text-align: center; 
+                                padding: 16px; 
+                                background: {bg_color}; 
+                                border-radius: 8px;
+                                transition: transform 0.2s;'>
+                        <div style='font-size: 2.5em; margin-bottom: 8px;'>{icon}</div>
+                        <div style='font-weight: 600; 
+                                    color: #333; 
+                                    font-size: 14px; 
+                                    margin-bottom: 4px;'>
+                            {tissue.replace('_', ' ').title()}
+                        </div>
+                        <div style='color: #0066cc; 
+                                    font-size: 20px; 
+                                    font-weight: 700;'>
+                            {percentage:.1f}%
+                        </div>
+                    </div>
+                    """
+            
+            html += "</div>"
+            
+            if seg.get('clinical_findings'):
+                html += """
+                <div style='margin-top: 16px; 
+                            padding: 16px; 
+                            background: #fff3cd; 
+                            border-left: 4px solid #ffc107; 
+                            border-radius: 4px;'>
+                    <h4 style='color: #856404; 
+                               font-size: 16px; 
+                               font-weight: 600; 
+                               margin: 0 0 8px 0;'>
+                        ⚠️ Clinical Findings
+                    </h4>
+                    <ul style='margin: 0; padding-left: 20px; color: #856404;'>
+                """
+                for finding in seg['clinical_findings']:
+                    html += f"<li style='margin: 4px 0;'>{finding.get('description', 'Unknown finding')}</li>"
+                html += "</ul></div>"
+            
+            html += "</div>"
+    
+    # Quality Assessment
+    if 'quality_metrics' in results:
+        quality = results['quality_metrics']
+        quality_colors = {
+            'excellent': '#27ae60',
+            'good': '#27ae60',
+            'fair': '#f39c12',
+            'poor': '#e74c3c',
+            'unknown': '#95a5a6'
+        }
+        q_color = quality_colors.get(quality.get('overall_quality', 'unknown'), '#95a5a6')
+        
+        html += f"""
+        <div style='background: #f0f9ff; 
+                    padding: 20px; 
+                    margin: 16px 0; 
+                    border-radius: 8px; 
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);'>
+            <h3 style='color: #1e3a8a !important; 
+                       font-size: 18px; 
+                       font-weight: 600; 
+                       margin-bottom: 12px;'>
+                📊 Image Quality Assessment
+            </h3>
+            <div style='display: flex; align-items: center; gap: 16px;'>
+                <div>
+                    <span style='color: #4b5563 !important; font-size: 14px;'>Overall Quality:</span>
+                    <span style='color: {q_color} !important; 
+                                 font-size: 18px; 
+                                 font-weight: 700; 
+                                 margin-left: 8px;'>
+                        {quality.get('overall_quality', 'unknown').upper()}
+                    </span>
+                </div>
+            </div>
+        """
+        
+        if quality.get('issues'):
+            html += f"""
+            <div style='margin-top: 12px; 
+                        padding: 12px; 
+                        background: #fff3cd; 
+                        border-left: 3px solid #ffc107; 
+                        border-radius: 4px;'>
+                <strong style='color: #856404;'>Issues Detected:</strong>
+                <ul style='margin: 4px 0 0 0; padding-left: 20px; color: #856404;'>
+            """
+            for issue in quality['issues']:
+                html += f"<li style='margin: 2px 0;'>{issue}</li>"
+            html += "</ul></div>"
+        
+        html += "</div>"
+    
+    html += "</div>"
+    return html
+
+
+# Create Gradio interface
+with gr.Blocks(
+    title="Medical Image Analyzer - Wrapper Test", 
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="blue",
+        neutral_hue="slate",
+        text_size="md",
+        spacing_size="md",
+        radius_size="md",
+    ).set(
+        # Medical blue theme colors
+        body_background_fill="*neutral_950",
+        body_background_fill_dark="*neutral_950",
+        block_background_fill="*neutral_900",
+        block_background_fill_dark="*neutral_900",
+        border_color_primary="*primary_600",
+        border_color_primary_dark="*primary_600",
+        # Text colors for better contrast
+        body_text_color="*neutral_100",
+        body_text_color_dark="*neutral_100",
+        body_text_color_subdued="*neutral_300",
+        body_text_color_subdued_dark="*neutral_300",
+        # Button colors
+        button_primary_background_fill="*primary_600",
+        button_primary_background_fill_dark="*primary_600",
+        button_primary_text_color="white",
+        button_primary_text_color_dark="white",
+    ),
+    css="""
+    /* Medical blue theme with high contrast */
+    :root {
+        --medical-blue: #1e40af;
+        --medical-blue-light: #3b82f6;
+        --medical-blue-dark: #1e3a8a;
+        --text-primary: #f9fafb;
+        --text-secondary: #e5e7eb;
+        --bg-primary: #0f172a;
+        --bg-secondary: #1e293b;
+        --bg-tertiary: #334155;
+    }
+    
+    /* Override default text colors for medical theme */
+    * {
+        color: var(--text-primary) !important;
+    }
+    
+    /* Fix text contrast issues */
+    .svelte-12ioyct { color: var(--text-primary) !important; }
+    
+    /* Override table cell colors for better readability */
+    td { 
+        color: var(--text-primary) !important; 
+        padding: 8px 12px !important;
+    }
+    td strong { 
+        color: var(--text-primary) !important; 
+        font-weight: 600 !important; 
+    }
+    
+    /* Fix upload component text and translate */
+    .wrap.svelte-12ioyct::before {
+        content: 'Drop file here' !important;
+        color: var(--text-primary) !important;
+    }
+    .wrap.svelte-12ioyct::after {
+        content: 'Click to upload' !important;
+        color: var(--text-secondary) !important;
+    }
+    .wrap.svelte-12ioyct span { 
+        display: none !important; /* Hide German text */
+    }
+    
+    /* Style the file upload area */
+    .file-upload {
+        border: 2px dashed var(--medical-blue-light) !important;
+        border-radius: 8px !important;
+        padding: 20px !important;
+        text-align: center !important;
+        background: var(--bg-secondary) !important;
+        transition: all 0.3s ease !important;
+        color: var(--text-primary) !important;
+    }
+    
+    .file-upload:hover {
+        border-color: var(--medical-blue) !important;
+        background: var(--bg-tertiary) !important;
+        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2) !important;
+    }
+    
+    /* Make sure all text in tables is readable */
+    table { 
+        width: 100%;
+        border-collapse: collapse;
+    }
+    th { 
+        font-weight: 600; 
+        background: var(--bg-tertiary);
+        padding: 8px 12px;
+    }
+    
+    /* Ensure report text is readable with white background */
+    .medical-report {
+        background: #ffffff !important;
+        border: 2px solid var(--medical-blue-light) !important;
+        border-radius: 8px !important;
+        padding: 16px !important;
+        color: #1a1a1a !important;
+    }
+    
+    .medical-report * {
+        color: #1f2937 !important; /* Dark gray text */
+    }
+    
+    .medical-report h2 {
+        color: #1e40af !important; /* Medical blue for main heading */
+    }
+    
+    .medical-report h3, .medical-report h4 {
+        color: #1e3a8a !important; /* Darker medical blue for subheadings */
+    }
+    
+    .medical-report strong {
+        color: #374151 !important; /* Darker gray for labels */
+    }
+    
+    .medical-report td {
+        color: #1f2937 !important; /* Ensure table text is dark */
+    }
+    
+    /* Report sections with light blue background */
+    .medical-report > div {
+        background: #f0f9ff !important;
+        color: #1f2937 !important;
+    }
+    
+    /* Medical blue accents for UI elements */
+    .gr-button-primary {
+        background: var(--medical-blue) !important;
+        border-color: var(--medical-blue) !important;
+    }
+    
+    .gr-button-primary:hover {
+        background: var(--medical-blue-dark) !important;
+        border-color: var(--medical-blue-dark) !important;
+    }
+    
+    /* Accordion styling with medical theme */
+    .gr-accordion {
+        border-color: var(--medical-blue-light) !important;
+    }
+    
+    /* Slider track in medical blue */
+    input[type="range"]::-webkit-slider-track {
+        background: var(--bg-tertiary) !important;
+    }
+    
+    input[type="range"]::-webkit-slider-thumb {
+        background: var(--medical-blue) !important;
+    }
+    
+    /* Tab styling */
+    .gr-tab-item {
+        border-color: var(--medical-blue-light) !important;
+    }
+    
+    .gr-tab-item.selected {
+        background: var(--medical-blue) !important;
+        color: white !important;
+    }
+    """
+) as demo:
+    gr.Markdown("""
+    # 🏥 Medical Image Analyzer
+    
+    Supports **DICOM** (.dcm) and all image formats with automatic modality detection!
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            # File upload with custom styling - no file type restrictions
+            with gr.Group():
+                gr.Markdown("### 📤 Upload Medical Image")
+                file_input = gr.File(
+                    label="Select Medical Image File (.dcm, .dicom, IM_*, .png, .jpg, etc.)",
+                    file_count="single",
+                    type="filepath",
+                    elem_classes="file-upload"
+                    # Note: NO file_types parameter = accepts ALL files
+                )
+                gr.Markdown("""
+                <small style='color: #666;'>
+                Accepts: DICOM (.dcm, .dicom), Images (.png, .jpg, .jpeg, .tiff, .bmp), 
+                and files without extensions (e.g., IM_0001, IM_0002, etc.)
+                </small>
+                """)
+            
+            # Task selection
+            task = gr.Dropdown(
+                choices=[
+                    ("🎯 Point Analysis", "analyze_point"),
+                    ("🔬 Fat Segmentation (CT only)", "segment_fat"),
+                    ("📊 Full Analysis", "full_analysis")
+                ],
+                value="full_analysis",
+                label="Analysis Task"
+            )
+            
+            # ROI settings
+            with gr.Accordion("🎯 Region of Interest (ROI)", open=True):
+                roi_x = gr.Slider(0, 512, 256, label="X Position", step=1)
+                roi_y = gr.Slider(0, 512, 256, label="Y Position", step=1)
+                roi_radius = gr.Slider(5, 50, 10, label="Radius", step=1)
+            
+            # Clinical context
+            with gr.Accordion("🏥 Clinical Context", open=False):
+                symptoms = gr.CheckboxGroup(
+                    choices=[
+                        "Dyspnea", "Chest Pain", "Abdominal Pain",
+                        "Trauma", "Obesity Screening", "Routine Check"
+                    ],
+                    label="Symptoms/Indication"
+                )
+            
+            # Visualization options
+            with gr.Accordion("🎨 Visualization Options", open=True):
+                show_overlay = gr.Checkbox(
+                    label="Show ROI/Segmentation Overlay",
+                    value=True,
+                    info="Display ROI circle or fat segmentation overlay on the image"
+                )
+            
+            analyze_btn = gr.Button("🔬 Analyze", variant="primary", size="lg")
+        
+        with gr.Column(scale=2):
+            # Results with tabs for different views
+            with gr.Tab("🖼️ Original Image"):
+                image_display = gr.Image(label="Medical Image", type="numpy")
+                
+            with gr.Tab("🎯 Overlay View"):
+                overlay_display = gr.Image(label="Image with Overlay", type="numpy")
+            
+            file_info = gr.Textbox(label="File Information", lines=1)
+            
+            with gr.Tab("📊 Visual Report"):
+                report_html = gr.HTML()
+            
+            with gr.Tab("🔧 JSON Output"):
+                json_output = gr.JSON(label="Structured Data for AI Agents")
+    
+    # Examples and help
+    with gr.Row():
+        gr.Markdown("""
+        ### 📁 Supported Formats
+        - **DICOM**: Automatic HU value extraction and modality detection
+        - **PNG/JPG**: Interpreted as X-ray (CR) unless filename contains 'CT'
+        - **All Formats**: Automatic grayscale conversion
+        - **Files without extension**: Supported (e.g., IM_0001)
+        
+        ### 🎯 Usage
+        1. Upload a medical image file
+        2. Select the desired analysis task
+        3. For point analysis: Adjust the ROI position
+        4. Click "Analyze"
+        
+        ### 💡 Tips
+        - The ROI sliders will automatically adjust to your image size
+        - CT images show HU values, X-rays show intensity values
+        - Fat segmentation is only available for CT images
+        """)
+    
+    # Connect the interface
+    analyze_btn.click(
+        fn=process_and_analyze,
+        inputs=[file_input, task, roi_x, roi_y, roi_radius, symptoms, show_overlay],
+        outputs=[image_display, file_info, report_html, json_output, overlay_display]
+    )
+    
+    # Auto-update ROI limits when image is loaded
+    def update_roi_on_upload(file_obj):
+        if file_obj is None:
+            return gr.update(), gr.update()
+        
+        try:
+            analyzer = MedicalImageAnalyzer()
+            _, _, metadata = analyzer.process_file(file_obj.name if hasattr(file_obj, 'name') else str(file_obj))
+            
+            if 'shape' in metadata:
+                h, w = metadata['shape']
+                return gr.update(maximum=w-1, value=w//2), gr.update(maximum=h-1, value=h//2)
+        except:
+            pass
+        
+        return gr.update(), gr.update()
+    
+    file_input.change(
+        fn=update_roi_on_upload,
+        inputs=[file_input],
+        outputs=[roi_x, roi_y]
+    )
+
+    # Add custom JavaScript to translate upload text
+    demo.load(
+        None,
+        None,
+        None,
+        js="""
+        () => {
+            // Wait for the page to load
+            setTimeout(() => {
+                // Find and replace German text in upload component
+                const uploadElements = document.querySelectorAll('.wrap.svelte-12ioyct');
+                uploadElements.forEach(el => {
+                    if (el.textContent.includes('Datei hier ablegen')) {
+                        el.innerHTML = el.innerHTML
+                            .replace('Datei hier ablegen', 'Drop file here')
+                            .replace('oder', 'or')
+                            .replace('Hochladen', 'Click to upload');
+                    }
+                });
+                
+                // Also update the button text if it exists
+                const uploadButtons = document.querySelectorAll('button');
+                uploadButtons.forEach(btn => {
+                    if (btn.textContent.includes('Hochladen')) {
+                        btn.textContent = 'Upload';
+                    }
+                });
+            }, 100);
+        }
+        """
+    )
+
+if __name__ == "__main__":
+    demo.launch()