wip

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") {
-        side2Cls = `left-[calc(50%-${sideLength / 2}px)]`
-      } else if (side1 === "left" || side1 === "right") {
-        side2Cls = `top-[calc(50%-${sideLength / 2}px)]`
+      side2Val = "50%"
+      if (side1 === "left" || side1 === "right") {
+        side2Key = "top"
+        yTrans = "-50%"
+      } else {
+        side2Key = "left"
+        xTrans = "-50%"
       }
     }
 
     return (
       <div
-        className={cn(
-          draghandleCls,
-          `${cursor}`,
-          side1 ? `${side1}-[-${sideLength / 2}px]` : "",
-          side2Cls
-        )}
+        className={cn(draghandleCls, cursor)}
+        style={{
+          [side1]: -halfSideLength,
+          [side2Key]: side2Val,
+          transform: `translate(${xTrans}, ${yTrans}) scale(${1 / scale})`,
+        }}
         data-ord={side1 + side2}
         aria-label={side1 + side2}
         tabIndex={-1}
@@ -282,7 +296,11 @@ const Cropper = (props: Props) => {
 
   const createCropSelection = () => {
     return (
-      <div onFocus={onDragFocus} onPointerDown={onCropPointerDown}>
+      <div
+        onFocus={onDragFocus}
+        onPointerDown={onCropPointerDown}
+        className="absolute top-0 h-full w-full"
+      >
         <div
           className="absolute pointer-events-auto top-0 left-0 w-full cursor-ns-resize h-[12px] mt-[-6px]"
           data-ord="top"
@@ -299,12 +317,10 @@ const Cropper = (props: Props) => {
           className="absolute pointer-events-auto top-0 left-0 h-full cursor-ew-resize w-[12px] ml-[-6px]"
           data-ord="left"
         />
-
         {createDragHandle("cursor-nw-resize", "top", "left")}
         {createDragHandle("cursor-ne-resize", "top", "right")}
-        {createDragHandle("cursor-se-resize", "bottom", "left")}
-        {createDragHandle("cursor-sw-resize", "bottom", "right")}
-
+        {createDragHandle("cursor-sw-resize", "bottom", "left")}
+        {createDragHandle("cursor-se-resize", "bottom", "right")}
         {createDragHandle("cursor-ns-resize", "top", "")}
         {createDragHandle("cursor-ns-resize", "bottom", "")}
         {createDragHandle("cursor-ew-resize", "left", "")}
@@ -351,19 +367,20 @@ const Cropper = (props: Props) => {
         style={{
           height,
           width,
-          outlineWidth: `${DRAG_HANDLE_BORDER / scale}px`,
+          outlineWidth: `${(DRAG_HANDLE_BORDER / scale) * 1.3}px`,
         }}
       />
     )
   }
 
+  if (show === false) {
+    return null
+  }
+
   return (
-    <div
-      className="absolute h-full w-full overflow-hidden pointer-events-none"
-      style={{ visibility: show ? "visible" : "hidden" }}
-    >
+    <div className="absolute h-full w-full overflow-hidden pointer-events-none z-[2]">
       <div
-        className="relative pointer-events-none"
+        className="relative pointer-events-none z-[2] [box-shadow:0_0_0_9999px_rgba(0,_0,_0,_0.5)]"
         style={{ height, width, left: x, top: y }}
       >
         {createBorder()}

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={true}
+            show={settings.showCroper}
           />
 
           {/* {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="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>

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