Update app.py from anycoder

app.py

@@ -12,71 +12,218 @@ def calculator(num1, operation, num2):
             raise gr.Error("Cannot divide by zero!")
         return num1 / num2
 
-with gr.Blocks() as demo:
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("# 🧮 Calculator")
-            gr.Markdown("Built with [anycoder](https://huggingface.co/spaces/akhaliq/anycoder)", elem_classes="header-link")
+# 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;
+    }
     
-    with gr.Row():
-        with gr.Column(scale=1, min_width=280):
-            num1 = gr.Number(
-                label="First Number",
-                placeholder="Enter first number"
-            )
-            operation = gr.Radio(
-                ["add", "subtract", "multiply", "divide"],
-                value="add",
-                label="Operation"
-            )
-            num2 = gr.Number(
-                label="Second Number", 
-                placeholder="Enter second number"
-            )
+    .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"
+        )
         
-    with gr.Row():
+        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"
+            size="lg",
+            elem_classes="calculate-btn"
         )
         
-    with gr.Row():
+        # Result display
         result = gr.Number(
             label="Result",
-            interactive=False
+            interactive=False,
+            elem_classes="result-display"
         )
     
-    with gr.Row():
-        examples = gr.Examples(
+    # Examples section
+    with gr.Column(elem_classes="examples-section"):
+        gr.Markdown("### Quick Examples")
+        gr.Examples(
             examples=[
                 [45, "add", 3],
-                [3.14, "divide", 2],
-                [144, "multiply", 2.5],
-                [0, "subtract", 1.2],
+                [100, "subtract", 25],
+                [12, "multiply", 8],
+                [144, "divide", 12],
             ],
             inputs=[num1, operation, num2],
             outputs=[result],
-            fn=calculator
+            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="indigo",
-            secondary_hue="slate",
-            neutral_hue="stone",
+            primary_hue="violet",
+            secondary_hue="purple",
+            neutral_hue="slate",
             font=gr.themes.GoogleFont("Inter"),
-            text_size="md",
+            text_size="lg",
             spacing_size="md",
-            radius_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)",
         ),
-        footer_links=[{"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}]
+        css=custom_css,
+        footer_links=[
+            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
+        ]
     )