Update app.py from anycoder

app.py

@@ -1,201 +1,269 @@
 import gradio as gr
 
-def calculator(num1, operation, num2):
+def calculate(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
+    try:
+        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
+    except Exception as e:
+        raise gr.Error(f"Calculation error: {str(e)}")
+
+# Modern, minimal CSS
 custom_css = """
-/* Container and layout */
+/* Global container */
 .gradio-container {
-    max-width: 500px !important;
+    max-width: 420px !important;
     margin: 0 auto !important;
+    padding: 1.5rem 1rem !important;
 }
 
-/* Header styling */
-.header-title {
+/* Header */
+.calc-header {
     text-align: center;
-    font-size: 2.5rem !important;
+    margin-bottom: 2rem !important;
+}
+
+.calc-title {
+    font-size: 2rem !important;
     font-weight: 700 !important;
     margin-bottom: 0.5rem !important;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    color: #1e293b !important;
 }
 
-.header-subtitle {
-    text-align: center;
-    font-size: 0.95rem !important;
+.calc-subtitle {
+    font-size: 0.875rem !important;
     color: #64748b !important;
-    margin-bottom: 2rem !important;
 }
 
-/* Input fields */
-.input-group {
-    margin-bottom: 1rem !important;
+/* Calculator card */
+.calc-card {
+    background: #ffffff !important;
+    border-radius: 20px !important;
+    padding: 1.5rem !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
+
+/* Input styling */
+.calc-input label {
+    font-size: 0.875rem !important;
+    font-weight: 600 !important;
+    color: #475569 !important;
+    margin-bottom: 0.5rem !important;
+}
+
+.calc-input input {
+    font-size: 1.25rem !important;
+    text-align: center !important;
+    border-radius: 12px !important;
+    border: 2px solid #e2e8f0 !important;
+    transition: all 0.2s ease !important;
+}
+
+.calc-input input:focus {
+    border-color: #6366f1 !important;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
+}
+
+/* Operation buttons */
+.operation-btns {
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important;
+    gap: 0.75rem !important;
+    margin: 1.5rem 0 !important;
+}
+
+.operation-btns button {
+    height: 60px !important;
+    font-size: 1.5rem !important;
+    border-radius: 12px !important;
+    border: 2px solid #e2e8f0 !important;
+    background: #ffffff !important;
+    color: #475569 !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+}
+
+.operation-btns button:hover {
+    background: #f8fafc !important;
+    border-color: #6366f1 !important;
+    transform: translateY(-2px) !important;
+}
+
+.operation-btns button.selected {
+    background: #6366f1 !important;
+    color: white !important;
+    border-color: #6366f1 !important;
 }
 
 /* Result display */
-.result-display {
+.result-box {
     background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%) !important;
-    border-radius: 12px !important;
+    border-radius: 16px !important;
     padding: 1.5rem !important;
-    margin-top: 1rem !important;
+    margin-top: 1.5rem !important;
+    border: 2px solid #e0e7ff !important;
 }
 
-/* Button styling */
-.calculate-btn button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-    border: none !important;
+.result-box label {
+    font-size: 0.875rem !important;
     font-weight: 600 !important;
-    font-size: 1.1rem !important;
-    padding: 0.75rem 2rem !important;
-    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+    color: #4338ca !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
 }
 
-.calculate-btn button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3) !important;
+.result-box input {
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    color: #4338ca !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* Examples */
+.examples-section {
+    margin-top: 2rem !important;
+    padding-top: 1.5rem !important;
+    border-top: 1px solid #e2e8f0 !important;
 }
 
-/* Examples section */
 .examples-title {
-    font-size: 0.9rem !important;
+    font-size: 0.875rem !important;
     font-weight: 600 !important;
-    color: #475569 !important;
-    margin-top: 1.5rem !important;
-    margin-bottom: 0.75rem !important;
+    color: #64748b !important;
+    text-align: center !important;
+    margin-bottom: 1rem !important;
 }
 
-/* Mobile responsiveness */
-@media (max-width: 640px) {
-    .header-title {
-        font-size: 2rem !important;
+/* Mobile optimization */
+@media (max-width: 480px) {
+    .gradio-container {
+        padding: 1rem 0.75rem !important;
     }
     
-    .gradio-container {
-        padding: 1rem !important;
+    .calc-title {
+        font-size: 1.75rem !important;
     }
     
-    .calculate-btn button {
-        width: 100% !important;
-        font-size: 1rem !important;
+    .calc-card {
+        padding: 1.25rem !important;
+    }
+    
+    .operation-btns button {
+        height: 55px !important;
+        font-size: 1.25rem !important;
+    }
+    
+    .result-box input {
+        font-size: 1.75rem !important;
     }
 }
 
-/* Radio button styling */
-.radio-group label {
-    font-size: 1rem !important;
-    padding: 0.5rem !important;
-}
-
-/* Number input styling */
-input[type="number"] {
-    font-size: 1.1rem !important;
-    padding: 0.75rem !important;
+/* Footer link styling */
+footer a {
+    color: #6366f1 !important;
+    font-weight: 600 !important;
 }
 """
 
-# Build the Gradio app
-with gr.Blocks(fill_height=False) as demo:
+# Build the app with minimal components
+with gr.Blocks() as demo:
     # Header
-    gr.Markdown("# 🧮 Calculator", elem_classes="header-title")
-    gr.Markdown(
-        "Simple & elegant calculator built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)",
-        elem_classes="header-subtitle"
-    )
+    with gr.Group(elem_classes="calc-header"):
+        gr.Markdown("# 🧮 Calculator", elem_classes="calc-title")
+        gr.Markdown(
+            "Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)",
+            elem_classes="calc-subtitle"
+        )
     
-    # Input section
-    with gr.Group():
+    # Calculator card
+    with gr.Group(elem_classes="calc-card"):
+        # First number
         num1 = gr.Number(
             label="First Number",
-            placeholder="0",
             value=0,
-            elem_classes="input-group"
+            elem_classes="calc-input"
         )
         
+        # Operation selector (simplified to radio)
         operation = gr.Radio(
-            choices=["➕ Add", "➖ Subtract", "✖️ Multiply", "➗ Divide"],
-            value="➕ Add",
+            choices=[
+                ("➕", "add"),
+                ("➖", "subtract"),
+                ("✖️", "multiply"),
+                ("➗", "divide")
+            ],
+            value="add",
             label="Operation",
-            elem_classes="input-group"
+            elem_classes="operation-btns"
         )
         
+        # Second number
         num2 = gr.Number(
             label="Second Number",
-            placeholder="0",
             value=0,
-            elem_classes="input-group"
+            elem_classes="calc-input"
         )
-    
-    # Calculate button
-    calculate_btn = gr.Button(
-        "Calculate",
-        variant="primary",
-        size="lg",
-        elem_classes="calculate-btn"
-    )
-    
-    # Result section
-    with gr.Group(elem_classes="result-display"):
+        
+        # Result display
         result = gr.Number(
             label="Result",
             interactive=False,
-            show_label=True
+            elem_classes="result-box"
         )
     
     # Examples section
-    gr.Markdown("**Quick Examples**", elem_classes="examples-title")
-    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
-    calculate_btn.click(
-        fn=calculator,
-        inputs=[num1, operation, num2],
-        outputs=[result],
-        api_visibility="public"
-    )
+    with gr.Group(elem_classes="examples-section"):
+        gr.Markdown("**Try these examples**", elem_classes="examples-title")
+        gr.Examples(
+            examples=[
+                [45, "add", 3],
+                [100, "subtract", 25],
+                [12, "multiply", 8],
+                [144, "divide", 12],
+            ],
+            inputs=[num1, operation, num2],
+            outputs=[result],
+            fn=calculate,
+            cache_examples=False
+        )
     
-    # Also calculate on Enter key
-    num1.submit(calculator, [num1, operation, num2], result)
-    num2.submit(calculator, [num1, operation, num2], result)
+    # Auto-calculate on any input change
+    for component in [num1, num2, operation]:
+        component.change(
+            fn=calculate,
+            inputs=[num1, operation, num2],
+            outputs=[result],
+            api_visibility="public"
+        )
 
 if __name__ == "__main__":
     demo.launch(
         theme=gr.themes.Soft(
             primary_hue="indigo",
-            secondary_hue="purple",
+            secondary_hue="blue",
             neutral_hue="slate",
             font=gr.themes.GoogleFont("Inter"),
-            text_size="lg",
+            text_size="md",
             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, #5568d3 0%, #6a4291 100%)",
+            body_background_fill="#f8fafc",
             block_title_text_weight="600",
-            block_label_text_weight="500",
+            block_label_text_weight="600",
+            button_primary_background_fill="#6366f1",
+            button_primary_background_fill_hover="#4f46e5",
+            button_primary_text_color="white",
         ),
         css=custom_css,
         footer_links=[