wip

web_app/package-lock.json

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

web_app/package.json

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

web_app/src/components/Cropper.tsx

@@ -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") {
+      side2Val = "50%"
-        side2Cls = `left-[calc(50%-${sideLength / 2}px)]`
+      if (side1 === "left" || side1 === "right") {
-      } else if (side1 === "left" || side1 === "right") {
+        side2Key = "top"
-        side2Cls = `top-[calc(50%-${sideLength / 2}px)]`
+        yTrans = "-50%"
+      } else {
+        side2Key = "left"
+        xTrans = "-50%"
       }
     }
 
     return (
       <div
-        className={cn(
+        className={cn(draghandleCls, cursor)}
-          draghandleCls,
+        style={{
-          `${cursor}`,
+          [side1]: -halfSideLength,
-          side1 ? `${side1}-[-${sideLength / 2}px]` : "",
+          [side2Key]: side2Val,
-          side2Cls
+          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", "left")}
-        {createDragHandle("cursor-sw-resize", "bottom", "right")}
+        {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"
+        className="relative pointer-events-none z-[2] [box-shadow:0_0_0_9999px_rgba(0,_0,_0,_0.5)]"
-      style={{ visibility: show ? "visible" : "hidden" }}
-    >
-      <div
-        className="relative pointer-events-none"
         style={{ height, width, left: x, top: y }}
       >
         {createBorder()}

web_app/src/components/Editor.tsx

@@ -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={settings.showCroper}
-            show={true}
           />
 
           {/* {interactiveSegState.isInteractiveSeg ? <InteractiveSeg /> : <></>} */}

web_app/src/components/Header.tsx

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

web_app/src/components/InteractiveSeg.tsx

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

web_app/src/components/Settings.tsx

@@ -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={MODEL_TYPE_INPAINT}>Inpaint</TabsTrigger>
-              <TabsTrigger value="diffusers_sd">Diffusion</TabsTrigger>
+              <TabsTrigger value={MODEL_TYPE_DIFFUSERS_SD}>
-              <TabsTrigger value="diffusers_sd_inpaint">
+                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">
+              <TabsContent value={MODEL_TYPE_INPAINT}>
-                {renderModelList(["inpaint"])}
+                {renderModelList([MODEL_TYPE_INPAINT])}
               </TabsContent>
-              <TabsContent value="diffusers_sd">
+              <TabsContent value={MODEL_TYPE_DIFFUSERS_SD}>
-                {renderModelList(["diffusers_sd", "diffusers_sdxl"])}
-              </TabsContent>
-              <TabsContent value="diffusers_sd_inpaint">
                 {renderModelList([
-                  "diffusers_sd_inpaint",
+                  MODEL_TYPE_DIFFUSERS_SD,
-                  "diffusers_sdxl_inpaint",
+                  MODEL_TYPE_DIFFUSERS_SDXL,
                 ])}
               </TabsContent>
-              <TabsContent value="diffusers_other">
+              <TabsContent value={MODEL_TYPE_DIFFUSERS_SD_INPAINT}>
-                {renderModelList(["diffusers_other"])}
+                {renderModelList([
+                  MODEL_TYPE_DIFFUSERS_SD_INPAINT,
+                  MODEL_TYPE_DIFFUSERS_SDXL_INPAINT,
+                ])}
+              </TabsContent>
+              <TabsContent value={MODEL_TYPE_OTHER}>
+                {renderModelList([MODEL_TYPE_OTHER])}
               </TabsContent>
             </ScrollArea>
           </Tabs>

web_app/src/components/SidePanel.tsx

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

web_app/src/components/Workspace.tsx

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

web_app/src/components/ui/accordion.tsx

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

web_app/src/components/ui/input.tsx

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

web_app/src/components/ui/popover.tsx

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

web_app/src/components/ui/sheet.tsx

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

web_app/src/components/ui/textarea.tsx

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

web_app/src/globals.css

@@ -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%;
+    --background: 240 10% 3.9%;
-    --foreground: 210 20% 98%;
+    --foreground: 0 0% 98%;
  
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
  
-    --popover: 224 71.4% 4.1%;
+    --popover: 240 10% 3.9%;
-    --popover-foreground: 210 20% 98%;
+    --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: 240 3.7% 15.9%;
-    --muted-foreground: 217.9 10.6% 64.9%;
+    --muted-foreground: 240 5% 64.9%;
  
-    --accent: 215 27.9% 16.9%;
+    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 210 20% 98%;
+    --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%;
+    --border: 240 3.7% 15.9%;
-    --input: 215 27.9% 16.9%;
+    --input: 240 3.7% 15.9%;
-    --ring: 216 12.2% 83.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
  

web_app/src/lib/const.ts

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

web_app/src/lib/states.ts

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

web_app/src/lib/store.ts

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

web_app/src/lib/types.ts

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

web_app/src/main.tsx

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