Update index.html

index.html

@@ -1,57 +1,99 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Calculator & Function Plotter</title>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+</head>
+<body>
+    <gradio-lite>
+<gradio-requirements>
+numpy
+matplotlib
+</gradio-requirements>
+
+<gradio-file name="app.py" entrypoint>
 import gradio as gr
+import numpy as np
+import matplotlib.pyplot as plt
 
-from filters import as_gray
+# ---------- Basic Calculator ----------
+def calculate(num1, operation, num2):
+    try:
+        num1 = float(num1)
+        num2 = float(num2)
+    except (TypeError, ValueError):
+        return "Enter valid numbers"
 
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
+    if operation == "+":
+        result = num1 + num2
+    elif operation == "-":
+        result = num1 - num2
+    elif operation == "×":
+        result = num1 * num2
+    elif operation == "÷":
+        if num2 == 0:
+            return "Error: Division by zero"
+        result = num1 / num2
+    elif operation == "^":
+        result = num1 ** num2
+    else:
+        return "Unknown operation"
 
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
+    return f"Result: {result}"
 
-demo.launch()
-            </gradio-file>
 
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
+# ---------- Function Plotter ----------
+def plot_function(expression, x_min, x_max):
+    try:
+        x = np.linspace(float(x_min), float(x_max), 400)
+
+        allowed_names = {
+            "x": x, "np": np, "sin": np.sin, "cos": np.cos, "tan": np.tan,
+            "exp": np.exp, "log": np.log, "sqrt": np.sqrt, "pi": np.pi,
+            "abs": np.abs
+        }
+        y = eval(expression, {"__builtins__": {}}, allowed_names)
+
+        fig, ax = plt.subplots(figsize=(6, 4))
+        ax.plot(x, y, color="#2563eb", linewidth=2)
+        ax.axhline(0, color="black", linewidth=0.5)
+        ax.axvline(0, color="black", linewidth=0.5)
+        ax.set_title(f"y = {expression}")
+        ax.grid(True, alpha=0.3)
+        return fig
+    except Exception as e:
+        fig, ax = plt.subplots(figsize=(6, 4))
+        ax.text(0.5, 0.5, f"Error: {e}", ha="center", va="center", color="red")
+        ax.axis("off")
+        return fig
 
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
 
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
+with gr.Blocks(title="Calculator + Graph Plotter") as demo:
+    gr.Markdown("# 🧮 Calculator & Function Plotter")
 
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
+    with gr.Tab("Basic Calculator"):
+        with gr.Row():
+            num1 = gr.Number(label="First Number")
+            operation = gr.Dropdown(["+", "-", "×", "÷", "^"], label="Operation", value="+")
+            num2 = gr.Number(label="Second Number")
+        calc_btn = gr.Button("Calculate", variant="primary")
+        calc_output = gr.Textbox(label="Output")
+        calc_btn.click(calculate, inputs=[num1, operation, num2], outputs=calc_output)
+
+    with gr.Tab("Function Plotter"):
+        expr = gr.Textbox(label="Function of x (e.g. sin(x), x**2 + 3*x - 1)", value="sin(x)")
+        with gr.Row():
+            x_min = gr.Number(label="x min", value=-10)
+            x_max = gr.Number(label="x max", value=10)
+        plot_btn = gr.Button("Plot", variant="primary")
+        plot_output = gr.Plot(label="Graph")
+        plot_btn.click(plot_function, inputs=[expr, x_min, x_max], outputs=plot_output)
+
+demo.launch()
+</gradio-file>
+    </gradio-lite>
+</body>
 </html>