Use gr.Image instead of gr.Files

app.py

@@ -64,26 +64,6 @@ def randomize_seed_fn(seed: int, randomize_seed: bool) -> int:
     return seed
 
 
-def swap_to_gallery(images):
-    return (
-        gr.update(value=images, visible=True),
-        gr.update(visible=True),
-        gr.update(visible=False),
-    )
-
-
-def upload_example_to_gallery(images, prompt, style, negative_prompt):
-    return (
-        gr.update(value=images, visible=True),
-        gr.update(visible=True),
-        gr.update(visible=False),
-    )
-
-
-def remove_back_to_files():
-    return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
-
-
 def remove_tips():
     return gr.update(visible=False)
 
@@ -91,31 +71,31 @@ def remove_tips():
 def get_example():
     case = [
         [
-            ["./examples/yann-lecun_resize.jpg"],
+            "./examples/yann-lecun_resize.jpg",
             "a man",
             "Snow",
             "(lowres, low quality, worst quality:1.2), (text:1.2), watermark, (frame:1.2), deformed, ugly, deformed eyes, blur, out of focus, blurry, deformed cat, deformed, photo, anthropomorphic cat, monochrome, photo, pet collar, gun, weapon, blue, 3d, drones, drone, buildings in background, green",
         ],
         [
-            ["./examples/musk_resize.jpeg"],
+            "./examples/musk_resize.jpeg",
             "a man",
             "Mars",
             "(lowres, low quality, worst quality:1.2), (text:1.2), watermark, (frame:1.2), deformed, ugly, deformed eyes, blur, out of focus, blurry, deformed cat, deformed, photo, anthropomorphic cat, monochrome, photo, pet collar, gun, weapon, blue, 3d, drones, drone, buildings in background, green",
         ],
         [
-            ["./examples/sam_resize.png"],
+            "./examples/sam_resize.png",
             "a man",
             "Jungle",
             "(lowres, low quality, worst quality:1.2), (text:1.2), watermark, (frame:1.2), deformed, ugly, deformed eyes, blur, out of focus, blurry, deformed cat, deformed, photo, anthropomorphic cat, monochrome, photo, pet collar, gun, weapon, blue, 3d, drones, drone, buildings in background, gree",
         ],
         [
-            ["./examples/schmidhuber_resize.png"],
+            "./examples/schmidhuber_resize.png",
             "a man",
             "Neon",
             "(lowres, low quality, worst quality:1.2), (text:1.2), watermark, (frame:1.2), deformed, ugly, deformed eyes, blur, out of focus, blurry, deformed cat, deformed, photo, anthropomorphic cat, monochrome, photo, pet collar, gun, weapon, blue, 3d, drones, drone, buildings in background, green",
         ],
         [
-            ["./examples/kaifu_resize.png"],
+            "./examples/kaifu_resize.png",
             "a man",
             "Vibrant Color",
             "(lowres, low quality, worst quality:1.2), (text:1.2), watermark, (frame:1.2), deformed, ugly, deformed eyes, blur, out of focus, blurry, deformed cat, deformed, photo, anthropomorphic cat, monochrome, photo, pet collar, gun, weapon, blue, 3d, drones, drone, buildings in background, green",
@@ -124,8 +104,8 @@ def get_example():
     return case
 
 
-def run_for_examples(face_files, prompt, style, negative_prompt):
-    return generate_image(face_files, None, prompt, negative_prompt, style, True, 30, 0.8, 0.8, 5, 42)
+def run_for_examples(face_file, prompt, style, negative_prompt):
+    return generate_image(face_file, None, prompt, negative_prompt, style, True, 30, 0.8, 0.8, 5, 42)
 
 
 def convert_from_cv2_to_image(img: np.ndarray) -> Image:
@@ -202,10 +182,15 @@ def apply_style(style_name: str, positive: str, negative: str = "") -> tuple[str
     return p.replace("{prompt}", positive), n + " " + negative
 
 
+def check_input_image(face_image):
+    if face_image is None:
+        raise gr.Error("Cannot find any input face image! Please upload the face image")
+
+
 @spaces.GPU
 def generate_image(
-    face_image,
-    pose_image,
+    face_image_path,
+    pose_image_path,
     prompt,
     negative_prompt,
     style_name,
@@ -217,16 +202,13 @@ def generate_image(
     seed,
     progress=gr.Progress(track_tqdm=True),
 ):
-    if face_image is None:
-        raise gr.Error("Cannot find any input face image! Please upload the face image")
-
     if prompt is None:
         prompt = "a person"
 
     # apply the style template
     prompt, negative_prompt = apply_style(style_name, prompt, negative_prompt)
 
-    face_image = load_image(face_image[0])
+    face_image = load_image(face_image_path)
     face_image = resize_img(face_image)
     face_image_cv2 = convert_from_image_to_cv2(face_image)
     height, width, _ = face_image_cv2.shape
@@ -237,17 +219,14 @@ def generate_image(
     if len(face_info) == 0:
         raise gr.Error("Cannot find any face in the image! Please upload another person image")
 
-    face_info = sorted(
-        face_info,
-        key=lambda x: (x["bbox"][2] - x["bbox"][0]) * x["bbox"][3] - x["bbox"][1],
-    )[
+    face_info = sorted(face_info, key=lambda x: (x["bbox"][2] - x["bbox"][0]) * x["bbox"][3] - x["bbox"][1])[
         -1
     ]  # only use the maximum face
     face_emb = face_info["embedding"]
     face_kps = draw_kps(convert_from_cv2_to_image(face_image_cv2), face_info["kps"])
 
-    if pose_image is not None:
-        pose_image = load_image(pose_image[0])
+    if pose_image_path is not None:
+        pose_image = load_image(pose_image_path)
         pose_image = resize_img(pose_image)
         pose_image_cv2 = convert_from_image_to_cv2(pose_image)
 
@@ -290,7 +269,7 @@ def generate_image(
         generator=generator,
     ).images
 
-    return images, gr.update(visible=True)
+    return images[0], gr.update(visible=True)
 
 
 ### Description
@@ -346,20 +325,10 @@ with gr.Blocks(css=css) as demo:
     with gr.Row():
         with gr.Column():
             # upload face image
-            face_files = gr.Files(label="Upload a photo of your face", file_types=["image"])
-            uploaded_faces = gr.Gallery(label="Your images", visible=False, columns=1, rows=1, height=512)
-            with gr.Column(visible=False) as clear_button_face:
-                remove_and_reupload_faces = gr.ClearButton(
-                    value="Remove and upload new ones", components=face_files, size="sm"
-                )
+            face_file = gr.Image(label="Upload a photo of your face", type="filepath")
 
             # optional: upload a reference pose image
-            pose_files = gr.Files(label="Upload a reference pose image (optional)", file_types=["image"])
-            uploaded_poses = gr.Gallery(label="Your images", visible=False, columns=1, rows=1, height=512)
-            with gr.Column(visible=False) as clear_button_pose:
-                remove_and_reupload_poses = gr.ClearButton(
-                    value="Remove and upload new ones", components=pose_files, size="sm"
-                )
+            pose_file = gr.Image(label="Upload a reference pose image (optional)", type="filepath")
 
             # prompt
             prompt = gr.Textbox(
@@ -420,32 +389,14 @@ with gr.Blocks(css=css) as demo:
                 enhance_face_region = gr.Checkbox(label="Enhance non-face region", value=True)
 
         with gr.Column():
-            gallery = gr.Gallery(label="Generated Images")
+            output_image = gr.Image(label="Generated Image")
             usage_tips = gr.Markdown(label="Usage tips of InstantID", value=tips, visible=False)
 
-        face_files.upload(
-            fn=swap_to_gallery,
-            inputs=face_files,
-            outputs=[uploaded_faces, clear_button_face, face_files],
-        )
-        pose_files.upload(
-            fn=swap_to_gallery,
-            inputs=pose_files,
-            outputs=[uploaded_poses, clear_button_pose, pose_files],
-        )
-
-        remove_and_reupload_faces.click(
-            fn=remove_back_to_files,
-            outputs=[uploaded_faces, clear_button_face, face_files],
-        )
-        remove_and_reupload_poses.click(
-            fn=remove_back_to_files,
-            outputs=[uploaded_poses, clear_button_pose, pose_files],
-        )
-
         submit.click(
             fn=remove_tips,
             outputs=usage_tips,
+            queue=False,
+            api_name=False,
         ).then(
             fn=randomize_seed_fn,
             inputs=[seed, randomize_seed],
@@ -453,10 +404,15 @@ with gr.Blocks(css=css) as demo:
             queue=False,
             api_name=False,
         ).then(
+            fn=check_input_image,
+            inputs=face_file,
+            queue=False,
+            api_name=False,
+        ).success(
             fn=generate_image,
             inputs=[
-                face_files,
-                pose_files,
+                face_file,
+                pose_file,
                 prompt,
                 negative_prompt,
                 style,
@@ -467,16 +423,15 @@ with gr.Blocks(css=css) as demo:
                 guidance_scale,
                 seed,
             ],
-            outputs=[gallery, usage_tips],
+            outputs=[output_image, usage_tips],
         )
 
     gr.Examples(
         examples=get_example(),
-        inputs=[face_files, prompt, style, negative_prompt],
-        run_on_click=True,
-        fn=upload_example_to_gallery,
-        outputs=[uploaded_faces, clear_button_face, face_files],
-        cache_examples=True,
+        inputs=[face_file, prompt, style, negative_prompt],
+        outputs=[output_image, usage_tips],
+        fn=run_for_examples,
+        cache_examples=False,
     )
 
     gr.Markdown(article)