rev4

app.py

@@ -30,7 +30,7 @@ LENGTH = 480
 placeholder = cv2.cvtColor(cv2.imread("placeholder.png"), cv2.COLOR_BGR2RGB)
 NEW_MODEL = True
 MODEL_EPOCH = 6
-REF_POSE_MASK = True
+NO_MASK = False
 HF = False
 pre_device = "cpu" if HF else "cuda"
 spaces_60_fn = spaces.GPU(duration=60) if HF else (lambda f: f)
@@ -305,7 +305,10 @@ def get_ref_anno(img, keypts):
             gr.Info("Number of left hand keypoints should be either 0 or 21.")
             return None, None, None, gr.update(), gr.update()
         keypts = np.concatenate(keypts, axis=0)
-    if REF_POSE_MASK:
+    if NO_MASK:
+        hand_mask = np.zeros_like(img[:,:, 0])
+        ref_pose = visualize_hand(keypts, img)
+    else:
         sam_predictor.set_image(img)
         if keypts[0].sum() != 0 and keypts[21].sum() != 0:
             # input_point = np.array([keypts[0], keypts[21]])
@@ -335,9 +338,7 @@ def get_ref_anno(img, keypts):
         hand_mask = masks[0]
         masked_img = img * hand_mask[..., None] + 255 * (1 - hand_mask[..., None])
         ref_pose = visualize_hand(keypts, masked_img)
-    else:
-        hand_mask = np.zeros_like(img[:,:, 0])
-        ref_pose = np.zeros_like(img)
+        
     def make_ref_cond(
         img,
         keypts,
@@ -390,8 +391,7 @@ def get_ref_anno(img, keypts):
     print(f"autoencoder encoder before operating dtype: {next(autoencoder.encoder.parameters()).dtype}")
     latent = opts.latent_scaling_factor * autoencoder.encode(image).sample()
     print(f"latent.max(): {latent.max()}, latent.min(): {latent.min()}")
-    if not REF_POSE_MASK:
-        heatmaps = torch.zeros_like(heatmaps)
+    if NO_MASK:
         mask = torch.zeros_like(mask)
     print(f"heatmaps.max(): {heatmaps.max()}, heatmaps.min(): {heatmaps.min()}")
     print(f"mask.max(): {mask.max()}, mask.min(): {mask.min()}")
@@ -615,7 +615,7 @@ def sample_diff(ref_cond, target_cond, target_keypts, num_gen, seed, cfg):
         z,
         clip_denoised=False,
         model_kwargs=model_kwargs,
-        progress=True,
+        progress=gr.Progress(),
         device=device,
     ).chunk(2)
     sampled_images = autoencoder.decode(samples / opts.latent_scaling_factor)
@@ -818,7 +818,7 @@ def sample_inpaint(
         z,
         clip_denoised=False,
         model_kwargs=model_kwargs,
-        progress=True,
+        progress=gr.Progress(),
         device=z.device,
         jump_length=jump_length,
         jump_n_sample=jump_n_sample,
@@ -1160,7 +1160,7 @@ custom_css = """
 #repose-tab-button {
     font-size: 18px !important;
     font-weight: bold !important;
-    background-color: #90EE90 !important;
+    background-color: #FFB6C1 !important;
 }
 #kpts_examples table tr th:nth-child(2),
 #kpts_examples table tr td:nth-child(2) {
@@ -1174,6 +1174,14 @@ custom_css = """
 #kpts_examples table tr td:nth-child(4) {
     display: none !important;
 }
+#fix_examples_all table tr th:nth-child(2),
+#fix_examples_all table tr td:nth-child(2) {
+    display: none !important;
+}
+#fix_examples_all table tr th:nth-child(3),
+#fix_examples_all table tr td:nth-child(3) {
+    display: none !important;
+}
 #fix_examples_all table tr th:nth-child(4),
 #fix_examples_all table tr td:nth-child(4) {
     display: none !important;
@@ -1186,12 +1194,75 @@ custom_css = """
 #fix_examples_all table tr td:nth-child(6) {
     display: none !important;
 }
+#fix_examples_all table tr:first-child {
+    display: none !important;
+}
 #repose_tutorial video {
-    width: 70% !important;
+    width: 50% !important;
     display: block;
     margin: 0 auto;
     padding: 0;
 }
+#accordion_bold button span {
+    font-weight: bold !important;
+}
+#accordion_bold_large button span {
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+#accordion_bold_large_center button span {
+    font-weight: bold !important;
+    font-size: 20px !important;
+}
+#accordion_bold_large_center button {
+    text-align: center !important;
+    margin: 0 auto !important;
+    display: block !important;
+}
+#fix_examples_all table tbody {
+    display: flex !important;
+    flex-direction: row;
+    flex-wrap: nowrap; 
+}
+
+#fix_examples_all table tr {
+    display: flex !important;
+    align-items: center;
+}
+
+#fix_examples_all table tr th,
+#fix_examples_all table tr td {
+    display: table-cell;
+}
+#gradio-app {
+    flex-direction: row; !important;
+}
+"""
+##no_wrap_row {
+    # display: flex !important;
+    # flex-direction: row !important;
+    # flex-wrap: nowrap !important;
+# }
+##no_wrap_row > div {
+    # flex: 1 1 auto !important;
+    # min-width: 0;
+# }
+
+button_css = """
+#clear_button {
+    background-color: #f44336 !important;
+}
+#clear_button:hover {
+    background-color: #d32f2f !important;
+}
+#run_button {
+    background-color: #4CAF50 !important;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+#run_button:hover {
+    background-color: #388E3C !important;
+}
 """
 
 tut1_custom = f"""
@@ -1245,9 +1316,9 @@ _HEADER_ = '''
         <a href='https://ivl.cs.brown.edu/research/foundhand.html' target='_blank' class="link-spacing">Project Page</a>
         <a href='' target='_blank' class="link-spacing">Code (Coming in June)</a>
     </h3>
-    <p>Below are two important abilities of our model. First, we can automatically <b>fix malformed hand images</b>, following the user-provided target hand pose and area to fix. Second, we can <b>repose hand</b> given two hand images - one is the image to edit, and the other one provides target hand pose.</p>
 </div>
 '''
+    # <p>Below are two important abilities of our model. First, we can automatically <b>fix malformed hand images</b>, following the user-provided target hand pose and area to fix. Second, we can <b>repose hand</b> given two hand images - one is the image to edit, and the other one provides target hand pose.</p>
 
 _CITE_ = r"""
 <pre style="white-space: pre-wrap; margin: 0;">
@@ -1266,1004 +1337,1006 @@ Part of this work was done during Kefan (Arthur) Chen’s internship at Meta Rea
 """
 
 with gr.Blocks(css=custom_css, theme="soft") as demo:
+    gr.HTML(f"<style>{button_css}</style>")
     gr.Markdown(_HEADER_)
-    with gr.Tab("Demo 1. Malformed Hand Correction", elem_id="fix-tab"):
-        fix_inpaint_mask = gr.State(value=None)
-        fix_original = gr.State(value=None)
-        fix_crop_coord = gr.State(value=None)
-        fix_img = gr.State(value=None)
-        fix_kpts = gr.State(value=None)
-        fix_kpts_path = gr.Textbox(visible=False)
-        fix_kpts_np = gr.State(value=None)
-        fix_ref_cond = gr.State(value=None)
-        fix_target_cond = gr.State(value=None)
-        fix_latent = gr.State(value=None)
-        fix_inpaint_latent = gr.State(value=None)
 
-        # tutorial video
-        with gr.Accordion():
-            gr.Markdown("""<p style="text-align: center; font-size: 20px; font-weight: bold;">Tutorial Videos of Demo 1</p>""")
-            with gr.Row(variant="panel"):
-                with gr.Column():
-                    # gr.Video(
-                        # "how_to_videos/subtitled_fix_hands_custom.mp4",
-                        # label="Using your own image",
-                        # autoplay=True,
-                        # loop=True,
-                        # show_label=True,
-                    # )
-                    gr.HTML(tut1_custom)
-                with gr.Column():
-                    # gr.Video(
-                    #     "how_to_videos/subtitled_fix_hands_example.mp4",
-                    #     label="Using our example image",
-                    #     autoplay=True,
-                    #     loop=True,
-                    #     show_label=True,
-                    # )
-                    gr.HTML(tut1_example)
-        
-        # more options
-        with gr.Accordion(label="More options", open=False):
-            gr.Markdown(
-                "⚠️ Currently, Number of generation > 1 could lead to out-of-memory"
-            )
-            with gr.Row():
-                fix_n_generation = gr.Slider(
-                    label="Number of generations",
-                    value=1,
-                    minimum=1,
-                    maximum=FIX_MAX_N,
-                    step=1,
-                    randomize=False,
-                    interactive=True,
-                )
-                fix_seed = gr.Slider(
-                    label="Seed",
-                    value=42,
-                    minimum=0,
-                    maximum=10000,
-                    step=1,
-                    randomize=False,
-                    interactive=True,
-                )
-                fix_cfg = gr.Slider(
-                    label="Classifier free guidance scale",
-                    value=3.0,
-                    minimum=0.0,
-                    maximum=10.0,
-                    step=0.1,
-                    randomize=False,
-                    interactive=True,
-                )
-                fix_quality = gr.Slider(
-                    label="Quality",
-                    value=10,
-                    minimum=1,
-                    maximum=10,
-                    step=1,
-                    randomize=False,
-                    interactive=True,
-                )
-        
+    with gr.Tab("Demo 1. Repose Hands", elem_id="repose-tab"):
+        # ref states
+        dump = gr.State(value=None)
+        ref_img = gr.State(value=None)
+        ref_im_raw = gr.State(value=None)
+        ref_kp_raw = gr.State(value=0)
+        ref_is_user = gr.State(value=True)
+        ref_kp_got = gr.State(value=None)
+        ref_manual_cond = gr.State(value=None)
+        ref_auto_cond = gr.State(value=None)
+        ref_cond = gr.State(value=None)
+
+        # target states
+        target_img = gr.State(value=None)
+        target_im_raw = gr.State(value=None)
+        target_kp_raw = gr.State(value=0)
+        target_is_user = gr.State(value=True)
+        target_kp_got = gr.State(value=None)
+        target_manual_keypts = gr.State(value=None)
+        target_auto_keypts = gr.State(value=None)
+        target_keypts = gr.State(value=None)
+        target_manual_cond = gr.State(value=None)
+        target_auto_cond = gr.State(value=None)
+        target_cond = gr.State(value=None)
+
         # main tabs
         with gr.Row():
-            # crop & brush
+            # ref column
             with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">1. Upload a malformed hand image 📥</p>"""
