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

adjust style

Browse Source
This commit is contained in:
Qing 2024-05-06 22:28:36 +08:00
parent e4e3871bf2
commit 0b9ce2cabe
4 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web_app/src/components/SidePanel/CV2Options.tsx
View File

@ -62,7 +62,7 @@ const CV2Options = () => {
/> />
<NumberInput <NumberInput
id="cv2-radius" id="cv2-radius"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.cv2Radius} numberValue={settings.cv2Radius}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {

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

@ -157,7 +157,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="brushnet-weight" id="brushnet-weight"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.brushnetConditioningScale} numberValue={settings.brushnetConditioningScale}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -237,7 +237,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="controlnet-weight" id="controlnet-weight"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
disabled={!settings.enableControlnet} disabled={!settings.enableControlnet}
numberValue={settings.controlnetConditioningScale} numberValue={settings.controlnetConditioningScale}
allowFloat={false} allowFloat={false}
@ -410,7 +410,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="image-guidance-scale" id="image-guidance-scale"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.p2pImageGuidanceScale} numberValue={settings.p2pImageGuidanceScale}
allowFloat allowFloat
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -442,7 +442,7 @@ const DiffusionOptions = () => {
// disabled={disable} // disabled={disable}
/> />
<Slider <Slider
className="w-[100px]" className="w-[110px]"
defaultValue={[100]} defaultValue={[100]}
min={10} min={10}
max={100} max={100}
@ -455,7 +455,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="strength" id="strength"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.sdStrength} numberValue={settings.sdStrength}
allowFloat allowFloat
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -473,7 +473,7 @@ const DiffusionOptions = () => {
} }
return ( return (
<> <>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-2">
<RowContainer> <RowContainer>
<LabelTitle <LabelTitle
text="Extender" text="Extender"
@ -633,7 +633,7 @@ const DiffusionOptions = () => {
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 <Slider
className="w-[100px]" className="w-[110px]"
defaultValue={[30]} defaultValue={[30]}
min={1} min={1}
max={100} max={100}
@ -643,7 +643,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="steps" id="steps"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.sdSteps} numberValue={settings.sdSteps}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -663,7 +663,7 @@ const DiffusionOptions = () => {
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 <Slider
className="w-[100px]" className="w-[110px]"
defaultValue={[750]} defaultValue={[750]}
min={0} min={0}
max={1500} max={1500}
@ -675,7 +675,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="guid" id="guid"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.sdGuidanceScale} numberValue={settings.sdGuidanceScale}
allowFloat allowFloat
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -737,7 +737,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="seed" id="seed"
className="w-[100px]" className="w-[110px]"
disabled={!settings.seedFixed} disabled={!settings.seedFixed}
numberValue={settings.seed} numberValue={settings.seed}
allowFloat={false} allowFloat={false}
@ -759,7 +759,7 @@ const DiffusionOptions = () => {
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 <Slider
className="w-[100px]" className="w-[110px]"
defaultValue={[settings.sdMaskBlur]} defaultValue={[settings.sdMaskBlur]}
min={0} min={0}
max={96} max={96}
@ -769,7 +769,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="mask-blur" id="mask-blur"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.sdMaskBlur} numberValue={settings.sdMaskBlur}
allowFloat={false} allowFloat={false}
onNumberValueChange={(value) => { onNumberValueChange={(value) => {
@ -807,7 +807,7 @@ const DiffusionOptions = () => {
const renderMaskAdjuster = () => { const renderMaskAdjuster = () => {
return ( return (
<> <>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-2">
<RowContainer> <RowContainer>
<LabelTitle <LabelTitle
htmlFor="adjustMaskKernelSize" htmlFor="adjustMaskKernelSize"
@ -815,7 +815,7 @@ const DiffusionOptions = () => {
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 <Slider
className="w-[100px]" className="w-[110px]"
defaultValue={[12]} defaultValue={[12]}
min={1} min={1}
max={100} max={100}
@ -827,7 +827,7 @@ const DiffusionOptions = () => {
/> />
<NumberInput <NumberInput
id="adjustMaskKernelSize" id="adjustMaskKernelSize"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.adjustMaskKernelSize} numberValue={settings.adjustMaskKernelSize}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {
@ -886,7 +886,7 @@ const DiffusionOptions = () => {
} }
return ( return (
<div className="flex flex-col gap-4 mt-4"> <div className="flex flex-col gap-[14px] mt-4">
{renderCropper()} {renderCropper()}
{renderExtender()} {renderExtender()}
{renderMaskBlur()} {renderMaskBlur()}

2
web_app/src/components/SidePanel/LDMOptions.tsx
View File

@ -38,7 +38,7 @@ const LDMOptions = () => {
/> />
<NumberInput <NumberInput
id="steps" id="steps"
className="w-[60px] rounded-full" className="w-[50px] rounded-full"
numberValue={settings.ldmSteps} numberValue={settings.ldmSteps}
allowFloat={false} allowFloat={false}
onNumberValueChange={(val) => { onNumberValueChange={(val) => {

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

@ -83,7 +83,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
ref={ref} ref={ref}
value={value} value={value}
onInput={onInput} onInput={onInput}
className={cn("text-center", className)} className={cn("text-center h-7 px-1", className)}
{...rest} {...rest}
/> />
) )