Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 
+# Define the calculator function
 def calculator(num1, num2, operation):
     if operation == "+":
         return num1 + num2
@@ -13,12 +14,82 @@ def calculator(num1, num2, operation):
         else:
             return "Error: Division by zero"
 
-iface = gr.Interface(fn=calculator, 
-                     inputs=[gr.inputs.Number(default=0, label="Num1"), 
-                             gr.inputs.Number(default=0, label="Num2"), 
-                             gr.inputs.Radio(["+", "-", "*", "/"], label="Operation")], 
-                     outputs=gr.outputs.Textbox(type="text", label="Result"), 
-                     title="Calculator with Buttons",
-                     theme="compact")
+# Define the button labels and values
+button_labels = ["7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+"]
 
-iface.launch()
+button_values = [
+    [7, 8, 9, "/"],
+    [4, 5, 6, "*"],
+    [1, 2, 3, "-"],
+    [0, ".", "=", "+"]
+]
+
+# Define the interface
+iface = gr.Interface(
+    fn=calculator,
+    inputs=[
+        gr.inputs.Number(default=0, label="Num1", key="num1"),
+        gr.inputs.Number(default=0, label="Num2", key="num2"),
+        gradio.inputs.InputGroup(button_labels, button_values, label="Operation", key="operation")
+    ],
+    outputs=gr.outputs.Textbox(type="text", label="Result"),
+    title="Calculator with Buttons",
+    theme="default",
+    layout="unaligned",
+    allow_flagging=False,
+    allow_screenshot=False,
+    allow_share=False
+)
+
+# Define the custom HTML and CSS for the interface
+html = """
+<style>
+    .button-group {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 10px;
+        margin-top: 10px;
+        margin-bottom: 20px;
+    }
+    .button-group button {
+        font-size: 24px;
+        font-weight: bold;
+        color: white;
+        background-color: #444444;
+        border: none;
+        border-radius: 5px;
+        padding: 10px;
+        cursor: pointer;
+    }
+    .button-group button:hover {
+        background-color: #555555;
+    }
+    .button-group button:active {
+        background-color: #666666;
+    }
+    .button-group button[data-value="="] {
+        background-color: #009900;
+    }
+    .button-group button[data-value="+"],
+    .button-group button[data-value="-"],
+    .button-group button[data-value="*"],
+    .button-group button[data-value="/"] {
+        background-color: #ff6600;
+    }
+    .button-group button[data-value="."],
+    .button-group button[data-value="0"] {
+        grid-column: span 2;
+    }
+    .output-container {
+        margin-top: 20px;
+    }
+</style>
+<div class="input-container">
+    <label for="num1">Num1:</label>
+    <input id="num1" type="number" name="num1" value="{{ num1 }}" step="any" required>
+</div>
+<div class="input-container">
+    <label for="num2">Num2:</label>
+    <input id="num2" type="number" name="num2" value="{{ num2 }}" step="any" required>
+</div>
+<div class