Fix gr.Blocks

app.py

@@ -108,19 +108,19 @@ with gr.Blocks(theme=gr.themes.Monochrome()) as demo:
     with gr.Tab("Semantic Segmentation with Cityscape Image"):
         with gr.Row():
             with gr.Column(scale=1):
-                input_image = gr.Image(label="Upload Image")
+                input_gallery = gr.Gallery(label="Select an Image",
+                                           value="city_1.jpg",
+                                           items=["city_1.jpg", "city_2.jpg", "city_3.jpg",
+                                                  "city_4.jpg", "city_5.jpg", "city_6.jpg",
+                                                  "city_7.jpg", "city_8.jpg"]).style(grid=3)
+                input_image = gr.Image(label="Uploaded Image", interactive=True, type="pil")
+                input_gallery.change(fn=lambda x: x, inputs=input_gallery, outputs=input_image)
                 process_button = gr.Button("Process Image")
             with gr.Column(scale=2):
-                output_plot = gr.Plot(label="Segmented Image")
-        examples_gallery = gr.Gallery(
-            ["city_1.jpg", "city_2.jpg", "city_3.jpg",
-             "city_4.jpg", "city_5.jpg", "city_6.jpg",
-             "city_7.jpg", "city_8.jpg"]
-        ).style(grid=3)
-        examples_gallery.click(sepia, inputs=input_image, outputs=output_plot)
-        process_button.click(sepia, inputs=input_image, outputs=output_plot)
-
-    with gr.Accordion("Details and Information"):
+                output_image = gr.Plot(label="Segmented Image")
+                process_button.click(sepia, inputs=input_image, outputs=output_image)
+
+    with gr.Accordion("Information"):
         gr.Markdown("A Gradio-based page which performs Semantic Segmentation into 19 classes for an example image")