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

wip

Browse Source
This commit is contained in:
Qing 2023-12-03 16:00:31 +08:00
parent ef79177966
commit 8be37c93dd
7 changed files with 200 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web_app/src/components/Header.tsx
View File

@ -28,7 +28,7 @@ const Header = () => {
enableFileManager, enableFileManager,
enableManualInpainting, enableManualInpainting,
enableUploadMask, enableUploadMask,
shouldShowPromptInput, model,
setFile, setFile,
setCustomFile, setCustomFile,
] = useStore((state) => [ ] = useStore((state) => [
@ -38,7 +38,7 @@ const Header = () => {
state.serverConfig.enableFileManager, state.serverConfig.enableFileManager,
state.settings.enableManualInpainting, state.settings.enableManualInpainting,
state.settings.enableUploadMask, state.settings.enableUploadMask,
state.showPromptInput(), state.settings.model,
state.setFile, state.setFile,
state.setCustomFile, state.setCustomFile,
]) ])
@ -145,18 +145,22 @@ const Header = () => {
)} )}
</div> </div>
<IconButton {file && !model.need_prompt ? (
disabled={isInpainting} <IconButton
tooltip="Rerun last mask" disabled={isInpainting}
onClick={handleRerunLastMask} tooltip="Rerun last mask"
onMouseEnter={onRerunMouseEnter} onClick={handleRerunLastMask}
onMouseLeave={onRerunMouseLeave} onMouseEnter={onRerunMouseEnter}
> onMouseLeave={onRerunMouseLeave}
<RotateCw className={file ? "visible" : "hidden"} /> >
</IconButton> <RotateCw />
</IconButton>
) : (
<></>
)}
</div> </div>
{shouldShowPromptInput ? <PromptInput /> : <></>} {model.need_prompt ? <PromptInput /> : <></>}
<div className="flex gap-1"> <div className="flex gap-1">
{/* <CoffeeIcon /> */} {/* <CoffeeIcon /> */}

6
web_app/src/components/Settings.tsx
View File

@ -433,9 +433,9 @@ export function SettingsDialog() {
<></> <></>
)} */} )} */}
{/* <div className=" absolute right-"> <div className="absolute right-10 bottom-6">
<Button type="submit">Ok</Button> <Button onClick={() => toggleOpen()}>Ok</Button>
</div> */} </div>
</form> </form>
</div> </div>
</Form> </Form>

353
web_app/src/components/SidePanel.tsx
View File

