Update app.py

app.py

@@ -1,95 +1,53 @@
 import gradio as gr
+import numpy as np
+from PIL import Image, ImageDraw, ImageFont
 
-# Define the calculator function
-def calculator(num1, num2, operation):
-    if operation == "+":
+
+def calculate(num1, operator, num2):
+    if operator == "+":
         return num1 + num2
-    elif operation == "-":
+    elif operator == "-":
         return num1 - num2
-    elif operation == "*":
+    elif operator == "x":
         return num1 * num2
-    elif operation == "/":
-        if num2 != 0:
-            return num1 / num2
-        else:
-            return "Error: Division by zero"
+    elif operator == "/":
+        return num1 / num2
+
+
+def generate_image(num1, operator, num2, result):
+    # Define image size and font
+    image_size = (500, 200)
+    font_size = 80
+    font = ImageFont.truetype("arial.ttf", font_size)
+
+    # Create a blank image with white background
+    image = Image.new("RGB", image_size, (255, 255, 255))
+
+    # Draw the equation and result on the image
+    draw = ImageDraw.Draw(image)
+    equation = f"{num1} {operator} {num2} = {result}"
+    text_size = draw.textsize(equation, font=font)
+    position = ((image_size[0] - text_size[0]) / 2, (image_size[1] - text_size[1]) / 2)
+    draw.text(position, equation, font=font, fill=(0, 0, 0))
 
-# Define the button labels and values
-button_labels = ["7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", "0", ".", "=", "+"]
+    # Return the image as a numpy array
+    return np.array(image)
 
-button_values = [
-    [7, 8, 9, "/"],
-    [4, 5, 6, "*"],
-    [1, 2, 3, "-"],
-    [0, ".", "=", "+"]
+
+def calculator(num1, operator, num2):
+    result = calculate(num1, operator, num2)
+    image = generate_image(num1, operator, num2, result)
+    return image
+
+
+inputs = [
+    gr.inputs.Number(label="Number 1"),
+    gr.inputs.Dropdown(["+", "-", "x", "/"], label="Operator"),
+    gr.inputs.Number(label="Number 2"),
 ]
 
-# 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
-)
+outputs = gr.outputs.Image(type="numpy", label="Result")
+
+interface = gr.Interface(fn=calculator, inputs=inputs, outputs=outputs, title="Calculator", theme="compact")
 
-# 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
+interface.launch()