let5see/IOPaint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Qing
2025-03-17 16:13:00 +08:00
parent fddae35479
commit 96d944a40c
1 changed files with 109 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -441,28 +441,30 @@ const DiffusionOptions = () => {
toolTip={toolTip} toolTip={toolTip}
// disabled={disable} // disabled={disable}
/> />
<Slider <div className="flex gap-4">
className="w-[110px]" <Slider
defaultValue={[100]} className="w-[120px]"
min={10} defaultValue={[100]}
max={100} min={10}
step={1} max={100}
value={[Math.floor(settings.sdStrength * 100)]} step={1}
onValueChange={(vals) => value={[Math.floor(settings.sdStrength * 100)]}
updateSettings({ sdStrength: vals[0] / 100 }) onValueChange={(vals) =>
} updateSettings({ sdStrength: vals[0] / 100 })
// disabled={disable} }
/> // disabled={disable}
<NumberInput />
id="strength" <NumberInput
className="w-[50px] rounded-full" id="strength"
numberValue={settings.sdStrength} className="w-[50px] rounded-full"
allowFloat numberValue={settings.sdStrength}
onNumberValueChange={(val) => { allowFloat
updateSettings({ sdStrength: val }) onNumberValueChange={(val) => {
}} updateSettings({ sdStrength: val })
// disabled={disable} }}
/> // disabled={disable}
/>
</div>
</RowContainer> </RowContainer>
) )
} }
@@ -632,24 +634,27 @@ const DiffusionOptions = () => {
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."
/> />
<Slider
className="w-[110px]" <div className="flex gap-4">
defaultValue={[30]} <Slider
min={1} className="w-[120px]"
max={100} defaultValue={[30]}
step={1} min={1}
value={[Math.floor(settings.sdSteps)]} max={100}
onValueChange={(vals) => updateSettings({ sdSteps: vals[0] })} step={1}
/> value={[Math.floor(settings.sdSteps)]}
<NumberInput onValueChange={(vals) => updateSettings({ sdSteps: vals[0] })}
id="steps" />
className="w-[50px] rounded-full" <NumberInput
numberValue={settings.sdSteps} id="steps"
allowFloat={false} className="w-[50px] rounded-full"
onNumberValueChange={(val) => { numberValue={settings.sdSteps}
updateSettings({ sdSteps: val }) allowFloat={false}
}} onNumberValueChange={(val) => {
/> updateSettings({ sdSteps: val })
}}
/>
</div>
</RowContainer> </RowContainer>
) )
} }
@@ -662,26 +667,28 @@ const DiffusionOptions = () => {
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"
/> />
<Slider <div className="flex gap-4">
className="w-[110px]" <Slider
defaultValue={[750]} className="w-[120px]"
min={0} defaultValue={[750]}
max={1500} min={0}
step={1} max={1500}
value={[Math.floor(settings.sdGuidanceScale * 100)]} step={1}
onValueChange={(vals) => value={[Math.floor(settings.sdGuidanceScale * 100)]}
updateSettings({ sdGuidanceScale: vals[0] / 100 }) onValueChange={(vals) =>
} updateSettings({ sdGuidanceScale: vals[0] / 100 })
/> }
<NumberInput />
id="guid" <NumberInput
className="w-[50px] rounded-full" id="guid"
numberValue={settings.sdGuidanceScale} className="w-[50px] rounded-full"
allowFloat numberValue={settings.sdGuidanceScale}
onNumberValueChange={(val) => { allowFloat
updateSettings({ sdGuidanceScale: val }) onNumberValueChange={(val) => {
}} updateSettings({ sdGuidanceScale: val })
/> }}
/>
</div>
</RowContainer> </RowContainer>
) )
} }
@@ -758,24 +765,26 @@ const DiffusionOptions = () => {
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."
/> />
<Slider <div className="flex gap-4">
className="w-[110px]" <Slider
defaultValue={[settings.sdMaskBlur]} className="w-[120px]"
min={0} defaultValue={[settings.sdMaskBlur]}
max={96} min={0}
step={1} max={96}
value={[Math.floor(settings.sdMaskBlur)]} step={1}
onValueChange={(vals) => updateSettings({ sdMaskBlur: vals[0] })} value={[Math.floor(settings.sdMaskBlur)]}
/> onValueChange={(vals) => updateSettings({ sdMaskBlur: vals[0] })}
<NumberInput />
id="mask-blur" <NumberInput
className="w-[50px] rounded-full" id="mask-blur"
numberValue={settings.sdMaskBlur} className="w-[50px] rounded-full"
allowFloat={false} numberValue={settings.sdMaskBlur}
onNumberValueChange={(value) => { allowFloat={false}
updateSettings({ sdMaskBlur: value }) onNumberValueChange={(value) => {
}} updateSettings({ sdMaskBlur: value })
/> }}
/>
</div>
</RowContainer> </RowContainer>
<Separator /> <Separator />
</> </>
@@ -814,26 +823,28 @@ const DiffusionOptions = () => {
text="Mask OP" 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."
/> />
<Slider <div className="flex gap-4">
className="w-[110px]" <Slider
defaultValue={[12]} className="w-[120px]"
min={1} defaultValue={[12]}
max={100} min={1}
step={1} max={100}
value={[Math.floor(settings.adjustMaskKernelSize)]} step={1}
onValueChange={(vals) => value={[Math.floor(settings.adjustMaskKernelSize)]}
updateSettings({ adjustMaskKernelSize: vals[0] }) onValueChange={(vals) =>
} updateSettings({ adjustMaskKernelSize: vals[0] })
/> }
<NumberInput />
id="adjustMaskKernelSize" <NumberInput
className="w-[50px] rounded-full" id="adjustMaskKernelSize"
numberValue={settings.adjustMaskKernelSize} className="w-[50px] rounded-full"
allowFloat={false} numberValue={settings.adjustMaskKernelSize}
onNumberValueChange={(val) => { allowFloat={false}
updateSettings({ adjustMaskKernelSize: val }) onNumberValueChange={(val) => {
}} updateSettings({ adjustMaskKernelSize: val })
/> }}
/>
</div>
</RowContainer> </RowContainer>
<RowContainer> <RowContainer>