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

12
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,6 +145,7 @@ const Header = () => {
)} )}
</div> </div>
{file && !model.need_prompt ? (
<IconButton <IconButton
disabled={isInpainting} disabled={isInpainting}
tooltip="Rerun last mask" tooltip="Rerun last mask"
@ -152,11 +153,14 @@ const Header = () => {
onMouseEnter={onRerunMouseEnter} onMouseEnter={onRerunMouseEnter}
onMouseLeave={onRerunMouseLeave} onMouseLeave={onRerunMouseLeave}
> >
<RotateCw className={file ? "visible" : "hidden"} /> <RotateCw />
</IconButton> </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>

79
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,24 +211,26 @@ 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 }}
className="pr-3"
> >
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
@ -322,12 +333,9 @@ const SidePanel = () => {
/> />
</div> </div>
</div> </div>
<Separator />
</div>
<AccordionItem value="item-0"> <div className="flex flex-col gap-4">
<AccordionTrigger>Negative prompt</AccordionTrigger> <Label htmlFor="negative-prompt">Negative prompt</Label>
<AccordionContent className="p-1">
<Textarea <Textarea
rows={4} rows={4}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
@ -342,24 +350,20 @@ const SidePanel = () => {
updateSettings({ negativePrompt: target.value }) updateSettings({ negativePrompt: target.value })
}} }}
/> />
</AccordionContent> </div>
</AccordionItem>
<AccordionItem value="item-1"> <Separator />
<AccordionTrigger>ControlNet</AccordionTrigger>
<AccordionContent>{renderConterNetSetting()}</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Freeu</AccordionTrigger>
<AccordionContent>{renderFreeu()}</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>Other</AccordionTrigger>
<AccordionContent>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{renderConterNetSetting()}
</div>
<Separator />
{renderFreeu()}
<Separator />
{renderLCMLora()} {renderLCMLora()}
<Separator />
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<Label htmlFor="mask-blur">Mask blur</Label> <Label htmlFor="mask-blur">Mask blur</Label>
@ -385,12 +389,9 @@ const SidePanel = () => {
/> />
</div> </div>
</div> </div>
</AccordionContent>
</AccordionItem>
</Accordion>
</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
} }