app.py

import gradio as gr
import base64
import json
import requests
from io import BytesIO
from PIL import Image
import traceback
from gradio_client import Client
from typing import Optional, Tuple, Dict, Any

class MCPImageAnalyzer:
    def __init__(self, space_url: str = "https://chris4k-mcp-images.hf.space"):
        """Initialize the MCP Image Analyzer client."""
        self.space_url = space_url.rstrip('/')
        self.client = None
        self.connection_status = "Disconnected"
        
    def connect(self) -> Tuple[str, str]:
        """Connect to the MCP server."""
        try:
            self.client = Client(self.space_url)
            # Test connection by checking if we can get the client info
            self.connection_status = "Connected ✅"
            return f"✅ Successfully connected to {self.space_url}", "success"
        except Exception as e:
            self.connection_status = "Connection Failed ❌"
            return f"❌ Failed to connect to {self.space_url}: {str(e)}", "error"
    
    def analyze_image(self, image: Image.Image) -> Dict[str, Any]:
        """Analyze an image using the MCP server."""
        if not self.client:
            return {"error": "Not connected to MCP server. Please connect first."}
        
        if image is None:
            return {"error": "No image provided"}
        
        try:
            result = self.client.predict(
                image=image,
                api_name="/analyze_image"
            )
            return json.loads(result) if isinstance(result, str) else result
        except Exception as e:
            return {"error": f"Analysis failed: {str(e)}"}
    
    def get_orientation(self, image: Image.Image) -> str:
        """Get image orientation using the MCP server."""
        if not self.client:
            return "❌ Not connected to MCP server"
        
        if image is None:
            return "❌ No image provided"
        
        try:
            result = self.client.predict(
                image=image,
                api_name="/get_image_orientation"
            )
            return f"📐 Orientation: {result}"
        except Exception as e:
            return f"❌ Error: {str(e)}"
    
    def analyze_colors(self, image: Image.Image) -> str:
        """Analyze colors using the MCP server."""
        if not self.client:
            return "❌ Not connected to MCP server"
        
        if image is None:
            return "❌ No image provided"
        
        try:
            result = self.client.predict(
                image=image,
                api_name="/count_colors"
            )
            return f"🎨 Color Analysis:\n{result}"
        except Exception as e:
            return f"❌ Error: {str(e)}"
    
    def extract_text_info(self, image: Image.Image) -> Dict[str, Any]:
        """Extract text info using the MCP server."""
        if not self.client:
            return {"error": "Not connected to MCP server"}
        
        if image is None:
            return {"error": "No image provided"}
        
        try:
            result = self.client.predict(
                image=image,
                api_name="/extract_text_info"
            )
            return json.loads(result) if isinstance(result, str) else result
        except Exception as e:
            return {"error": f"Text analysis failed: {str(e)}"}

# Initialize the analyzer
analyzer = MCPImageAnalyzer()

