diff --git a/web_app/package-lock.json b/web_app/package-lock.json
index 95d2ec5..c553fb7 100644
--- a/web_app/package-lock.json
+++ b/web_app/package-lock.json
@@ -17,6 +17,7 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-popover": "^1.0.7",
+        "@radix-ui/react-radio-group": "^1.1.3",
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
@@ -1913,6 +1914,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz",
+      "integrity": "sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz",
diff --git a/web_app/package.json b/web_app/package.json
index 3a5e2e7..0ba3ac3 100644
--- a/web_app/package.json
+++ b/web_app/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
diff --git a/web_app/src/components/Editor.tsx b/web_app/src/components/Editor.tsx
index 3c26d04..0de861a 100644
--- a/web_app/src/components/Editor.tsx
+++ b/web_app/src/components/Editor.tsx
@@ -28,7 +28,7 @@ import { useStore } from "@/lib/states"
 import Cropper from "./Cropper"
 import { InteractiveSegPoints } from "./InteractiveSeg"
 import useHotKey from "@/hooks/useHotkey"
-import Extender from "./Expender"
+import Extender from "./Extender"
 
 const TOOLBAR_HEIGHT = 200
 const MIN_BRUSH_SIZE = 10
@@ -221,7 +221,9 @@ export default function Editor(props: EditorProps) {
     }
 
     const [width, height] = getCurrentWidthHeight()
-    setImageSize(width, height)
+    if (width !== imageWidth || height !== imageHeight) {
+      setImageSize(width, height)
+    }
 
     const rW = windowSize.width / width
     const rH = (windowSize.height - TOOLBAR_HEIGHT) / height
@@ -255,6 +257,8 @@ export default function Editor(props: EditorProps) {
     }
   }, [
     viewportRef,
+    imageHeight,
+    imageWidth,
     original,
     isOriginalLoaded,
     windowSize,
@@ -619,19 +623,6 @@ export default function Editor(props: EditorProps) {
     }
   )
 
