app.py

import gradio as gr

def calculator(num1, operation, num2):
    if operation == "add":
        return num1 + num2
    elif operation == "subtract":
        return num1 - num2
    elif operation == "multiply":
        return num1 * num2
    elif operation == "divide":
        if num2 == 0:
            raise gr.Error("Cannot divide by zero!")
        return num1 / num2

# Custom CSS for modern, mobile-friendly design
custom_css = """
/* Mobile-first responsive design */
.gradio-container {
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 1rem !important;
}

/* Header styling */
.header-section {
    text-align: center;
    margin-bottom: 2rem;
}

.header-section h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-link {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

/* Calculator card */
.calculator-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Input styling */
.input-group {
    margin-bottom: 1rem;
}

/* Operation buttons */
.operation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}

/* Result display */
.result-display {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    margin: 1.5rem 0;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-display .output-class {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: white !important;
}

/* Button styling */
.calculate-btn {
    width: 100%;
    padding: 1rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    border-radius: 0.75rem !important;
    margin: 1rem 0 !important;
}

/* Examples section */
.examples-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .header-section h1 {
        font-size: 2rem;
    }
    
    .calculator-card {
        padding: 1rem;
    }
    
    .result-display .output-class {
        font-size: 1.5rem !important;
    }
}

/* Smooth transitions */
* {
    transition: all 0.2s ease-in-out;
}
"""

with gr.Blocks(fill_height=True) as demo:
    # Header
    with gr.Row(elem_classes="header-section"):
        gr.Markdown(
            """
            # 🧮 Calculator
            
            [Built with anycoder](https://huggingface.co/spaces/akhaliq/anycoder)
            """,
            elem_classes="header-link"
        )
    
    # Main calculator interface
    with gr.Column(elem_classes="calculator-card"):
        # Input numbers
        num1 = gr.Number(
            label="First Number",
            placeholder="0",
            value=0,
            elem_classes="input-group"
        )
        
        # Operation selector - using radio for clarity
        operation = gr.Radio(
            choices=["add", "subtract", "multiply", "divide"],
            value="add",
            label="Operation",
            elem_classes="input-group"
        )
        
        num2 = gr.Number(
            label="Second Number",
            placeholder="0",
            value=0,
            elem_classes="input-group"
        )
        
        # Calculate button
        submit_btn = gr.Button(
            "Calculate",
            variant="primary",
            size="lg",
            elem_classes="calculate-btn"
        )
        
        # Result display
        result = gr.Number(
            label="Result",
            interactive=False,
            elem_classes="result-display"
        )
    
    # Examples section
    with gr.Column(elem_classes="examples-section"):
        gr.Markdown("### Quick Examples")
        gr.Examples(
            examples=[
                [45, "add", 3],
                [100, "subtract", 25],
                [12, "multiply", 8],
                [144, "divide", 12],
            ],
            inputs=[num1, operation, num2],
            outputs=[result],
            fn=calculator,
            cache_examples=False
        )
    
    # Event handlers
    submit_btn.click(
        fn=calculator,
        inputs=[num1, operation, num2],
        outputs=[result],
        api_visibility="public"
    )
    
    # Allow Enter key to calculate
    num2.submit(
        fn=calculator,
        inputs=[num1, operation, num2],
        outputs=[result]
    )

if __name__ == "__main__":
    demo.launch(
        theme=gr.themes.Soft(
            primary_hue="violet",
            secondary_hue="purple",
            neutral_hue="slate",
            font=gr.themes.GoogleFont("Inter"),
            text_size="lg",
            spacing_size="md",
            radius_size="lg"
        ).set(
            button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
            button_primary_background_fill_hover="linear-gradient(135deg, #764ba2 0%, #667eea 100%)",
            block_title_text_weight="600",
            block_border_width="0px",
            input_background_fill="rgba(255, 255, 255, 0.05)",
        ),
        css=custom_css,
        footer_links=[
            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
        ]
    )