wip

2023-12-03 16:00:31 +08:00 · 2023-12-03 16:00:31 +08:00 · 8be37c93dd
commit 8be37c93dd
parent ef79177966
7 changed files with 200 additions and 192 deletions
--- a/web_app/src/components/Header.tsx
+++ b/web_app/src/components/Header.tsx
@ -28,7 +28,7 @@ const Header = () => {
    enableFileManager,
    enableManualInpainting,
    enableUploadMask,
-    shouldShowPromptInput,
+    model,
    setFile,
    setCustomFile,
  ] = useStore((state) => [
@ -38,7 +38,7 @@ const Header = () => {
    state.serverConfig.enableFileManager,
    state.settings.enableManualInpainting,
    state.settings.enableUploadMask,
-    state.showPromptInput(),
+    state.settings.model,
    state.setFile,
    state.setCustomFile,
  ])
@ -145,18 +145,22 @@ const Header = () => {
          )}
        </div>

-        <IconButton
-          disabled={isInpainting}
-          tooltip="Rerun last mask"
-          onClick={handleRerunLastMask}
-          onMouseEnter={onRerunMouseEnter}
-          onMouseLeave={onRerunMouseLeave}
-        >
-          <RotateCw className={file ? "visible" : "hidden"} />
-        </IconButton>
+        {file && !model.need_prompt ? (
+          <IconButton
+            disabled={isInpainting}
+            tooltip="Rerun last mask"
+            onClick={handleRerunLastMask}
+            onMouseEnter={onRerunMouseEnter}
+            onMouseLeave={onRerunMouseLeave}
+          >
+            <RotateCw />
+          </IconButton>
+        ) : (
+          <></>
+        )}
      </div>

-      {shouldShowPromptInput ? <PromptInput /> : <></>}
+      {model.need_prompt ? <PromptInput /> : <></>}

      <div className="flex gap-1">
        {/* <CoffeeIcon /> */}
--- a/web_app/src/components/Settings.tsx
+++ b/web_app/src/components/Settings.tsx
@ -433,9 +433,9 @@ export function SettingsDialog() {
                    <></>
                  )} */}

-                  {/* <div className=" absolute right-">
-                  <Button type="submit">Ok</Button>
-                </div> */}
+                  <div className="absolute right-10 bottom-6">
+                    <Button onClick={() => toggleOpen()}>Ok</Button>
+                  </div>
                </form>
              </div>
            </Form>
--- a/web_app/src/components/SidePanel.tsx
+++ b/web_app/src/components/SidePanel.tsx
@ -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>
  )
 }

--- a/web_app/src/components/ui/scroll-area.tsx
+++ b/web_app/src/components/ui/scroll-area.tsx
@ -10,6 +10,7 @@ const ScrollArea = React.forwardRef<
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
+    scrollHideDelay={400}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
--- a/web_app/src/components/ui/tooltip.tsx
+++ b/web_app/src/components/ui/tooltip.tsx
@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 border overflow-hidden rounded-md bg-background text-foreground px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    )}
    {...props}
--- a/web_app/src/lib/states.ts
+++ b/web_app/src/lib/states.ts
@ -179,6 +179,7 @@ const defaultValues: AppState = {
      support_freeu: false,
      support_lcm_lora: false,
      is_single_file_diffusers: false,
+      need_prompt: false,
    },
    showCroper: false,
    enableDownloadMask: false,
--- a/web_app/src/lib/types.ts
+++ b/web_app/src/lib/types.ts
@ -12,6 +12,7 @@ export interface ModelInfo {
  controlnets: string[]
  support_freeu: boolean
  support_lcm_lora: boolean
+  need_prompt: boolean
  is_single_file_diffusers: boolean
 }