wip
This commit is contained in:
Qing
parent
9a9eb8abfd
commit
ef79177966
6
web_app/package-lock.json
generated
6
web_app/package-lock.json
generated
@ -34,6 +34,7 @@
|
||||
"clsx": "^2.0.0",
|
||||
"flexsearch": "^0.7.21",
|
||||
"immer": "^10.0.3",
|
||||
"inter-ui": "^3.19.3",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.292.0",
|
||||
"mitt": "^3.0.1",
|
||||
@ -4468,6 +4469,11 @@
|
||||
"fast-loops": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/inter-ui": {
|
||||
"version": "3.19.3",
|
||||
"resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.19.3.tgz",
|
||||
"integrity": "sha512-5FG9fjuYOXocIfjzcCBhICL5cpvwEetseL3FU6tP3d6Bn7g8wODhB+I9RNGRTizCT7CUG4GOK54OPxqq3msQgg=="
|
||||
},
|
||||
"node_modules/invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
"clsx": "^2.0.0",
|
||||
"flexsearch": "^0.7.21",
|
||||
"immer": "^10.0.3",
|
||||
"inter-ui": "^3.19.3",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "^0.292.0",
|
||||
"mitt": "^3.0.1",
|
||||
|
||||
@ -63,6 +63,8 @@ const Cropper = (props: Props) => {
|
||||
const { minHeight, minWidth, maxHeight, maxWidth, scale, show } = props
|
||||
|
||||
const [
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
isInpainting,
|
||||
{ x, y, width, height },
|
||||
setX,
|
||||
@ -70,6 +72,8 @@ const Cropper = (props: Props) => {
|
||||
setWidth,
|
||||
setHeight,
|
||||
] = useStore((state) => [
|
||||
state.imageWidth,
|
||||
state.imageHeight,
|
||||
state.isInpainting,
|
||||
state.cropperState,
|
||||
state.setCropperX,
|
||||
@ -84,7 +88,9 @@ const Cropper = (props: Props) => {
|
||||
useEffect(() => {
|
||||
setX(Math.round((maxWidth - 512) / 2))
|
||||
setY(Math.round((maxHeight - 512) / 2))
|
||||
}, [maxHeight, maxWidth])
|
||||
// TODO: 换了一张较小的图片，cropper 的起始位置和边界要修改
|
||||
// TODO: 一开始的 scale 不对
|
||||
}, [maxHeight, maxWidth, imageWidth, imageHeight])
|
||||
|
||||
const [evData, setEVData] = useState<EVData>({
|
||||
initX: 0,
|
||||
@ -253,25 +259,33 @@ const Cropper = (props: Props) => {
|
||||
|
||||
const createDragHandle = (cursor: string, side1: string, side2: string) => {
|
||||
const sideLength = 12
|
||||
const draghandleCls = `w-[${sideLength}px] h-[${sideLength}px] z-4 absolute block border-2 border-primary borde pointer-events-auto hover:bg-primary`
|
||||
const halfSideLength = sideLength / 2
|
||||
const draghandleCls = `w-[${sideLength}px] h-[${sideLength}px] z-[4] absolute content-[''] block border-2 border-primary borde pointer-events-auto hover:bg-primary`
|
||||
|
||||
let side2Cls = `${side2}-[-${sideLength / 2}px]`
|
||||
let xTrans = "0"
|
||||
let yTrans = "0"
|
||||
|
||||
let side2Key = side2
|
||||
let side2Val = `${-halfSideLength}px`
|
||||
if (side2 === "") {
|
||||
if (side1 === "top" || side1 === "bottom") {
|
||||
side2Cls = `left-[calc(50%-${sideLength / 2}px)]`
|
||||
} else if (side1 === "left" || side1 === "right") {
|
||||
side2Cls = `top-[calc(50%-${sideLength / 2}px)]`
|
||||
side2Val = "50%"
|
||||
if (side1 === "left" || side1 === "right") {
|
||||
side2Key = "top"
|
||||
yTrans = "-50%"
|
||||
} else {
|
||||
side2Key = "left"
|
||||
xTrans = "-50%"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
draghandleCls,
|
||||
`${cursor}`,
|
||||
side1 ? `${side1}-[-${sideLength / 2}px]` : "",
|
||||
side2Cls
|
||||
)}
|
||||
className={cn(draghandleCls, cursor)}
|
||||
style={{
|
||||
[side1]: -halfSideLength,
|
||||
[side2Key]: side2Val,
|
||||
transform: `translate(${xTrans}, ${yTrans}) scale(${1 / scale})`,
|
||||
}}
|
||||
data-ord={side1 + side2}
|
||||
aria-label={side1 + side2}
|
||||
tabIndex={-1}
|
||||
@ -282,7 +296,11 @@ const Cropper = (props: Props) => {
|
||||
|
||||
const createCropSelection = () => {
|
||||
return (
|
||||
<div onFocus={onDragFocus} onPointerDown={onCropPointerDown}>
|
||||
<div
|
||||
onFocus={onDragFocus}
|
||||
onPointerDown={onCropPointerDown}
|
||||
className="absolute top-0 h-full w-full"
|
||||
>
|
||||
<div
|
||||
className="absolute pointer-events-auto top-0 left-0 w-full cursor-ns-resize h-[12px] mt-[-6px]"
|
||||
data-ord="top"
|
||||
@ -299,12 +317,10 @@ const Cropper = (props: Props) => {
|
||||
className="absolute pointer-events-auto top-0 left-0 h-full cursor-ew-resize w-[12px] ml-[-6px]"
|
||||
data-ord="left"
|
||||
/>
|
||||
|
||||
{createDragHandle("cursor-nw-resize", "top", "left")}
|
||||
{createDragHandle("cursor-ne-resize", "top", "right")}
|
||||
{createDragHandle("cursor-se-resize", "bottom", "left")}
|
||||
{createDragHandle("cursor-sw-resize", "bottom", "right")}
|
||||
|
||||
{createDragHandle("cursor-sw-resize", "bottom", "left")}
|
||||
{createDragHandle("cursor-se-resize", "bottom", "right")}
|
||||
{createDragHandle("cursor-ns-resize", "top", "")}
|
||||
{createDragHandle("cursor-ns-resize", "bottom", "")}
|
||||
{createDragHandle("cursor-ew-resize", "left", "")}
|
||||
@ -351,19 +367,20 @@ const Cropper = (props: Props) => {
|
||||
style={{
|
||||
height,
|
||||
width,
|
||||
outlineWidth: `${DRAG_HANDLE_BORDER / scale}px`,
|
||||
outlineWidth: `${(DRAG_HANDLE_BORDER / scale) * 1.3}px`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (show === false) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute h-full w-full overflow-hidden pointer-events-none"
|
||||
style={{ visibility: show ? "visible" : "hidden" }}
|
||||
>
|
||||
<div className="absolute h-full w-full overflow-hidden pointer-events-none z-[2]">
|
||||
<div
|
||||
className="relative pointer-events-none"
|
||||
className="relative pointer-events-none z-[2] [box-shadow:0_0_0_9999px_rgba(0,_0,_0,_0.5)]"
|
||||
style={{ height, width, left: x, top: y }}
|
||||
>
|
||||
{createBorder()}
|
||||
|
||||
@ -1491,8 +1491,7 @@ export default function Editor(props: EditorProps) {
|
||||
minHeight={Math.min(256, imageHeight)}
|
||||
minWidth={Math.min(256, imageWidth)}
|
||||
scale={getCurScale()}
|
||||
// show={settings.showCroper}
|
||||
show={true}
|
||||
show={settings.showCroper}
|
||||
/>
|
||||
|
||||
{/* {interactiveSegState.isInteractiveSeg ? <InteractiveSeg /> : <></>} */}
|
||||
|
||||
@ -38,7 +38,7 @@ const Header = () => {
|
||||
state.serverConfig.enableFileManager,
|
||||
state.settings.enableManualInpainting,
|
||||
state.settings.enableUploadMask,
|
||||
state.shouldShowPromptInput(),
|
||||
state.showPromptInput(),
|
||||
state.setFile,
|
||||
state.setCustomFile,
|
||||
])
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { useStore } from "@/lib/states"
|
||||
import { Button } from "./ui/button"
|
||||
import { Dialog, DialogContent, DialogTitle } from "./ui/dialog"
|
||||
import { MousePointerClick } from "lucide-react"
|
||||
import { DropdownMenuItem } from "./ui/dropdown-menu"
|
||||
|
||||
interface InteractiveSegReplaceModal {
|
||||
show: boolean
|
||||
|
||||
@ -20,7 +20,7 @@ import {
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Switch } from "./ui/switch"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
|
||||
import { useState } from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { fetchModelInfos, switchModel } from "@/lib/api"
|
||||
@ -34,6 +34,14 @@ import {
|
||||
AlertDialogDescription,
|
||||
AlertDialogHeader,
|
||||
} from "./ui/alert-dialog"
|
||||
import {
|
||||
MODEL_TYPE_DIFFUSERS_SD,
|
||||
MODEL_TYPE_DIFFUSERS_SDXL,
|
||||
MODEL_TYPE_DIFFUSERS_SDXL_INPAINT,
|
||||
MODEL_TYPE_DIFFUSERS_SD_INPAINT,
|
||||
MODEL_TYPE_INPAINT,
|
||||
MODEL_TYPE_OTHER,
|
||||
} from "@/lib/const"
|
||||
|
||||
const formSchema = z.object({
|
||||
enableFileManager: z.boolean(),
|
||||
@ -59,7 +67,7 @@ const TAB_NAMES = [TAB_MODEL, TAB_GENERAL]
|
||||
export function SettingsDialog() {
|
||||
const [open, toggleOpen] = useToggle(false)
|
||||
const [openModelSwitching, toggleOpenModelSwitching] = useToggle(false)
|
||||
const [tab, setTab] = useState(TAB_GENERAL)
|
||||
const [tab, setTab] = useState(TAB_MODEL)
|
||||
const [settings, updateSettings, fileManagerState, updateFileManagerState] =
|
||||
useStore((state) => [
|
||||
state.settings,
|
||||
@ -70,7 +78,7 @@ export function SettingsDialog() {
|
||||
const { toast } = useToast()
|
||||
const [model, setModel] = useState<ModelInfo>(settings.model)
|
||||
|
||||
const { data: modelInfos, isSuccess } = useQuery({
|
||||
const { data: modelInfos, status } = useQuery({
|
||||
queryKey: ["modelInfos"],
|
||||
queryFn: fetchModelInfos,
|
||||
})
|
||||
@ -82,7 +90,6 @@ export function SettingsDialog() {
|
||||
enableDownloadMask: settings.enableDownloadMask,
|
||||
enableManualInpainting: settings.enableManualInpainting,
|
||||
enableUploadMask: settings.enableUploadMask,
|
||||
enableFileManager: fileManagerState.enabled,
|
||||
inputDirectory: fileManagerState.inputDirectory,
|
||||
outputDirectory: fileManagerState.outputDirectory,
|
||||
},
|
||||
@ -98,11 +105,9 @@ export function SettingsDialog() {
|
||||
|
||||
// TODO: validate input/output Directory
|
||||
updateFileManagerState({
|
||||
enabled: values.enableFileManager,
|
||||
inputDirectory: values.inputDirectory,
|
||||
outputDirectory: values.outputDirectory,
|
||||
})
|
||||
|
||||
if (model.name !== settings.model.name) {
|
||||
toggleOpenModelSwitching()
|
||||
switchModel(model.name)
|
||||
@ -127,19 +132,21 @@ export function SettingsDialog() {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useHotkeys("s", () => {
|
||||
toggleOpen()
|
||||
form.handleSubmit(onSubmit)()
|
||||
onSubmit(form.getValues())
|
||||
})
|
||||
|
||||
function onOpenChange(value: boolean) {
|
||||
toggleOpen()
|
||||
if (!value) {
|
||||
form.handleSubmit(onSubmit)()
|
||||
onSubmit(form.getValues())
|
||||
}
|
||||
}
|
||||
|
||||
function onModelSelect(info: ModelInfo) {
|
||||
console.log(info)
|
||||
setModel(info)
|
||||
}
|
||||
|
||||
@ -168,11 +175,11 @@ export function SettingsDialog() {
|
||||
}
|
||||
|
||||
function renderModelSettings() {
|
||||
if (!isSuccess) {
|
||||
if (status !== "success") {
|
||||
return <></>
|
||||
}
|
||||
|
||||
let defaultTab = "inpaint"
|
||||
let defaultTab = MODEL_TYPE_INPAINT
|
||||
for (let info of modelInfos) {
|
||||
if (model.name === info.name) {
|
||||
defaultTab = info.model_type
|
||||
@ -198,28 +205,35 @@ export function SettingsDialog() {
|
||||
</div>
|
||||
<Tabs defaultValue={defaultTab}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="inpaint">Inpaint</TabsTrigger>
|
||||
<TabsTrigger value="diffusers_sd">Diffusion</TabsTrigger>
|
||||
<TabsTrigger value="diffusers_sd_inpaint">
|
||||
<TabsTrigger value={MODEL_TYPE_INPAINT}>Inpaint</TabsTrigger>
|
||||
<TabsTrigger value={MODEL_TYPE_DIFFUSERS_SD}>
|
||||
Diffusion
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value={MODEL_TYPE_DIFFUSERS_SD_INPAINT}>
|
||||
Diffusion inpaint
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="diffusers_other">Diffusion other</TabsTrigger>
|
||||
<TabsTrigger value={MODEL_TYPE_OTHER}>
|
||||
Diffusion other
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<ScrollArea className="h-[240px] w-full mt-2">
|
||||
<TabsContent value="inpaint">
|
||||
{renderModelList(["inpaint"])}
|
||||
<TabsContent value={MODEL_TYPE_INPAINT}>
|
||||
{renderModelList([MODEL_TYPE_INPAINT])}
|
||||
</TabsContent>
|
||||
<TabsContent value="diffusers_sd">
|
||||
{renderModelList(["diffusers_sd", "diffusers_sdxl"])}
|
||||
</TabsContent>
|
||||
<TabsContent value="diffusers_sd_inpaint">
|
||||
<TabsContent value={MODEL_TYPE_DIFFUSERS_SD}>
|
||||
{renderModelList([
|
||||
"diffusers_sd_inpaint",
|
||||
"diffusers_sdxl_inpaint",
|
||||
MODEL_TYPE_DIFFUSERS_SD,
|
||||
MODEL_TYPE_DIFFUSERS_SDXL,
|
||||
])}
|
||||
</TabsContent>
|
||||
<TabsContent value="diffusers_other">
|
||||
{renderModelList(["diffusers_other"])}
|
||||
<TabsContent value={MODEL_TYPE_DIFFUSERS_SD_INPAINT}>
|
||||
{renderModelList([
|
||||
MODEL_TYPE_DIFFUSERS_SD_INPAINT,
|
||||
MODEL_TYPE_DIFFUSERS_SDXL_INPAINT,
|
||||
])}
|
||||
</TabsContent>
|
||||
<TabsContent value={MODEL_TYPE_OTHER}>
|
||||
{renderModelList([MODEL_TYPE_OTHER])}
|
||||
</TabsContent>
|
||||
</ScrollArea>
|
||||
</Tabs>
|
||||
|
||||
397
web_app/src/components/SidePanel.tsx
Normal file
397
web_app/src/components/SidePanel.tsx
Normal file
@ -0,0 +1,397 @@
|
||||
import { FormEvent, useState } from "react"
|
||||
import { useToggle } from "react-use"
|
||||
import { useStore } from "@/lib/states"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
|
||||
import { Switch } from "./ui/switch"
|
||||
import { Label } from "./ui/label"
|
||||
import { NumberInput } from "./ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "./ui/select"
|
||||
import { Textarea } from "./ui/textarea"
|
||||
import { SDSampler } from "@/lib/types"
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "./ui/accordion"
|
||||
import { Separator } from "./ui/separator"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
import { ScrollArea } from "./ui/scroll-area"
|
||||
import { Sheet, SheetContent, SheetHeader } from "./ui/sheet"
|
||||
|
||||
const SidePanel = () => {
|
||||
const [settings, updateSettings, showSidePanel] = useStore((state) => [
|
||||
state.settings,
|
||||
state.updateSettings,
|
||||
state.showSidePanel(),
|
||||
])
|
||||
const [open, toggleOpen] = useToggle(true)
|
||||
const [expandedAccordionItems, setExpandedAccordionItems] = useState<
|
||||
string[]
|
||||
>([])
|
||||
|
||||
useHotkeys("c", () => {
|
||||
toggleOpen()
|
||||
})
|
||||
|
||||
if (!showSidePanel) {
|
||||
return null
|
||||
}
|
||||
|
||||
const onKeyUp = (e: React.KeyboardEvent) => {
|
||||
// negativePrompt 回车触发 inpainting
|
||||
if (
|
||||
e.key === "Enter" &&
|
||||
e.ctrlKey &&
|
||||
settings.prompt.length !== 0
|
||||
// !isInpainting
|
||||
) {
|
||||
console.log("trigger negativePrompt")
|
||||
}
|
||||
}
|
||||
|
||||
const renderConterNetSetting = () => {
|
||||
if (!settings.model.support_controlnet) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
{/* <Label htmlFor="controlnet">Controlnet</Label> */}
|
||||
<Select
|
||||
value={settings.controlnetMethod}
|
||||
onValueChange={(value) => {
|
||||
updateSettings({ controlnetMethod: value })
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select control method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectGroup>
|
||||
{Object.values(settings.model.controlnets).map((method) => (
|
||||
<SelectItem key={method} value={method}>
|
||||
{method.split("/")[1]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<Label htmlFor="controlnet-weight">weight</Label>
|
||||
<NumberInput
|
||||
id="controlnet-weight"
|
||||
className="w-14"
|
||||
numberValue={settings.controlnetConditioningScale}
|
||||
allowFloat
|
||||
onNumberValueChange={(value) => {
|
||||
updateSettings({ controlnetConditioningScale: value })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderLCMLora = () => {
|
||||
if (!settings.model.support_lcm_lora) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center">
|
||||
<Label htmlFor="lcm-lora">LCM Lora</Label>
|
||||
<Switch
|
||||
id="lcm-lora"
|
||||
checked={settings.enableLCMLora}
|
||||
onCheckedChange={(value) => {
|
||||
updateSettings({ enableLCMLora: value })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderFreeu = () => {
|
||||
if (!settings.model.support_freeu) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Label htmlFor="freeu">Freeu</Label>
|
||||
<Switch
|
||||
id="freeu"
|
||||
checked={settings.enableFreeu}
|
||||
onCheckedChange={(value) => {
|
||||
updateSettings({ enableFreeu: value })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex flex-col gap-2 items-start">
|
||||
<Label htmlFor="freeu-s1">s1</Label>
|
||||
<NumberInput
|
||||
id="freeu-s1"
|
||||
className="w-14"
|
||||
numberValue={settings.freeuConfig.s1}
|
||||
allowFloat
|
||||
onNumberValueChange={(value) => {
|
||||
updateSettings({
|
||||
freeuConfig: { ...settings.freeuConfig, s1: value },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-start">
|
||||
<Label htmlFor="freeu-s2">s2</Label>
|
||||
<NumberInput
|
||||
id="freeu-s2"
|
||||
className="w-14"
|
||||
numberValue={settings.freeuConfig.s2}
|
||||
allowFloat
|
||||
onNumberValueChange={(value) => {
|
||||
updateSettings({
|
||||
freeuConfig: { ...settings.freeuConfig, s2: value },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-start">
|
||||
<Label htmlFor="freeu-b1">b1</Label>
|
||||
<NumberInput
|
||||
id="freeu-b1"
|
||||
className="w-14"
|
||||
numberValue={settings.freeuConfig.b1}
|
||||
allowFloat
|
||||
onNumberValueChange={(value) => {
|
||||
updateSettings({
|
||||
freeuConfig: { ...settings.freeuConfig, b1: value },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 items-start">
|
||||
<Label htmlFor="freeu-b2">b2</Label>
|
||||
<NumberInput
|
||||
id="freeu-b2"
|
||||
className="w-14"
|
||||
numberValue={settings.freeuConfig.b2}
|
||||
allowFloat
|
||||
onNumberValueChange={(value) => {
|
||||
updateSettings({
|
||||
freeuConfig: { ...settings.freeuConfig, b2: value },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={toggleOpen}>
|
||||
<PopoverTrigger
|
||||
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"
|
||||
>
|
||||
Config
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="end"
|
||||
onEscapeKeyDown={(event) => event.preventDefault()}
|
||||
onOpenAutoFocus={(event) => event.preventDefault()}
|
||||
onPointerDownOutside={(event) => event.preventDefault()}
|
||||
>
|
||||
<ScrollArea className="max-h-[600px]">
|
||||
<Accordion
|
||||
type="multiple"
|
||||
value={expandedAccordionItems}
|
||||
onValueChange={setExpandedAccordionItems}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<Label htmlFor="cropper">Cropper</Label>
|
||||
<Switch
|
||||
id="cropper"
|
||||
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>
|
||||
|
||||
<AccordionItem value="item-0">
|
||||
<AccordionTrigger>Negative prompt</AccordionTrigger>
|
||||
<AccordionContent className="p-1">
|
||||
<Textarea
|
||||
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 })
|
||||
}}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-1">
|
||||
<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">
|
||||
{renderLCMLora()}
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<Label htmlFor="mask-blur">Mask blur</Label>
|
||||
<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">
|
||||
<Label htmlFor="match-histograms">Match histograms</Label>
|
||||
<Switch
|
||||
id="match-histograms"
|
||||
checked={settings.sdMatchHistograms}
|
||||
onCheckedChange={(value) => {
|
||||
updateSettings({ sdMatchHistograms: value })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
|
||||
export default SidePanel
|
||||
@ -11,6 +11,7 @@ import { useStore } from "@/lib/states"
|
||||
import ImageSize from "./ImageSize"
|
||||
import Plugins from "./Plugins"
|
||||
import { InteractiveSeg } from "./InteractiveSeg"
|
||||
import SidePanel from "./SidePanel"
|
||||
// import SidePanel from "./SidePanel/SidePanel"
|
||||
// import PESidePanel from "./SidePanel/PESidePanel"
|
||||
// import P2PSidePanel from "./SidePanel/P2PSidePanel"
|
||||
@ -43,6 +44,7 @@ const Workspace = () => {
|
||||
<ImageSize />
|
||||
</div>
|
||||
<InteractiveSeg />
|
||||
<SidePanel />
|
||||
{file ? <Editor file={file} /> : <></>}
|
||||
</>
|
||||
)
|
||||
|
||||
@ -26,7 +26,7 @@ const AccordionTrigger = React.forwardRef<
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
"outline-none flex flex-1 items-center justify-between py-3 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@ -11,10 +11,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-8 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
autoComplete="off"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@ -22,4 +23,46 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
export interface NumberInputProps extends InputProps {
|
||||
numberValue: number
|
||||
allowFloat: boolean
|
||||
onNumberValueChange: (value: number) => void
|
||||
}
|
||||
|
||||
const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
|
||||
({ numberValue, allowFloat, onNumberValueChange, ...rest }, ref) => {
|
||||
const [value, setValue] = React.useState<string>(numberValue.toString())
|
||||
|
||||
React.useEffect(() => {
|
||||
if (value !== numberValue.toString() + ".") {
|
||||
setValue(numberValue.toString())
|
||||
}
|
||||
}, [numberValue])
|
||||
|
||||
const onInput = (evt: React.FormEvent<HTMLInputElement>) => {
|
||||
const target = evt.target as HTMLInputElement
|
||||
let val = target.value
|
||||
if (allowFloat) {
|
||||
val = val.replace(/[^0-9.]/g, "").replace(/(\..*?)\..*/g, "$1")
|
||||
if (val.length === 0) {
|
||||
onNumberValueChange(0)
|
||||
return
|
||||
}
|
||||
// val = parseFloat(val).toFixed(2)
|
||||
onNumberValueChange(parseFloat(val))
|
||||
} else {
|
||||
val = val.replace(/\D/g, "")
|
||||
if (val.length === 0) {
|
||||
onNumberValueChange(0)
|
||||
return
|
||||
}
|
||||
onNumberValueChange(parseInt(val, 10))
|
||||
}
|
||||
setValue(val)
|
||||
}
|
||||
|
||||
return <Input ref={ref} value={value} onInput={onInput} {...rest} />
|
||||
}
|
||||
)
|
||||
|
||||
export { Input, NumberInput }
|
||||
|
||||
@ -15,6 +15,7 @@ const PopoverContent = React.forwardRef<
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
tabIndex={-1}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
|
||||
|
||||
138
web_app/src/components/ui/sheet.tsx
Normal file
138
web_app/src/components/ui/sheet.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { Cross2Icon } from "@radix-ui/react-icons"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@ -13,6 +13,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
tabIndex={-1}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@ -2,6 +2,12 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html { font-family: "Inter", "system-ui"; }
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
html { font-family: "Inter var", "system-ui"; }
|
||||
}
|
||||
|
||||
.react-transform-wrapper {
|
||||
display: grid !important;
|
||||
width: 100% !important;
|
||||
@ -65,14 +71,14 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 224 71.4% 4.1%;
|
||||
--foreground: 210 20% 98%;
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--card: 224 71.4% 4.1%;
|
||||
--card-foreground: 210 20% 98%;
|
||||
|
||||
--popover: 224 71.4% 4.1%;
|
||||
--popover-foreground: 210 20% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;;
|
||||
|
||||
--primary: 48 100.0% 50.0%;
|
||||
--primary-foreground: 220.9 39.3% 11%;
|
||||
@ -80,18 +86,18 @@
|
||||
--secondary: 215 27.9% 16.9%;
|
||||
--secondary-foreground: 210 20% 98%;
|
||||
|
||||
--muted: 215 27.9% 16.9%;
|
||||
--muted-foreground: 217.9 10.6% 64.9%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--accent: 215 27.9% 16.9%;
|
||||
--accent-foreground: 210 20% 98%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 20% 98%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
|
||||
--border: 215 27.9% 16.9%;
|
||||
--input: 215 27.9% 16.9%;
|
||||
--ring: 216 12.2% 83.9%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
export const ACCENT_COLOR = "#ffcc00bb"
|
||||
export const DEFAULT_BRUSH_SIZE = 40
|
||||
export const MODEL_TYPE_INPAINT = "inpaint"
|
||||
export const MODEL_TYPE_DIFFUSERS_SD = "diffusers_sd"
|
||||
export const MODEL_TYPE_DIFFUSERS_SDXL = "diffusers_sdxl"
|
||||
export const MODEL_TYPE_DIFFUSERS_SD_INPAINT = "diffusers_sd_inpaint"
|
||||
export const MODEL_TYPE_DIFFUSERS_SDXL_INPAINT = "diffusers_sdxl_inpaint"
|
||||
export const MODEL_TYPE_OTHER = "diffusers_other"
|
||||
|
||||
@ -1,9 +1,16 @@
|
||||
import { create } from "zustand"
|
||||
import { persist } from "zustand/middleware"
|
||||
import { immer } from "zustand/middleware/immer"
|
||||
import { CV2Flag, LDMSampler, ModelInfo, SortBy, SortOrder } from "./types"
|
||||
import {
|
||||
CV2Flag,
|
||||
FreeuConfig,
|
||||
LDMSampler,
|
||||
ModelInfo,
|
||||
SDSampler,
|
||||
SortBy,
|
||||
SortOrder,
|
||||
} from "./types"
|
||||
import { DEFAULT_BRUSH_SIZE } from "./const"
|
||||
import { SDSampler } from "./store"
|
||||
|
||||
type FileManagerState = {
|
||||
sortBy: SortBy
|
||||
@ -68,11 +75,14 @@ export type Settings = {
|
||||
// ControlNet
|
||||
controlnetConditioningScale: number
|
||||
controlnetMethod: string
|
||||
|
||||
enableLCMLora: boolean
|
||||
enableFreeu: boolean
|
||||
freeuConfig: FreeuConfig
|
||||
}
|
||||
|
||||
type ServerConfig = {
|
||||
plugins: string[]
|
||||
availableControlNet: Record<string, string[]>
|
||||
enableFileManager: boolean
|
||||
enableAutoSaving: boolean
|
||||
}
|
||||
@ -120,7 +130,8 @@ type AppAction = {
|
||||
updateFileManagerState: (newState: Partial<FileManagerState>) => void
|
||||
updateInteractiveSegState: (newState: Partial<InteractiveSegState>) => void
|
||||
resetInteractiveSegState: () => void
|
||||
shouldShowPromptInput: () => boolean
|
||||
showPromptInput: () => boolean
|
||||
showSidePanel: () => boolean
|
||||
}
|
||||
|
||||
const defaultValues: AppState = {
|
||||
@ -155,7 +166,6 @@ const defaultValues: AppState = {
|
||||
},
|
||||
serverConfig: {
|
||||
plugins: [],
|
||||
availableControlNet: { SD: [], SD2: [], SDXL: [] },
|
||||
enableFileManager: false,
|
||||
enableAutoSaving: false,
|
||||
},
|
||||
@ -165,6 +175,7 @@ const defaultValues: AppState = {
|
||||
path: "lama",
|
||||
model_type: "inpaint",
|
||||
support_controlnet: false,
|
||||
controlnets: [],
|
||||
support_freeu: false,
|
||||
support_lcm_lora: false,
|
||||
is_single_file_diffusers: false,
|
||||
@ -198,6 +209,9 @@ const defaultValues: AppState = {
|
||||
p2pGuidanceScale: 7.5,
|
||||
controlnetConditioningScale: 0.4,
|
||||
controlnetMethod: "lllyasviel/control_v11p_sd15_canny",
|
||||
enableLCMLora: false,
|
||||
enableFreeu: false,
|
||||
freeuConfig: { s1: 0.9, s2: 0.2, b1: 1.2, b2: 1.4 },
|
||||
},
|
||||
}
|
||||
|
||||
@ -207,9 +221,14 @@ export const useStore = create<AppState & AppAction>()(
|
||||
(set, get) => ({
|
||||
...defaultValues,
|
||||
|
||||
shouldShowPromptInput: (): boolean => {
|
||||
showPromptInput: (): boolean => {
|
||||
const model_type = get().settings.model.model_type
|
||||
return ["diffusers_sd"].includes(model_type)
|
||||
return ["diffusers_sd", "diffusers_sd_inpaint"].includes(model_type)
|
||||
},
|
||||
|
||||
showSidePanel: (): boolean => {
|
||||
const model_type = get().settings.model.model_type
|
||||
return ["diffusers_sd", "diffusers_sd_inpaint"].includes(model_type)
|
||||
},
|
||||
|
||||
setServerConfig: (newValue: ServerConfig) => {
|
||||
|
||||
@ -1,539 +0,0 @@
|
||||
import { atom, selector } from "recoil"
|
||||
import _ from "lodash"
|
||||
import { CV2Flag, LDMSampler } from "./types"
|
||||
|
||||
export enum AIModel {
|
||||
LAMA = "lama",
|
||||
LDM = "ldm",
|
||||
ZITS = "zits",
|
||||
MAT = "mat",
|
||||
FCF = "fcf",
|
||||
SD15 = "sd1.5",
|
||||
ANYTHING4 = "anything4",
|
||||
REALISTIC_VISION_1_4 = "realisticVision1.4",
|
||||
SD2 = "sd2",
|
||||
CV2 = "cv2",
|
||||
Mange = "manga",
|
||||
PAINT_BY_EXAMPLE = "paint_by_example",
|
||||
PIX2PIX = "instruct_pix2pix",
|
||||
KANDINSKY22 = "kandinsky2.2",
|
||||
}
|
||||
|
||||
export enum ControlNetMethod {
|
||||
canny = "canny",
|
||||
inpaint = "inpaint",
|
||||
openpose = "openpose",
|
||||
depth = "depth",
|
||||
}
|
||||
|
||||
export const ControlNetMethodMap: any = {
|
||||
canny: "control_v11p_sd15_canny",
|
||||
inpaint: "control_v11p_sd15_inpaint",
|
||||
openpose: "control_v11p_sd15_openpose",
|
||||
depth: "control_v11f1p_sd15_depth",
|
||||
}
|
||||
|
||||
export const ControlNetMethodMap2: any = {
|
||||
control_v11p_sd15_canny: "canny",
|
||||
control_v11p_sd15_inpaint: "inpaint",
|
||||
control_v11p_sd15_openpose: "openpose",
|
||||
control_v11f1p_sd15_depth: "depth",
|
||||
}
|
||||
|
||||
export const maskState = atom<File | undefined>({
|
||||
key: "maskState",
|
||||
default: undefined,
|
||||
})
|
||||
|
||||
export const paintByExampleImageState = atom<File | undefined>({
|
||||
key: "paintByExampleImageState",
|
||||
default: undefined,
|
||||
})
|
||||
|
||||
export interface Rect {
|
||||
x: number
|
||||
y: number
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
interface AppState {
|
||||
isDisableModelSwitch: boolean
|
||||
isEnableAutoSaving: boolean
|
||||
isInteractiveSeg: boolean
|
||||
isInteractiveSegRunning: boolean
|
||||
interactiveSegClicks: number[][]
|
||||
enableFileManager: boolean
|
||||
isControlNet: boolean
|
||||
controlNetMethod: string
|
||||
plugins: string[]
|
||||
isPluginRunning: boolean
|
||||
}
|
||||
|
||||
export const appState = atom<AppState>({
|
||||
key: "appState",
|
||||
default: {
|
||||
isDisableModelSwitch: false,
|
||||
isEnableAutoSaving: false,
|
||||
isInteractiveSeg: false,
|
||||
isInteractiveSegRunning: false,
|
||||
interactiveSegClicks: [],
|
||||
enableFileManager: false,
|
||||
isControlNet: false,
|
||||
controlNetMethod: ControlNetMethod.canny,
|
||||
plugins: [],
|
||||
isPluginRunning: false,
|
||||
},
|
||||
})
|
||||
|
||||
export const negativePropmtState = atom<string>({
|
||||
key: "negativePromptState",
|
||||
default: "",
|
||||
})
|
||||
|
||||
export const isPluginRunningState = selector({
|
||||
key: "isPluginRunningState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isPluginRunning
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isPluginRunning: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const serverConfigState = selector({
|
||||
key: "serverConfigState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return {
|
||||
isControlNet: app.isControlNet,
|
||||
controlNetMethod: app.controlNetMethod,
|
||||
isDisableModelSwitchState: app.isDisableModelSwitch,
|
||||
isEnableAutoSaving: app.isEnableAutoSaving,
|
||||
enableFileManager: app.enableFileManager,
|
||||
plugins: app.plugins,
|
||||
}
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
const methodShortName = ControlNetMethodMap2[newValue.controlNetMethod]
|
||||
set(appState, { ...app, ...newValue, controlnetMethod: methodShortName })
|
||||
|
||||
const setting = get(settingState)
|
||||
set(settingState, {
|
||||
...setting,
|
||||
controlnetMethod: methodShortName,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
export const enableFileManagerState = selector({
|
||||
key: "enableFileManagerState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.enableFileManager
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, enableFileManager: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isInteractiveSegState = selector({
|
||||
key: "isInteractiveSegState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isInteractiveSeg
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isInteractiveSeg: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isInteractiveSegRunningState = selector({
|
||||
key: "isInteractiveSegRunningState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isInteractiveSegRunning
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isInteractiveSegRunning: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isProcessingState = selector({
|
||||
key: "isProcessingState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isInteractiveSegRunning || app.isPluginRunning
|
||||
},
|
||||
})
|
||||
|
||||
export const interactiveSegClicksState = selector({
|
||||
key: "interactiveSegClicksState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.interactiveSegClicks
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, interactiveSegClicks: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isDisableModelSwitchState = selector({
|
||||
key: "isDisableModelSwitchState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isDisableModelSwitch
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isDisableModelSwitch: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isControlNetState = selector({
|
||||
key: "isControlNetState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isControlNet
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isControlNet: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const isEnableAutoSavingState = selector({
|
||||
key: "isEnableAutoSavingState",
|
||||
get: ({ get }) => {
|
||||
const app = get(appState)
|
||||
return app.isEnableAutoSaving
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const app = get(appState)
|
||||
set(appState, { ...app, isEnableAutoSaving: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const croperState = atom<Rect>({
|
||||
key: "croperState",
|
||||
default: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 512,
|
||||
height: 512,
|
||||
},
|
||||
})
|
||||
|
||||
export const croperX = selector({
|
||||
key: "croperX",
|
||||
get: ({ get }) => get(croperState).x,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(croperState)
|
||||
set(croperState, { ...rect, x: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const croperY = selector({
|
||||
key: "croperY",
|
||||
get: ({ get }) => get(croperState).y,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(croperState)
|
||||
set(croperState, { ...rect, y: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const croperHeight = selector({
|
||||
key: "croperHeight",
|
||||
get: ({ get }) => get(croperState).height,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(croperState)
|
||||
set(croperState, { ...rect, height: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const croperWidth = selector({
|
||||
key: "croperWidth",
|
||||
get: ({ get }) => get(croperState).width,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(croperState)
|
||||
set(croperState, { ...rect, width: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const extenderState = atom<Rect>({
|
||||
key: "extenderState",
|
||||
default: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 512,
|
||||
height: 512,
|
||||
},
|
||||
})
|
||||
|
||||
export const extenderX = selector({
|
||||
key: "extenderX",
|
||||
get: ({ get }) => get(extenderState).x,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(extenderState)
|
||||
set(extenderState, { ...rect, x: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const extenderY = selector({
|
||||
key: "extenderY",
|
||||
get: ({ get }) => get(extenderState).y,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(extenderState)
|
||||
set(extenderState, { ...rect, y: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const extenderHeight = selector({
|
||||
key: "extenderHeight",
|
||||
get: ({ get }) => get(extenderState).height,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(extenderState)
|
||||
set(extenderState, { ...rect, height: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export const extenderWidth = selector({
|
||||
key: "extenderWidth",
|
||||
get: ({ get }) => get(extenderState).width,
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const rect = get(extenderState)
|
||||
set(extenderState, { ...rect, width: newValue })
|
||||
},
|
||||
})
|
||||
|
||||
export interface Settings {
|
||||
show: boolean
|
||||
showCroper: boolean
|
||||
downloadMask: boolean
|
||||
graduallyInpainting: boolean
|
||||
runInpaintingManually: boolean
|
||||
model: AIModel
|
||||
|
||||
// For LDM
|
||||
ldmSteps: number
|
||||
ldmSampler: LDMSampler
|
||||
|
||||
// For ZITS
|
||||
zitsWireframe: boolean
|
||||
|
||||
// For SD
|
||||
sdMaskBlur: number
|
||||
sdStrength: number
|
||||
sdSteps: number
|
||||
sdGuidanceScale: number
|
||||
sdSampler: SDSampler
|
||||
sdSeed: number
|
||||
sdSeedFixed: boolean // true: use sdSeed, false: random generate seed on backend
|
||||
sdNumSamples: number
|
||||
sdMatchHistograms: boolean
|
||||
sdScale: number
|
||||
|
||||
// For OpenCV2
|
||||
cv2Radius: number
|
||||
cv2Flag: CV2Flag
|
||||
|
||||
// Paint by Example
|
||||
paintByExampleSteps: number
|
||||
paintByExampleGuidanceScale: number
|
||||
paintByExampleSeed: number
|
||||
paintByExampleSeedFixed: boolean
|
||||
paintByExampleMaskBlur: number
|
||||
paintByExampleMatchHistograms: boolean
|
||||
|
||||
// InstructPix2Pix
|
||||
p2pSteps: number
|
||||
p2pImageGuidanceScale: number
|
||||
p2pGuidanceScale: number
|
||||
|
||||
// ControlNet
|
||||
controlnetConditioningScale: number
|
||||
controlnetMethod: string
|
||||
}
|
||||
|
||||
export enum SDSampler {
|
||||
ddim = "ddim",
|
||||
pndm = "pndm",
|
||||
klms = "k_lms",
|
||||
kEuler = "k_euler",
|
||||
kEulerA = "k_euler_a",
|
||||
dpmPlusPlus = "dpm++",
|
||||
uni_pc = "uni_pc",
|
||||
}
|
||||
|
||||
export enum SDMode {
|
||||
text2img = "text2img",
|
||||
img2img = "img2img",
|
||||
inpainting = "inpainting",
|
||||
}
|
||||
|
||||
export const settingStateDefault: Settings = {
|
||||
show: false,
|
||||
showCroper: false,
|
||||
downloadMask: false,
|
||||
graduallyInpainting: true,
|
||||
runInpaintingManually: false,
|
||||
model: AIModel.LAMA,
|
||||
|
||||
ldmSteps: 25,
|
||||
ldmSampler: LDMSampler.plms,
|
||||
|
||||
zitsWireframe: true,
|
||||
|
||||
// SD
|
||||
sdMaskBlur: 5,
|
||||
sdStrength: 0.75,
|
||||
sdSteps: 50,
|
||||
sdGuidanceScale: 7.5,
|
||||
sdSampler: SDSampler.uni_pc,
|
||||
sdSeed: 42,
|
||||
sdSeedFixed: false,
|
||||
sdNumSamples: 1,
|
||||
sdMatchHistograms: false,
|
||||
sdScale: 100,
|
||||
|
||||
// CV2
|
||||
cv2Radius: 5,
|
||||
cv2Flag: CV2Flag.INPAINT_NS,
|
||||
|
||||
// Paint by Example
|
||||
paintByExampleSteps: 50,
|
||||
paintByExampleGuidanceScale: 7.5,
|
||||
paintByExampleSeed: 42,
|
||||
paintByExampleMaskBlur: 5,
|
||||
paintByExampleSeedFixed: false,
|
||||
paintByExampleMatchHistograms: false,
|
||||
|
||||
// InstructPix2Pix
|
||||
p2pSteps: 50,
|
||||
p2pImageGuidanceScale: 1.5,
|
||||
p2pGuidanceScale: 7.5,
|
||||
|
||||
// ControlNet
|
||||
controlnetConditioningScale: 0.4,
|
||||
controlnetMethod: ControlNetMethod.canny,
|
||||
}
|
||||
|
||||
const localStorageEffect =
|
||||
(key: string) =>
|
||||
({ setSelf, onSet }: any) => {
|
||||
const savedValue = localStorage.getItem(key)
|
||||
if (savedValue != null) {
|
||||
const storageSettings = JSON.parse(savedValue)
|
||||
storageSettings.show = false
|
||||
|
||||
const restored = _.merge(
|
||||
_.cloneDeep(settingStateDefault),
|
||||
storageSettings
|
||||
)
|
||||
setSelf(restored)
|
||||
}
|
||||
|
||||
onSet((newValue: Settings, val: string, isReset: boolean) =>
|
||||
isReset
|
||||
? localStorage.removeItem(key)
|
||||
: localStorage.setItem(key, JSON.stringify(newValue))
|
||||
)
|
||||
}
|
||||
|
||||
const ROOT_STATE_KEY = "settingsState4"
|
||||
// Each atom can reference an array of these atom effect functions which are called in priority order when the atom is initialized
|
||||
// https://recoiljs.org/docs/guides/atom-effects/#local-storage-persistence
|
||||
export const settingState = atom<Settings>({
|
||||
key: ROOT_STATE_KEY,
|
||||
default: settingStateDefault,
|
||||
effects: [localStorageEffect(ROOT_STATE_KEY)],
|
||||
})
|
||||
|
||||
export const seedState = selector({
|
||||
key: "seed",
|
||||
get: ({ get }) => {
|
||||
const settings = get(settingState)
|
||||
switch (settings.model) {
|
||||
case AIModel.PAINT_BY_EXAMPLE:
|
||||
return settings.paintByExampleSeedFixed
|
||||
? settings.paintByExampleSeed
|
||||
: -1
|
||||
default:
|
||||
return settings.sdSeedFixed ? settings.sdSeed : -1
|
||||
}
|
||||
},
|
||||
set: ({ get, set }, newValue: any) => {
|
||||
const settings = get(settingState)
|
||||
switch (settings.model) {
|
||||
case AIModel.PAINT_BY_EXAMPLE:
|
||||
if (!settings.paintByExampleSeedFixed) {
|
||||
set(settingState, { ...settings, paintByExampleSeed: newValue })
|
||||
}
|
||||
break
|
||||
default:
|
||||
if (!settings.sdSeedFixed) {
|
||||
set(settingState, { ...settings, sdSeed: newValue })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const isSDState = selector({
|
||||
key: "isSD",
|
||||
get: ({ get }) => {
|
||||
const settings = get(settingState)
|
||||
return (
|
||||
settings.model === AIModel.SD15 ||
|
||||
settings.model === AIModel.SD2 ||
|
||||
settings.model === AIModel.ANYTHING4 ||
|
||||
settings.model === AIModel.REALISTIC_VISION_1_4 ||
|
||||
settings.model === AIModel.KANDINSKY22
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const isPaintByExampleState = selector({
|
||||
key: "isPaintByExampleState",
|
||||
get: ({ get }) => {
|
||||
const settings = get(settingState)
|
||||
return settings.model === AIModel.PAINT_BY_EXAMPLE
|
||||
},
|
||||
})
|
||||
|
||||
export const isPix2PixState = selector({
|
||||
key: "isPix2PixState",
|
||||
get: ({ get }) => {
|
||||
const settings = get(settingState)
|
||||
return settings.model === AIModel.PIX2PIX
|
||||
},
|
||||
})
|
||||
|
||||
export const runManuallyState = selector({
|
||||
key: "runManuallyState",
|
||||
get: ({ get }) => {
|
||||
const settings = get(settingState)
|
||||
const isSD = get(isSDState)
|
||||
const isPaintByExample = get(isPaintByExampleState)
|
||||
const isPix2Pix = get(isPix2PixState)
|
||||
return (
|
||||
settings.runInpaintingManually || isSD || isPaintByExample || isPix2Pix
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
export const isDiffusionModelsState = selector({
|
||||
key: "isDiffusionModelsState",
|
||||
get: ({ get }) => {
|
||||
const isSD = get(isSDState)
|
||||
const isPaintByExample = get(isPaintByExampleState)
|
||||
const isPix2Pix = get(isPix2PixState)
|
||||
return isSD || isPaintByExample || isPix2Pix
|
||||
},
|
||||
})
|
||||
@ -9,6 +9,7 @@ export interface ModelInfo {
|
||||
| "diffusers_sdxl_inpaint"
|
||||
| "diffusers_other"
|
||||
support_controlnet: boolean
|
||||
controlnets: string[]
|
||||
support_freeu: boolean
|
||||
support_lcm_lora: boolean
|
||||
is_single_file_diffusers: boolean
|
||||
@ -50,3 +51,20 @@ export interface Rect {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export enum SDSampler {
|
||||
ddim = "ddim",
|
||||
pndm = "pndm",
|
||||
klms = "k_lms",
|
||||
kEuler = "k_euler",
|
||||
kEulerA = "k_euler_a",
|
||||
dpmPlusPlus = "dpm++",
|
||||
uni_pc = "uni_pc",
|
||||
}
|
||||
|
||||
export interface FreeuConfig {
|
||||
s1: number
|
||||
s2: number
|
||||
b1: number
|
||||
b2: number
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React from "react"
|
||||
import ReactDOM from "react-dom/client"
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
||||
import "inter-ui/inter.css"
|
||||
import App from "./App.tsx"
|
||||
import "./globals.css"
|
||||
import { ThemeProvider } from "./components/theme-provider.tsx"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user