Add examples

.gitattributes

@@ -1,3 +1,4 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
 *.7z filter=lfs diff=lfs merge=lfs -text
 *.arrow filter=lfs diff=lfs merge=lfs -text
 *.bin filter=lfs diff=lfs merge=lfs -text

README.md

@@ -4,7 +4,7 @@ emoji: 😻
 colorFrom: purple
 colorTo: red
 sdk: gradio
-sdk_version: 3.0.2
+sdk_version: 3.0.3
 app_file: app.py
 pinned: false
 ---

app.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 
 import argparse
 import os
+import pathlib
 import sys
 from typing import Callable
 
@@ -219,6 +220,17 @@ def update_style_image(style_name: str) -> dict:
     return gr.Markdown.update(value=text)
 
 
+def set_example(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]),
+    ]
+
+
 def main():
     args = parse_args()
     app = App(device=torch.device(args.device))
@@ -245,12 +257,12 @@ This is an unofficial demo app for [https://github.com/williamyang1991/DualStyle
 
 <center><img id="overview" src="https://raw.githubusercontent.com/williamyang1991/DualStyleGAN/main/doc_images/overview.jpg" alt="overview"></center>
 ''')
-
         with gr.Box():
             gr.Markdown('''## Step 1 (Preprocess Input Image)
 
 - 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.
@@ -320,12 +332,28 @@ 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)
+
         gr.Markdown(
-            'Related App: [https://huggingface.co/spaces/hysts/DualStyleGAN](https://huggingface.co/spaces/hysts/DualStyleGAN)')
+            'Related App: [https://huggingface.co/spaces/hysts/DualStyleGAN](https://huggingface.co/spaces/hysts/DualStyleGAN)'
+        )
         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)

images/README.md

@@ -0,0 +1,7 @@
+These images are freely-usable ones from [Unsplash](https://unsplash.com/).
+
+- https://unsplash.com/photos/rDEOVtE7vOs
+- https://unsplash.com/photos/et_78QkMMQs
+- https://unsplash.com/photos/ILip77SbmOE
+- https://unsplash.com/photos/95UF6LXe-Lo
+