Place examples for each step

app.py

@@ -212,7 +212,7 @@ def update_slider(choice: str) -> dict:
         'pixar': 121,
         'slamdunk': 119,
     }
-    return gr.Slider.update(maximum=max_vals[choice], value=26)
+    return gr.Slider.update(maximum=max_vals[choice])
 
 
 def update_style_image(style_name: str) -> dict:
@@ -220,14 +220,21 @@ def update_style_image(style_name: str) -> dict:
     return gr.Markdown.update(value=text)
 
 
-def set_example(example: list) -> list[dict]:
+def set_example_image(example: list) -> dict:
+    return gr.Image.update(value=example[0])
+
+
+def set_example_styles(example: list) -> list[dict]:
     return [
-        gr.Image.update(value=example[0]),
-        gr.Radio.update(value=example[1]),
-        gr.Slider.update(value=example[2]),
-        gr.Slider.update(value=example[3]),
-        gr.Slider.update(value=example[4]),
-        gr.Checkbox.update(value=example[5]),
+        gr.Radio.update(value=example[0]),
+        gr.Slider.update(value=example[1]),
+    ]
+
+
+def set_example_weights(example: list) -> list[dict]:
+    return [
+        gr.Slider.update(value=example[0]),
+        gr.Slider.update(value=example[1]),
     ]
 
 
@@ -262,7 +269,6 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
 
 - Drop an image containing a near-frontal face to the **Input Image**.
     - If there are multiple faces in the image, hit the Edit button in the upper right corner and crop the input image beforehand.
-    - You can also load example inputs from the **Examples** section at the bottom of this page.
 - Hit the **Detect & Align Face** button.
 - Hit the **Reconstruct Face** button.
     - The final result will be based on this **Reconstructed Face**. So, if the reconstructed image is not satisfactory, you may want to change the input image.
@@ -285,6 +291,12 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
                                                   type='numpy')
                     instyle = gr.Variable()
 
+            with gr.Row():
+                paths = sorted(pathlib.Path('images').glob('*.jpg'))
+                example_images = gr.Dataset(components=[input_image],
+                                            samples=[[path.as_posix()]
+                                                     for path in paths])
+
         with gr.Box():
             gr.Markdown('''## Step 2 (Select Style Image)
 
@@ -303,6 +315,16 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
                                             label='Style Image Index',
                                             interactive=True)
 
+            with gr.Row():
+                example_styles = gr.Dataset(
+                    components=[style_type, style_index],
+                    samples=[
+                        ['cartoon', 26],
+                        ['caricature', 65],
+                        ['arcane', 63],
+                        ['pixar', 80],
+                    ])
+
         with gr.Box():
             gr.Markdown('''## Step 3 (Generate Style Transferred Image)
 
@@ -332,25 +354,20 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
                 with gr.Column():
                     output_image = gr.Image(label='Output Image')
 
-        with gr.Box():
-            gr.Markdown('## Examples')
-
-            paths = sorted(pathlib.Path('images').glob('*.jpg'))
-            samples = [[path.as_posix(), 'cartoon', 26, 0.6, 1.0, False]
-                       for path in paths]
-            examples = gr.Dataset(components=[
-                input_image, style_type, style_index, structure_weight,
-                color_weight, structure_only
-            ],
-                                  samples=samples)
+            with gr.Row():
+                example_weights = gr.Dataset(
+                    components=[structure_weight, color_weight],
+                    samples=[
+                        [0.6, 1.0],
+                        [0.3, 1.0],
+                        [0.0, 1.0],
+                        [1.0, 0.0],
+                    ])
 
         gr.Markdown(
             '<center><img src="https://visitor-badge.glitch.me/badge?page_id=gradio-blocks.dualstylegan" alt="visitor badge"/></center>'
         )
 
-        examples.click(fn=set_example,
-                       inputs=examples,
-                       outputs=examples.components)
         detect_button.click(fn=app.detect_and_align_face,
                             inputs=input_image,
                             outputs=face_image)
@@ -373,6 +390,15 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
                                   instyle,
                               ],
                               outputs=output_image)
+        example_images.click(fn=set_example_image,
+                             inputs=example_images,
+                             outputs=example_images.components)
+        example_styles.click(fn=set_example_styles,
+                             inputs=example_styles,
+                             outputs=example_styles.components)
+        example_weights.click(fn=set_example_weights,
+                              inputs=example_weights,
+                              outputs=example_weights.components)
 
     demo.launch(
         enable_queue=args.enable_queue,