@ -1,5 +1,5 @@
import { FormEvent, useState } from "react" import { FormEvent, useState } from "react"
import { useToggle } from "react-use" import { useToggle, useWindowSize } from "react-use"
import { useStore } from "@/lib/states" import { useStore } from "@/lib/states"
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover" import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
import { Switch } from "./ui/switch" import { Switch } from "./ui/switch"
@ -24,7 +24,14 @@ import {
import { Separator } from "./ui/separator" import { Separator } from "./ui/separator"
import { useHotkeys } from "react-hotkeys-hook" import { useHotkeys } from "react-hotkeys-hook"
import { ScrollArea } from "./ui/scroll-area" import { ScrollArea } from "./ui/scroll-area"
import { Sheet, SheetContent, SheetHeader } from "./ui/sheet" import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "./ui/sheet"
const SidePanel = () => { const SidePanel = () => {
const [settings, updateSettings, showSidePanel] = useStore((state) => [ const [settings, updateSettings, showSidePanel] = useStore((state) => [
@ -41,6 +48,8 @@ const SidePanel = () => {
toggleOpen() toggleOpen()
}) })
const windowSize = useWindowSize()
if (!showSidePanel) { if (!showSidePanel) {
return null return null
} }
@ -65,14 +74,14 @@ const SidePanel = () => {
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col items-start gap-4"> <div className="flex flex-col items-start gap-4">
{/* <Label htmlFor="controlnet">Controlnet</Label> */} <Label htmlFor="controlnet">Controlnet</Label>
<Select <Select
value={settings.controlnetMethod} value={settings.controlnetMethod}
onValueChange={(value) => { onValueChange={(value) => {
updateSettings({ controlnetMethod: value }) updateSettings({ controlnetMethod: value })
}} }}
> >
<SelectTrigger> <SelectTrigger id="controlnet">
<SelectValue placeholder="Select control method" /> <SelectValue placeholder="Select control method" />
</SelectTrigger> </SelectTrigger>
<SelectContent align="end"> <SelectContent align="end">
@ -202,195 +211,187 @@ const SidePanel = () => {
} }
return ( return (
<Popover open={open} onOpenChange={toggleOpen}> <Sheet open={open} onOpenChange={toggleOpen} modal={false}>
<PopoverTrigger <SheetTrigger
tabIndex={-1} tabIndex={-1}
className="z-10 outline-none absolute top-[68px] right-6 px-3 py-2 rounded-lg border-solid border hover:bg-primary hover:text-primary-foreground" className="z-10 outline-none absolute top-[68px] right-6 px-3 py-2 rounded-lg border-solid border hover:bg-primary hover:text-primary-foreground"
> >
Config Config
</PopoverTrigger> </SheetTrigger>
<PopoverContent <SheetContent
align="end" side="right"
onEscapeKeyDown={(event) => event.preventDefault()} className="w-[300px] mt-[60px] outline-none pl-4 pr-1"
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onPointerDownOutside={(event) => event.preventDefault()} onPointerDownOutside={(event) => event.preventDefault()}
> >
<ScrollArea className="max-h-[600px]"> <SheetHeader className="mb-4">
<Accordion <SheetTitle>Diffusion Paramers</SheetTitle>
type="multiple" <Separator />
value={expandedAccordionItems} </SheetHeader>
onValueChange={setExpandedAccordionItems} <ScrollArea
> style={{ height: windowSize.height - 160 }}
<div className="flex flex-col gap-3"> className="pr-3"
<div className="flex justify-between items-center"> >
<Label htmlFor="cropper">Cropper</Label> <div className="flex flex-col gap-3">
<Switch <div className="flex justify-between items-center">
id="cropper" <Label htmlFor="cropper">Cropper</Label>
checked={settings.showCroper} <Switch
onCheckedChange={(value) => { id="cropper"
updateSettings({ showCroper: value }) checked={settings.showCroper}
}} onCheckedChange={(value) => {
/> updateSettings({ showCroper: value })
</div> }}
/>
<div className="flex justify-between items-center">
<Label htmlFor="steps">Steps</Label>
<NumberInput
id="steps"
className="w-14"
numberValue={settings.sdSteps}
allowFloat={false}
onNumberValueChange={(value) => {
updateSettings({ sdSteps: value })
}}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="guidance-scale">Guidance scale</Label>
<NumberInput
id="guidance-scale"
className="w-14"
numberValue={settings.sdGuidanceScale}
allowFloat
onNumberValueChange={(value) => {
updateSettings({ sdGuidanceScale: value })
}}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="strength">Strength</Label>
<NumberInput
id="strength"
className="w-14"
numberValue={settings.sdStrength}
allowFloat
onNumberValueChange={(value) => {
updateSettings({ sdStrength: value })
}}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="sampler">Sampler</Label>
<Select
value={settings.sdSampler as string}
onValueChange={(value) => {
const sampler = value as SDSampler
updateSettings({ sdSampler: sampler })
}}
>
<SelectTrigger className="w-[100px]">
<SelectValue placeholder="Select sampler" />
</SelectTrigger>
<SelectContent align="end">
<SelectGroup>
{Object.values(SDSampler).map((sampler) => (
<SelectItem
key={sampler as string}
value={sampler as string}
>
{sampler as string}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="flex justify-between items-center">
{/* 每次会从服务器返回更新该值 */}
<Label htmlFor="seed">Seed</Label>
<div className="flex gap-2 justify-center items-center">
<Switch
id="seed"
checked={settings.seedFixed}
onCheckedChange={(value) => {
updateSettings({ seedFixed: value })
}}
/>
<NumberInput
title="Seed"
className="w-[100px]"
disabled={!settings.seedFixed}
numberValue={settings.seed}
allowFloat={false}
onNumberValueChange={(val) => {
updateSettings({ seed: val })
}}
/>
</div>
</div>
<Separator />
</div> </div>
<AccordionItem value="item-0"> <div className="flex justify-between items-center">
<AccordionTrigger>Negative prompt</AccordionTrigger> <Label htmlFor="steps">Steps</Label>
<AccordionContent className="p-1"> <NumberInput
<Textarea id="steps"
rows={4} className="w-14"
onKeyUp={onKeyUp} numberValue={settings.sdSteps}
className="max-h-[8rem] overflow-y-auto mb-2" allowFloat={false}
placeholder="" onNumberValueChange={(value) => {
id="negative-prompt" updateSettings({ sdSteps: value })
value={settings.negativePrompt} }}
onInput={(evt: FormEvent<HTMLTextAreaElement>) => { />
evt.preventDefault() </div>
evt.stopPropagation()
const target = evt.target as HTMLTextAreaElement <div className="flex justify-between items-center">
updateSettings({ negativePrompt: target.value }) <Label htmlFor="guidance-scale">Guidance scale</Label>
<NumberInput
id="guidance-scale"
className="w-14"
numberValue={settings.sdGuidanceScale}
allowFloat
onNumberValueChange={(value) => {
updateSettings({ sdGuidanceScale: value })
}}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="strength">Strength</Label>
<NumberInput
id="strength"
className="w-14"
numberValue={settings.sdStrength}
allowFloat
onNumberValueChange={(value) => {
updateSettings({ sdStrength: value })
}}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="sampler">Sampler</Label>
<Select
value={settings.sdSampler as string}
onValueChange={(value) => {
const sampler = value as SDSampler
updateSettings({ sdSampler: sampler })
}}
>
<SelectTrigger className="w-[100px]">
<SelectValue placeholder="Select sampler" />
</SelectTrigger>
<SelectContent align="end">
<SelectGroup>
{Object.values(SDSampler).map((sampler) => (
<SelectItem
key={sampler as string}
value={sampler as string}
>
{sampler as string}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="flex justify-between items-center">
{/* 每次会从服务器返回更新该值 */}
<Label htmlFor="seed">Seed</Label>
<div className="flex gap-2 justify-center items-center">
<Switch
id="seed"
checked={settings.seedFixed}
onCheckedChange={(value) => {
updateSettings({ seedFixed: value })
}} }}
/> />
</AccordionContent> <NumberInput
</AccordionItem> title="Seed"
className="w-[100px]"
disabled={!settings.seedFixed}
numberValue={settings.seed}
allowFloat={false}
onNumberValueChange={(val) => {
updateSettings({ seed: val })
}}
/>
</div>
</div>
<AccordionItem value="item-1"> <div className="flex flex-col gap-4">
<AccordionTrigger>ControlNet</AccordionTrigger> <Label htmlFor="negative-prompt">Negative prompt</Label>
<AccordionContent>{renderConterNetSetting()}</AccordionContent> <Textarea
</AccordionItem> rows={4}
onKeyUp={onKeyUp}
className="max-h-[8rem] overflow-y-auto mb-2"
placeholder=""
id="negative-prompt"
value={settings.negativePrompt}
onInput={(evt: FormEvent<HTMLTextAreaElement>) => {
evt.preventDefault()
evt.stopPropagation()
const target = evt.target as HTMLTextAreaElement
updateSettings({ negativePrompt: target.value })
}}
/>
</div>
<AccordionItem value="item-2"> <Separator />
<AccordionTrigger>Freeu</AccordionTrigger>
<AccordionContent>{renderFreeu()}</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3"> <div className="flex flex-col gap-4">
<AccordionTrigger>Other</AccordionTrigger> {renderConterNetSetting()}
<AccordionContent> </div>
<div className="flex flex-col gap-4">
{renderLCMLora()}
<div className="flex justify-between items-center"> <Separator />
<Label htmlFor="mask-blur">Mask blur</Label> {renderFreeu()}
<NumberInput
id="mask-blur"
className="w-14"
numberValue={settings.sdMaskBlur}
allowFloat={false}
onNumberValueChange={(value) => {
updateSettings({ sdMaskBlur: value })
}}
/>
</div>
<div className="flex justify-between items-center"> <Separator />
<Label htmlFor="match-histograms">Match histograms</Label> {renderLCMLora()}
<Switch <Separator />
id="match-histograms"
checked={settings.sdMatchHistograms} <div className="flex justify-between items-center">
onCheckedChange={(value) => { <Label htmlFor="mask-blur">Mask blur</Label>
updateSettings({ sdMatchHistograms: value }) <NumberInput
}} id="mask-blur"
/> className="w-14"
</div> numberValue={settings.sdMaskBlur}
</div> allowFloat={false}
</AccordionContent> onNumberValueChange={(value) => {
</AccordionItem> updateSettings({ sdMaskBlur: value })
</Accordion> }}
/>
</div>
<div className="flex justify-between items-center">
<Label htmlFor="match-histograms">Match histograms</Label>
<Switch
id="match-histograms"
checked={settings.sdMatchHistograms}
onCheckedChange={(value) => {
updateSettings({ sdMatchHistograms: value })
}}
/>
</div>
</div>
</ScrollArea> </ScrollArea>
</PopoverContent> </SheetContent>
</Popover> </Sheet>
) )
} }

1
web_app/src/components/ui/scroll-area.tsx
View File

@ -10,6 +10,7 @@ const ScrollArea = React.forwardRef<
<ScrollAreaPrimitive.Root <ScrollAreaPrimitive.Root
ref={ref} ref={ref}
className={cn("relative overflow-hidden", className)} className={cn("relative overflow-hidden", className)}
scrollHideDelay={400}
{...props} {...props}
> >
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]"> <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">

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

@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 border overflow-hidden rounded-md bg-background text-foreground px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className className
)} )}
{...props} {...props}

1
web_app/src/lib/states.ts
View File

@ -179,6 +179,7 @@ const defaultValues: AppState = {
support_freeu: false, support_freeu: false,
support_lcm_lora: false, support_lcm_lora: false,
is_single_file_diffusers: false, is_single_file_diffusers: false,
need_prompt: false,
}, },
showCroper: false, showCroper: false,
enableDownloadMask: false, enableDownloadMask: false,

1
web_app/src/lib/types.ts
View File

@ -12,6 +12,7 @@ export interface ModelInfo {
controlnets: string[] controlnets: string[]
support_freeu: boolean support_freeu: boolean
support_lcm_lora: boolean support_lcm_lora: boolean
need_prompt: boolean
is_single_file_diffusers: boolean is_single_file_diffusers: boolean
} }