wip
This commit is contained in:
Qing
@@ -1,5 +1,5 @@
|
||||
import { FormEvent, useState } from "react"
|
||||
import { useToggle } from "react-use"
|
||||
import { useToggle, useWindowSize } from "react-use"
|
||||
import { useStore } from "@/lib/states"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
|
||||
import { Switch } from "./ui/switch"
|
||||
@@ -24,7 +24,14 @@ import {
|
||||
import { Separator } from "./ui/separator"
|
||||
import { useHotkeys } from "react-hotkeys-hook"
|
||||
import { ScrollArea } from "./ui/scroll-area"
|
||||
import { Sheet, SheetContent, SheetHeader } from "./ui/sheet"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "./ui/sheet"
|
||||
|
||||
const SidePanel = () => {
|
||||
const [settings, updateSettings, showSidePanel] = useStore((state) => [
|
||||
@@ -41,6 +48,8 @@ const SidePanel = () => {
|
||||
toggleOpen()
|
||||
})
|
||||
|
||||
const windowSize = useWindowSize()
|
||||
|
||||
if (!showSidePanel) {
|
||||
return null
|
||||
}
|
||||
@@ -65,14 +74,14 @@ const SidePanel = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col items-start gap-4">
|
||||
{/* <Label htmlFor="controlnet">Controlnet</Label> */}
|
||||
<Label htmlFor="controlnet">Controlnet</Label>
|
||||
<Select
|
||||
value={settings.controlnetMethod}
|
||||
onValueChange={(value) => {
|
||||
updateSettings({ controlnetMethod: value })
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger id="controlnet">
|
||||
<SelectValue placeholder="Select control method" />
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
@@ -202,195 +211,187 @@ const SidePanel = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={toggleOpen}>
|
||||
<PopoverTrigger
|
||||
<Sheet open={open} onOpenChange={toggleOpen} modal={false}>
|
||||
<SheetTrigger
|
||||
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()}
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="w-[300px] mt-[60px] outline-none pl-4 pr-1"
|
||||
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 />
|
||||
<SheetHeader className="mb-4">
|
||||
<SheetTitle>Diffusion Paramers</SheetTitle>
|
||||
<Separator />
|
||||
</SheetHeader>
|
||||
<ScrollArea
|
||||
style={{ height: windowSize.height - 160 }}
|
||||
className="pr-3"
|
||||
>
|
||||
<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>
|
||||
|
||||
<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 })
|
||||
<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 })
|
||||
}}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<NumberInput
|
||||
title="Seed"
|
||||
className="w-[100px]"
|
||||
disabled={!settings.seedFixed}
|
||||
numberValue={settings.seed}
|
||||
allowFloat={false}
|
||||
onNumberValueChange={(val) => {
|
||||
updateSettings({ seed: val })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>ControlNet</AccordionTrigger>
|
||||
<AccordionContent>{renderConterNetSetting()}</AccordionContent>
|
||||
</AccordionItem>
|
||||
<div className="flex flex-col gap-4">
|
||||
<Label htmlFor="negative-prompt">Negative prompt</Label>
|
||||
<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 })
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Freeu</AccordionTrigger>
|
||||
<AccordionContent>{renderFreeu()}</AccordionContent>
|
||||
</AccordionItem>
|
||||
<Separator />
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger>Other</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<div className="flex flex-col gap-4">
|
||||
{renderLCMLora()}
|
||||
<div className="flex flex-col gap-4">
|
||||
{renderConterNetSetting()}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<Separator />
|
||||
{renderFreeu()}
|
||||
|
||||
<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>
|
||||
<Separator />
|
||||
{renderLCMLora()}
|
||||
<Separator />
|
||||
|
||||
<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>
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user