Update app.py

app.py

@@ -60,12 +60,30 @@ def generate_image(seed_image):
     return inp, v
 
 # Create Gradio interface
-iface = gr.Interface(
-    fn=generate_image,
-    inputs="file",
-    outputs="image",
-    title="Magnetogram-to-Magnetogram: Generative Forecasting of Solar Evolution",
-    description="Upload a LoS magnetogram and predict how it is going to be in 24 hours."
-)
+with gr.Blocks() as demo:
+    gr.Markdown(DESCRIPTION)
+    with gr.Row():
+        input_image = gr.File(label='Input Image')
+        output_image1 = gr.Image(label='Input LoS Magnetogram', type='pil', interactive=False)
+        output_image2 = gr.Image(label='Predicted LoS Magnetogram in 24 hours', type='pil', interactive=False)
+        # Buttons are placed in a nested Row inside the main Row to align them directly under the image
+    with gr.Row():
+        clear_button = gr.Button('Clear')
+        process_button = gr.Button('Generate')
+        
 
-iface.launch()
+    # Binding the process button to the function
+    process_button.click(
+        fn=generate_image,
+        inputs=input_image,
+        outputs=[output_image1, output_image2]
+    )
+    
+    # Clear button to reset the input image
+    clear_button.click(
+        fn=lambda: None,  # Clears the input
+        inputs=None,
+        outputs=input_image
+    )
+
+demo.launch()