wip

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,6 +145,7 @@ const Header = () => {
           )}
         </div>
 
+        {file && !model.need_prompt ? (
           <IconButton
             disabled={isInpainting}
             tooltip="Rerun last mask"
@@ -152,11 +153,14 @@ const Header = () => {
             onMouseEnter={onRerunMouseEnter}
             onMouseLeave={onRerunMouseLeave}
           >
-          <RotateCw className={file ? "visible" : "hidden"} />
+            <RotateCw />
           </IconButton>
+        ) : (
+          <></>
+        )}
       </div>
 
-      {shouldShowPromptInput ? <PromptInput /> : <></>}
+      {model.need_prompt ? <PromptInput /> : <></>}
 
       <div className="flex gap-1">
         {/* <CoffeeIcon /> */}

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>

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,24 +211,26 @@ 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}
+        <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">
@@ -322,12 +333,9 @@ const SidePanel = () => {
                 />
               </div>
             </div>
-              <Separator />
-            </div>
 
-            <AccordionItem value="item-0">
-              <AccordionTrigger>Negative prompt</AccordionTrigger>
-              <AccordionContent className="p-1">
+            <div className="flex flex-col gap-4">
+              <Label htmlFor="negative-prompt">Negative prompt</Label>
               <Textarea
                 rows={4}
                 onKeyUp={onKeyUp}
@@ -342,24 +350,20 @@ const SidePanel = () => {
                   updateSettings({ negativePrompt: target.value })
                 }}
               />
-              </AccordionContent>
-            </AccordionItem>
+            </div>
 
-            <AccordionItem value="item-1">
-              <AccordionTrigger>ControlNet</AccordionTrigger>
-              <AccordionContent>{renderConterNetSetting()}</AccordionContent>
-            </AccordionItem>
+            <Separator />
 
-            <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">
+              {renderConterNetSetting()}
+            </div>
+
+            <Separator />
+            {renderFreeu()}
+
+            <Separator />
             {renderLCMLora()}
+            <Separator />
 
             <div className="flex justify-between items-center">
               <Label htmlFor="mask-blur">Mask blur</Label>
@@ -385,12 +389,9 @@ const SidePanel = () => {
               />
             </div>
           </div>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
         </ScrollArea>
-      </PopoverContent>
-    </Popover>
+      </SheetContent>
+    </Sheet>
   )
 }
 

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

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}

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,

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
 }