-                )
-                gr.Markdown(
-                    """<p style="text-align: center;">Optionally crop the image.<br>(Click <b>top left</b> and <b>bottom right</b> of your desired bounding box around the hand)</p>"""
-                )
-                fix_crop = gr.Image(
-                    type="numpy",
-                    sources=["upload", "webcam", "clipboard"],
-                    label="Input Image",
-                    show_label=True,
-                    height=LENGTH,
-                    width=LENGTH,
-                    interactive=True,
-                    visible=True,
-                    image_mode="RGBA"
-                )
-                gr.Markdown(
-                    """<p style="text-align: center;">💡 If you crop, the model can focus on more details of the cropped area. Square crops might work better than rectangle crops.</p>"""
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">1. Upload a hand image to repose 📥</p>"""
                 )
-                # fix_example = gr.Examples(
-                #     fix_example_imgs,
-                #     inputs=[fix_crop],
-                #     examples_per_page=20,
+                # gr.Markdown(
+                #     """<p style="text-align: center;">Optionally crop the image</p>"""
                 # )
-            with gr.Column():
-                gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">2. Brush wrong finger and its surrounding area</p>"""
-                )
-                gr.Markdown(
-                    """<p style="text-align: center;">Don't brush the entire hand!</p>"""
-                )
-                fix_ref = gr.ImageEditor(
+                ref = gr.ImageEditor(
                     type="numpy",
-                    label="Image Brushing",
-                    sources=(),
+                    label="Reference",
                     show_label=True,
                     height=LENGTH,
                     width=LENGTH,
+                    brush=False,
                     layers=False,
-                    transforms=("brush"),
-                    brush=gr.Brush(
-                        colors=["rgb(255, 255, 255)"], default_size=20
-                    ),  # 204, 50, 50
-                    image_mode="RGBA",
-                    container=False,
-                    interactive=True,
-                )
-                # fix_ex_brush = gr.Examples(
-                #     fix_example_brush,
-                #     inputs=[fix_ref],
-                #     examples_per_page=20,
-                # )
-            
-            # keypoint selection
-            with gr.Column():
-                gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">3. Target hand pose</p>"""
-                )
-                gr.Markdown(
-                    """<p style="text-align: center;">Either get hand pose from Examples, or manually give hand pose (located at the bottom)</p>"""
-                )
-                fix_kp_all = gr.Image(
-                    type="numpy",
-                    label="Target Hand Pose",
-                    show_label=True,
-                    height=LENGTH,
-                    width=LENGTH,
-                    interactive=False,
-                    visible=True,
-                    sources=(),
-                    image_mode="RGBA"
+                    crop_size="1:1",
                 )
-                # with gr.Accordion(open=True):
-                #     fix_ex_kpts = gr.Examples(
-                #         fix_example_kpts,
-                #         inputs=[fix_kp_all, fix_cfg, fix_seed, fix_kpts_path],
-                #         examples_per_page=20,
-                #         postprocess=False,
-                #         elem_id="kpts_examples"
-                #     )
-                with gr.Accordion("[Custom data] Manually give hand pose", open=False):
-                    gr.Markdown(
-                        """<p style="text-align: center;">&#9312; Tell us if this is right, left, or both hands</p>"""
-                    )
-                    fix_checkbox = gr.CheckboxGroup(
-                        ["Right hand", "Left hand"],
-                        show_label=False,
-                        interactive=False,
-                    )
-                    fix_kp_r_info = gr.Markdown(
-                        """<p style="text-align: center;">&#9313; Click 21 keypoints on the image to provide the target hand pose of <b>right hand</b>. See the \"OpenPose keypoints convention\" for guidance.</p>""",
-                        visible=False
-                    )
-                    fix_kp_right = gr.Image(
-                        type="numpy",
-                        label="Keypoint Selection (right hand)",
-                        show_label=True,
-                        height=LENGTH,
-                        width=LENGTH,
-                        interactive=False,
-                        visible=False,
-                        sources=[],
-                    )
-                    with gr.Row():
-                        fix_undo_right = gr.Button(
-                            value="Undo", interactive=False, visible=False
+                gr.Examples(example_ref_imgs, [ref], examples_per_page=20)
+                with gr.Accordion(label="See hand pose", open=False):
+                    with gr.Tab("Automatic hand keypoints"):
+                        ref_pose = gr.Image(
+                            type="numpy",
+                            label="Reference Pose",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
                         )
-                        fix_reset_right = gr.Button(
-                            value="Reset", interactive=False, visible=False
+                        ref_use_auto = gr.Button(value="Click here to use automatic, not manual", interactive=False, visible=True)
+                    with gr.Tab("Manual hand keypoints"):
+                        ref_manual_checkbox_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 1.</b> Tell us if this is right, left, or both hands.</p>""",
+                            visible=True,
                         )
-                    fix_kp_l_info = gr.Markdown(
-                        """<p style="text-align: center;">&#9313; Click 21 keypoints on the image to provide the target hand pose of <b>left hand</b>. See the \"OpenPose keypoints convention\" for guidance.</p>""",
-                        visible=False
-                    )
-                    fix_kp_left = gr.Image(
-                        type="numpy",
-                        label="Keypoint Selection (left hand)",
-                        show_label=True,
-                        height=LENGTH,
-                        width=LENGTH,
-                        interactive=False,
-                        visible=False,
-                        sources=[],
-                    )
-                    with gr.Row():
-                        fix_undo_left = gr.Button(
-                            value="Undo", interactive=False, visible=False
+                        ref_manual_checkbox = gr.CheckboxGroup(
+                            ["Right hand", "Left hand"],
+                            show_label=False,
+                            visible=True,
+                            interactive=True,
                         )
-                        fix_reset_left = gr.Button(
-                            value="Reset", interactive=False, visible=False
+                        ref_manual_kp_r_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>right</b> hand. See \"OpenPose Keypoint Convention\" for guidance.</p>""",
+                            visible=False,
+                        )
+                        ref_manual_kp_right = gr.Image(
+                            type="numpy",
+                            label="Keypoint Selection (right hand)",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False,
+                            sources=[],
+                        )
+                        with gr.Row():
+                            ref_manual_undo_right = gr.Button(
+                                value="Undo", interactive=True, visible=False
+                            )
+                            ref_manual_reset_right = gr.Button(
+                                value="Reset", interactive=True, visible=False
+                            )
+                        ref_manual_kp_l_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>left</b> hand. See \"OpenPose keypoint convention\" for guidance.</p>""",
+                            visible=False
+                        )
+                        ref_manual_kp_left = gr.Image(
+                            type="numpy",
+                            label="Keypoint Selection (left hand)",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False,
+                            sources=[],
+                        )
+                        with gr.Row():
+                            ref_manual_undo_left = gr.Button(
+                                value="Undo", interactive=True, visible=False
+                            )
+                            ref_manual_reset_left = gr.Button(
+                                value="Reset", interactive=True, visible=False
+                            )
+                        ref_manual_done_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 3.</b> Hit \"Done\" button to confirm.</p>""",
+                            visible=False,
+                        )
+                        ref_manual_done = gr.Button(value="Done", interactive=True, visible=False)
+                        ref_manual_pose = gr.Image(
+                            type="numpy",
+                            label="Reference Pose",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False
+                        )
+                        ref_use_manual = gr.Button(value="Click here to use manual, not automatic", interactive=True, visible=False)
+                        ref_manual_instruct = gr.Markdown(
+                            value="""<p style="text-align: left; font-weight: bold; ">OpenPose Keypoints Convention</p>""",
+                            visible=True
+                        )
+                        ref_manual_openpose = gr.Image(
+                            value="openpose.png",
+                            type="numpy",
+                            show_label=False,
+                            height=LENGTH // 2,
+                            width=LENGTH // 2,
+                            interactive=False,
+                            visible=True
                         )
                     gr.Markdown(
-                        """<p style="text-align: left; font-weight: bold; ">OpenPose keypoints convention</p>"""
+                        """<p style="text-align: center;">Optionally flip the hand</p>"""
                     )
-                    fix_openpose = gr.Image(
-                        value="openpose.png",
-                        type="numpy",
-                        show_label=False,
-                        height=LENGTH // 2,
-                        width=LENGTH // 2,
-                        interactive=False,
+                    ref_flip = gr.Checkbox(
+                        value=False, label="Flip Handedness (Reference)", interactive=False
                     )
             
-            # result column
+            # target column
             with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">4. Press &quot;Run&quot; to get the corrected hand image 🎯</p>"""
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">2. Upload a hand image for target hand pose 📥</p>"""
                 )
