Create frontend.py

frontend.py

@@ -0,0 +1,112 @@
+import gradio as gr
+import requests
+
+BACKEND_URL = "http://127.0.0.1:8000"  # Update this if your backend is on a different host/port
+
+# Global variable to store calculation history
+history = []
+
+def calculate(expression):
+    try:
+        response = requests.post(f"{BACKEND_URL}/calculate", json={"expr": expression})
+        if response.status_code == 200:
+            result = response.json()["result"]
+            result_str = f"{result:.8f}".rstrip('0').rstrip('.')
+            global history
+            history.append(f"{expression} = {result_str}")
+            history = history[-5:]
+            return "0", result_str, "\n".join(reversed(history))
+        else:
+            error_data = response.json()
+            error_message = error_data.get("detail", "An unknown error occurred")
+            return expression, f"Error: {error_message}", "\n".join(reversed(history))
+    except requests.RequestException as e:
+        return expression, f"Network Error: {str(e)}", "\n".join(reversed(history))
+
+def update_expression(expression, value):
+    if expression == "0" and value not in ['.', '(', ')']:
+        return value
+    if value in ['sin', 'cos', 'tan', 'log', 'ln', 'sqrt']:
+        return expression + value + '('
+    return expression + value
+
+def backspace(expression):
+    return expression[:-1] if len(expression) > 1 else "0"
+
+def clear(expression):
+    return "0"
+
+css = """
+.calculator-display { font-family: 'Digital-7', 'Courier New', monospace; font-size: 24px; }
+.calculator-result { font-family: 'Digital-7', 'Courier New', monospace; font-size: 72px; }
+.calculator-button { font-family: 'Arial', sans-serif; font-size: 18px; }
+.number-button { background-color: #e0e0e0; }
+.basic-op-button { background-color: #f0f0f0; }
+.advanced-op-button { background-color: #ffa500; }
+.calculator-box { border: 1px solid #ccc; padding: 10px; margin: 5px; border-radius: 5px; }
+"""
+
+def create_interface():
+    with gr.Blocks(css=css) as iface:
+        gr.Markdown("# Scientific Calculator")
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                display = gr.Textbox(value="0", label="Display", elem_classes=["calculator-display"])
+            with gr.Column(scale=1):
+                result_display = gr.Textbox(value="", label="Result", elem_classes=["calculator-result"])
+        
+        with gr.Row():
+            history_display = gr.Textbox(label="History (Last 5 Calculations)", lines=5)
+        
+        with gr.Row():
+            with gr.Column(scale=2):
+                with gr.Column(elem_classes=["calculator-box"]):
+                    # Number pad (3x4 grid)
+                    for i in range(3):
+                        with gr.Row():
+                            for j in range(3):
+                                num = str(7 - 3*i + j)
+                                gr.Button(num, elem_classes=["calculator-button", "number-button"]).click(
+                                    lambda x, v=num: update_expression(x, v), inputs=display, outputs=display)
+                    with gr.Row():
+                        gr.Button("0", elem_classes=["calculator-button", "number-button"]).click(
+                            lambda x: update_expression(x, "0"), inputs=display, outputs=display)
+                        gr.Button(".", elem_classes=["calculator-button", "number-button"]).click(
+                            lambda x: update_expression(x, "."), inputs=display, outputs=display)
+                        gr.Button("=", elem_classes=["calculator-button", "basic-op-button"]).click(
+                            calculate, inputs=display, outputs=[display, result_display, history_display])
+            
+            with gr.Column(scale=1):
+                with gr.Column(elem_classes=["calculator-box"]):
+                    # Basic operations
+                    for op, symbol in [("add", "+"), ("sub", "-"), ("mul", "*"), ("div", "/")]:
+                        gr.Button(symbol, elem_classes=["calculator-button", "basic-op-button"]).click(
+                            lambda x, v=symbol: update_expression(x, v), inputs=display, outputs=display)
+                    gr.Button("(", elem_classes=["calculator-button", "basic-op-button"]).click(
+                        lambda x: update_expression(x, "("), inputs=display, outputs=display)
+                    gr.Button(")", elem_classes=["calculator-button", "basic-op-button"]).click(
+                        lambda x: update_expression(x, ")"), inputs=display, outputs=display)
+                    gr.Button("C", elem_classes=["calculator-button", "basic-op-button"]).click(
+                        clear, inputs=display, outputs=display)
+                    gr.Button("⌫", elem_classes=["calculator-button", "basic-op-button"]).click(
+                        backspace, inputs=display, outputs=display)
+            
+            with gr.Column(scale=1):
+                with gr.Column(elem_classes=["calculator-box"]):
+                    # Advanced operations
+                    for func in ["sin", "cos", "tan", "log", "ln", "sqrt"]:
+                        gr.Button(func, elem_classes=["calculator-button", "advanced-op-button"]).click(
+                            lambda x, v=func: update_expression(x, v), inputs=display, outputs=display)
+                    gr.Button("^", elem_classes=["calculator-button", "advanced-op-button"]).click(
+                        lambda x: update_expression(x, "^"), inputs=display, outputs=display)
+                    gr.Button("π", elem_classes=["calculator-button", "advanced-op-button"]).click(
+                        lambda x: update_expression(x, "pi"), inputs=display, outputs=display)
+                    gr.Button("e", elem_classes=["calculator-button", "advanced-op-button"]).click(
+                        lambda x: update_expression(x, "e"), inputs=display, outputs=display)
+
+    return iface
+
+if __name__ == "__main__":
+    iface = create_interface()
+    iface.launch()