cnet buttons

extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/controlnet_ui_group.py

@@ -228,7 +228,7 @@ class ControlNetUiGroup:
 
             with gr.Row(elem_classes=["cnet-image-row"], equal_height=True):
                 with gr.Group(elem_classes=["cnet-input-image-group"]):
-                    self.image = ForgeCanvas(elem_id=f"{elem_id_tabname}_{tabname}_input_image", elem_classes=["cnet-image"], height=384, contrast_scribbles=True, numpy=True)
+                    self.image = ForgeCanvas(elem_id=f"{elem_id_tabname}_{tabname}_input_image", elem_classes=["cnet-image"], height=384, contrast_scribbles=shared.opts.img2img_inpaint_mask_high_contrast, scribble_color=shared.opts.img2img_inpaint_mask_brush_color, scribble_color_fixed=True, scribble_alpha=shared.opts.img2img_inpaint_mask_scribble_alpha, scribble_alpha_fixed=True, scribble_softness_fixed=True, numpy=True)
                     self.openpose_editor.render_upload()
 
                 with gr.Group(visible=False, elem_classes=["cnet-generated-image-group"]) as self.generated_image_group:
@@ -237,10 +237,24 @@ class ControlNetUiGroup:
                     with gr.Group(elem_classes=["cnet-generated-image-control-group"]):
                         self.openpose_editor.render_edit()
                         preview_check_elem_id = f"{elem_id_tabname}_{tabname}_controlnet_preprocessor_preview_checkbox"
+                        preview_download_button_js = f"""
+                            const image = document.querySelector('#{elem_id_tabname}_{tabname}_generated_image img.forge-image');
+                            const src = image.getAttribute('src');
+                            if (!src || !image.complete || image.naturalWidth === 0) return;
+
+                            const a = document.createElement('a');
+                            a.href = src; a.download = 'preview.jpg';
+
+                            document.body.appendChild(a);
+                            a.click(); a.remove();
+                        """
                         preview_close_button_js = f"document.querySelector('#{preview_check_elem_id} input[type=\\'checkbox\\']').click();"
                         gr.HTML(
-                            value=f"""<a title="Close Preview" onclick="{preview_close_button_js}">Close</a>""",
-                            visible=True,
+                            value=f'<a title="Download Preview" onclick="{preview_download_button_js}">Download</a>',
+                            elem_classes=["cnet-download-preview"],
+                        )
+                        gr.HTML(
+                            value=f'<a title="Close Preview" onclick="{preview_close_button_js}">Close</a>',
                             elem_classes=["cnet-close-preview"],
                         )
 

extensions-builtin/sd_forge_controlnet/lib_controlnet/controlnet_ui/openpose_editor.py

@@ -24,8 +24,6 @@ def encode_data_url(json_string: str) -> str:
 
 
 class OpenposeEditor:
-    # Filename used when user click the download link
-    download_file = "pose.json"
 
     def __init__(self) -> None:
         self.render_button = None
@@ -42,15 +40,21 @@ class OpenposeEditor:
         self.pose_input = gr.Textbox(visible=False, elem_classes=["cnet-pose-json"])
         # The button to download the pose json.
         self.download_link = gr.HTML(
-            value=f'<a href="" download="{OpenposeEditor.download_file}">JSON</a>',
+            value=f'<a href="" download="">JSON</a>',
             visible=False,
             elem_classes=["cnet-download-pose"],
         )
 
     def render_upload(self):
         """Renders the button in input image control button group."""
+
+        upload_button_js = 'this.querySelector("input").click()'
         self.upload_link = gr.HTML(
-            value='<label>Upload JSON</label><input type="file" accept=".json"/>',
+            value=f"""
+            <a title="Upload an OpenPose .json" onclick="{upload_button_js}">
+            Upload JSON <input type="file" accept=".json"/>
+            </a>
+            """,
             visible=False,
             elem_classes=["cnet-upload-pose"],
         )
@@ -98,9 +102,9 @@ class OpenposeEditor:
         )
 
         def update_upload_link(model: str) -> dict:
-            return gr.update(visible=("openpose" in model.lower()))
+            return gr.update(visible=(any(key in model.lower() for key in ("openpose", "union", "promax", "unicontrol"))))
 
-        model.change(fn=update_upload_link, inputs=[model], outputs=[self.upload_link])
+        model.change(fn=update_upload_link, inputs=[model], outputs=[self.upload_link], queue=False)
 
     def outputs(self) -> list[gr.components.Component]:
         return [self.download_link]
@@ -117,10 +121,5 @@ class OpenposeEditor:
             An gr.update event.
         """
 
-        hint = "Download the pose as .json file"
-        html = f'<a href="{encode_data_url(json_string)}" download="{OpenposeEditor.download_file}" title="{hint}">JSON</a>'
-        visible: bool = json_string != ""
-        return [
-            # Download link update
-            gr.update(value=html, visible=visible),
-        ]
+        html = f'<a href="{encode_data_url(json_string)}" download="pose.json" title="Download the Pose as .json">JSON</a>'
+        return [gr.update(value=html, visible=(json_string != ""))]

extensions-builtin/sd_forge_controlnet/style.css

@@ -25,9 +25,9 @@
     bottom: var(--size-4);
 }
 
-.cnet-download-pose a,
+.cnet-download-pose,
 .cnet-close-preview,
-.cnet-edit-pose,
+.cnet-download-preview,
 .cnet-upload-pose {
     font-size: x-small !important;
     font-weight: bold !important;
@@ -47,9 +47,9 @@
     margin-bottom: 16px;
 }
 
-.cnet-download-pose:hover a,
-.cnet-close-preview:hover a,
-.cnet-edit-pose:hover,
+.cnet-download-pose:hover,
+.cnet-close-preview:hover,
+.cnet-download-preview:hover,
 .cnet-upload-pose:hover {
     color: var(--block-label-text-color) !important;
 }