-                fix_vis_mask32 = gr.Image(
+                # gr.Markdown(
+                #     """<p style="text-align: center;">Optionally crop the image</p>"""
+                # )
+                target = gr.ImageEditor(
                     type="numpy",
-                    label=f"Visualized {opts.latent_size} Inpaint Mask",
+                    label="Target",
                     show_label=True,
-                    height=opts.latent_size,
-                    width=opts.latent_size,
-                    interactive=False,
-                    visible=False,
+                    height=LENGTH,
+                    width=LENGTH,
+                    brush=False,
+                    layers=False,
+                    crop_size="1:1",
                 )
-                fix_run = gr.Button(value="Run", interactive=False)
-                with gr.Accordion(label="Visualized (256, 256) resized, brushed image", open=False):
-                    fix_vis_mask256 = gr.Image(
-                        type="numpy",
-                        show_label=False,
-                        height=opts.image_size,
-                        width=opts.image_size,
-                        interactive=False,
-                        visible=True,
+                gr.Examples(example_target_imgs, [target], examples_per_page=20)
+                with gr.Accordion(label="See hand pose", open=False):
+                    with gr.Tab("Automatic hand keypoints"):
+                        target_pose = gr.Image(
+                            type="numpy",
+                            label="Target Pose",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                        )
+                        target_use_auto = gr.Button(value="Click here to use automatic, not manual", interactive=False, visible=True)
+                    with gr.Tab("Manual hand keypoints"):
+                        target_manual_checkbox_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 1.</b> Tell us if this is right, left, or both hands.</p>""",
+                            visible=True,
+                        )
+                        target_manual_checkbox = gr.CheckboxGroup(
+                            ["Right hand", "Left hand"],
+                            show_label=False,
+                            visible=True,
+                            interactive=True,
+                        )
+                        target_manual_kp_r_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>right</b> hand. See \"OpenPose Keypoint Convention\" for guidance.</p>""",
+                            visible=False,
+                        )
+                        target_manual_kp_right = gr.Image(
+                            type="numpy",
+                            label="Keypoint Selection (right hand)",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False,
+                            sources=[],
+                        )
+                        with gr.Row():
+                            target_manual_undo_right = gr.Button(
+                                value="Undo", interactive=True, visible=False
+                            )
+                            target_manual_reset_right = gr.Button(
+                                value="Reset", interactive=True, visible=False
+                            )
+                        target_manual_kp_l_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>left</b> hand. See \"OpenPose keypoint convention\" for guidance.</p>""",
+                            visible=False
+                        )
+                        target_manual_kp_left = gr.Image(
+                            type="numpy",
+                            label="Keypoint Selection (left hand)",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False,
+                            sources=[],
+                        )
+                        with gr.Row():
+                            target_manual_undo_left = gr.Button(
+                                value="Undo", interactive=True, visible=False
+                            )
+                            target_manual_reset_left = gr.Button(
+                                value="Reset", interactive=True, visible=False
+                            )
+                        target_manual_done_info = gr.Markdown(
+                            """<p style="text-align: center;"><b>Step 3.</b> Hit \"Done\" button to confirm.</p>""",
+                            visible=False,
+                        )
+                        target_manual_done = gr.Button(value="Done", interactive=True, visible=False)
+                        target_manual_pose = gr.Image(
+                            type="numpy",
+                            label="Target Pose",
+                            show_label=True,
+                            height=LENGTH,
+                            width=LENGTH,
+                            interactive=False,
+                            visible=False
+                        )
+                        target_use_manual = gr.Button(value="Click here to use manual, not automatic", interactive=True, visible=False)
+                        target_manual_instruct = gr.Markdown(
+                            value="""<p style="text-align: left; font-weight: bold; ">OpenPose Keypoints Convention</p>""",
+                            visible=True
+                        )
+                        target_manual_openpose = gr.Image(
+                            value="openpose.png",
+                            type="numpy",
+                            show_label=False,
+                            height=LENGTH // 2,
+                            width=LENGTH // 2,
+                            interactive=False,
+                            visible=True
+                        )
+                    gr.Markdown(
+                        """<p style="text-align: center;">Optionally flip the hand</p>"""
+                    )
+                    target_flip = gr.Checkbox(
+                        value=False, label="Flip Handedness (Target)", interactive=False
                     )
+
+            # result column
+            with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center;">⚠️  >3min and ~24GB per generation</p>"""
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">3. Press &quot;Run&quot; 🎯</p>"""
                 )