-  useKeyPressEvent(
-    "Alt",
-    (ev) => {
-      ev?.preventDefault()
-      ev?.stopPropagation()
-      // TODO: mouse scroll increase/decrease brush size
-    },
-    (ev) => {
-      ev?.preventDefault()
-      ev?.stopPropagation()
-    }
-  )
-
   const getCurScale = (): number => {
     let s = minScale
     if (viewportRef.current?.instance?.transformState.scale !== undefined) {
@@ -782,19 +773,17 @@ export default function Editor(props: EditorProps) {
           <Cropper
             maxHeight={imageHeight}
             maxWidth={imageWidth}
-            minHeight={Math.min(256, imageHeight)}
-            minWidth={Math.min(256, imageWidth)}
+            minHeight={Math.min(512, imageHeight)}
+            minWidth={Math.min(512, imageWidth)}
             scale={getCurScale()}
             show={settings.showCropper}
           />
 
           <Extender
-            maxHeight={imageHeight}
-            maxWidth={imageWidth}
-            minHeight={Math.min(256, imageHeight)}
-            minWidth={Math.min(256, imageWidth)}
+            minHeight={Math.min(512, imageHeight)}
+            minWidth={Math.min(512, imageWidth)}
             scale={getCurScale()}
-            show={settings.showExpender}
+            show={settings.showExtender}
           />
 
           {interactiveSegState.isInteractiveSeg ? (
diff --git a/web_app/src/components/Expender.tsx b/web_app/src/components/Extender.tsx
similarity index 66%
rename from web_app/src/components/Expender.tsx
rename to web_app/src/components/Extender.tsx
index ea58c93..14f71fd 100644
--- a/web_app/src/components/Expender.tsx
+++ b/web_app/src/components/Extender.tsx
@@ -1,3 +1,4 @@
+import { EXTENDER_ALL, EXTENDER_X, EXTENDER_Y } from "@/lib/const"
 import { useStore } from "@/lib/states"
 import { cn } from "@/lib/utils"
 import React, { useEffect, useState } from "react"
@@ -18,8 +19,6 @@ interface EVData {
 }
 
 interface Props {
-  maxHeight: number
-  maxWidth: number
   scale: number
   minHeight: number
   minWidth: number
@@ -30,66 +29,44 @@ const clamp = (
   newPos: number,
   newLength: number,
   oldPos: number,
-  oldLength: number,
-  minLength: number,
-  maxLength: number
+  minLength: number
 ) => {
-  return [newPos, newLength]
-  if (newPos !== oldPos && newLength === oldLength) {
-    if (newPos < 0) {
-      return [0, oldLength]
-    }
-    if (newPos + newLength > maxLength) {
-      return [maxLength - oldLength, oldLength]
-    }
-  } else {
-    if (newLength < minLength) {
-      if (newPos === oldPos) {
-        return [newPos, minLength]
-      }
-      return [newPos + newLength - minLength, minLength]
-    }
-    if (newPos < 0) {
-      return [0, newPos + newLength]
-    }
-    if (newPos + newLength > maxLength) {
-      return [newPos, maxLength - newPos]
+  if (newLength < minLength) {
+    if (newPos === oldPos) {
+      return [newPos, minLength]
     }
+    return [newPos + newLength - minLength, minLength]
   }
 
   return [newPos, newLength]
 }
 
 const Extender = (props: Props) => {
-  const { minHeight, minWidth, maxHeight, maxWidth, scale, show } = props
+  const { minHeight, minWidth, scale, show } = props
 
   const [
-    imageWidth,
-    imageHeight,
     isInpainting,
+    imageHeight,
+    imageWdith,
     { x, y, width, height },
     setX,
     setY,
     setWidth,
     setHeight,
+    extenderDirection,
   ] = useStore((state) => [
-    state.imageWidth,
-    state.imageHeight,
     state.isInpainting,
+    state.imageHeight,
+    state.imageWidth,
     state.extenderState,
     state.setExtenderX,
     state.setExtenderY,
     state.setExtenderWidth,
     state.setExtenderHeight,
+    state.settings.extenderDirection,
   ])
 
   const [isResizing, setIsResizing] = useState(false)
-  const [isMoving, setIsMoving] = useState(false)
-
-  useEffect(() => {
-    setX(Math.round((maxWidth - 512) / 2))
-    setY(Math.round((maxHeight - 512) / 2))
-  }, [maxHeight, maxWidth, imageWidth, imageHeight])
 
   const [evData, setEVData] = useState<EVData>({
     initX: 0,
@@ -106,11 +83,11 @@ const Extender = (props: Props) => {
   }
 
   const clampLeftRight = (newX: number, newWidth: number) => {
-    return clamp(newX, newWidth, x, width, minWidth, maxWidth)
+    return clamp(newX, newWidth, x, minWidth)
   }
 
   const clampTopBottom = (newY: number, newHeight: number) => {
-    return clamp(newY, newHeight, y, height, minHeight, maxHeight)
+    return clamp(newY, newHeight, y, minHeight)
   }
 
   const onPointerMove = (e: PointerEvent) => {
@@ -126,14 +103,31 @@ const Extender = (props: Props) => {
     const moveTop = () => {
       const newHeight = evData.initHeight - offsetY
       const newY = evData.initY + offsetY
-      const [clampedY, clampedHeight] = clampTopBottom(newY, newHeight)
+      let clampedY = newY
+      let clampedHeight = newHeight
+      if (extenderDirection === EXTENDER_ALL) {
+        if (clampedY > 0) {
+          clampedY = 0
+          clampedHeight = evData.initHeight - Math.abs(evData.initY)
+        }
+      } else {
+        const clamped = clampTopBottom(newY, newHeight)
+        clampedY = clamped[0]
+        clampedHeight = clamped[1]
+      }
       setHeight(clampedHeight)
       setY(clampedY)
     }
 
     const moveBottom = () => {
       const newHeight = evData.initHeight + offsetY
-      const [clampedY, clampedHeight] = clampTopBottom(evData.initY, newHeight)
+      let [clampedY, clampedHeight] = clampTopBottom(evData.initY, newHeight)
+
+      if (extenderDirection === EXTENDER_ALL) {
+        if (clampedY + clampedHeight < imageHeight) {
+          clampedHeight = imageHeight
+        }
+      }
       setHeight(clampedHeight)
       setY(clampedY)
     }
@@ -141,14 +135,30 @@ const Extender = (props: Props) => {
     const moveLeft = () => {
       const newWidth = evData.initWidth - offsetX
       const newX = evData.initX + offsetX
-      const [clampedX, clampedWidth] = clampLeftRight(newX, newWidth)
+      let clampedX = newX
+      let clampedWidth = newWidth
+      if (extenderDirection === EXTENDER_ALL) {
+        if (clampedX > 0) {
+          clampedX = 0
+          clampedWidth = evData.initWidth - Math.abs(evData.initX)
+        }
+      } else {
+        const clamped = clampLeftRight(newX, newWidth)
+        clampedX = clamped[0]
+        clampedWidth = clamped[1]
+      }
       setWidth(clampedWidth)
       setX(clampedX)
     }
 
     const moveRight = () => {
       const newWidth = evData.initWidth + offsetX
-      const [clampedX, clampedWidth] = clampLeftRight(evData.initX, newWidth)
+      let [clampedX, clampedWidth] = clampLeftRight(evData.initX, newWidth)
+      if (extenderDirection === EXTENDER_ALL) {
+        if (clampedX + clampedWidth < imageWdith) {
+          clampedWidth = imageWdith
+        }
+      }
       setWidth(clampedWidth)
       setX(clampedX)
     }
@@ -196,31 +206,16 @@ const Extender = (props: Props) => {
           break
       }
     }
-
-    if (isMoving) {
-      const newX = evData.initX + offsetX
-      const newY = evData.initY + offsetY
-      const [clampedX, clampedWidth] = clampLeftRight(newX, evData.initWidth)
-      const [clampedY, clampedHeight] = clampTopBottom(newY, evData.initHeight)
-      setWidth(clampedWidth)
-      setHeight(clampedHeight)
-      setX(clampedX)
-      setY(clampedY)
-    }
   }
 
   const onPointerDone = (e: PointerEvent) => {
     if (isResizing) {
       setIsResizing(false)
     }
-
-    if (isMoving) {
-      setIsMoving(false)
-    }
   }
 
   useEffect(() => {
-    if (isResizing || isMoving) {
+    if (isResizing) {
       document.addEventListener("pointermove", onPointerMove, DOC_MOVE_OPTS)
       document.addEventListener("pointerup", onPointerDone, DOC_MOVE_OPTS)
       document.addEventListener("pointercancel", onPointerDone, DOC_MOVE_OPTS)
@@ -238,7 +233,7 @@ const Extender = (props: Props) => {
         )
       }
     }
-  }, [isResizing, isMoving, width, height, evData])
+  }, [isResizing, width, height, evData])
 
   const onCropPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     const { ord } = (e.target as HTMLElement).dataset
@@ -300,36 +295,55 @@ const Extender = (props: Props) => {
         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"
-        />
-        <div
-          className="absolute pointer-events-auto top-0 right-0 h-full cursor-ew-resize w-[12px] mr-[-6px]"
-          data-ord="right"
-        />
-        <div
-          className="absolute pointer-events-auto bottom-0 left-0 w-full cursor-ns-resize h-[12px] mb-[-6px]"
-          data-ord="bottom"
-        />
-        <div
-          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-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", "")}
-        {createDragHandle("cursor-ew-resize", "right", "")}
+        {[EXTENDER_Y, EXTENDER_ALL].includes(extenderDirection) ? (
+          <>
+            <div
+              className="absolute pointer-events-auto top-0 left-0 w-full cursor-ns-resize h-[12px] mt-[-6px]"
+              data-ord="top"
+            />
+            <div
+              className="absolute pointer-events-auto bottom-0 left-0 w-full cursor-ns-resize h-[12px] mb-[-6px]"
+              data-ord="bottom"
+            />
+            {createDragHandle("cursor-ns-resize", "top", "")}
+            {createDragHandle("cursor-ns-resize", "bottom", "")}
+          </>
+        ) : (
+          <></>
+        )}
+
+        {[EXTENDER_X, EXTENDER_ALL].includes(extenderDirection) ? (
+          <>
+            <div
+              className="absolute pointer-events-auto top-0 right-0 h-full cursor-ew-resize w-[12px] mr-[-6px]"
+              data-ord="right"
+            />
+            <div
+              className="absolute pointer-events-auto top-0 left-0 h-full cursor-ew-resize w-[12px] ml-[-6px]"
+              data-ord="left"
+            />
+            {createDragHandle("cursor-ew-resize", "left", "")}
+            {createDragHandle("cursor-ew-resize", "right", "")}
+          </>
+        ) : (
+          <></>
+        )}
+
+        {extenderDirection === EXTENDER_ALL ? (
+          <>
+            {createDragHandle("cursor-nw-resize", "top", "left")}
+            {createDragHandle("cursor-ne-resize", "top", "right")}
+            {createDragHandle("cursor-sw-resize", "bottom", "left")}
+            {createDragHandle("cursor-se-resize", "bottom", "right")}
+          </>
+        ) : (
+          <></>
+        )}
       </div>
     )
   }
 
   const onInfoBarPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    setIsMoving(true)
     setEVData({
       initX: x,
       initY: y,
@@ -345,7 +359,7 @@ const Extender = (props: Props) => {
     return (
       <div
         className={twMerge(
-          "border absolute pointer-events-auto px-2 py-1 rounded-full hover:cursor-move bg-background",
+          "border absolute pointer-events-auto px-2 py-1 rounded-full bg-background",
           "origin-top-left top-0 left-0"
         )}
         style={{
@@ -362,7 +376,7 @@ const Extender = (props: Props) => {
   const createBorder = () => {
     return (
       <div
-        className="outline-dashed outline-primary"
+        className={cn("outline-dashed outline-primary")}
         style={{
           height,
           width,
diff --git a/web_app/src/components/FileManager.tsx b/web_app/src/components/FileManager.tsx
index 5588f07..2813f4d 100644
--- a/web_app/src/components/FileManager.tsx
+++ b/web_app/src/components/FileManager.tsx
@@ -79,10 +79,6 @@ export default function FileManager(props: Props) {
     state.updateFileManagerState,
   ])
 
-  useHotKey("f", () => {
-    toggleOpen()
-  })
-
   const { toast } = useToast()
   const [scrollTop, setScrollTop] = useState(0)
   const [closeScrollTop, setCloseScrollTop] = useState(0)
@@ -91,6 +87,37 @@ export default function FileManager(props: Props) {
   const debouncedSearchText = useDebounce(fileManagerState.searchText, 300)
   const [tab, setTab] = useState(IMAGE_TAB)
   const [photos, setPhotos] = useState<Photo[]>([])
+  const [photoIndex, setPhotoIndex] = useState(0)
+
+  useHotKey("f", () => {
+    toggleOpen()
+  })
+
+  useHotKey(
+    "left",
+    () => {
+      let newIndex = photoIndex
+      if (photoIndex > 0) {
+        newIndex = photoIndex - 1
+      }
+      setPhotoIndex(newIndex)
+      onPhotoClick(tab, photos[newIndex].name)
+    },
+    [photoIndex, photos]
+  )
+
+  useHotKey(
+    "right",
+    () => {
+      let newIndex = photoIndex
+      if (photoIndex < photos.length - 1) {
+        newIndex = photoIndex + 1
+      }
+      setPhotoIndex(newIndex)
+      onPhotoClick(tab, photos[newIndex].name)
+    },
+    [photoIndex, photos]
+  )
 
   useEffect(() => {
     if (!open) {
@@ -165,6 +192,7 @@ export default function FileManager(props: Props) {
 
   const onClick = ({ index }: { index: number }) => {
     toggleOpen()
+    setPhotoIndex(index)
     onPhotoClick(tab, photos[index].name)
   }
 
diff --git a/web_app/src/components/Header.tsx b/web_app/src/components/Header.tsx
index 848886d..ecceac9 100644
--- a/web_app/src/components/Header.tsx
+++ b/web_app/src/components/Header.tsx
@@ -2,12 +2,6 @@ import { PlayIcon } from "@radix-ui/react-icons"
 import { useCallback, useState } from "react"
 import { IconButton, ImageUploadButton } from "@/components/ui/button"
 import Shortcuts from "@/components/Shortcuts"
-import emitter, {
-  DREAM_BUTTON_MOUSE_ENTER,
-  DREAM_BUTTON_MOUSE_LEAVE,
-  EVENT_CUSTOM_MASK,
-  RERUN_LAST_MASK,
-} from "@/lib/event"
 import { useImage } from "@/hooks/useImage"
 
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"
@@ -17,9 +11,9 @@ import FileManager from "./FileManager"
 import { getMediaFile } from "@/lib/api"
 import { useStore } from "@/lib/states"
 import SettingsDialog from "./Settings"
-import { cn } from "@/lib/utils"
-import useHotKey from "@/hooks/useHotkey"
+import { cn, fileToImage } from "@/lib/utils"
 import Coffee from "./Coffee"
+import { useToast } from "./ui/use-toast"
 
 const Header = () => {
   const [
@@ -27,48 +21,49 @@ const Header = () => {
     customMask,
     isInpainting,
     enableFileManager,
-    enableManualInpainting,
+    runMannually,
     enableUploadMask,
     model,
     setFile,
     setCustomFile,
+    runInpainting,
+    showPrevMask,
+    hidePrevMask,
+    imageHeight,
+    imageWidth,
   ] = useStore((state) => [
     state.file,
     state.customMask,
     state.isInpainting,
     state.serverConfig.enableFileManager,
-    state.settings.enableManualInpainting,
+    state.runMannually(),
     state.settings.enableUploadMask,
     state.settings.model,
     state.setFile,
     state.setCustomFile,
+    state.runInpainting,
+    state.showPrevMask,
+    state.hidePrevMask,
+    state.imageHeight,
+    state.imageWidth,
   ])
+
+  const { toast } = useToast()
   const [maskImage, maskImageLoaded] = useImage(customMask)
   const [openMaskPopover, setOpenMaskPopover] = useState(false)
 
-  const handleRerunLastMask = useCallback(() => {
-    emitter.emit(RERUN_LAST_MASK)
-  }, [])
+  const handleRerunLastMask = () => {
+    runInpainting()
+  }
 
   const onRerunMouseEnter = () => {
-    emitter.emit(DREAM_BUTTON_MOUSE_ENTER)
+    showPrevMask()
   }
 
   const onRerunMouseLeave = () => {
-    emitter.emit(DREAM_BUTTON_MOUSE_LEAVE)
+    hidePrevMask()
   }
 
-  useHotKey(
-    "r",
-    () => {
-      if (!isInpainting) {
-        handleRerunLastMask()
-      }
-    },
-    {},
-    [isInpainting, handleRerunLastMask]
-  )
-
   return (
     <header className="h-[60px] px-6 py-4 absolute top-[0] flex justify-between items-center w-full z-20 border-b backdrop-filter backdrop-blur-md bg-background/70">
       <div className="flex items-center gap-1">
@@ -103,10 +98,31 @@ const Header = () => {
           <ImageUploadButton
             disabled={isInpainting}
             tooltip="Upload custom mask"
-            onFileUpload={(file) => {
+            onFileUpload={async (file) => {
+              let newCustomMask: HTMLImageElement | null = null
+              try {
+                newCustomMask = await fileToImage(file)
+              } catch (e: any) {
+                toast({
+                  variant: "destructive",
+                  description: e.message ? e.message : e.toString(),
+                })
+                return
+              }
+              if (
+                newCustomMask.naturalHeight !== imageHeight ||
+                newCustomMask.naturalWidth !== imageWidth
+              ) {
+                toast({
+                  variant: "destructive",
+                  description: `The size of the mask must same as image: ${imageWidth}x${imageHeight}`,
+                })
+                return
+              }
+
               setCustomFile(file)
-              if (!enableManualInpainting) {
-                emitter.emit(EVENT_CUSTOM_MASK, { mask: file })
+              if (!runMannually) {
+                runInpainting()
               }
             }}
           >
@@ -125,7 +141,6 @@ const Header = () => {
                 }}
                 onClick={() => {
                   if (customMask) {
-                    emitter.emit(EVENT_CUSTOM_MASK, { mask: customMask })
                   }
                 }}
               >
@@ -149,7 +164,7 @@ const Header = () => {
         {file && !model.need_prompt ? (
           <IconButton
             disabled={isInpainting}
-            tooltip="Rerun last mask"
+            tooltip="Rerun previous mask"
             onClick={handleRerunLastMask}
             onMouseEnter={onRerunMouseEnter}
             onMouseLeave={onRerunMouseLeave}
diff --git a/web_app/src/components/Settings.tsx b/web_app/src/components/Settings.tsx
index fb1d928..14d69b9 100644
--- a/web_app/src/components/Settings.tsx
+++ b/web_app/src/components/Settings.tsx
@@ -314,7 +314,7 @@ export function SettingsDialog() {
 
         <Separator />
 
-        <FormField
+        {/* <FormField
           control={form.control}
           name="enableUploadMask"
           render={({ field }) => (
@@ -334,7 +334,7 @@ export function SettingsDialog() {
             </FormItem>
           )}
         />
-        <Separator />
+        <Separator /> */}
       </div>
     )
   }
diff --git a/web_app/src/components/Shortcuts.tsx b/web_app/src/components/Shortcuts.tsx
index d88a1a3..85be539 100644
--- a/web_app/src/components/Shortcuts.tsx
+++ b/web_app/src/components/Shortcuts.tsx
@@ -74,7 +74,6 @@ export function Shortcuts() {
             />
             <ShortCut content="Cancel Drawing" keys={["Esc"]} />
 
-            <ShortCut content="Rerun last mask" keys={["R"]} />
             <ShortCut content="Undo" keys={[CmdOrCtrl(), "Z"]} />
             <ShortCut content="Redo" keys={[CmdOrCtrl(), "Shift", "Z"]} />
             <ShortCut content="Copy Result" keys={[CmdOrCtrl(), "C"]} />
diff --git a/web_app/src/components/SidePanel.tsx b/web_app/src/components/SidePanel.tsx
index 7d48989..e563540 100644
--- a/web_app/src/components/SidePanel.tsx
+++ b/web_app/src/components/SidePanel.tsx
@@ -1,4 +1,4 @@
-import { FormEvent } from "react"
+import { FormEvent, useState } from "react"
 import { useToggle } from "react-use"
 import { useStore } from "@/lib/states"
 import { Switch } from "./ui/switch"
@@ -17,17 +17,110 @@ import { SDSampler } from "@/lib/types"
 import { Separator } from "./ui/separator"
 import { ScrollArea } from "./ui/scroll-area"
 import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "./ui/sheet"
-import { ChevronLeft, ChevronRight, Upload } from "lucide-react"
+import {
+  ArrowDownFromLine,
+  ArrowLeftFromLine,
+  ArrowRightFromLine,
+  ArrowUpFromLine,
+  ChevronLeft,
+  ChevronRight,
+  HelpCircle,
+  LucideIcon,
+  Maximize,
+  Move,
+  MoveHorizontal,
+  MoveVertical,
+  Upload,
+} from "lucide-react"
 import { Button, ImageUploadButton } from "./ui/button"
 import useHotKey from "@/hooks/useHotkey"
 import { Slider } from "./ui/slider"
 import { useImage } from "@/hooks/useImage"
-import { INSTRUCT_PIX2PIX, PAINT_BY_EXAMPLE } from "@/lib/const"
+import {
+  EXTENDER_ALL,
+  EXTENDER_BUILTIN_ALL,
+  EXTENDER_BUILTIN_X_LEFT,
+  EXTENDER_BUILTIN_X_RIGHT,
+  EXTENDER_BUILTIN_Y_BOTTOM,
+  EXTENDER_BUILTIN_Y_TOP,
+  EXTENDER_X,
+  EXTENDER_Y,
+  INSTRUCT_PIX2PIX,
+  PAINT_BY_EXAMPLE,
+} from "@/lib/const"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 
 const RowContainer = ({ children }: { children: React.ReactNode }) => (
   <div className="flex justify-between items-center pr-2">{children}</div>
 )
 
+const ExtenderButton = ({
+  IconCls,
+  text,
+  onClick,
+}: {
+  IconCls: LucideIcon
+  text: string
+  onClick: () => void
+}) => {
+  const [showExtender] = useStore((state) => [state.settings.showExtender])
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="p-1"
+      disabled={!showExtender}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-1">
+        <IconCls size={15} strokeWidth={1} />
+        {text}
+      </div>
+    </Button>
+  )
+}
+
+const LabelTitle = ({
+  text,
+  toolTip,
+  url,
+  htmlFor,
+  disabled = false,
+}: {
+  text: string
+  toolTip?: string
+  url?: string
+  htmlFor?: string
+  disabled?: boolean
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Label
+          htmlFor={htmlFor ? htmlFor : text.toLowerCase().replace(" ", "-")}
+          className="font-medium"
+          disabled={disabled}
+        >
+          {text}
+        </Label>
+      </TooltipTrigger>
+      <TooltipContent className="flex flex-col max-w-xs text-sm" side="left">
+        <p>{toolTip}</p>
+        {url ? (
+          <Button variant="link" className="justify-end">
+            <a href={url} target="_blank">
+              More info
+            </a>
+          </Button>
+        ) : (
+          <></>
+        )}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
 const SidePanel = () => {
   const [
     settings,
@@ -38,6 +131,8 @@ const SidePanel = () => {
     showSidePanel,
     runInpainting,
     updateAppState,
+    updateExtenderByBuiltIn,
+    updateExtenderDirection,
   ] = useStore((state) => [
     state.settings,
     state.windowSize,
@@ -47,6 +142,8 @@ const SidePanel = () => {
     state.showSidePanel(),
     state.runInpainting,
     state.updateAppState,
+    state.updateExtenderByBuiltIn,
+    state.updateExtenderDirection,
   ])
   const [exampleImage, isExampleImageLoaded] = useImage(paintByExampleFile)
   const [open, toggleOpen] = useToggle(true)
@@ -75,7 +172,7 @@ const SidePanel = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-4">
           <div className="flex justify-between items-center pr-2">
-            <Label htmlFor="controlnet">Controlnet</Label>
+            <LabelTitle text="Controlnet" />
             <Switch
               id="controlnet"
               checked={settings.enableControlnet}
@@ -148,7 +245,11 @@ const SidePanel = () => {
     return (
       <>
         <RowContainer>
-          <Label htmlFor="lcm-lora">LCM Lora</Label>
+          <LabelTitle
+            text="LCM Lora"
+            url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inference_with_lcm_lora"
+            toolTip="Enable quality image generation in typically 2-4 steps. Suggest disabling guidance_scale by setting it to 0. You can also try values between 1.0 and 2.0. When LCM Lora is enabled, LCMSampler will be used automatically."
+          />
           <Switch
             id="lcm-lora"
             checked={settings.enableLCMLora}
@@ -170,7 +271,7 @@ const SidePanel = () => {
     return (
       <div className="flex flex-col gap-4">
         <div className="flex justify-between items-center pr-2">
-          <Label htmlFor="freeu">Freeu</Label>
+          <LabelTitle text="Freeu" />
           <Switch
             id="freeu"
             checked={settings.enableFreeu}
@@ -182,9 +283,11 @@ const SidePanel = () => {
         <div className="flex flex-col gap-4">
           <div className="flex justify-center gap-6">
             <div className="flex gap-2 items-center justify-center">
-              <Label htmlFor="freeu-s1" disabled={!settings.enableFreeu}>
-                s1
-              </Label>
+              <LabelTitle
+                htmlFor="freeu-s1"
+                text="s1"
+                disabled={!settings.enableFreeu}
+              />
               <NumberInput
                 id="freeu-s1"
                 className="w-14"
@@ -199,9 +302,11 @@ const SidePanel = () => {
               />
             </div>
             <div className="flex gap-2 items-center justify-center">
-              <Label htmlFor="freeu-s2" disabled={!settings.enableFreeu}>
-                s2
-              </Label>
+              <LabelTitle
+                htmlFor="freeu-s2"
+                text="s2"
+                disabled={!settings.enableFreeu}
+              />
               <NumberInput
                 id="freeu-s2"
                 className="w-14"
@@ -219,9 +324,11 @@ const SidePanel = () => {
 
           <div className="flex justify-center gap-6">
             <div className="flex gap-2 items-center justify-center">
-              <Label htmlFor="freeu-b1" disabled={!settings.enableFreeu}>
-                b1
-              </Label>
+              <LabelTitle
+                htmlFor="freeu-b1"
+                text="b1"
+                disabled={!settings.enableFreeu}
+              />
               <NumberInput
                 id="freeu-b1"
                 className="w-14"
@@ -236,9 +343,11 @@ const SidePanel = () => {
               />
             </div>
             <div className="flex gap-2 items-center justify-center">
-              <Label htmlFor="freeu-b2" disabled={!settings.enableFreeu}>
-                b2
-              </Label>
+              <LabelTitle
+                htmlFor="freeu-b2"
+                text="b2"
+                disabled={!settings.enableFreeu}
+              />
               <NumberInput
                 id="freeu-b2"
                 className="w-14"
@@ -266,7 +375,11 @@ const SidePanel = () => {
 
     return (
       <div className="flex flex-col gap-4">
-        <Label htmlFor="negative-prompt">Negative prompt</Label>
+        <LabelTitle
+          text="Negative prompt"
+          url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#negative-prompt"
+          toolTip="Negative prompt guides the model away from generating certain things in an image"
+        />
         <div className="pl-2 pr-4">
           <Textarea
             rows={4}
@@ -336,7 +449,10 @@ const SidePanel = () => {
     }
     return (
       <div className="flex flex-col gap-1">
-        <Label htmlFor="image-guidance-scale">Image guidance scale</Label>
+        <LabelTitle
+          htmlFor="image-guidance-scale"
+          text="Image guidance scale"
+        />
         <RowContainer>
           <Slider
             className="w-[180px]"
@@ -370,7 +486,11 @@ const SidePanel = () => {
 
     return (
       <div className="flex flex-col gap-1">
-        <Label htmlFor="strength">Strength</Label>
+        <LabelTitle
+          text="Strength"
+          url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#strength"
+          toolTip="Strength is a measure of how much noise is added to the base image, which influences how similar the output is to the base image. Higher value means more noise and more different from the base image"
+        />
         <RowContainer>
           <Slider
             className="w-[180px]"
@@ -397,22 +517,145 @@ const SidePanel = () => {
     )
   }
 
-  const renderExpender = () => {
+  const renderExtender = () => {
     return (
       <>
-        <RowContainer>
-          <Label htmlFor="Expender">Expender</Label>
-          <Switch
-            id="expender"
-            checked={settings.showExpender}
-            onCheckedChange={(value) => {
-              updateSettings({ showExpender: value })
-              if (value) {
-                updateSettings({ showCropper: false })
-              }
-            }}
-          />
-        </RowContainer>
+        <div className="flex flex-col gap-4">
+          <RowContainer>
+            <LabelTitle text="Extender" />
+            <Switch
+              id="extender"
+              checked={settings.showExtender}
+              onCheckedChange={(value) => {
+                updateSettings({ showExtender: value })
+                if (value) {
+                  updateSettings({ showCropper: false })
+                }
+              }}
+            />
+          </RowContainer>
+
+          <Tabs
+            defaultValue={settings.extenderDirection}
+            onValueChange={(value) => updateExtenderDirection(value)}
+            className="flex flex-col justify-center items-center"
+          >
+            <TabsList className="w-[140px] mb-2">
+              <TabsTrigger value={EXTENDER_X} disabled={!settings.showExtender}>
+                <MoveHorizontal size={20} strokeWidth={1} />
+              </TabsTrigger>
+              <TabsTrigger value={EXTENDER_Y} disabled={!settings.showExtender}>
+                <MoveVertical size={20} strokeWidth={1} />
+              </TabsTrigger>
+              <TabsTrigger
+                value={EXTENDER_ALL}
+                disabled={!settings.showExtender}
+              >
+                <Move size={20} strokeWidth={1} />
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value={EXTENDER_X}
+              className="flex gap-2 justify-center mt-0"
+            >
+              <ExtenderButton
+                IconCls={ArrowLeftFromLine}
+                text="1.5x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_X_LEFT, 1.5)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowLeftFromLine}
+                text="2.0x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_X_LEFT, 2.0)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowRightFromLine}
+                text="1.5x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_X_RIGHT, 1.5)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowRightFromLine}
+                text="2.0x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_X_RIGHT, 2.0)
+                }
+              />
+            </TabsContent>
+            <TabsContent
+              value={EXTENDER_Y}
+              className="flex gap-2 justify-center mt-0"
+            >
+              <ExtenderButton
+                IconCls={ArrowUpFromLine}
+                text="1.5x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_Y_TOP, 1.5)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowUpFromLine}
+                text="2.0x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_Y_TOP, 2.0)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowDownFromLine}
+                text="1.5x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_Y_BOTTOM, 1.5)
+                }
+              />
+              <ExtenderButton
+                IconCls={ArrowDownFromLine}
+                text="2.0x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_Y_BOTTOM, 2.0)
+                }
+              />
+            </TabsContent>
+            <TabsContent
+              value={EXTENDER_ALL}
+              className="flex gap-2 justify-center mt-0"
+            >
+              <ExtenderButton
+                IconCls={Maximize}
+                text="1.25x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_ALL, 1.25)
+                }
+              />
+              <ExtenderButton
+                IconCls={Maximize}
+                text="1.5x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_ALL, 1.5)
+                }
+              />
+              <ExtenderButton
+                IconCls={Maximize}
+                text="1.75x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_ALL, 1.75)
+                }
+              />
+              <ExtenderButton
+                IconCls={Maximize}
+                text="2.0x"
+                onClick={() =>
+                  updateExtenderByBuiltIn(EXTENDER_BUILTIN_ALL, 2.0)
+                }
+              />
+            </TabsContent>
+          </Tabs>
+        </div>
         <Separator />
       </>
     )
@@ -466,23 +709,23 @@ const SidePanel = () => {
         >
           <div className="flex flex-col gap-4 mt-4">
             <RowContainer>
-              <Label htmlFor="cropper">Cropper</Label>
+              <LabelTitle text="Cropper" />
               <Switch
                 id="cropper"
                 checked={settings.showCropper}
                 onCheckedChange={(value) => {
                   updateSettings({ showCropper: value })
                   if (value) {
-                    updateSettings({ showExpender: false })
+                    updateSettings({ showExtender: false })
                   }
                 }}
               />
             </RowContainer>
 
-            {renderExpender()}
+            {renderExtender()}
 
             <div className="flex flex-col gap-1">
-              <Label htmlFor="steps">Steps</Label>
+              <LabelTitle htmlFor="steps" text="Steps" />
               <RowContainer>
                 <Slider
                   className="w-[180px]"
@@ -506,12 +749,16 @@ const SidePanel = () => {
             </div>
 
             <div className="flex flex-col gap-1">
-              <Label htmlFor="guidance-scale">Guidance scale</Label>
+              <LabelTitle
+                text="Guidance scale"
+                url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#guidance-scale"
+                toolTip="Guidance scale affects how aligned the text prompt and generated image are. Higher value means the prompt and generated image are closely aligned, so the output is a stricter interpretation of the prompt"
+              />
               <RowContainer>
                 <Slider
                   className="w-[180px]"
                   defaultValue={[750]}
-                  min={100}
+                  min={0}
                   max={1500}
                   step={1}
                   value={[Math.floor(settings.sdGuidanceScale * 100)]}
@@ -535,7 +782,7 @@ const SidePanel = () => {
             {renderStrength()}
 
             <RowContainer>
-              <Label htmlFor="sampler">Sampler</Label>
+              <LabelTitle text="Sampler" />
               <Select
                 value={settings.sdSampler as string}
                 onValueChange={(value) => {
@@ -563,7 +810,11 @@ const SidePanel = () => {
 
             <RowContainer>
               {/* 每次会从服务器返回更新该值 */}
-              <Label htmlFor="seed">Seed</Label>
+              <LabelTitle
+                text="Seed"
+                toolTip="Using same parameters and a fixed seed can generate same result image."
+              />
+              {/* <Pin /> */}
               <div className="flex gap-2 justify-center items-center">
                 <Switch
                   id="seed"
@@ -594,7 +845,10 @@ const SidePanel = () => {
             {renderLCMLora()}
 
             <div className="flex flex-col gap-1">
-              <Label htmlFor="mask-blur">Mask blur</Label>
+              <LabelTitle
+                text="Mask blur"
+                toolTip="How much to blur the mask before processing, in pixels."
+              />
               <RowContainer>
                 <Slider
                   className="w-[180px]"
@@ -620,7 +874,11 @@ const SidePanel = () => {
             </div>
 
             <RowContainer>
-              <Label htmlFor="match-histograms">Match histograms</Label>
+              <LabelTitle
+                text="Match histograms"
+                toolTip="Match the inpainting result histogram to the source image histogram"
+                url="https://github.com/Sanster/lama-cleaner/pull/143#issuecomment-1325859307"
+              />
               <Switch
                 id="match-histograms"
                 checked={settings.sdMatchHistograms}
diff --git a/web_app/src/components/ui/button.tsx b/web_app/src/components/ui/button.tsx
index b95fcce..f93111c 100644
--- a/web_app/src/components/ui/button.tsx
+++ b/web_app/src/components/ui/button.tsx
@@ -4,12 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { Input } from "./input"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -72,27 +67,23 @@ export interface IconButtonProps extends ButtonProps {
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ tooltip, children, ...rest }, ref) => {
     return (
-      <>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                {...rest}
-                ref={ref}
-                tabIndex={-1}
-                className="cursor-default bg-background"
-              >
-                <div className="icon-button-icon-wrapper">{children}</div>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{tooltip}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            {...rest}
+            ref={ref}
+            tabIndex={-1}
+            className="cursor-default bg-background"
+          >
+            <div className="icon-button-icon-wrapper">{children}</div>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltip}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   }
 )
diff --git a/web_app/src/components/ui/label.tsx b/web_app/src/components/ui/label.tsx
index bf021cd..9dd1072 100644
--- a/web_app/src/components/ui/label.tsx
+++ b/web_app/src/components/ui/label.tsx
@@ -20,7 +20,12 @@ const Label = React.forwardRef<
 >(({ className, disabled, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className, disabled ? "opacity-50" : "")}
+    className={cn(
+      labelVariants(),
+      className,
+      disabled ? "opacity-50" : "",
+      "select-none"
+    )}
     {...props}
   />
 ))
diff --git a/web_app/src/components/ui/radio-group.tsx b/web_app/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..c939b06
--- /dev/null
+++ b/web_app/src/components/ui/radio-group.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import { CheckIcon } from "@radix-ui/react-icons"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/web_app/src/components/ui/tabs.tsx b/web_app/src/components/ui/tabs.tsx
index 85d83be..ddb6e43 100644
--- a/web_app/src/components/ui/tabs.tsx
+++ b/web_app/src/components/ui/tabs.tsx
@@ -15,6 +15,7 @@ const TabsList = React.forwardRef<
       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     )}
+    tabIndex={-1}
     {...props}
   />
 ))
@@ -30,6 +31,7 @@ const TabsTrigger = React.forwardRef<
       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     )}
+    tabIndex={-1}
     {...props}
   />
 ))
@@ -45,6 +47,7 @@ const TabsContent = React.forwardRef<
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
+    tabIndex={-1}
     {...props}
   />
 ))
diff --git a/web_app/src/lib/api.ts b/web_app/src/lib/api.ts
index 56e324d..3b09f41 100644
--- a/web_app/src/lib/api.ts
+++ b/web_app/src/lib/api.ts
@@ -1,6 +1,6 @@
 import { ModelInfo, Rect } from "@/lib/types"
 import { Settings } from "@/lib/states"
-import { dataURItoBlob, srcToFile } from "@/lib/utils"
+import { srcToFile } from "@/lib/utils"
 import axios from "axios"
 
 export const API_ENDPOINT = import.meta.env.VITE_BACKEND
@@ -15,6 +15,7 @@ export default async function inpaint(
   imageFile: File,
   settings: Settings,
   croperRect: Rect,
+  extenderState: Rect,
   mask: File | Blob,
   paintByExampleImage: File | null = null
 ) {
@@ -32,11 +33,18 @@ export default async function inpaint(
 
   fd.append("prompt", settings.prompt)
   fd.append("negativePrompt", settings.negativePrompt)
+
+  fd.append("useCroper", settings.showCropper ? "true" : "false")
   fd.append("croperX", croperRect.x.toString())
   fd.append("croperY", croperRect.y.toString())
   fd.append("croperHeight", croperRect.height.toString())
   fd.append("croperWidth", croperRect.width.toString())
-  fd.append("useCroper", settings.showCropper ? "true" : "false")
+
+  fd.append("useExtender", settings.showExtender ? "true" : "false")
+  fd.append("extenderX", extenderState.x.toString())
+  fd.append("extenderY", extenderState.y.toString())
+  fd.append("extenderHeight", extenderState.height.toString())
+  fd.append("extenderWidth", extenderState.width.toString())
 
   fd.append("sdMaskBlur", settings.sdMaskBlur.toString())
   fd.append("sdStrength", settings.sdStrength.toString())
@@ -82,7 +90,7 @@ export default async function inpaint(
     })
     if (res.ok) {
       const blob = await res.blob()
-      const newSeed = res.headers.get("x-seed")
+      const newSeed = res.headers.get("X-seed")
       return { blob: URL.createObjectURL(blob), seed: newSeed }
     }
     const errMsg = await res.text()
diff --git a/web_app/src/lib/const.ts b/web_app/src/lib/const.ts
index f109975..1a782ad 100644
--- a/web_app/src/lib/const.ts
+++ b/web_app/src/lib/const.ts
@@ -8,6 +8,15 @@ export const MODEL_TYPE_DIFFUSERS_SDXL_INPAINT = "diffusers_sdxl_inpaint"
 export const MODEL_TYPE_OTHER = "diffusers_other"
 export const BRUSH_COLOR = "#ffcc00bb"
 
+export const EXTENDER_X = "extender_x"
+export const EXTENDER_Y = "extender_y"
+export const EXTENDER_ALL = "extender_all"
+export const EXTENDER_BUILTIN_X_LEFT = "extender_builtin_x_left"
+export const EXTENDER_BUILTIN_X_RIGHT = "extender_builtin_x_right"
+export const EXTENDER_BUILTIN_Y_TOP = "extender_builtin_y_top"
+export const EXTENDER_BUILTIN_Y_BOTTOM = "extender_builtin_y_bottom"
+export const EXTENDER_BUILTIN_ALL = "extender_builtin_all"
+
 export const PAINT_BY_EXAMPLE = "Fantasy-Studio/Paint-by-Example"
 export const INSTRUCT_PIX2PIX = "timbrooks/instruct-pix2pix"
 export const KANDINSKY_2_2 = "kandinsky-community/kandinsky-2-2-decoder-inpaint"
diff --git a/web_app/src/lib/event.ts b/web_app/src/lib/event.ts
deleted file mode 100644
index b1200f6..0000000
--- a/web_app/src/lib/event.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import mitt from "mitt"
-
-export const EVENT_PROMPT = "prompt"
-
-export const EVENT_CUSTOM_MASK = "custom_mask"
-export interface CustomMaskEventData {
-  mask: File
-}
-
-export const EVENT_PAINT_BY_EXAMPLE = "paint_by_example"
-export interface PaintByExampleEventData {
-  image: File
-}
-
-export const RERUN_LAST_MASK = "rerun_last_mask"
-
-export const DREAM_BUTTON_MOUSE_ENTER = "dream_button_mouse_enter"
-export const DREAM_BUTTON_MOUSE_LEAVE = "dream_btoon_mouse_leave"
-
-const emitter = mitt()
-
-export default emitter
diff --git a/web_app/src/lib/states.ts b/web_app/src/lib/states.ts
index a1c09c1..53c3203 100644
--- a/web_app/src/lib/states.ts
+++ b/web_app/src/lib/states.ts
@@ -21,6 +21,14 @@ import {
   BRUSH_COLOR,
   DEFAULT_BRUSH_SIZE,
   DEFAULT_NEGATIVE_PROMPT,
+  EXTENDER_ALL,
+  EXTENDER_BUILTIN_ALL,
+  EXTENDER_BUILTIN_X_LEFT,
+  EXTENDER_BUILTIN_X_RIGHT,
+  EXTENDER_BUILTIN_Y_BOTTOM,
+  EXTENDER_BUILTIN_Y_TOP,
+  EXTENDER_X,
+  EXTENDER_Y,
   MODEL_TYPE_INPAINT,
   PAINT_BY_EXAMPLE,
 } from "./const"
@@ -56,7 +64,8 @@ export type Settings = {
   enableManualInpainting: boolean
   enableUploadMask: boolean
   showCropper: boolean
-  showExpender: boolean
+  showExtender: boolean
+  extenderDirection: string
 
   // For LDM
   ldmSteps: number
@@ -168,6 +177,9 @@ type AppAction = {
   setExtenderY: (newValue: number) => void
   setExtenderWidth: (newValue: number) => void
   setExtenderHeight: (newValue: number) => void
+  updateExtenderDirection: (newValue: string) => void
+  resetExtender: (width: number, height: number) => void
+  updateExtenderByBuiltIn: (direction: string, scale: number) => void
 
   setServerConfig: (newValue: ServerConfig) => void
   setSeed: (newValue: number) => void
@@ -281,7 +293,8 @@ const defaultValues: AppState = {
     },
     enableControlnet: false,
     showCropper: false,
-    showExpender: false,
+    showExtender: false,
+    extenderDirection: EXTENDER_ALL,
     enableDownloadMask: false,
     enableManualInpainting: false,
     enableUploadMask: false,
@@ -362,7 +375,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
         }
         return targetFile
       },
-
+      // todo: 传入 custom mask，单独逻辑
       runInpainting: async () => {
         const {
           isInpainting,
@@ -372,6 +385,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           imageHeight,
           settings,
           cropperState,
+          extenderState,
         } = get()
         if (isInpainting) {
           return
@@ -398,7 +412,11 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
         // 2. 结果替换当前 render
         let maskLineGroup: LineGroup = []
         if (useLastLineGroup === true) {
-          if (lastLineGroup.length === 0 && maskImage === null) {
+          if (
+            lastLineGroup.length === 0 &&
+            maskImage === null &&
+            !settings.showExtender
+          ) {
             toast({
               variant: "destructive",
               description: "Please draw mask on picture",
@@ -407,7 +425,11 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           }
           maskLineGroup = lastLineGroup
         } else {
-          if (curLineGroup.length === 0 && maskImage === null) {
+          if (
+            curLineGroup.length === 0 &&
+            maskImage === null &&
+            !settings.showExtender
+          ) {
             toast({
               variant: "destructive",
               description: "Please draw mask on picture",
@@ -455,6 +477,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
             targetFile,
             settings,
             cropperState,
+            extenderState,
             dataURItoBlob(maskCanvas.toDataURL()),
             paintByExampleFile
           )
@@ -465,7 +488,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
 
           const { blob, seed } = res
           if (seed) {
-            set((state) => (state.settings.seed = parseInt(seed, 10)))
+            get().setSeed(parseInt(seed, 10))
           }
           const newRender = new Image()
           await loadImage(newRender, blob)
@@ -794,7 +817,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           state.isPluginRunning = newValue
         }),
 
-      setFile: (file: File) =>
+      setFile: (file: File) => {
         set((state) => {
           state.file = file
           state.interactiveSegState = castDraft(
@@ -802,7 +825,8 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           )
           state.editorState = castDraft(defaultValues.editorState)
           state.cropperState = defaultValues.cropperState
-        }),
+        })
+      },
 
       setCustomFile: (file: File) =>
         set((state) => {
@@ -822,6 +846,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           state.editorState.brushSizeScale =
             Math.max(Math.min(width, height), 512) / 512
         })
+        get().resetExtender(width, height)
       },
 
       setCropperX: (newValue: number) =>
@@ -864,6 +889,68 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
           state.extenderState.height = newValue
         }),
 
+      updateExtenderDirection: (newValue: string) => {
+        console.log(
+          `updateExtenderDirection: ${JSON.stringify(get().extenderState)}`
+        )
+        set((state) => {
+          state.settings.extenderDirection = newValue
+          state.extenderState.x = 0
+          state.extenderState.y = 0
+          state.extenderState.width = state.imageWidth
+          state.extenderState.height = state.imageHeight
+        })
+      },
+
+      updateExtenderByBuiltIn: (direction: string, scale: number) => {
+        const newExtenderState = { ...defaultValues.extenderState }
+        let { x, y, width, height } = newExtenderState
+        const { imageWidth, imageHeight } = get()
+        width = imageWidth
+        height = imageHeight
+
+        switch (direction) {
+          case EXTENDER_BUILTIN_X_LEFT:
+            x = -Math.ceil(imageWidth * (scale - 1))
+            width = Math.ceil(imageWidth * scale)
+            break
+          case EXTENDER_BUILTIN_X_RIGHT:
+            width = Math.ceil(imageWidth * scale)
+            break
+          case EXTENDER_BUILTIN_Y_TOP:
+            y = -Math.ceil(imageHeight * (scale - 1))
+            height = Math.ceil(imageHeight * scale)
+            break
+          case EXTENDER_BUILTIN_Y_BOTTOM:
+            height = Math.ceil(imageHeight * scale)
+            break
+          case EXTENDER_BUILTIN_ALL:
+            x = -Math.ceil((imageWidth * (scale - 1)) / 2)
+            y = -Math.ceil((imageHeight * (scale - 1)) / 2)
+            width = Math.ceil(imageWidth * scale)
+            height = Math.ceil(imageHeight * scale)
+            break
+          default:
+            break
+        }
+
+        set((state) => {
+          state.extenderState.x = x
+          state.extenderState.y = y
+          state.extenderState.width = width
+          state.extenderState.height = height
+        })
+      },
+
+      resetExtender: (width: number, height: number) => {
+        set((state) => {
+          state.extenderState.x = 0
+          state.extenderState.y = 0
+          state.extenderState.width = width
+          state.extenderState.height = height
+        })
+      },
+
       setSeed: (newValue: number) =>
         set((state) => {
           state.settings.seed = newValue
@@ -871,7 +958,7 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
     })),
     {
       name: "ZUSTAND_STATE", // name of the item in the storage (must be unique)
-      version: 1,
+      version: 0,
       partialize: (state) =>
         Object.fromEntries(
           Object.entries(state).filter(([key]) =>
diff --git a/web_app/src/lib/types.ts b/web_app/src/lib/types.ts
index ad3370d..e043676 100644
--- a/web_app/src/lib/types.ts
+++ b/web_app/src/lib/types.ts
@@ -67,7 +67,7 @@ export enum SDSampler {
   kEulerA = "k_euler_a",
   dpmPlusPlus = "dpm++",
   uni_pc = "uni_pc",
-  lcm = "lcm",
+  // lcm = "lcm",
 }
 
 export interface FreeuConfig {
diff --git a/web_app/src/lib/utils.ts b/web_app/src/lib/utils.ts
index ffc52df..4c3e1fb 100644
--- a/web_app/src/lib/utils.ts
+++ b/web_app/src/lib/utils.ts
@@ -71,6 +71,26 @@ export function canvasToImage(
   })
 }
 
+export function fileToImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      const image = new Image()
+      image.onload = () => {
+        resolve(image)
+      }
+      image.onerror = () => {
+        reject("无法加载图像。")
+      }
+      image.src = reader.result as string
+    }
+    reader.onerror = () => {
+      reject("无法读取文件。")
+    }
+    reader.readAsDataURL(file)
+  })
+}
+
 export function srcToFile(src: string, fileName: string, mimeType: string) {
   return fetch(src)
     .then(function (res) {
diff --git a/web_app/src/main.tsx b/web_app/src/main.tsx
index 5617f22..fce2cfe 100644
--- a/web_app/src/main.tsx
+++ b/web_app/src/main.tsx
@@ -5,6 +5,7 @@ import "inter-ui/inter.css"
 import App from "./App.tsx"
 import "./globals.css"
 import { ThemeProvider } from "next-themes"
+import { TooltipProvider } from "./components/ui/tooltip.tsx"
 
 const queryClient = new QueryClient()
 
@@ -12,7 +13,9 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider defaultTheme="dark" disableTransitionOnChange>
-        <App />
+        <TooltipProvider>
+          <App />
+        </TooltipProvider>
       </ThemeProvider>
     </QueryClientProvider>
   </React.StrictMode>