feat(app): refactor UI with tabs, adding Image Generation

app.py

@@ -69,30 +69,72 @@ def calculate(n1, op, n2):
     if op == "/" and n2 != 0: return str(n1 / n2)
     return "Error"
     
-# demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+def generate_image(prompt: str):
+    """
+    Generates an image based on a text prompt using the Stable Diffusion model.
+
+    Args:
+        prompt (str): The text prompt to generate the image from.
+
+    Returns:
+        str: The URL of the generated image.
+    """
+
+    # Call the Stable Diffusion API or model here
+    # For demonstration, we'll return a placeholder image URL
+    return "https://avatars.githubusercontent.com/u/75182?v=4"
+
+
 with gr.Blocks() as demo:
-    name = gr.Textbox(label="Type your name", placeholder="Enter your name here")
-    greet_btn = gr.Button("Greet")
-    output = gr.Textbox(label="Message")
-    greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
-    joke_btn = gr.Button("Get Dad Joke")
-    joke_output = gr.Textbox(label="Dad Joke")
-    joke_btn.click(fn=get_dad_joke, outputs=joke_output, api_name="get_dad_joke")
-
-    with gr.Row():
-        num1 = gr.Number(label="First Number")
-        operation = gr.Dropdown(
-            choices=["+", "-", "*", "/"],
-            label="Operation"
-        )
-        num2 = gr.Number(label="Second Number")
+    # name = gr.Textbox(label="Type your name", placeholder="Enter your name here")
+    # greet_btn = gr.Button("Greet")
+    # output = gr.Textbox(label="Message")
+    # greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+    # joke_btn = gr.Button("Get Dad Joke")
+    # joke_output = gr.Textbox(label="Dad Joke")
+    # joke_btn.click(fn=get_dad_joke, outputs=joke_output, api_name="get_dad_joke")
     
-    calc_btn = gr.Button("Calculate")
-    calc_output = gr.Text(label="Result")
-    calc_btn.click(
-        fn=calculate,
-        inputs=[num1, operation, num2],
-        outputs=calc_output,
-        api_name="calculate")
+    tab_calc = gr.Tab("Calculator")
+    with tab_calc:
+        with gr.Row():
+            num1 = gr.Number(label="First Number")
+            operation = gr.Dropdown(
+                choices=["+", "-", "*", "/"],
+                label="Operation"
+            )
+            num2 = gr.Number(label="Second Number")
+        
+        calc_btn = gr.Button("Calculate")
+        calc_output = gr.Text(label="Result")
+        calc_btn.click(
+            fn=calculate,
+            inputs=[num1, operation, num2],
+            outputs=calc_output,
+            api_name="calculate")
+    
+    tab_joke = gr.Tab("Dad Joke")
+    with tab_joke:
+        joke_btn = gr.Button("Get Dad Joke")
+        joke_output = gr.Textbox(label="Dad Joke")
+        joke_btn.click(fn=get_dad_joke, outputs=joke_output, api_name="get_dad_joke")
+
+    tab_greet = gr.Tab("Greet")
+    with tab_greet:
+        name = gr.Textbox(label="Type your name", placeholder="Enter your name here")
+        greet_btn = gr.Button("Greet")
+        output = gr.Textbox(label="Message")
+        greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
+
+    # Generate an image
+    tab_image = gr.Tab("Image Generation")
+    with tab_image:
+        img_prompt = gr.Textbox(
+            label="Image Prompt",
+            placeholder="Enter a prompt for the image generation"
+        )
+        img_btn = gr.Button("Generate Image")
+        img_output = gr.Image(label="Sample Image")
+        img_btn.click(fn=generate_image, inputs=img_prompt, outputs=img_output, api_name="generate_image")
+
 
 demo.launch(mcp_server=True, share=True)