This commit is contained in:
Qing 2023-12-03 14:25:06 +08:00
parent 9a9eb8abfd
commit ef79177966
20 changed files with 742 additions and 614 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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 z-[2]">
<div
className="absolute h-full w-full overflow-hidden pointer-events-none"
style={{ visibility: show ? "visible" : "hidden" }}
>
<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()}

View File

@ -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 /> : <></>} */}

View File

@ -38,7 +38,7 @@ const Header = () => {
state.serverConfig.enableFileManager,
state.settings.enableManualInpainting,
state.settings.enableUploadMask,
state.shouldShowPromptInput(),
state.showPromptInput(),
state.setFile,
state.setCustomFile,
])

View File

@ -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

View File

@ -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>

View 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

View File

@ -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} /> : <></>}
</>
)

View 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}

View File

@ -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 }

View File

@ -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",

View 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,
}

View File

@ -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}
/>

View File

@ -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%;
}
}

View File

@ -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"

View File

@ -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) => {

View File

@ -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
},
})

View File

@ -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
}

View File

@ -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"