update

2023-12-24 15:32:27 +08:00
parent 0e5e16ba20
commit 371db2d771
31 changed files with 441 additions and 439 deletions
--- a/web_app/src/components/Cropper.tsx
+++ b/web_app/src/components/Cropper.tsx
@@ -71,6 +71,8 @@ const Cropper = (props: Props) => {
    setY,
    setWidth,
    setHeight,
+    isResizing,
+    setIsResizing,
  ] = useStore((state) => [
    state.imageWidth,
    state.imageHeight,
@@ -80,9 +82,11 @@ const Cropper = (props: Props) => {
    state.setCropperY,
    state.setCropperWidth,
    state.setCropperHeight,
+    state.isCropperExtenderResizing,
+    state.setIsCropperExtenderResizing,
  ])

-  const [isResizing, setIsResizing] = useState(false)
+  // const [isResizing, setIsResizing] = useState(false)
  const [isMoving, setIsMoving] = useState(false)

  useEffect(() => {
--- a/web_app/src/components/Editor.tsx
+++ b/web_app/src/components/Editor.tsx
@@ -65,6 +65,7 @@ export default function Editor(props: EditorProps) {
    updateAppState,
    runMannually,
    runInpainting,
+    isCropperExtenderResizing,
  ] = useStore((state) => [
    state.disableShortCuts,
    state.windowSize,
@@ -87,6 +88,7 @@ export default function Editor(props: EditorProps) {
    state.updateAppState,
    state.runMannually(),
    state.runInpainting,
+    state.isCropperExtenderResizing,
  ])
  const baseBrushSize = useStore((state) => state.editorState.baseBrushSize)
  const brushSize = useStore((state) => state.getBrushSize())
@@ -537,7 +539,7 @@ export default function Editor(props: EditorProps) {
  }

  const toggleShowBrush = (newState: boolean) => {
-    if (newState !== showBrush && !isPanning) {
+    if (newState !== showBrush && !isPanning && !isCropperExtenderResizing) {
      setShowBrush(newState)
    }
  }
@@ -693,7 +695,7 @@ export default function Editor(props: EditorProps) {
        limitToBounds={false}
        doubleClick={{ disabled: true }}
        initialScale={minScale}
-        minScale={minScale * 0.6}
+        minScale={minScale * 0.3}
        onPanning={(ref) => {
          if (!panned) {
            setPanned(true)
--- a/web_app/src/components/Extender.tsx
+++ b/web_app/src/components/Extender.tsx
@@ -54,6 +54,8 @@ const Extender = (props: Props) => {
    setWidth,
    setHeight,
    extenderDirection,
+    isResizing,
+    setIsResizing,
  ] = useStore((state) => [
    state.isInpainting,
    state.imageHeight,
@@ -64,10 +66,10 @@ const Extender = (props: Props) => {
    state.setExtenderWidth,
    state.setExtenderHeight,
    state.settings.extenderDirection,
+    state.isCropperExtenderResizing,
+    state.setIsCropperExtenderResizing,
  ])

-  const [isResizing, setIsResizing] = useState(false)
-
  const [evData, setEVData] = useState<EVData>({
    initX: 0,
    initY: 0,
@@ -122,10 +124,9 @@ const Extender = (props: Props) => {
    const moveBottom = () => {
      const newHeight = evData.initHeight + offsetY
      let [clampedY, clampedHeight] = clampTopBottom(evData.initY, newHeight)
-
      if (extenderDirection === EXTENDER_ALL) {
-        if (clampedY + clampedHeight < imageHeight) {
-          clampedHeight = imageHeight
+        if (clampedHeight < Math.abs(clampedY) + imageHeight) {
+          clampedHeight = Math.abs(clampedY) + imageHeight
        }
      }
      setHeight(clampedHeight)
@@ -155,8 +156,8 @@ const Extender = (props: Props) => {
      const newWidth = evData.initWidth + offsetX
      let [clampedX, clampedWidth] = clampLeftRight(evData.initX, newWidth)
      if (extenderDirection === EXTENDER_ALL) {
-        if (clampedX + clampedWidth < imageWdith) {
-          clampedWidth = imageWdith
+        if (clampedWidth < Math.abs(clampedX) + imageWdith) {
+          clampedWidth = Math.abs(clampedX) + imageWdith
        }
      }
      setWidth(clampedWidth)
--- a/web_app/src/components/SidePanel.tsx
+++ b/web_app/src/components/SidePanel.tsx
@@ -105,18 +105,22 @@ const LabelTitle = ({
          {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 ? (
+        <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>
  )
 }
@@ -172,7 +176,11 @@ 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">
-            <LabelTitle text="Controlnet" />
+            <LabelTitle
+              text="ControlNet"
+              toolTip="Using an additional conditioning image to control how an image is generated"
+              url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/inpaint#controlnet"
+            />
            <Switch
              id="controlnet"
              checked={settings.enableControlnet}
@@ -271,7 +279,11 @@ const SidePanel = () => {
    return (
      <div className="flex flex-col gap-4">
        <div className="flex justify-between items-center pr-2">
-          <LabelTitle text="Freeu" />
+          <LabelTitle
+            text="FreeU"
+            toolTip="FreeU is a technique for improving image quality. Different models may require different FreeU-specific hyperparameters, which can be viewed in the more info section."
+            url="https://huggingface.co/docs/diffusers/main/en/using-diffusers/freeu"
+          />
          <Switch
            id="freeu"
            checked={settings.enableFreeu}
@@ -408,7 +420,10 @@ const SidePanel = () => {
    return (
      <div>
        <RowContainer>
-          <div>Example Image</div>
+          <LabelTitle
+            text="Example Image"
+            toolTip="An example image to guide image generation."
+          />
          <ImageUploadButton
            tooltip="Upload example image"
            onFileUpload={(file) => {
@@ -450,8 +465,9 @@ const SidePanel = () => {
    return (
      <div className="flex flex-col gap-1">
        <LabelTitle
-          htmlFor="image-guidance-scale"
          text="Image guidance scale"
+          toolTip="Push the generated image towards the inital image. Higher image guidance scale encourages generated images that are closely linked to the source image, usually at the expense of lower image quality."
+          url="https://huggingface.co/docs/diffusers/main/en/api/pipelines/pix2pix"
        />
        <RowContainer>
          <Slider
@@ -518,11 +534,17 @@ const SidePanel = () => {
  }

  const renderExtender = () => {
+    if (!settings.model.support_outpainting) {
+      return null
+    }
    return (
      <>
        <div className="flex flex-col gap-4">
          <RowContainer>
-            <LabelTitle text="Extender" />
+            <LabelTitle
+              text="Extender"
+              toolTip="Perform outpainting on images to expand it's content."
+            />
            <Switch
              id="extender"
              checked={settings.showExtender}
@@ -709,7 +731,10 @@ const SidePanel = () => {
        >
          <div className="flex flex-col gap-4 mt-4">
            <RowContainer>
-              <LabelTitle text="Cropper" />
+              <LabelTitle
+                text="Cropper"
+                toolTip="Inpainting on part of image, improve inference speed and reduce memory usage."
+              />
              <Switch
                id="cropper"
                checked={settings.showCropper}
@@ -725,7 +750,11 @@ const SidePanel = () => {
            {renderExtender()}

            <div className="flex flex-col gap-1">
-              <LabelTitle htmlFor="steps" text="Steps" />
+              <LabelTitle
+                htmlFor="steps"
+                text="Steps"
+                toolTip="The number of denoising steps. More denoising steps usually lead to a higher quality image at the expense of slower inference."
+              />
              <RowContainer>
                <Slider
                  className="w-[180px]"
--- a/web_app/src/lib/states.ts
+++ b/web_app/src/lib/states.ts
@@ -150,8 +150,11 @@ type AppState = {

  interactiveSegState: InteractiveSegState
  fileManagerState: FileManagerState
+
  cropperState: CropperState
  extenderState: CropperState
+  isCropperExtenderResizing: bool
+
  serverConfig: ServerConfig

  settings: Settings
@@ -177,6 +180,7 @@ type AppAction = {
  setExtenderY: (newValue: number) => void
  setExtenderWidth: (newValue: number) => void
  setExtenderHeight: (newValue: number) => void
+  setIsCropperExtenderResizing: (newValue: boolean) => void
  updateExtenderDirection: (newValue: string) => void
  resetExtender: (width: number, height: number) => void
  updateExtenderByBuiltIn: (direction: string, scale: number) => void
@@ -261,6 +265,7 @@ const defaultValues: AppState = {
    width: 512,
    height: 512,
  },
+  isCropperExtenderResizing: false,

  fileManagerState: {
    sortBy: SortBy.CTIME,
@@ -889,6 +894,11 @@ export const useStore = createWithEqualityFn<AppState & AppAction>()(
          state.extenderState.height = newValue
        }),

+      setIsCropperExtenderResizing: (newValue: boolean) =>
+        set((state) => {
+          state.isCropperExtenderResizing = newValue
+        }),
+
      updateExtenderDirection: (newValue: string) => {
        console.log(
          `updateExtenderDirection: ${JSON.stringify(get().extenderState)}`