Refactor Gradio interface by simplifying image input settings, streamlining background choice configuration, and enhancing output section layout for improved usability and clarity.

app.py

@@ -215,29 +215,23 @@ with gr.Blocks() as demo:
             with gr.Row():
                 image_input = gr.Image(
                     label="Image input",
-                    image_mode="RGBA",
-                    sources=["upload"],
                     type="pil"
                 )
                 processed_image = gr.Image(
                     label="Processed Image",
-                    interactive=False,
-                    type="pil",
-                    image_mode="RGB"
+                    type="pil"
                 )
             
             with gr.Row():
                 with gr.Column():
-                    with gr.Row():
-                        background_choice = gr.Radio(
-                            choices=["Alpha as mask", "Auto Remove background"],
-                            value="Auto Remove background",
-                            label="Background choice"
-                        )
+                    background_choice = gr.Radio(
+                        choices=["Alpha as mask", "Auto Remove background"],
+                        value="Auto Remove background",
+                        label="Background choice"
+                    )
                     back_groud_color = gr.ColorPicker(
                         label="Background Color",
-                        value="#7F7F7F",
-                        interactive=False
+                        value="#7F7F7F"
                     )
                     foreground_ratio = gr.Slider(
                         label="Foreground Ratio",
@@ -271,34 +265,21 @@ with gr.Blocks() as demo:
             
             gr.Examples(
                 examples=[[os.path.join("examples", i)] for i in os.listdir("examples")],
-                inputs=[image_input],
-                examples_per_page=20,
-                cache_examples=False
+                inputs=[image_input]
             )
         
         with gr.Column():
-            image_output = gr.Image(
-                label="Output RGB image",
-                interactive=False
-            )
-            xyz_output = gr.Image(
-                label="Output CCM image",
-                interactive=False
-            )
-            output_model = gr.Model3D(
-                label="Output GLB",
-                interactive=False
-            )
+            image_output = gr.Image(label="Output RGB image")
+            xyz_output = gr.Image(label="Output CCM image")
+            output_model = gr.Model3D(label="Output GLB")
             gr.Markdown("Note: Ensure that the input image is correctly pre-processed into a grey background, otherwise the results will be unpredictable.")
 
-    # Define the processing chain
     def process_and_generate(image, bg_choice, fg_ratio, bg_color, seed_val, guidance, steps):
         if image is None:
             raise gr.Error("No image uploaded!")
         processed = preprocess_image(image, bg_choice, fg_ratio, bg_color)
         return gen_image(processed, seed_val, guidance, steps)
 
-    # Connect the button click event with API endpoint
     text_button.click(
         fn=process_and_generate,
         inputs=[
@@ -319,4 +300,4 @@ with gr.Blocks() as demo:
     )
 
 if __name__ == "__main__":
-    demo.queue().launch(show_api=True)
+    demo.queue().launch()