app.py

import gradio as gr

def calculator(num1, operation, num2):
    """Perform basic arithmetic operations."""
    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 = """
/* Container styling */
.gradio-container {
    max-width: 500px !important;
    margin: 0 auto !important;
}

/* Header styling */
.header-container {
    text-align: center;
    padding: 1.5rem 0 1rem 0;
}

.header-container h1 {
    font-size: 2rem;
    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;
}

/* Input/Output styling */
.input-group {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Button styling */
.calculate-btn button {
    width: 100%;
    height: 3.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
}

.calculate-btn button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

/* Result styling */
.result-display {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem 0;
}

/* Radio button styling */
.radio-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
}

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

/* Mobile responsive */
@media (max-width: 640px) {
    .header-container h1 {
        font-size: 1.75rem;
    }
    
    .input-group {
        padding: 1rem;
    }
    
    .calculate-btn button {
        height: 3rem;
        font-size: 1rem;
    }
}
"""

# Create the Gradio app
with gr.Blocks(fill_height=False) as demo:
    # Header
    with gr.Column(elem_classes="header-container"):
        gr.Markdown("# 🧮 Calculator")
        gr.Markdown(
            "Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)",
            elem_classes="header-link"
        )
    
    # Input Section
    with gr.Column(elem_classes="input-group"):
        num1 = gr.Number(
            label="First Number",
            placeholder="0",
            value=0,
            container=True,
            scale=1
        )
        
        operation = gr.Radio(
            choices=["➕ Add", "➖ Subtract", "✖️ Multiply", "➗ Divide"],
            value="➕ Add",
            label="Operation",
            elem_classes="radio-group"
        )
        
        num2 = gr.Number(
            label="Second Number",
            placeholder="0",
            value=0,
            container=True,
            scale=1
        )
    
    # Calculate Button
    with gr.Column(elem_classes="calculate-btn"):
        submit_btn = gr.Button(
            "Calculate",
            variant="primary",
            size="lg"
        )
    
    # Result Section
    with gr.Column(elem_classes="result-display"):
        result = gr.Number(
            label="Result",
            interactive=False,
            container=True,
            scale=1
        )
    
    # Examples Section
    with gr.Column(elem_classes="examples-container"):
        gr.Markdown("### Quick Examples")
        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"
    )
    
    # Also trigger on Enter key
    num1.submit(
        fn=calculator,
        inputs=[num1, operation, num2],
        outputs=[result]
    )
    
    num2.submit(
        fn=calculator,
        inputs=[num1, operation, num2],
        outputs=[result]
    )

if __name__ == "__main__":
    demo.launch(
        theme=gr.themes.Soft(
            primary_hue="indigo",
            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="*primary_600",
            button_primary_background_fill_hover="*primary_700",
            block_title_text_weight="600",
            block_label_text_weight="500",
        ),
        css=custom_css,
        footer_links=[
            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
        ]
    )