switch controlnet in webui

lama_cleaner/app/src/components/SidePanel/SidePanel.tsx

@@ -3,6 +3,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useToggle } from 'react-use'
 import {
+  ControlNetMethod,
   isControlNetState,
   isInpaintingState,
   negativePropmtState,
@@ -47,6 +48,44 @@ const SidePanel = () => {
     }
   }
 
+  const renderConterNetSetting = () => {
+    return (
+      <>
+        <SettingBlock
+          className="sub-setting-block"
+          title="ControlNet"
+          input={
+            <Selector
+              width={80}
+              value={setting.controlnetMethod as string}
+              options={Object.values(ControlNetMethod)}
+              onChange={val => {
+                const method = val as ControlNetMethod
+                setSettingState(old => {
+                  return { ...old, controlnetMethod: method }
+                })
+              }}
+            />
+          }
+        />
+
+        <NumberInputSetting
+          title="ControlNet Weight"
+          width={INPUT_WIDTH}
+          allowFloat
+          value={`${setting.controlnetConditioningScale}`}
+          desc="Lowered this value if there is a big misalignment between the text prompt and the control image"
+          onValue={value => {
+            const val = value.length === 0 ? 0 : parseFloat(value)
+            setSettingState(old => {
+              return { ...old, controlnetConditioningScale: val }
+            })
+          }}
+        />
+      </>
+    )
+  }
+
   return (
     <div className="side-panel">
       <PopoverPrimitive.Root open={open}>
@@ -58,6 +97,8 @@ const SidePanel = () => {
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content className="side-panel-content">
+            {isControlNet && renderConterNetSetting()}
+
             <SettingBlock
               title="Croper"
               input={
@@ -117,22 +158,6 @@ const SidePanel = () => {
               }}
             />
 
-            {isControlNet && (
-              <NumberInputSetting
-                title="ControlNet Weight"
-                width={INPUT_WIDTH}
-                allowFloat
-                value={`${setting.controlnetConditioningScale}`}
-                desc="Lowered this value if there is a big misalignment between the text prompt and the control image"
-                onValue={value => {
-                  const val = value.length === 0 ? 0 : parseFloat(value)
-                  setSettingState(old => {
-                    return { ...old, controlnetConditioningScale: val }
-                  })
-                }}
-              />
-            )}
-
             <NumberInputSetting
               title="Mask Blur"
               width={INPUT_WIDTH}