Update layout to use Blocks

app.py

@@ -9,16 +9,20 @@ def color_transfer(source, target):
     result = ct.color_transfer_MKL(source, target)
     return np.uint8(result * 255)
 
-interface = gr.Interface(
-        fn=color_transfer, 
-        inputs=[
-            gr.Image(type="numpy"),
-            gr.Image(type="numpy"),
-        ], 
-        outputs=["image"],
-        title="Image Color Transfer",
-        description="DIGIMAP Final Project"
-    )
+with gr.Blocks() as interface:
+    with gr.Row(equal_height=True):
+        source_image = gr.Image(type="numpy", label="Source Image", sources=['upload'], interactive=True)
+        target_image = gr.Image(type="numpy", label="Target Image", sources=['upload'], interactive=True) 
+        result_image = gr.Image(type="numpy", label="Result", show_download_button=True, interactive=False)
+        
+    with gr.Row():
+        submit_button = gr.Button()
+        submit_button.click(fn=color_transfer, inputs=[source_image, target_image], outputs=[result_image])
+        clear_button = gr.ClearButton(components=[source_image, target_image, result_image])
+    with gr.Row():
+        examples_dropdown = gr.Examples([["samples/source.jpg", "samples/target.jpg"]],
+                                        [source_image, target_image])
+        
 
 if __name__ == "__main__":
     interface.launch()