use blocks api

app.py

@@ -7,11 +7,11 @@ def generate_image_predictions(prompt):
     return images
 
 
-iface = gr.Blocks()
+demo = gr.Blocks()
 
-
-iface = gr.Interface(
-    """
+with demo:
+    gr.Markdown(
+        """
         # 🌍 Map Diffuser
 
         🌏 Generates images from a given text prompt. The prompts are in the format:
@@ -34,10 +34,15 @@ iface = gr.Interface(
         | Watercolor style map of Amsterdam with residential area and highways | <img src="https://i.imgur.com/AQS34dk.png" width="300" /> |
         | Toner style map of Amsterdam with residential area and highways | <img src="https://i.imgur.com/X8VcezT.png" width="300" /> |
         | Satellite image with forests and residential, no water | <img src="https://i.imgur.com/MEccHdM.png" width="300" /> |
-    """,
-    fn=generate_image_predictions,
-    inputs=gr.components.Textbox(label="Enter a text prompt here"),
-    outputs=gr.components.Image(label="Output Image")
-)
+    """
+    )
+    input = gr.components.Textbox(label="Enter a text prompt here")
+    output = gr.components.Image(label="Output Image")
+    # button to submit the prompt
+    button = gr.components.Button(label="Generate")
+    # when the button is clicked, call the generate_image_predictions function
+    # and pass in the prompt as an argument
+    button.submit(generate_image_predictions, inputs=input, outputs=output)
+
 
-iface.launch()
+demo.launch()