app.py

import gradio as gr
import requests
import re

API_URL = "http://localhost:8000/calculate"

def calculate(expression):
    response = requests.post(API_URL, json={"expression": expression})
    result = response.json()
    if "error" in result:
        return result["error"]
    return result["result"]

def clear_display():
    return ""

def append_symbol(current_expression, symbol):
    return current_expression + symbol

def validate_expression(expression):
    if expression == "ERROR":
        return expression
    valid_expression = re.sub(r'[^0-9+\-*/.]', '', expression)
    return valid_expression

with gr.Blocks() as demo:
    display = gr.Textbox(max_lines=1, value="", label="Expression", interactive=True)
    display.change(fn=validate_expression, inputs=display, outputs=display)

    with gr.Row():
        gr.Button("AC", variant="primary", scale=3, elem_classes=["btn-AC"]).click(clear_display, outputs=display)
        gr.Button("+", variant="primary", scale=1, elem_classes=["btn"]).click(lambda x: append_symbol(x, "+"), inputs=display, outputs=display)
    
    with gr.Row():
        for symbol in ["7", "8", "9"]:
            gr.Button(symbol, elem_classes=["btn"]).click(lambda x, s=symbol: append_symbol(x, s), inputs=display, outputs=display)
        gr.Button("-", variant="primary", elem_classes=["btn"]).click(lambda x: append_symbol(x, "-"), inputs=display, outputs=display)
            
    with gr.Row():
        for symbol in ["4", "5", "6"]:
            gr.Button(symbol, elem_classes=["btn"]).click(lambda x, s=symbol: append_symbol(x, s), inputs=display, outputs=display)
        gr.Button("x", variant="primary", elem_classes=["btn"]).click(lambda x: append_symbol(x, "*"), inputs=display, outputs=display)
            
    with gr.Row():
        for symbol in ["1", "2", "3"]:
            gr.Button(symbol, elem_classes=["btn"]).click(lambda x, s=symbol: append_symbol(x, s), inputs=display, outputs=display)
        gr.Button("/", variant="primary", elem_classes=["btn"]).click(lambda x: append_symbol(x, "/"), inputs=display, outputs=display)
            
    with gr.Row():
        for symbol in ["0", "."]:
            gr.Button(symbol, elem_classes=["btn"]).click(lambda x, s=symbol: append_symbol(x, s), inputs=display, outputs=display)
        gr.Button("=", variant="primary", scale=2, elem_classes=["btn-equalto"]).click(calculate, inputs=display, outputs=display)
    display.submit(calculate, inputs=display, outputs=display)
        
demo.css = '''
body, .gradio-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.gradio-container {
    flex-direction: column;
    width: auto;
}
.btn {
    font-size: 1.5rem;
    min-width: 5rem;
    max-width: 6rem;
}
.btn-AC{
    font-size: 1.5rem;
    min-width: 5rem;
    max-width: 20rem;
}
.btn-equalto{
    font-size: 1.5rem;
    min-width: 5rem;
    max-width: 13rem;
}
'''

demo.launch()