Update

app.py

@@ -123,7 +123,11 @@ def run(
     trimap: PIL.Image.Image,
     apply_background_replacement: bool,
     background_image: PIL.Image.Image | None,
-) -> tuple[np.ndarray, PIL.Image.Image, PIL.Image.Image | None]:
+) -> tuple[
+    tuple[PIL.Image.Image, np.ndarray],
+    tuple[PIL.Image.Image, PIL.Image.Image],
+    tuple[PIL.Image.Image, PIL.Image.Image] | None,
+]:
     if image.size != trimap.size:
         raise gr.Error("Image and trimap must have the same size.")
     if max(image.size) > MAX_IMAGE_SIZE:
@@ -147,7 +151,11 @@ def run(
 
     res_bg_replacement = replace_background(image, alpha, background_image) if apply_background_replacement else None
 
-    return alpha, foreground, res_bg_replacement
+    return (
+        (image, alpha),
+        (image, foreground),
+        ((image, res_bg_replacement) if res_bg_replacement is not None else None),
+    )
 
 
 with gr.Blocks(css_paths="style.css") as demo:
@@ -179,9 +187,9 @@ with gr.Blocks(css_paths="style.css") as demo:
                 run_button = gr.Button("Run")
         with gr.Column():
             with gr.Group():
-                out_alpha = gr.Image(label="Alpha")
-                out_foreground = gr.Image(label="Foreground")
-                out_background_replacement = gr.Image(label="Background replacement", visible=False)
+                out_alpha = gr.ImageSlider(label="Alpha")
+                out_foreground = gr.ImageSlider(label="Foreground")
+                out_background_replacement = gr.ImageSlider(label="Background replacement", visible=False)
 
     inputs = [
         image,