def create_sample_images():
    """Create sample test images."""
    samples = {}
    
    # Red rectangle
    img1 = Image.new('RGB', (400, 300), color='red')
    samples["Red Rectangle (400x300)"] = img1
    
    # Blue square
    img2 = Image.new('RGB', (300, 300), color='blue')
    samples["Blue Square (300x300)"] = img2
    
    # Colorful gradient
    img3 = Image.new('RGB', (200, 400))
    pixels = img3.load()
    for i in range(200):
        for j in range(400):
            pixels[i, j] = (i % 256, j % 256, (i + j) % 256)
    samples["Colorful Gradient (200x400)"] = img3
    
    # Simple pattern
    img4 = Image.new('RGB', (100, 100), color='white')
    pixels = img4.load()
    for i in range(100):
        for j in range(100):
            if (i // 10 + j // 10) % 2:
                pixels[i, j] = (0, 0, 0)
    samples["Checkerboard Pattern (100x100)"] = img4
    
    return samples

def connect_to_server():
    """Connect to the MCP server."""
    status, status_type = analyzer.connect()
    if status_type == "success":
        return status, gr.update(variant="primary"), gr.update(visible=True)
    else:
        return status, gr.update(variant="stop"), gr.update(visible=False)

def run_comprehensive_analysis(image):
    """Run all analysis functions on the uploaded image."""
    if image is None:
        return "❌ Please upload an image first", "", "", ""
    
    # Run all analyses
    analysis = analyzer.analyze_image(image)
    orientation = analyzer.get_orientation(image)
    colors = analyzer.analyze_colors(image)
    text_info = analyzer.extract_text_info(image)
    
    # Format results
    analysis_result = json.dumps(analysis, indent=2) if isinstance(analysis, dict) else str(analysis)
    text_result = json.dumps(text_info, indent=2) if isinstance(text_info, dict) else str(text_info)
    
    return analysis_result, orientation, colors, text_result

def load_sample_image(sample_name):
    """Load a sample image."""
    samples = create_sample_images()
    return samples.get(sample_name, None)

# Create the Gradio interface
with gr.Blocks(title="MCP Image Analysis Test Client", theme=gr.themes.Soft()) as demo:
    gr.HTML("""
    <div style="text-align: center; padding: 20px;">
        <h1>🖼️ MCP Image Analysis Test Client</h1>
        <p>Test your Gradio MCP Image Analysis server with this interactive client</p>
        <p><strong>Server:</strong> <code>https://chris4k-mcp-images.hf.space</code></p>
    </div>
    """)
    
    # Connection section
    with gr.Row():
        with gr.Column():
            gr.Markdown("## 🔌 Connection")
            connect_btn = gr.Button("Connect to MCP Server", variant="primary", size="lg")
            connection_status = gr.Textbox(
                label="Connection Status", 
                value="Not connected", 
                interactive=False
            )
    
    # Main testing interface (initially hidden)
    main_interface = gr.Column(visible=False)
    
    with main_interface:
        gr.Markdown("## 🧪 Image Analysis Testing")
        
        with gr.Row():
            with gr.Column(scale=1):
                gr.Markdown("### 📤 Upload Image")
                image_input = gr.Image(
                    label="Upload Image for Analysis",
                    type="pil",
                    height=300
                )
                
                gr.Markdown("### 🎯 Quick Test Samples")
                sample_dropdown = gr.Dropdown(
                    choices=list(create_sample_images().keys()),
                    label="Load Sample Image",
                    value=None
                )
                load_sample_btn = gr.Button("Load Sample", size="sm")
                
                gr.Markdown("### 🚀 Run Analysis")
                analyze_btn = gr.Button("Analyze Image", variant="primary", size="lg")
                
            with gr.Column(scale=2):
                gr.Markdown("### 📊 Analysis Results")
                
                with gr.Tabs():
                    with gr.Tab("📈 Comprehensive Analysis"):
                        analysis_output = gr.Code(
                            label="Full Image Analysis",
                            language="json",
                            lines=15
                        )
                    
                    with gr.Tab("📐 Orientation"):
                        orientation_output = gr.Textbox(
                            label="Image Orientation",
                            lines=3
                        )
                    
                    with gr.Tab("🎨 Color Analysis"):
                        color_output = gr.Textbox(
                            label="Color Information",
                            lines=10
                        )
                    
                    with gr.Tab("📝 Text Detection"):
                        text_output = gr.Code(
                            label="Text Analysis",
                            language="json",
                            lines=10
                        )
        
        # Individual tool testing section
        gr.Markdown("## 🔧 Individual Tool Testing")
        
        with gr.Row():
            with gr.Column():
                gr.Markdown("### Single Tool Tests")
                single_image = gr.Image(label="Image for Single Tool Test", type="pil", height=200)
                
                with gr.Row():
                    orient_btn = gr.Button("Check Orientation", size="sm")
                    color_btn = gr.Button("Analyze Colors", size="sm")
                
                single_result = gr.Textbox(
                    label="Single Tool Result",
                    lines=5
                )
        
        # Usage examples and help
        with gr.Accordion("📖 Usage Guide & Examples", open=False):
            gr.Markdown("""
            ## How to Use This Test Client
            
            1. **Connect**: Click "Connect to MCP Server" to establish connection
            2. **Upload Image**: Use the image upload area or load a sample image
            3. **Analyze**: Click "Analyze Image" to run all analysis tools
            4. **Review Results**: Check different tabs for specific analysis results
            
            ## Available Analysis Tools
            
            - **📈 Comprehensive Analysis**: Complete image metadata (dimensions, format, colors, etc.)
            - **📐 Orientation Detection**: Portrait, Landscape, or Square
            - **🎨 Color Analysis**: Dominant colors and color count
            - **📝 Text Detection**: Basic text presence analysis
            
            ## Sample Images
            
            Try the built-in sample images to test different scenarios:
            - Different orientations (portrait vs landscape)
            - Various color schemes
            - Different dimensions and formats
            
            ## Testing with Claude Desktop
            
            This same MCP server can be used with Claude Desktop by adding this configuration:
            
            ```json
            {
              "mcpServers": {
                "image-analysis": {
                  "url": "https://chris4k-mcp-images.hf.space/gradio_api/mcp/sse"
                }
              }
            }
            ```
            """)
    
    # Event handlers
    connect_btn.click(
        connect_to_server,
        outputs=[connection_status, connect_btn, main_interface]
    )
    
    load_sample_btn.click(
        load_sample_image,
        inputs=[sample_dropdown],
        outputs=[image_input]
    )
    
    analyze_btn.click(
        run_comprehensive_analysis,
        inputs=[image_input],
        outputs=[analysis_output, orientation_output, color_output, text_output]
    )
    
    # Individual tool tests
    orient_btn.click(
        analyzer.get_orientation,
        inputs=[single_image],
        outputs=[single_result]
    )
    
    color_btn.click(
        analyzer.analyze_colors,
        inputs=[single_image],
        outputs=[single_result]
    )

# Launch the app
if __name__ == "__main__":
    demo.launch(
        debug=True,
        share=True, 
        show_error=True
    )