Make Comfy Soft Inpainting section always visible for img2img & cleanup

ramyma · Aug 18, 2024 · 6720d6c · 6720d6c
1 parent 9fb83b3
commit 6720d6c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/assets/js/src/MainForm/ComfySoftInpaintingFields/ComfySoftInpaintingFields.tsx b/assets/js/src/MainForm/ComfySoftInpaintingFields/ComfySoftInpaintingFields.tsx
@@ -5,7 +5,6 @@ import { MainFormValues } from "../MainForm";
 import ExpandCollapseCheckbox from "../../components/ExpandCollapseCheckbox";
 
 export type ComfySoftInpaintingArgs = {
-  isEnabled: boolean;
   maskBlur: number;
 };
 
@@ -16,29 +15,20 @@ const SoftInpaintingFields = ({
 }) => {
   return (
     <div className="flex flex-col gap-3">
-      <Controller
-        name={"comfySoftInpainting.isEnabled"}
-        control={control}
-        render={({ field }) => (
-          <ExpandCollapseCheckbox {...field} label="Soft Inpainting">
-            <div className="h-auto flex relative flex-col gap-8 bg-neutral-100/5 p-4 rounded-md overflow-hidden">
-              {comfySoftPaintingFields?.map(
-                ({ value: defaultValue, ...rest }) => (
-                  <div key={rest.name}>
-                    <Controller
-                      name={"comfySoftInpainting." + rest.name}
-                      control={control}
-                      render={({ field }) => <Slider {...rest} {...field} />}
-                      defaultValue={defaultValue}
-                    />
-                  </div>
-                )
-              )}
+      <ExpandCollapseCheckbox showCheckbox={false} label="Soft Inpainting">
+        <div className="h-auto flex relative flex-col gap-8 bg-neutral-100/5 p-4 rounded-md overflow-hidden">
+          {comfySoftPaintingFields?.map(({ value: defaultValue, ...rest }) => (
+            <div key={rest.name}>
+              <Controller
+                name={"comfySoftInpainting." + rest.name}
+                control={control}
+                render={({ field }) => <Slider {...rest} {...field} />}
+                defaultValue={defaultValue}
+              />
             </div>
-          </ExpandCollapseCheckbox>
-        )}
-        defaultValue={false}
-      />
+          ))}
+        </div>
+      </ExpandCollapseCheckbox>
     </div>
   );
 };

diff --git a/assets/js/src/MainForm/MainForm.tsx b/assets/js/src/MainForm/MainForm.tsx
@@ -613,7 +613,7 @@ const MainForm = () => {
       ...(backend === "comfy" && !txt2img && model?.isSdXl
         ? { fooocus_inpaint }
         : {}),
-      ...(backend === "comfy" && comfySoftInpainting.isEnabled
+      ...(backend === "comfy" && !txt2img
         ? { mask_blur: comfySoftInpainting.maskBlur }
         : {}),
       ultimate_upscale: isUltimateUpscaleEnabled,
@@ -773,8 +773,7 @@ const MainForm = () => {
     (scale != 1 && !(showFullScalePass && fullScalePass));
   const showUpscaler = (txt2img && showSecondPassStrength) || !txt2img;
   const showSoftInpainting = backend === "auto" && !txt2img;
-  const modalButtonRef = useRef<HTMLButtonElement>(null);
-  const [isModalVisible, setIsModalVisible] = useState(false);
+
   return (
     <FormProvider {...methods}>
       <form

diff --git a/assets/js/src/components/ExpandCollapseCheckbox.tsx b/assets/js/src/components/ExpandCollapseCheckbox.tsx
@@ -8,15 +8,20 @@ import {
 import { animated, config, useSpring } from "@react-spring/web";
 import Checkbox, { CheckboxProps } from "./Checkbox";
 import { TriangleRightIcon } from "@radix-ui/react-icons";
+import Label from "./Label";
 
 type Props = CheckboxProps & {
   defaultExpanded?: boolean;
   label: string;
+  showCheckbox: boolean;
   children: ReactElement;
 };
 
 const ExpandCollapseCheckbox = forwardRef<HTMLButtonElement, Props>(
-  ({ defaultExpanded = false, label, children, ...props }, ref) => {
+  (
+    { defaultExpanded = false, label, showCheckbox = true, children, ...props },
+    ref
+  ) => {
     const [expanded, setExpanded] = useState(defaultExpanded);
     const [prevValue, setPrevValue] = useState<boolean>();
     const contentRef = useRef<HTMLDivElement>(null);
@@ -49,9 +54,15 @@ const ExpandCollapseCheckbox = forwardRef<HTMLButtonElement, Props>(
               className={`p-0 size-8 transition-transform ${expanded ? "rotate-90" : ""}`}
             />
           </div>
-          <Checkbox ref={ref} {...props} fullWidth>
-            {label}
-          </Checkbox>
+          {showCheckbox ? (
+            <Checkbox ref={ref} {...props} fullWidth>
+              {label}
+            </Checkbox>
+          ) : (
+            <Label className="Label select-none cursor-pointer group-hover:text-neutral-200 transition-colors">
+              {label}
+            </Label>
+          )}
         </div>
 
         <animated.div style={style} className="overflow-hidden">