kamp/IOPaint
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

adjust sidebar effect

Browse Source
This commit is contained in:
Qing 2024-04-13 15:44:07 +08:00
parent 76823355fe
commit ccea072dc5
4 changed files with 242 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
web_app/src/components/SidePanel/DiffusionOptions.tsx
View File

@ -114,14 +114,22 @@ const DiffusionOptions = () => {
return null return null
} }
let disable = settings.enableControlnet
let toolTip =
"BrushNet is a plug-and-play image inpainting model with decomposed dual-branch diffusion. It can be used to inpaint images by conditioning on a mask."
if (disable) {
toolTip = "ControlNet is enabled, BrushNet is disabled."
}
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex justify-between items-center pr-2"> <RowContainer>
<LabelTitle <LabelTitle
text="BrushNet" text="BrushNet"
toolTip="BrushNet: A Plug-and-Play Image Inpainting Model with Decomposed Dual-Branch Diffusion"
url="https://github.com/TencentARC/BrushNet" url="https://github.com/TencentARC/BrushNet"
toolTip={toolTip}
disabled={disable}
/> />
<Switch <Switch
id="brushnet" id="brushnet"
@ -129,26 +137,25 @@ const DiffusionOptions = () => {
onCheckedChange={(value) => { onCheckedChange={(value) => {
updateSettings({ enableBrushNet: value }) updateSettings({ enableBrushNet: value })
}} }}
disabled={disable}
/> />
</div> </RowContainer>
<div className="flex flex-col gap-1">
<RowContainer> <RowContainer>
<Slider <Slider
className="w-[180px]"
defaultValue={[100]} defaultValue={[100]}
min={1} min={1}
max={100} max={100}
step={1} step={1}
disabled={!settings.enableBrushNet} disabled={!settings.enableBrushNet || disable}
value={[Math.floor(settings.brushnetConditioningScale * 100)]} value={[Math.floor(settings.brushnetConditioningScale * 100)]}
onValueChange={(vals) => onValueChange={(vals) =>
updateSettings({ brushnetConditioningScale: vals[0] / 100 }) updateSettings({ brushnetConditioningScale: vals[0] / 100 })
} }
/> />
<NumberInput <NumberInput
id="controlnet-weight" id="brushnet-weight"
className="w-[60px] rounded-full" className="w-[60px] rounded-full"
disabled={!settings.enableBrushNet} disabled={!settings.enableBrushNet || disable}
numberValue={settings.brushnetConditioningScale} numberValue={settings.brushnetConditioningScale}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -156,9 +163,8 @@ const DiffusionOptions = () => {
}} }}
/> />
</RowContainer> </RowContainer>
</div>
<div className="pr-2"> <RowContainer>
<Select <Select
defaultValue={settings.brushnetMethod} defaultValue={settings.brushnetMethod}
value={settings.brushnetMethod} value={settings.brushnetMethod}
@ -174,13 +180,13 @@ const DiffusionOptions = () => {
<SelectGroup> <SelectGroup>
{Object.values(settings.model.brushnets).map((method) => ( {Object.values(settings.model.brushnets).map((method) => (
<SelectItem key={method} value={method}> <SelectItem key={method} value={method}>
{method} {method.split("/")[1]}
</SelectItem> </SelectItem>
))} ))}
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </RowContainer>
</div> </div>
<Separator /> <Separator />
</div> </div>
@ -192,14 +198,22 @@ const DiffusionOptions = () => {
return null return null
} }
let disable = settings.enableBrushNet
let toolTip =
"Using an additional conditioning image to control how an image is generated"
if (disable) {
toolTip = "BrushNet is enabled, ControlNet is disabled."
}
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex justify-between items-center pr-2"> <RowContainer>
<LabelTitle <LabelTitle
text="ControlNet" text="ControlNet"
toolTip="Using an additional conditioning image to control how an image is generated"
url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#controlnet" url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#controlnet"
toolTip={toolTip}
disabled={disable}
/> />
<Switch <Switch
id="controlnet" id="controlnet"
@ -207,8 +221,9 @@ const DiffusionOptions = () => {
onCheckedChange={(value) => { onCheckedChange={(value) => {
updateSettings({ enableControlnet: value }) updateSettings({ enableControlnet: value })
}} }}
disabled={disable}
/> />
</div> </RowContainer>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<RowContainer> <RowContainer>
@ -218,7 +233,7 @@ const DiffusionOptions = () => {
min={1} min={1}
max={100} max={100}
step={1} step={1}
disabled={!settings.enableControlnet} disabled={!settings.enableControlnet || disable}
value={[Math.floor(settings.controlnetConditioningScale * 100)]} value={[Math.floor(settings.controlnetConditioningScale * 100)]}
onValueChange={(vals) => onValueChange={(vals) =>
updateSettings({ controlnetConditioningScale: vals[0] / 100 }) updateSettings({ controlnetConditioningScale: vals[0] / 100 })
@ -227,7 +242,7 @@ const DiffusionOptions = () => {
<NumberInput <NumberInput
id="controlnet-weight" id="controlnet-weight"
className="w-[60px] rounded-full" className="w-[60px] rounded-full"
disabled={!settings.enableControlnet} disabled={!settings.enableControlnet || disable}
numberValue={settings.controlnetConditioningScale} numberValue={settings.controlnetConditioningScale}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -237,7 +252,7 @@ const DiffusionOptions = () => {
</RowContainer> </RowContainer>
</div> </div>
<div className="pr-2"> <RowContainer>
<Select <Select
defaultValue={settings.controlnetMethod} defaultValue={settings.controlnetMethod}
value={settings.controlnetMethod} value={settings.controlnetMethod}
@ -259,7 +274,7 @@ const DiffusionOptions = () => {
</SelectGroup> </SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </RowContainer>
</div> </div>
<Separator /> <Separator />
</div> </div>
@ -271,13 +286,21 @@ const DiffusionOptions = () => {
return null return null
} }
let disable = settings.enableBrushNet
let toolTip =
"Enable quality image generation in typically 2-4 steps. Suggest disabling guidance_scale by setting it to 0. You can also try values between 1.0 and 2.0. When LCM Lora is enabled, LCMSampler will be used automatically."
if (disable) {
toolTip = "BrushNet is enabled, LCM Lora is disabled."
}
return ( return (
<> <>
<RowContainer> <RowContainer>
<LabelTitle <LabelTitle
text="LCM LoRA" text="LCM LoRA"
url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inference_with_lcm_lora" url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inference_with_lcm_lora"
toolTip="Enable quality image generation in typically 2-4 steps. Suggest disabling guidance_scale by setting it to 0. You can also try values between 1.0 and 2.0. When LCM Lora is enabled, LCMSampler will be used automatically." toolTip={toolTip}
disabled={disable}
/> />
<Switch <Switch
id="lcm-lora" id="lcm-lora"
@ -285,6 +308,7 @@ const DiffusionOptions = () => {
onCheckedChange={(value) => { onCheckedChange={(value) => {
updateSettings({ enableLCMLora: value }) updateSettings({ enableLCMLora: value })
}} }}
disabled={disable}
/> />
</RowContainer> </RowContainer>
<Separator /> <Separator />
@ -297,13 +321,22 @@ const DiffusionOptions = () => {
return null return null
} }
let toolTip =
"FreeU is a technique for improving image quality. Different models may require different FreeU-specific hyperparameters, which can be viewed in the more info section."
if (settings.enableBrushNet) {
toolTip = "BrushNet is enabled, FreeU is disabled."
}
let disable = settings.enableBrushNet || !settings.enableFreeu
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex justify-between items-center pr-2"> <RowContainer>
<LabelTitle <LabelTitle
text="FreeU" text="FreeU"
toolTip="FreeU is a technique for improving image quality. Different models may require different FreeU-specific hyperparameters, which can be viewed in the more info section."
url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/freeu" url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/freeu"
toolTip={toolTip}
disabled={disable}
/> />
<Switch <Switch
id="freeu" id="freeu"
@ -311,20 +344,22 @@ const DiffusionOptions = () => {
onCheckedChange={(value) => { onCheckedChange={(value) => {
updateSettings({ enableFreeu: value }) updateSettings({ enableFreeu: value })
}} }}
disabled={settings.enableBrushNet}
/> />
</div> </RowContainer>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex justify-center gap-6"> <div className="flex justify-center gap-6">
<div className="flex gap-2 items-center justify-center"> <div className="flex gap-4 items-center justify-center">
<LabelTitle <LabelTitle
htmlFor="freeu-s1" htmlFor="freeu-s1"
text="s1" text="s1"
disabled={!settings.enableFreeu} disabled={disable}
className="min-w-0"
/> />
<NumberInput <NumberInput
id="freeu-s1" id="freeu-s1"
className="w-14" className="w-14"
disabled={!settings.enableFreeu} disabled={disable}
numberValue={settings.freeuConfig.s1} numberValue={settings.freeuConfig.s1}
allowFloat allowFloat
onNumberValueChange={(value) => { onNumberValueChange={(value) => {
@ -338,12 +373,13 @@ const DiffusionOptions = () => {
<LabelTitle <LabelTitle
htmlFor="freeu-s2" htmlFor="freeu-s2"
text="s2" text="s2"
disabled={!settings.enableFreeu} disabled={disable}
className="min-w-0"
/> />
<NumberInput <NumberInput
id="freeu-s2" id="freeu-s2"
className="w-14" className="w-14"
disabled={!settings.enableFreeu} disabled={disable}
numberValue={settings.freeuConfig.s2} numberValue={settings.freeuConfig.s2}
allowFloat allowFloat
onNumberValueChange={(value) => { onNumberValueChange={(value) => {
@ -360,12 +396,13 @@ const DiffusionOptions = () => {
<LabelTitle <LabelTitle
htmlFor="freeu-b1" htmlFor="freeu-b1"
text="b1" text="b1"
disabled={!settings.enableFreeu} disabled={disable}
className="min-w-0"
/> />
<NumberInput <NumberInput
id="freeu-b1" id="freeu-b1"
className="w-14" className="w-14"
disabled={!settings.enableFreeu} disabled={disable}
numberValue={settings.freeuConfig.b1} numberValue={settings.freeuConfig.b1}
allowFloat allowFloat
onNumberValueChange={(value) => { onNumberValueChange={(value) => {
@ -379,12 +416,13 @@ const DiffusionOptions = () => {
<LabelTitle <LabelTitle
htmlFor="freeu-b2" htmlFor="freeu-b2"
text="b2" text="b2"
disabled={!settings.enableFreeu} disabled={disable}
className="min-w-0"
/> />
<NumberInput <NumberInput
id="freeu-b2" id="freeu-b2"
className="w-14" className="w-14"
disabled={!settings.enableFreeu} disabled={disable}
numberValue={settings.freeuConfig.b2} numberValue={settings.freeuConfig.b2}
allowFloat allowFloat
onNumberValueChange={(value) => { onNumberValueChange={(value) => {
@ -522,16 +560,23 @@ const DiffusionOptions = () => {
return null return null
} }
let disable = settings.enableBrushNet
let toolTip =
"Strength is a measure of how much noise is added to the base image, which influences how similar the output is to the base image. Higher value means more noise and more different from the base image"
if (disable) {
toolTip = "BrushNet is enabled, Strength is disabled."
}
return ( return (
<div className="flex flex-col gap-1"> <RowContainer>
<LabelTitle <LabelTitle
text="Strength" text="Strength"
url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#strength" url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#strength"
toolTip="Strength is a measure of how much noise is added to the base image, which influences how similar the output is to the base image. Higher value means more noise and more different from the base image" toolTip={toolTip}
disabled={disable}
/> />
<RowContainer>
<Slider <Slider
className="w-[180px]" className="w-[100px]"
defaultValue={[100]} defaultValue={[100]}
min={10} min={10}
max={100} max={100}
@ -540,6 +585,7 @@ const DiffusionOptions = () => {
onValueChange={(vals) => onValueChange={(vals) =>
updateSettings({ sdStrength: vals[0] / 100 }) updateSettings({ sdStrength: vals[0] / 100 })
} }
disabled={disable}
/> />
<NumberInput <NumberInput
id="strength" id="strength"
@ -549,9 +595,9 @@ const DiffusionOptions = () => {
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
updateSettings({ sdStrength: val }) updateSettings({ sdStrength: val })
}} }}
disabled={disable}
/> />
</RowContainer> </RowContainer>
</div>
) )
} }
@ -679,15 +725,14 @@ const DiffusionOptions = () => {
const renderSteps = () => { const renderSteps = () => {
return ( return (
<div className="flex flex-col gap-1"> <RowContainer>
<LabelTitle <LabelTitle
htmlFor="steps" htmlFor="steps"
text="Steps" text="Steps"
toolTip="The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference." toolTip="The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference."
/> />
<RowContainer>
<Slider <Slider
className="w-[180px]" className="w-[100px]"
defaultValue={[30]} defaultValue={[30]}
min={1} min={1}
max={100} max={100}
@ -705,21 +750,19 @@ const DiffusionOptions = () => {
}} }}
/> />
</RowContainer> </RowContainer>
</div>
) )
} }
const renderGuidanceScale = () => { const renderGuidanceScale = () => {
return ( return (
<div className="flex flex-col gap-1"> <RowContainer>
<LabelTitle <LabelTitle
text="Guidance scale" text="Guidance"
url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#guidance-scale" url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#guidance-scale"
toolTip="Guidance scale affects how aligned the text prompt and generated image are. Higher value means the prompt and generated image are closely aligned, so the output is a stricter interpretation of the prompt" toolTip="Guidance scale affects how aligned the text prompt and generated image are. Higher value means the prompt and generated image are closely aligned, so the output is a stricter interpretation of the prompt"
/> />
<RowContainer>
<Slider <Slider
className="w-[180px]" className="w-[100px]"
defaultValue={[750]} defaultValue={[750]}
min={0} min={0}
max={1500} max={1500}
@ -730,7 +773,7 @@ const DiffusionOptions = () => {
} }
/> />
<NumberInput <NumberInput
id="guidance-scale" id="guid"
className="w-[60px] rounded-full" className="w-[60px] rounded-full"
numberValue={settings.sdGuidanceScale} numberValue={settings.sdGuidanceScale}
allowFloat allowFloat
@ -739,7 +782,6 @@ const DiffusionOptions = () => {
}} }}
/> />
</RowContainer> </RowContainer>
</div>
) )
} }
@ -809,14 +851,13 @@ const DiffusionOptions = () => {
const renderMaskBlur = () => { const renderMaskBlur = () => {
return ( return (
<div className="flex flex-col gap-1"> <RowContainer>
<LabelTitle <LabelTitle
text="Mask blur" text="Mask blur"
toolTip="How much to blur the mask before processing, in pixels. Make the generated inpainting boundaries appear more natural." toolTip="How much to blur the mask before processing, in pixels. Make the generated inpainting boundaries appear more natural."
/> />
<RowContainer>
<Slider <Slider
className="w-[180px]" className="w-[100px]"
defaultValue={[settings.sdMaskBlur]} defaultValue={[settings.sdMaskBlur]}
min={0} min={0}
max={96} max={96}
@ -834,7 +875,6 @@ const DiffusionOptions = () => {
}} }}
/> />
</RowContainer> </RowContainer>
</div>
) )
} }
@ -864,14 +904,14 @@ const DiffusionOptions = () => {
return ( return (
<> <>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<RowContainer>
<LabelTitle <LabelTitle
htmlFor="adjustMaskKernelSize" htmlFor="adjustMaskKernelSize"
text="Adjust Mask" text="Mask OP"
toolTip="Expand or shrink mask. Using the slider to adjust the kernel size for dilation or erosion." toolTip="Expand or shrink mask. Using the slider to adjust the kernel size for dilation or erosion."
/> />
<RowContainer>
<Slider <Slider
className="w-[180px]" className="w-[100px]"
defaultValue={[12]} defaultValue={[12]}
min={1} min={1}
max={100} max={100}
@ -893,7 +933,6 @@ const DiffusionOptions = () => {
</RowContainer> </RowContainer>
<RowContainer> <RowContainer>
<div className="flex gap-1 justify-start">
<Button <Button
variant="outline" variant="outline"
className="p-1 h-8" className="p-1 h-8"
@ -924,11 +963,8 @@ const DiffusionOptions = () => {
onClick={() => adjustMask("reverse")} onClick={() => adjustMask("reverse")}
disabled={isProcessing} disabled={isProcessing}
> >
<div className="flex items-center gap-1 select-none"> <div className="flex items-center gap-1 select-none">Reverse</div>
Reverse
</div>
</Button> </Button>
</div>
<Button <Button
variant="outline" variant="outline"

7
web_app/src/components/SidePanel/LabelTitle.tsx
View File

@ -1,9 +1,10 @@
import { cn } from "@/lib/utils"
import { Button } from "../ui/button" import { Button } from "../ui/button"
import { Label } from "../ui/label" import { Label } from "../ui/label"
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip" import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
const RowContainer = ({ children }: { children: React.ReactNode }) => ( const RowContainer = ({ children }: { children: React.ReactNode }) => (
<div className="flex justify-between items-center pr-2">{children}</div> <div className="flex justify-between items-center pr-4">{children}</div>
) )
const LabelTitle = ({ const LabelTitle = ({
@ -12,19 +13,21 @@ const LabelTitle = ({
url, url,
htmlFor, htmlFor,
disabled = false, disabled = false,
className = "",
}: { }: {
text: string text: string
toolTip?: string toolTip?: string
url?: string url?: string
htmlFor?: string htmlFor?: string
disabled?: boolean disabled?: boolean
className?: string
}) => { }) => {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Label <Label
htmlFor={htmlFor ? htmlFor : text.toLowerCase().replace(" ", "-")} htmlFor={htmlFor ? htmlFor : text.toLowerCase().replace(" ", "-")}
className="font-medium" className={cn("font-medium min-w-[65px]", className)}
disabled={disabled} disabled={disabled}
> >
{text} {text}

7
web_app/src/components/SidePanel/index.tsx
View File

@ -61,7 +61,7 @@ const SidePanel = () => {
</SheetTrigger> </SheetTrigger>
<SheetContent <SheetContent
side="right" side="right"
className="w-[300px] mt-[60px] outline-none pl-4 pr-1" className="w-[286px] mt-[60px] outline-none pl-3 pr-1"
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onPointerDownOutside={(event) => event.preventDefault()} onPointerDownOutside={(event) => event.preventDefault()}
> >
@ -85,10 +85,7 @@ const SidePanel = () => {
</RowContainer> </RowContainer>
<Separator /> <Separator />
</SheetHeader> </SheetHeader>
<ScrollArea <ScrollArea style={{ height: windowSize.height - 160 }}>
style={{ height: windowSize.height - 160 }}
className="pr-3"
>
{renderSidePanelOptions()} {renderSidePanelOptions()}
</ScrollArea> </ScrollArea>
</SheetContent> </SheetContent>

15
web_app/src/components/ui/input.tsx
View File

@ -44,7 +44,10 @@ export interface NumberInputProps extends InputProps {
} }
const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>( const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
({ numberValue, allowFloat, onNumberValueChange, ...rest }, ref) => { (
{ numberValue, allowFloat, onNumberValueChange, className, ...rest },
ref
) => {
const [value, setValue] = React.useState<string>(numberValue.toString()) const [value, setValue] = React.useState<string>(numberValue.toString())
React.useEffect(() => { React.useEffect(() => {
@ -75,7 +78,15 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
setValue(val) setValue(val)
} }
return <Input ref={ref} value={value} onInput={onInput} {...rest} /> return (
<Input
ref={ref}
value={value}
onInput={onInput}
className={cn("text-center", className)}
{...rest}
/>
)
} }
) )