-                fix_result_original = gr.Gallery(
+                run = gr.Button(value="Run", interactive=False, elem_id="run_button")
+                # gr.Markdown(
+                #     """<p style="text-align: center;">⚠️ ~50s per generation</p>""" #  with RTX3090. ~50s with A100. <br>(For example, if you set Number of generations as 2, it would take around 40s)
+                # )
+                results = gr.Gallery(
                     type="numpy",
-                    label="Results on original input",
+                    label="Results",
                     show_label=True,
                     height=LENGTH,
                     min_width=LENGTH,
-                    columns=FIX_MAX_N,
+                    columns=MAX_N,
                     interactive=False,
                     preview=True,
                 )
-                with gr.Accordion(label="Results of cropped area / Results with pose", open=False):
-                    fix_result = gr.Gallery(
-                        type="numpy",
-                        label="Results",
-                        show_label=True,
-                        height=LENGTH,
-                        min_width=LENGTH,
-                        columns=FIX_MAX_N,
-                        interactive=False,
-                        preview=True,
-                    )
-                    fix_result_pose = gr.Gallery(
+                with gr.Accordion(label="Results with pose", open=False):
+                    results_pose = gr.Gallery(
                         type="numpy",
                         label="Results Pose",
                         show_label=True,
                         height=LENGTH,
                         min_width=LENGTH,
-                        columns=FIX_MAX_N,
+                        columns=MAX_N,
                         interactive=False,
                         preview=True,
                     )
-                gr.Markdown(
-                    """<p style="text-align: center;">✨ Hit &quot;Clear&quot; to restart from the beginning</p>"""
-                )
-                fix_clear = gr.ClearButton()
-
-            gr.Examples(
-                fix_example_all,
-                inputs=[fix_crop, fix_ref, fix_kp_all, fix_cfg, fix_seed, fix_kpts_path],
-                examples_per_page=20,
-                postprocess=False,
-                elem_id="fix_examples_all",
-            )
+                # gr.Markdown(
+                #     """<p style="text-align: center;">✨ Hit &quot;Clear&quot; to restart from the beginning</p>"""
+                # )
+                clear = gr.ClearButton(elem_id="clear_button")
 
-        # listeners
-        fix_crop.change(stash_original, fix_crop, fix_original)  # fix_original: (real_H, real_W, 3)
-        fix_crop.change(stay_crop, [fix_crop, fix_crop_coord], [fix_crop_coord, fix_ref])
-        fix_crop.select(process_crop, [fix_crop, fix_crop_coord], [fix_crop_coord, fix_ref, fix_crop])
-        fix_ref.change(visualize_ref, [fix_ref], [fix_img, fix_inpaint_mask])
-        fix_img.change(lambda x: x, [fix_img], [fix_kp_right])
-        fix_img.change(lambda x: x, [fix_img], [fix_kp_left])
-        fix_ref.change(
-            enable_component, [fix_ref, fix_ref], fix_checkbox
-        )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_kp_right
-        )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_undo_right
+        # more options
+        with gr.Accordion(label="More options", open=False):
+            with gr.Row():
+                n_generation = gr.Slider(
+                    label="Number of generations",
+                    value=1,
+                    minimum=1,
+                    maximum=MAX_N,
+                    step=1,
+                    randomize=False,
+                    interactive=True,
+                )
+                seed = gr.Slider(
+                    label="Seed",
+                    value=42,
+                    minimum=0,
+                    maximum=10000,
+                    step=1,
+                    randomize=False,
+                    interactive=True,
+                )
+                cfg = gr.Slider(
+                    label="Classifier free guidance scale",
+                    value=2.5,
+                    minimum=0.0,
+                    maximum=10.0,
+                    step=0.1,
+                    randomize=False,
+                    interactive=True,
+                )
+
+        # tutorial video
+        with gr.Accordion("Tutorial Video of Demo 1", elem_id="accordion_bold_large_center"):
+            # gr.Markdown("""<p style="text-align: center; font-size: 20px; font-weight: bold;"></p>""")
+            with gr.Row(variant="panel", elem_id="repose_tutorial"):
+                with gr.Column():
+                    # gr.Video(
+                    #     "how_to_videos/subtitled_repose_hands.mp4",
+                    #     label="Tutorial",
+                    #     autoplay=True,
+                    #     loop=True,
+                    #     show_label=True,
+                    # )
+                    gr.HTML(tut2_example)
+
+        # reference listeners
+        ref.change(prepare_anno, [ref, ref_is_user], [ref_im_raw, ref_kp_raw])
+        ref_kp_raw.change(lambda x: x, ref_im_raw, ref_manual_kp_right)
+        ref_kp_raw.change(lambda x: x, ref_im_raw, ref_manual_kp_left)
+        ref_kp_raw.change(get_ref_anno, [ref_im_raw, ref_kp_raw], [ref_img, ref_pose, ref_auto_cond, ref, ref_is_user])
+        ref_pose.change(enable_component, [ref_kp_raw, ref_pose], ref_use_auto)
+        ref_pose.change(enable_component, [ref_img, ref_pose], ref_flip)
+        ref_auto_cond.change(lambda x: x, ref_auto_cond, ref_cond)
+        ref_use_auto.click(lambda x: x, ref_auto_cond, ref_cond)
+        ref_use_auto.click(lambda x: gr.Info("Automatic hand keypoints will be used for 'Reference'", duration=3))
+        
+        ref_manual_checkbox.select(
+            set_visible,
+            [ref_manual_checkbox, ref_kp_got, ref_im_raw, ref_manual_kp_right, ref_manual_kp_left, ref_manual_done],
+            [
+                ref_kp_got,
+                ref_manual_kp_right,
+                ref_manual_kp_left,
+                ref_manual_kp_right,
+                ref_manual_undo_right,
+                ref_manual_reset_right,
+                ref_manual_kp_left,
+                ref_manual_undo_left,
+                ref_manual_reset_left,
+                ref_manual_kp_r_info,
+                ref_manual_kp_l_info,
+                ref_manual_done,
+                ref_manual_done_info
+            ]
         )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_reset_right
+        ref_manual_kp_right.select(
+            get_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
         )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_kp_left
+        ref_manual_undo_right.click(
+            undo_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
         )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_undo_left
+        ref_manual_reset_right.click(
+            reset_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
         )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_reset_left
+        ref_manual_kp_left.select(
+            get_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
         )
-        fix_inpaint_mask.change(
-            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_run
+        ref_manual_undo_left.click(
+            undo_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
         )
-        fix_checkbox.select(
+        ref_manual_reset_left.click(
+            reset_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
+        )
+        ref_manual_done.click(visible_component, [gr.State(0), ref_manual_pose], ref_manual_pose)
+        ref_manual_done.click(visible_component, [gr.State(0), ref_use_manual], ref_use_manual)
+        ref_manual_done.click(get_ref_anno, [ref_im_raw, ref_kp_got], [ref_img, ref_manual_pose, ref_manual_cond])
+        ref_manual_pose.change(enable_component, [ref_manual_pose, ref_manual_pose], ref_manual_done)
+        ref_manual_pose.change(enable_component, [ref_img, ref_manual_pose], ref_flip)
+        ref_manual_cond.change(lambda x: x, ref_manual_cond, ref_cond)
+        ref_use_manual.click(lambda x: x, ref_manual_cond, ref_cond)
+        ref_use_manual.click(lambda x: gr.Info("Manual hand keypoints will be used for 'Reference'", duration=3))
+        
+        ref_flip.select(
+            flip_hand,
+            [ref, ref_im_raw, ref_pose, ref_manual_pose, ref_manual_kp_right, ref_manual_kp_left, ref_cond, ref_auto_cond, ref_manual_cond],
+            [ref, ref_im_raw, ref_pose, ref_manual_pose, ref_manual_kp_right, ref_manual_kp_left, ref_cond, ref_auto_cond, ref_manual_cond]
+        )
+
+        # target listeners
+        target.change(prepare_anno, [target, target_is_user], [target_im_raw, target_kp_raw])
+        target_kp_raw.change(lambda x:x, target_im_raw, target_manual_kp_right)
+        target_kp_raw.change(lambda x:x, target_im_raw, target_manual_kp_left)
+        target_kp_raw.change(get_target_anno, [target_im_raw, target_kp_raw], [target_img, target_pose, target_auto_cond, target_auto_keypts, target, target_is_user])
+        target_pose.change(enable_component, [target_kp_raw, target_pose], target_use_auto)
+        target_pose.change(enable_component, [target_img, target_pose], target_flip)
+        target_auto_cond.change(lambda x: x, target_auto_cond, target_cond)
+        target_auto_keypts.change(lambda x: x, target_auto_keypts, target_keypts)
+        target_use_auto.click(lambda x: x, target_auto_cond, target_cond)
+        target_use_auto.click(lambda x: x, target_auto_keypts, target_keypts)
+        target_use_auto.click(lambda x: gr.Info("Automatic hand keypoints will be used for 'Target'", duration=3))
+
+        target_manual_checkbox.select(
             set_visible,
-            [fix_checkbox, fix_kpts, fix_img, fix_kp_right, fix_kp_left],
+            [target_manual_checkbox, target_kp_got, target_im_raw, target_manual_kp_right, target_manual_kp_left, target_manual_done],
             [
-                fix_kpts,
-                fix_kp_right,
-                fix_kp_left,
-                fix_kp_right,
-                fix_undo_right,
-                fix_reset_right,
-                fix_kp_left,
-                fix_undo_left,
-                fix_reset_left,
-                fix_kp_r_info,
-                fix_kp_l_info,
-            ],
+                target_kp_got,
+                target_manual_kp_right,
+                target_manual_kp_left,
+                target_manual_kp_right,
+                target_manual_undo_right,
+                target_manual_reset_right,
+                target_manual_kp_left,
+                target_manual_undo_left,
+                target_manual_reset_left,
+                target_manual_kp_r_info,
+                target_manual_kp_l_info,
+                target_manual_done,
+                target_manual_done_info
+            ]
         )
-        fix_kp_right.select(
-            get_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]  # fix_img: (real_cropped_H, real_cropped_W, 3)
+        target_manual_kp_right.select(
+            get_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
         )
-        fix_undo_right.click(
-            undo_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]
+        target_manual_undo_right.click(
+            undo_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
         )
-        fix_reset_right.click(
-            reset_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]
+        target_manual_reset_right.click(
+            reset_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
         )
-        fix_kp_left.select(
-            get_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
+        target_manual_kp_left.select(
+            get_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
         )
-        fix_undo_left.click(
-            undo_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
+        target_manual_undo_left.click(
+            undo_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
         )
-        fix_reset_left.click(
-            reset_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
+        target_manual_reset_left.click(
+            reset_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
         )
-        fix_kpts_path.change(read_kpts, fix_kpts_path, fix_kpts_np)
-        fix_inpaint_mask.change(enable_component, [fix_inpaint_mask, fix_kpts_np], fix_run)
-        fix_kpts_np.change(enable_component, [fix_inpaint_mask, fix_kpts_np], fix_run)
-        fix_run.click(
-            ready_sample,
-            [fix_ref, fix_inpaint_mask, fix_kpts, fix_kpts_np],
-            [
-                fix_ref_cond,
-                fix_target_cond,
-                fix_latent,
-                fix_inpaint_latent,
-                fix_kpts_np,
-                fix_vis_mask32,
-                fix_vis_mask256,
-            ],
+        target_manual_done.click(visible_component, [gr.State(0), target_manual_pose], target_manual_pose)
+        target_manual_done.click(visible_component, [gr.State(0), target_use_manual], target_use_manual)
+        target_manual_done.click(get_target_anno, [target_im_raw, target_kp_got], [target_img, target_manual_pose, target_manual_cond, target_manual_keypts])
+        target_manual_pose.change(enable_component, [target_manual_pose, target_manual_pose], target_manual_done)
+        target_manual_pose.change(enable_component, [target_img, target_manual_pose], target_flip)
+        target_manual_cond.change(lambda x: x, target_manual_cond, target_cond)
+        target_manual_keypts.change(lambda x: x, target_manual_keypts, target_keypts)
+        target_use_manual.click(lambda x: x, target_manual_cond, target_cond)
+        target_use_manual.click(lambda x: x, target_manual_keypts, target_keypts)
+        target_use_manual.click(lambda x: gr.Info("Manual hand keypoints will be used for 'Reference'", duration=3))
+
+        target_flip.select(
+            flip_hand,
+            [target, target_im_raw, target_pose, target_manual_pose, target_manual_kp_right, target_manual_kp_left, target_cond, target_auto_cond, target_manual_cond, target_keypts, target_auto_keypts, target_manual_keypts],
+            [target, target_im_raw, target_pose, target_manual_pose, target_manual_kp_right, target_manual_kp_left, target_cond, target_auto_cond, target_manual_cond, target_keypts, target_auto_keypts, target_manual_keypts],
         )
-        fix_inpaint_latent.change(
-            sample_inpaint,
-            [
-                fix_ref_cond,
-                fix_target_cond,
-                fix_latent,
-                fix_inpaint_latent,
-                fix_kpts_np,
-                fix_original,
-                fix_crop_coord,
-                fix_n_generation,
-                fix_seed,
-                fix_cfg,
-                fix_quality,
-            ],
-            [fix_result, fix_result_pose, fix_result_original],
+        
+        # run listerners
+        ref_cond.change(enable_component, [ref_cond, target_cond], run)
+        target_cond.change(enable_component, [ref_cond, target_cond], run)
+        run.click(
+            sample_diff,
+            [ref_cond, target_cond, target_keypts, n_generation, seed, cfg],
+            [results, results_pose],
         )
-        fix_clear.click(
-            fix_clear_all,
+        clear.click(
+            clear_all,
             [],
             [
-                fix_crop,
-                fix_crop_coord,
-                fix_ref,
-                fix_checkbox,
-                fix_kp_all,
-                fix_kp_right,
-                fix_kp_left,
-                fix_result,
-                fix_result_pose,
-                fix_result_original,
-                fix_inpaint_mask,
-                fix_original,
-                fix_img,
-                fix_vis_mask32,
-                fix_vis_mask256,
-                fix_kpts,
-                fix_kpts_np,
-                fix_ref_cond,
-                fix_target_cond,
-                fix_latent,
-                fix_inpaint_latent,
-                fix_kpts_path,
-                fix_n_generation,
-                fix_seed,
-                fix_cfg,
-                fix_quality,
+                ref,
+                ref_manual_checkbox,
+                ref_manual_kp_right,
+                ref_manual_kp_left,
+                ref_img,
+                ref_pose,
+                ref_manual_pose,
+                ref_cond,
+                ref_flip,
+                target,
+                target_keypts,
+                target_manual_checkbox,
+                target_manual_kp_right,
+                target_manual_kp_left,
+                target_img,
+                target_pose,
+                target_manual_pose,
+                target_cond,
+                target_flip,
+                results,
+                results_pose,
+                n_generation,
+                seed,
+                cfg,
+                ref_kp_raw,
             ],
         )
-        fix_clear.click(
-            fix_set_unvisible,
+        clear.click(
+            set_unvisible,
             [],
             [
-                fix_kp_right,
-                fix_kp_left,
-                fix_kp_r_info,
-                fix_kp_l_info,
-                fix_undo_left,
-                fix_undo_right,
-                fix_reset_left,
-                fix_reset_right
+                ref_manual_kp_l_info,
+                ref_manual_kp_r_info,
+                ref_manual_kp_left,
+                ref_manual_kp_right,
+                ref_manual_undo_left,
+                ref_manual_undo_right,
+                ref_manual_reset_left,
+                ref_manual_reset_right,
+                ref_manual_done,
+                ref_manual_done_info,
+                ref_manual_pose,
+                ref_use_manual,
+                target_manual_kp_l_info,
+                target_manual_kp_r_info,
+                target_manual_kp_left,
+                target_manual_kp_right,
+                target_manual_undo_left,
+                target_manual_undo_right,
+                target_manual_reset_left,
+                target_manual_reset_right,
+                target_manual_done,
+                target_manual_done_info,
+                target_manual_pose,
+                target_use_manual,
             ]
         )
-
-    with gr.Tab("Demo 2. Repose Hands", elem_id="repose-tab"):
-        # ref states
-        dump = gr.State(value=None)
-        ref_img = gr.State(value=None)
-        ref_im_raw = gr.State(value=None)
-        ref_kp_raw = gr.State(value=0)
-        ref_is_user = gr.State(value=True)
-        ref_kp_got = gr.State(value=None)
-        ref_manual_cond = gr.State(value=None)
-        ref_auto_cond = gr.State(value=None)
-        ref_cond = gr.State(value=None)
-
-        # target states
-        target_img = gr.State(value=None)
-        target_im_raw = gr.State(value=None)
-        target_kp_raw = gr.State(value=0)
-        target_is_user = gr.State(value=True)
-        target_kp_got = gr.State(value=None)
-        target_manual_keypts = gr.State(value=None)
-        target_auto_keypts = gr.State(value=None)
-        target_keypts = gr.State(value=None)
-        target_manual_cond = gr.State(value=None)
-        target_auto_cond = gr.State(value=None)
-        target_cond = gr.State(value=None)
-
-        # tutorial video
-        with gr.Accordion(""):
-            gr.Markdown("""<p style="text-align: center; font-size: 20px; font-weight: bold;">Tutorial Videos of Demo 2</p>""")
-            with gr.Row(variant="panel", elem_id="repose_tutorial"):
-                with gr.Column():
-                    # gr.Video(
-                    #     "how_to_videos/subtitled_repose_hands.mp4",
-                    #     label="Tutorial",
-                    #     autoplay=True,
-                    #     loop=True,
-                    #     show_label=True,
-                    # )
-                    gr.HTML(tut2_example)
-
+   
+    with gr.Tab("Demo 2. Malformed Hand Correction", elem_id="fix-tab"):
+        fix_inpaint_mask = gr.State(value=None)
+        fix_original = gr.State(value=None)
+        fix_crop_coord = gr.State(value=None)
+        fix_img = gr.State(value=None)
+        fix_kpts = gr.State(value=None)
+        fix_kpts_path = gr.Textbox(visible=False)
+        fix_kpts_np = gr.State(value=None)
+        fix_ref_cond = gr.State(value=None)
+        fix_target_cond = gr.State(value=None)
+        fix_latent = gr.State(value=None)
+        fix_inpaint_latent = gr.State(value=None)
+        
+        # more options
+        with gr.Accordion(label="More options", open=False):
+            gr.Markdown(
+                "⚠️ Currently, Number of generation > 1 could lead to out-of-memory"
+            )
+            with gr.Row():
+                fix_n_generation = gr.Slider(
+                    label="Number of generations",
+                    value=1,
+                    minimum=1,
+                    maximum=FIX_MAX_N,
+                    step=1,
+                    randomize=False,
+                    interactive=True,
+                )
+                fix_seed = gr.Slider(
+                    label="Seed",
+                    value=42,
+                    minimum=0,
+                    maximum=10000,
+                    step=1,
+                    randomize=False,
+                    interactive=True,
+                )
+                fix_cfg = gr.Slider(
+                    label="Classifier free guidance scale",
+                    value=3.0,
+                    minimum=0.0,
+                    maximum=10.0,
+                    step=0.1,
+                    randomize=False,
+                    interactive=True,
+                )
+                fix_quality = gr.Slider(
+                    label="Quality",
+                    value=10,
+                    minimum=1,
+                    maximum=10,
+                    step=1,
+                    randomize=False,
+                    interactive=True,
+                )
+        
         # main tabs
         with gr.Row():
-            # ref column
+            # crop & brush
             with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">1. Upload a hand image to repose 📥</p>"""
-                )
-                gr.Markdown(
-                    """<p style="text-align: center;">Optionally crop the image</p>"""
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">1. Upload a malformed hand image 📥</p>"""
                 )
-                ref = gr.ImageEditor(
+                fix_crop = gr.Image(
                     type="numpy",
-                    label="Reference",
+                    sources=["upload", "webcam", "clipboard"],
+                    label="Input Image",
                     show_label=True,
                     height=LENGTH,
                     width=LENGTH,
-                    brush=False,
-                    layers=False,
-                    crop_size="1:1",
+                    interactive=True,
+                    visible=True,
+                    image_mode="RGBA"
                 )
-                gr.Examples(example_ref_imgs, [ref], examples_per_page=20)
-                with gr.Accordion(label="See hand pose and more options", open=False):
-                    with gr.Tab("Automatic hand keypoints"):
-                        ref_pose = gr.Image(
-                            type="numpy",
-                            label="Reference Pose",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                        )
-                        ref_use_auto = gr.Button(value="Click here to use automatic, not manual", interactive=False, visible=True)
-                    with gr.Tab("Manual hand keypoints"):
-                        ref_manual_checkbox_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 1.</b> Tell us if this is right, left, or both hands.</p>""",
-                            visible=True,
-                        )
-                        ref_manual_checkbox = gr.CheckboxGroup(
-                            ["Right hand", "Left hand"],
-                            show_label=False,
-                            visible=True,
-                            interactive=True,
-                        )
-                        ref_manual_kp_r_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>right</b> hand. See \"OpenPose Keypoint Convention\" for guidance.</p>""",
-                            visible=False,
-                        )
-                        ref_manual_kp_right = gr.Image(
-                            type="numpy",
-                            label="Keypoint Selection (right hand)",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False,
-                            sources=[],
-                        )
-                        with gr.Row():
-                            ref_manual_undo_right = gr.Button(
-                                value="Undo", interactive=True, visible=False
-                            )
-                            ref_manual_reset_right = gr.Button(
-                                value="Reset", interactive=True, visible=False
-                            )
-                        ref_manual_kp_l_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>left</b> hand. See \"OpenPose keypoint convention\" for guidance.</p>""",
-                            visible=False
-                        )
-                        ref_manual_kp_left = gr.Image(
-                            type="numpy",
-                            label="Keypoint Selection (left hand)",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False,
-                            sources=[],
-                        )
-                        with gr.Row():
-                            ref_manual_undo_left = gr.Button(
-                                value="Undo", interactive=True, visible=False
-                            )
-                            ref_manual_reset_left = gr.Button(
-                                value="Reset", interactive=True, visible=False
-                            )
-                        ref_manual_done_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 3.</b> Hit \"Done\" button to confirm.</p>""",
-                            visible=False,
-                        )
-                        ref_manual_done = gr.Button(value="Done", interactive=True, visible=False)
-                        ref_manual_pose = gr.Image(
-                            type="numpy",
-                            label="Reference Pose",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False
-                        )
-                        ref_use_manual = gr.Button(value="Click here to use manual, not automatic", interactive=True, visible=False)
-                        ref_manual_instruct = gr.Markdown(
-                            value="""<p style="text-align: left; font-weight: bold; ">OpenPose Keypoints Convention</p>""",
-                            visible=True
-                        )
-                        ref_manual_openpose = gr.Image(
-                            value="openpose.png",
-                            type="numpy",
-                            show_label=False,
-                            height=LENGTH // 2,
-                            width=LENGTH // 2,
-                            interactive=False,
-                            visible=True
-                        )
-                    gr.Markdown(
-                        """<p style="text-align: center;">Optionally flip the hand</p>"""
-                    )
-                    ref_flip = gr.Checkbox(
-                        value=False, label="Flip Handedness (Reference)", interactive=False
-                    )
-            
-            # target column
-            with gr.Column():
+                # gr.Markdown(
+                #     """<p style="text-align: center;">💡 If you crop, the model can focus on more details of the cropped area. Square crops might work better than rectangle crops.</p>"""
+                # )
+                # fix_example = gr.Examples(
+                #     fix_example_imgs,
+                #     inputs=[fix_crop],
+                #     examples_per_page=20,
+                # )
                 gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">2. Upload a hand image for target hand pose 📥</p>"""
+                    """<p style="text-align: center;">To crop, click <b>top left</b> and <b>bottom right</b></p>""" # of your desired bounding box around the hand)
                 )
+            with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center;">Optionally crop the image</p>"""
-                )
-                target = gr.ImageEditor(
-                    type="numpy",
-                    label="Target",
-                    show_label=True,
-                    height=LENGTH,
-                    width=LENGTH,
-                    brush=False,
-                    layers=False,
-                    crop_size="1:1",
-                )
-                gr.Examples(example_target_imgs, [target], examples_per_page=20)
-                with gr.Accordion(label="See hand pose and more options", open=False):
-                    with gr.Tab("Automatic hand keypoints"):
-                        target_pose = gr.Image(
-                            type="numpy",
-                            label="Target Pose",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                        )
-                        target_use_auto = gr.Button(value="Click here to use automatic, not manual", interactive=False, visible=True)
-                    with gr.Tab("Manual hand keypoints"):
-                        target_manual_checkbox_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 1.</b> Tell us if this is right, left, or both hands.</p>""",
-                            visible=True,
-                        )
-                        target_manual_checkbox = gr.CheckboxGroup(
-                            ["Right hand", "Left hand"],
-                            show_label=False,
-                            visible=True,
-                            interactive=True,
-                        )
-                        target_manual_kp_r_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>right</b> hand. See \"OpenPose Keypoint Convention\" for guidance.</p>""",
-                            visible=False,
-                        )
-                        target_manual_kp_right = gr.Image(
-                            type="numpy",
-                            label="Keypoint Selection (right hand)",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False,
-                            sources=[],
-                        )
-                        with gr.Row():
-                            target_manual_undo_right = gr.Button(
-                                value="Undo", interactive=True, visible=False
-                            )
-                            target_manual_reset_right = gr.Button(
-                                value="Reset", interactive=True, visible=False
-                            )
-                        target_manual_kp_l_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 2.</b> Click on image to provide hand keypoints for <b>left</b> hand. See \"OpenPose keypoint convention\" for guidance.</p>""",
-                            visible=False
-                        )
-                        target_manual_kp_left = gr.Image(
-                            type="numpy",
-                            label="Keypoint Selection (left hand)",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False,
-                            sources=[],
-                        )
-                        with gr.Row():
-                            target_manual_undo_left = gr.Button(
-                                value="Undo", interactive=True, visible=False
-                            )
-                            target_manual_reset_left = gr.Button(
-                                value="Reset", interactive=True, visible=False
-                            )
-                        target_manual_done_info = gr.Markdown(
-                            """<p style="text-align: center;"><b>Step 3.</b> Hit \"Done\" button to confirm.</p>""",
-                            visible=False,
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">2. Brush wrong finger and surrounding area</p>"""
+                )
+                # gr.Markdown(
+                #     """<p style="text-align: center;">Don't brush the entire hand!</p>"""
+                # )
+                fix_ref = gr.ImageEditor(
+                    type="numpy",
+                    label="Image Brushing",
+                    sources=(),
+                    show_label=True,
+                    height=LENGTH,
+                    width=LENGTH,
+                    layers=False,
+                    transforms=("brush"),
+                    brush=gr.Brush(
+                        colors=["rgb(255, 255, 255)"], default_size=20
+                    ),  # 204, 50, 50
+                    image_mode="RGBA",
+                    container=False,
+                    interactive=True,
+                )
+                # fix_ex_brush = gr.Examples(
+                #     fix_example_brush,
+                #     inputs=[fix_ref],
+                #     examples_per_page=20,
+                # )
+            
+            # keypoint selection
+            with gr.Column():
+                gr.Markdown(
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">3. Target hand pose</p>"""
+                )
+                # gr.Markdown(
+                #     """<p style="text-align: center;">Either get hand pose from Examples, or manually give hand pose (located at the bottom)</p>"""
+                # )
+                fix_kp_all = gr.Image(
+                    type="numpy",
+                    label="Target Hand Pose",
+                    show_label=False,
+                    height=LENGTH,
+                    width=LENGTH,
+                    interactive=False,
+                    visible=True,
+                    sources=(),
+                    image_mode="RGBA"
+                )
+                # with gr.Accordion(open=True):
+                #     fix_ex_kpts = gr.Examples(
+                #         fix_example_kpts,
+                #         inputs=[fix_kp_all, fix_cfg, fix_seed, fix_kpts_path],
+                #         examples_per_page=20,
+                #         postprocess=False,
+                #         elem_id="kpts_examples"
+                #     )
+                with gr.Accordion("[Your own image] Manually give hand pose", open=False, elem_id="accordion_bold"):
+                    gr.Markdown(
+                        """<p style="text-align: center;">&#9312; Tell us if this is right, left, or both hands</p>"""
+                    )
+                    fix_checkbox = gr.CheckboxGroup(
+                        ["Right hand", "Left hand"],
+                        show_label=False,
+                        interactive=False,
+                    )
+                    fix_kp_r_info = gr.Markdown(
+                        """<p style="text-align: center;">&#9313; Click 21 keypoints on the image to provide the target hand pose of <b>right hand</b>. See the \"OpenPose keypoints convention\" for guidance.</p>""",
+                        visible=False
+                    )
+                    fix_kp_right = gr.Image(
+                        type="numpy",
+                        label="Keypoint Selection (right hand)",
+                        show_label=True,
+                        height=LENGTH,
+                        width=LENGTH,
+                        interactive=False,
+                        visible=False,
+                        sources=[],
+                    )
+                    with gr.Row():
+                        fix_undo_right = gr.Button(
+                            value="Undo", interactive=False, visible=False
                         )
-                        target_manual_done = gr.Button(value="Done", interactive=True, visible=False)
-                        target_manual_pose = gr.Image(
-                            type="numpy",
-                            label="Target Pose",
-                            show_label=True,
-                            height=LENGTH,
-                            width=LENGTH,
-                            interactive=False,
-                            visible=False
+                        fix_reset_right = gr.Button(
+                            value="Reset", interactive=False, visible=False
                         )
-                        target_use_manual = gr.Button(value="Click here to use manual, not automatic", interactive=True, visible=False)
-                        target_manual_instruct = gr.Markdown(
-                            value="""<p style="text-align: left; font-weight: bold; ">OpenPose Keypoints Convention</p>""",
-                            visible=True
+                    fix_kp_l_info = gr.Markdown(
+                        """<p style="text-align: center;">&#9313; Click 21 keypoints on the image to provide the target hand pose of <b>left hand</b>. See the \"OpenPose keypoints convention\" for guidance.</p>""",
+                        visible=False
+                    )
+                    fix_kp_left = gr.Image(
+                        type="numpy",
+                        label="Keypoint Selection (left hand)",
+                        show_label=True,
+                        height=LENGTH,
+                        width=LENGTH,
+                        interactive=False,
+                        visible=False,
+                        sources=[],
+                    )
+                    with gr.Row():
+                        fix_undo_left = gr.Button(
+                            value="Undo", interactive=False, visible=False
                         )
-                        target_manual_openpose = gr.Image(
-                            value="openpose.png",
-                            type="numpy",
-                            show_label=False,
-                            height=LENGTH // 2,
-                            width=LENGTH // 2,
-                            interactive=False,
-                            visible=True
+                        fix_reset_left = gr.Button(
+                            value="Reset", interactive=False, visible=False
                         )
                     gr.Markdown(
-                        """<p style="text-align: center;">Optionally flip the hand</p>"""
+                        """<p style="text-align: left; font-weight: bold; ">OpenPose keypoints convention</p>"""
                     )
-                    target_flip = gr.Checkbox(
-                        value=False, label="Flip Handedness (Target)", interactive=False
+                    fix_openpose = gr.Image(
+                        value="openpose.png",
+                        type="numpy",
+                        show_label=False,
+                        height=LENGTH // 2,
+                        width=LENGTH // 2,
+                        interactive=False,
                     )
-
+            
             # result column
             with gr.Column():
                 gr.Markdown(
-                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">3. Press &quot;Run&quot; to get the reposed results 🎯</p>"""
+                    """<p style="text-align: center; font-size: 18px; font-weight: bold;">4. Press &quot;Run&quot; 🎯</p>"""
                 )
-                run = gr.Button(value="Run", interactive=False)
-                gr.Markdown(
-                    """<p style="text-align: center;">⚠️ ~20s per generation with RTX3090. ~50s with A100. <br>(For example, if you set Number of generations as 2, it would take around 40s)</p>"""
+                fix_vis_mask32 = gr.Image(
+                    type="numpy",
+                    label=f"Visualized {opts.latent_size} Inpaint Mask",
+                    show_label=True,
+                    height=opts.latent_size,
+                    width=opts.latent_size,
+                    interactive=False,
+                    visible=False,
                 )
-                results = gr.Gallery(
+                fix_run = gr.Button(value="Run", interactive=False, elem_id="run_button")
+                fix_vis_mask256 = gr.Image(
+                    type="numpy",
+                    show_label=False,
+                    height=opts.image_size,
+                    width=opts.image_size,
+                    interactive=False,
+                    visible=False,
+                )
+                # gr.Markdown(
+                #     """<p style="text-align: center;">⚠️  >3min per generation</p>"""
+                # )
+                fix_result_original = gr.Gallery(
                     type="numpy",
                     label="Results",
                     show_label=True,
                     height=LENGTH,
                     min_width=LENGTH,
-                    columns=MAX_N,
+                    columns=FIX_MAX_N,
                     interactive=False,
                     preview=True,
                 )
-                with gr.Accordion(label="Results with pose", open=False):
-                    results_pose = gr.Gallery(
+                with gr.Accordion(label="Results of cropped area / Results with pose", open=False):
+                    fix_result = gr.Gallery(
+                        type="numpy",
+                        label="Results of cropped area",
+                        show_label=True,
+                        height=LENGTH,
+                        min_width=LENGTH,
+                        columns=FIX_MAX_N,
+                        interactive=False,
+                        preview=True,
+                    )
+                    fix_result_pose = gr.Gallery(
                         type="numpy",
                         label="Results Pose",
                         show_label=True,
                         height=LENGTH,
                         min_width=LENGTH,
-                        columns=MAX_N,
+                        columns=FIX_MAX_N,
                         interactive=False,
                         preview=True,
                     )
-                gr.Markdown(
-                    """<p style="text-align: center;">✨ Hit &quot;Clear&quot; to restart from the beginning</p>"""
-                )
-                clear = gr.ClearButton()
+                # gr.Markdown(
+                #     """<p style="text-align: center;">✨ Hit &quot;Clear&quot; to restart from the beginning</p>"""
+                # )
+                fix_clear = gr.ClearButton(elem_id="clear_button")
 
-        # more options
-        with gr.Accordion(label="More options", open=False):
-            with gr.Row():
-                n_generation = gr.Slider(
-                    label="Number of generations",
-                    value=1,
-                    minimum=1,
-                    maximum=MAX_N,
-                    step=1,
-                    randomize=False,
-                    interactive=True,
-                )
-                seed = gr.Slider(
-                    label="Seed",
-                    value=42,
-                    minimum=0,
-                    maximum=10000,
-                    step=1,
-                    randomize=False,
-                    interactive=True,
-                )
-                cfg = gr.Slider(
-                    label="Classifier free guidance scale",
-                    value=2.5,
-                    minimum=0.0,
-                    maximum=10.0,
-                    step=0.1,
-                    randomize=False,
-                    interactive=True,
-                )
+            gr.Examples(
+                fix_example_all,
+                inputs=[fix_crop, fix_ref, fix_kp_all, fix_cfg, fix_seed, fix_kpts_path],
+                examples_per_page=20,
+                postprocess=False,
+                elem_id="fix_examples_all",
+            )
 
-        # reference listeners
-        ref.change(prepare_anno, [ref, ref_is_user], [ref_im_raw, ref_kp_raw])
-        ref_kp_raw.change(lambda x: x, ref_im_raw, ref_manual_kp_right)
-        ref_kp_raw.change(lambda x: x, ref_im_raw, ref_manual_kp_left)
-        ref_kp_raw.change(get_ref_anno, [ref_im_raw, ref_kp_raw], [ref_img, ref_pose, ref_auto_cond, ref, ref_is_user])
-        ref_pose.change(enable_component, [ref_kp_raw, ref_pose], ref_use_auto)
-        ref_pose.change(enable_component, [ref_img, ref_pose], ref_flip)
-        ref_auto_cond.change(lambda x: x, ref_auto_cond, ref_cond)
-        ref_use_auto.click(lambda x: x, ref_auto_cond, ref_cond)
-        ref_use_auto.click(lambda x: gr.Info("Automatic hand keypoints will be used for 'Reference'", duration=3))
-        
-        ref_manual_checkbox.select(
-            set_visible,
-            [ref_manual_checkbox, ref_kp_got, ref_im_raw, ref_manual_kp_right, ref_manual_kp_left, ref_manual_done],
-            [
-                ref_kp_got,
-                ref_manual_kp_right,
-                ref_manual_kp_left,
-                ref_manual_kp_right,
-                ref_manual_undo_right,
-                ref_manual_reset_right,
-                ref_manual_kp_left,
-                ref_manual_undo_left,
-                ref_manual_reset_left,
-                ref_manual_kp_r_info,
-                ref_manual_kp_l_info,
-                ref_manual_done,
-                ref_manual_done_info
-            ]
+        # tutorial video
+        with gr.Accordion("Tutorial Videos of Demo 2", elem_id="accordion_bold_large_center"):
+            # gr.Markdown("""<p style="text-align: center; font-size: 20px; font-weight: bold;"></p>""")
+            with gr.Row(variant="panel"):
+                with gr.Column():
+                    # gr.Video(
+                        # "how_to_videos/subtitled_fix_hands_custom.mp4",
+                        # label="Using your own image",
+                        # autoplay=True,
+                        # loop=True,
+                        # show_label=True,
+                    # )
+                    gr.HTML(tut1_custom)
+                with gr.Column():
+                    # gr.Video(
+                    #     "how_to_videos/subtitled_fix_hands_example.mp4",
+                    #     label="Using our example image",
+                    #     autoplay=True,
+                    #     loop=True,
+                    #     show_label=True,
+                    # )
+                    gr.HTML(tut1_example)
+
+        # listeners
+        fix_crop.change(stash_original, fix_crop, fix_original)  # fix_original: (real_H, real_W, 3)
+        fix_crop.change(stay_crop, [fix_crop, fix_crop_coord], [fix_crop_coord, fix_ref])
+        fix_crop.select(process_crop, [fix_crop, fix_crop_coord], [fix_crop_coord, fix_ref, fix_crop])
+        fix_ref.change(visualize_ref, [fix_ref], [fix_img, fix_inpaint_mask])
+        fix_img.change(lambda x: x, [fix_img], [fix_kp_right])
+        fix_img.change(lambda x: x, [fix_img], [fix_kp_left])
+        fix_ref.change(
+            enable_component, [fix_ref, fix_ref], fix_checkbox
         )
-        ref_manual_kp_right.select(
-            get_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_kp_right
         )
-        ref_manual_undo_right.click(
-            undo_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_undo_right
         )
-        ref_manual_reset_right.click(
-            reset_kps, [ref_im_raw, ref_kp_got, gr.State("right")], [ref_manual_kp_right, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_reset_right
         )
-        ref_manual_kp_left.select(
-            get_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_kp_left
         )
-        ref_manual_undo_left.click(
-            undo_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_undo_left
         )
-        ref_manual_reset_left.click(
-            reset_kps, [ref_im_raw, ref_kp_got, gr.State("left")], [ref_manual_kp_left, ref_kp_got]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_reset_left
         )
-        ref_manual_done.click(visible_component, [gr.State(0), ref_manual_pose], ref_manual_pose)
-        ref_manual_done.click(visible_component, [gr.State(0), ref_use_manual], ref_use_manual)
-        ref_manual_done.click(get_ref_anno, [ref_im_raw, ref_kp_got], [ref_img, ref_manual_pose, ref_manual_cond])
-        ref_manual_pose.change(enable_component, [ref_manual_pose, ref_manual_pose], ref_manual_done)
-        ref_manual_pose.change(enable_component, [ref_img, ref_manual_pose], ref_flip)
-        ref_manual_cond.change(lambda x: x, ref_manual_cond, ref_cond)
-        ref_use_manual.click(lambda x: x, ref_manual_cond, ref_cond)
-        ref_use_manual.click(lambda x: gr.Info("Manual hand keypoints will be used for 'Reference'", duration=3))
-        
-        ref_flip.select(
-            flip_hand,
-            [ref, ref_im_raw, ref_pose, ref_manual_pose, ref_manual_kp_right, ref_manual_kp_left, ref_cond, ref_auto_cond, ref_manual_cond],
-            [ref, ref_im_raw, ref_pose, ref_manual_pose, ref_manual_kp_right, ref_manual_kp_left, ref_cond, ref_auto_cond, ref_manual_cond]
+        fix_inpaint_mask.change(
+            enable_component, [fix_inpaint_mask, fix_inpaint_mask], fix_run
         )
-
-        # target listeners
-        target.change(prepare_anno, [target, target_is_user], [target_im_raw, target_kp_raw])
-        target_kp_raw.change(lambda x:x, target_im_raw, target_manual_kp_right)
-        target_kp_raw.change(lambda x:x, target_im_raw, target_manual_kp_left)
-        target_kp_raw.change(get_target_anno, [target_im_raw, target_kp_raw], [target_img, target_pose, target_auto_cond, target_auto_keypts, target, target_is_user])
-        target_pose.change(enable_component, [target_kp_raw, target_pose], target_use_auto)
-        target_pose.change(enable_component, [target_img, target_pose], target_flip)
-        target_auto_cond.change(lambda x: x, target_auto_cond, target_cond)
-        target_auto_keypts.change(lambda x: x, target_auto_keypts, target_keypts)
-        target_use_auto.click(lambda x: x, target_auto_cond, target_cond)
-        target_use_auto.click(lambda x: x, target_auto_keypts, target_keypts)
-        target_use_auto.click(lambda x: gr.Info("Automatic hand keypoints will be used for 'Target'", duration=3))
-
-        target_manual_checkbox.select(
+        fix_checkbox.select(
             set_visible,
-            [target_manual_checkbox, target_kp_got, target_im_raw, target_manual_kp_right, target_manual_kp_left, target_manual_done],
+            [fix_checkbox, fix_kpts, fix_img, fix_kp_right, fix_kp_left],
             [
-                target_kp_got,
-                target_manual_kp_right,
-                target_manual_kp_left,
-                target_manual_kp_right,
-                target_manual_undo_right,
-                target_manual_reset_right,
-                target_manual_kp_left,
-                target_manual_undo_left,
-                target_manual_reset_left,
-                target_manual_kp_r_info,
-                target_manual_kp_l_info,
-                target_manual_done,
-                target_manual_done_info
-            ]
+                fix_kpts,
+                fix_kp_right,
+                fix_kp_left,
+                fix_kp_right,
+                fix_undo_right,
+                fix_reset_right,
+                fix_kp_left,
+                fix_undo_left,
+                fix_reset_left,
+                fix_kp_r_info,
+                fix_kp_l_info,
+            ],
         )
-        target_manual_kp_right.select(
-            get_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
+        fix_kp_right.select(
+            get_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]  # fix_img: (real_cropped_H, real_cropped_W, 3)
         )
-        target_manual_undo_right.click(
-            undo_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
+        fix_undo_right.click(
+            undo_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]
         )
-        target_manual_reset_right.click(
-            reset_kps, [target_im_raw, target_kp_got, gr.State("right")], [target_manual_kp_right, target_kp_got]
+        fix_reset_right.click(
+            reset_kps, [fix_img, fix_kpts, gr.State("right")], [fix_kp_right, fix_kpts]
         )
-        target_manual_kp_left.select(
-            get_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
+        fix_kp_left.select(
+            get_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
         )
-        target_manual_undo_left.click(
-            undo_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
+        fix_undo_left.click(
+            undo_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
         )
-        target_manual_reset_left.click(
-            reset_kps, [target_im_raw, target_kp_got, gr.State("left")], [target_manual_kp_left, target_kp_got]
+        fix_reset_left.click(
+            reset_kps, [fix_img, fix_kpts, gr.State("left")], [fix_kp_left, fix_kpts]
         )
-        target_manual_done.click(visible_component, [gr.State(0), target_manual_pose], target_manual_pose)
-        target_manual_done.click(visible_component, [gr.State(0), target_use_manual], target_use_manual)
-        target_manual_done.click(get_target_anno, [target_im_raw, target_kp_got], [target_img, target_manual_pose, target_manual_cond, target_manual_keypts])
-        target_manual_pose.change(enable_component, [target_manual_pose, target_manual_pose], target_manual_done)
-        target_manual_pose.change(enable_component, [target_img, target_manual_pose], target_flip)
-        target_manual_cond.change(lambda x: x, target_manual_cond, target_cond)
-        target_manual_keypts.change(lambda x: x, target_manual_keypts, target_keypts)
-        target_use_manual.click(lambda x: x, target_manual_cond, target_cond)
-        target_use_manual.click(lambda x: x, target_manual_keypts, target_keypts)
-        target_use_manual.click(lambda x: gr.Info("Manual hand keypoints will be used for 'Reference'", duration=3))
-
-        target_flip.select(
-            flip_hand,
-            [target, target_im_raw, target_pose, target_manual_pose, target_manual_kp_right, target_manual_kp_left, target_cond, target_auto_cond, target_manual_cond, target_keypts, target_auto_keypts, target_manual_keypts],
-            [target, target_im_raw, target_pose, target_manual_pose, target_manual_kp_right, target_manual_kp_left, target_cond, target_auto_cond, target_manual_cond, target_keypts, target_auto_keypts, target_manual_keypts],
+        fix_kpts_path.change(read_kpts, fix_kpts_path, fix_kpts_np)
+        fix_inpaint_mask.change(enable_component, [fix_inpaint_mask, fix_kpts_np], fix_run)
+        fix_kpts_np.change(enable_component, [fix_inpaint_mask, fix_kpts_np], fix_run)
+        fix_run.click(
+            ready_sample,
+            [fix_ref, fix_inpaint_mask, fix_kpts, fix_kpts_np],
+            [
+                fix_ref_cond,
+                fix_target_cond,
+                fix_latent,
+                fix_inpaint_latent,
+                fix_kpts_np,
+                fix_vis_mask32,
+                fix_vis_mask256,
+            ],
         )
-        
-        # run listerners
-        ref_cond.change(enable_component, [ref_cond, target_cond], run)
-        target_cond.change(enable_component, [ref_cond, target_cond], run)
-        run.click(
-            sample_diff,
-            [ref_cond, target_cond, target_keypts, n_generation, seed, cfg],
-            [results, results_pose],
+        fix_inpaint_latent.change(
+            sample_inpaint,
+            [
+                fix_ref_cond,
+                fix_target_cond,
+                fix_latent,
+                fix_inpaint_latent,
+                fix_kpts_np,
+                fix_original,
+                fix_crop_coord,
+                fix_n_generation,
+                fix_seed,
+                fix_cfg,
+                fix_quality,
+            ],
+            [fix_result, fix_result_pose, fix_result_original],
         )
-        clear.click(
-            clear_all,
+        fix_clear.click(
+            fix_clear_all,
             [],
             [
-                ref,
-                ref_manual_checkbox,
-                ref_manual_kp_right,
-                ref_manual_kp_left,
-                ref_img,
-                ref_pose,
-                ref_manual_pose,
-                ref_cond,
-                ref_flip,
-                target,
-                target_keypts,
-                target_manual_checkbox,
-                target_manual_kp_right,
-                target_manual_kp_left,
-                target_img,
-                target_pose,
-                target_manual_pose,
-                target_cond,
-                target_flip,
-                results,
-                results_pose,
-                n_generation,
-                seed,
-                cfg,
-                ref_kp_raw,
+                fix_crop,
+                fix_crop_coord,
+                fix_ref,
+                fix_checkbox,
+                fix_kp_all,
+                fix_kp_right,
+                fix_kp_left,
+                fix_result,
+                fix_result_pose,
+                fix_result_original,
+                fix_inpaint_mask,
+                fix_original,
+                fix_img,
+                fix_vis_mask32,
+                fix_vis_mask256,
+                fix_kpts,
+                fix_kpts_np,
+                fix_ref_cond,
+                fix_target_cond,
+                fix_latent,
+                fix_inpaint_latent,
+                fix_kpts_path,
+                fix_n_generation,
+                fix_seed,
+                fix_cfg,
+                fix_quality,
             ],
         )
-        clear.click(
-            set_unvisible,
+        fix_clear.click(
+            fix_set_unvisible,
             [],
             [
-                ref_manual_kp_l_info,
-                ref_manual_kp_r_info,
-                ref_manual_kp_left,
-                ref_manual_kp_right,
-                ref_manual_undo_left,
-                ref_manual_undo_right,
-                ref_manual_reset_left,
-                ref_manual_reset_right,
-                ref_manual_done,
-                ref_manual_done_info,
-                ref_manual_pose,
-                ref_use_manual,
-                target_manual_kp_l_info,
-                target_manual_kp_r_info,
-                target_manual_kp_left,
-                target_manual_kp_right,
-                target_manual_undo_left,
-                target_manual_undo_right,
-                target_manual_reset_left,
-                target_manual_reset_right,
-                target_manual_done,
-                target_manual_done_info,
-                target_manual_pose,
-                target_use_manual,
+                fix_kp_right,
+                fix_kp_left,
+                fix_kp_r_info,
+                fix_kp_l_info,
+                fix_undo_left,
+                fix_undo_right,
+                fix_reset_left,
+                fix_reset_right
             ]
         )
 
-    gr.Markdown("<h1>Acknowledgement</h1>")
+    # gr.Markdown("<h1>Trouble Shooting</h1>")
     gr.Markdown(_ACK_)
-    gr.Markdown("<h1>Trouble Shooting</h1>")
-    gr.Markdown("If error persists, please try the following steps:<br>1. Refresh the page and try again.<br>2. The issue might be due to compatibility with HuggingFace or GPU memory limitations. We recommend cloning this repository and trying it with your own GPU if possible.<br>3. Kindly leave a message on our HuggingFace Spaces Community tab (located at the top right), on our GitHub repository's Issues page, or send us an email. We are happy to help you as soon as possible.")
-    gr.Markdown("If the result is not satisfactory:<br>1. Try changing either <b>Classifier Free Guidance Scale</b> or <b>Seed</b>, that can be found at \"More Options\".")
     gr.Markdown("<h1>Citation</h1>")
     gr.Markdown(
         """<p style="text-align: left;">If this was useful, please cite us! ❤️</p>"""
     )
     gr.Markdown(_CITE_)
+    with gr.Accordion("Trouble Shooting", open=False, elem_id="accordion_bold_large"):
+        gr.Markdown("If error persists, please try the following steps:<br>1. Refresh the page and try again.<br>2. The issue might be due to compatibility with HuggingFace or GPU memory limitations. We recommend cloning this repository and trying it with your own GPU if possible.<br>3. Kindly leave a message on our HuggingFace Spaces Community tab (located at the top right), on our GitHub repository's Issues page, or send us an email. We are happy to help you as soon as possible.")
+        gr.Markdown("If the result is not satisfactory:<br>1. Try changing either <b>Classifier Free Guidance Scale</b> or <b>Seed</b>, that can be found at \"More Options\".")
+    # gr.Markdown("<h1>Acknowledgement</h1>")
 
 # print("Ready to launch..")
 # _, _, shared_url = demo.queue().launch(

diffusion/gaussian_diffusion.py

@@ -427,7 +427,7 @@ class GaussianDiffusion:
         cond_fn=None,
         model_kwargs=None,
         device=None,
-        progress=False,
+        progress=None,
     ):
         """
         Generate samples from the model.
@@ -474,7 +474,7 @@ class GaussianDiffusion:
         cond_fn=None,
         model_kwargs=None,
         device=None,
-        progress=False,
+        progress=None,
         jump_length=10, 
         jump_n_sample=10,
     ):
@@ -527,7 +527,7 @@ class GaussianDiffusion:
         cond_fn=None,
         model_kwargs=None,
         device=None,
-        progress=False,
+        progress=None,
         jump_length=10, 
         jump_n_sample=10,
     ):
@@ -592,9 +592,12 @@ class GaussianDiffusion:
         times = get_schedule_jump(t_T=250, n_sample=1, jump_length=jump_length, jump_n_sample=jump_n_sample)
         time_pairs = list(zip(times[:-1], times[1:]))
 
-        if progress:
-            from tqdm.auto import tqdm
-            time_pairs = tqdm(time_pairs)
+        # if progress:
+        #     from tqdm.auto import tqdm
+        #     time_pairs = tqdm(time_pairs)
+        if progress is not None:
+            progress(len(time_pairs))
+            time_pairs = progress.tqdm(time_pairs)
 
         for t_last, t_cur in time_pairs:
             idx_wall += 1
@@ -716,7 +719,7 @@ class GaussianDiffusion:
         cond_fn=None,
         model_kwargs=None,
         device=None,
-        progress=False,
+        progress=None,
     ):
         """
         Generate samples from the model and yield intermediate samples from
@@ -734,11 +737,13 @@ class GaussianDiffusion:
             img = th.randn(*shape, device=device)
         indices = list(range(self.num_timesteps))[::-1]
 
-        if progress:
+        if progress is not None:
             # Lazy import so that we don't depend on tqdm.
-            from tqdm.auto import tqdm
+            # from tqdm.auto import tqdm
 
-            indices = tqdm(indices)
+            # indices = tqdm(indices)
+            progress(len(indices))
+            indices = progress.tqdm(indices)
 
         for i in indices:
             t = th.tensor([i] * shape[0], device=device)