update plugins

2024-01-02 11:07:35 +08:00
parent b0e009f879
commit a2fd5bb3ea
19 changed files with 337 additions and 227 deletions
--- a/web_app/src/components/Editor.tsx
+++ b/web_app/src/components/Editor.tsx
@@ -363,9 +363,6 @@ export default function Editor(props: EditorProps) {
        undefined,
        newClicks
      )
-      if (!res) {
-        throw new Error("Something went wrong on server side.")
-      }
      const { blob } = res
      const img = new Image()
      img.onload = () => {
--- a/web_app/src/components/FileManager.tsx
+++ b/web_app/src/components/FileManager.tsx
@@ -78,6 +78,7 @@ export default function FileManager(props: Props) {
  const ref = useRef(null)
  const debouncedSearchText = useDebounce(fileManagerState.searchText, 300)
  const [tab, setTab] = useState(IMAGE_TAB)
+  const [filenames, setFilenames] = useState<Filename[]>([])
  const [photos, setPhotos] = useState<Photo[]>([])
  const [photoIndex, setPhotoIndex] = useState(0)

@@ -131,13 +132,28 @@ export default function FileManager(props: Props) {
    [open, closeScrollTop]
  )

+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const filenames = await getMedias(tab)
+        setFilenames(filenames)
+      } catch (e: any) {
+        toast({
+          variant: "destructive",
+          title: "Uh oh! Something went wrong.",
+          description: e.message ? e.message : e.toString(),
+        })
+      }
+    }
+    fetchData()
+  }, [tab])
+
  useEffect(() => {
    if (!open) {
      return
    }
    const fetchData = async () => {
      try {
-        const filenames = await getMedias(tab)
        let filteredFilenames = filenames
        if (debouncedSearchText) {
          const fuse = new Fuse(filteredFilenames, {
@@ -173,7 +189,7 @@ export default function FileManager(props: Props) {
      }
    }
    fetchData()
-  }, [tab, debouncedSearchText, fileManagerState, photoWidth, open])
+  }, [filenames, debouncedSearchText, fileManagerState, photoWidth, open])

  const onScroll = (event: SyntheticEvent) => {
    setScrollTop(event.currentTarget.scrollTop)
--- a/web_app/src/components/Settings.tsx
+++ b/web_app/src/components/Settings.tsx
@@ -99,7 +99,7 @@ export function SettingsDialog() {
    },
  })

-  function onSubmit(values: z.infer<typeof formSchema>) {
+  async function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values. ✅ This will be type-safe and validated.
    updateSettings({
      enableDownloadMask: values.enableDownloadMask,
@@ -116,24 +116,22 @@ export function SettingsDialog() {
    if (model.name !== settings.model.name) {
      toggleOpenModelSwitching()
      updateAppState({ disableShortCuts: true })
-      switchModel(model.name)
-        .then((res) => {
-          toast({
-            title: `Switch to ${model.name} success`,
-          })
-          setAppModel(model)
+      try {
+        const newModel = await switchModel(model.name)
+        toast({
+          title: `Switch to ${newModel.name} success`,
        })
-        .catch((error: any) => {
-          toast({
-            variant: "destructive",
-            title: `Switch to ${model.name} failed: ${error}`,
-          })
-          setModel(settings.model)
-        })
-        .finally(() => {
-          toggleOpenModelSwitching()
-          updateAppState({ disableShortCuts: false })
+        setAppModel(model)
+      } catch (error: any) {
+        toast({
+          variant: "destructive",
+          title: `Switch to ${model.name} failed: ${error}`,
        })
+        setModel(settings.model)
+      } finally {
+        toggleOpenModelSwitching()
+        updateAppState({ disableShortCuts: false })
+      }
    }
  }

--- a/web_app/src/components/SidePanel/DiffusionOptions.tsx
+++ b/web_app/src/components/SidePanel/DiffusionOptions.tsx
@@ -69,6 +69,27 @@ const DiffusionOptions = () => {
    }
  }

+  const renderCropper = () => {
+    return (
+      <RowContainer>
+        <LabelTitle
+          text="Cropper"
+          toolTip="Inpainting on part of image, improve inference speed and reduce memory usage."
+        />
+        <Switch
+          id="cropper"
+          checked={settings.showCropper}
+          onCheckedChange={(value) => {
+            updateSettings({ showCropper: value })
+            if (value) {
+              updateSettings({ showExtender: false })
+            }
+          }}
+        />
+      </RowContainer>
+    )
+  }
+
  const renderConterNetSetting = () => {
    if (!settings.model.support_controlnet) {
      return null
@@ -558,28 +579,8 @@ const DiffusionOptions = () => {
    )
  }

-  return (
-    <div className="flex flex-col gap-4 mt-4">
-      <RowContainer>
-        <LabelTitle
-          text="Cropper"
-          toolTip="Inpainting on part of image, improve inference speed and reduce memory usage."
-        />
-        <Switch
-          id="cropper"
-          checked={settings.showCropper}
-          onCheckedChange={(value) => {
-            updateSettings({ showCropper: value })
-            if (value) {
-              updateSettings({ showExtender: false })
-            }
-          }}
-        />
-      </RowContainer>
-
-      {renderExtender()}
-      {renderPowerPaintTaskType()}
-
+  const renderSteps = () => {
+    return (
      <div className="flex flex-col gap-1">
        <LabelTitle
          htmlFor="steps"
@@ -607,7 +608,11 @@ const DiffusionOptions = () => {
          />
        </RowContainer>
      </div>
+    )
+  }

+  const renderGuidanceScale = () => {
+    return (
      <div className="flex flex-col gap-1">
        <LabelTitle
          text="Guidance scale"
@@ -637,10 +642,11 @@ const DiffusionOptions = () => {
          />
        </RowContainer>
      </div>
+    )
+  }

-      {renderP2PImageGuidanceScale()}
-      {renderStrength()}
-
+  const renderSampler = () => {
+    return (
      <RowContainer>
        <LabelTitle text="Sampler" />
        <Select
@@ -664,7 +670,11 @@ const DiffusionOptions = () => {
          </SelectContent>
        </Select>
      </RowContainer>
+    )
+  }

+  const renderSeed = () => {
+    return (
      <RowContainer>
        {/* 每次会从服务器返回更新该值 */}
        <LabelTitle
@@ -692,15 +702,11 @@ const DiffusionOptions = () => {
          />
        </div>
      </RowContainer>
+    )
+  }

-      {renderNegativePrompt()}
-
-      <Separator />
-
-      {renderConterNetSetting()}
-      {renderFreeu()}
-      {renderLCMLora()}
-
+  const renderMaskBlur = () => {
+    return (
      <div className="flex flex-col gap-1">
        <LabelTitle
          text="Mask blur"
@@ -727,24 +733,49 @@ const DiffusionOptions = () => {
          />
        </RowContainer>
      </div>
+    )
+  }

-      <RowContainer>
-        <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}
-          onCheckedChange={(value) => {
-            updateSettings({ sdMatchHistograms: value })
-          }}
-        />
-      </RowContainer>
+  const renderMatchHistograms = () => {
+    return (
+      <>
+        <RowContainer>
+          <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}
+            onCheckedChange={(value) => {
+              updateSettings({ sdMatchHistograms: value })
+            }}
+          />
+        </RowContainer>
+        <Separator />
+      </>
+    )
+  }

+  return (
+    <div className="flex flex-col gap-4 mt-4">
+      {renderCropper()}
+      {renderExtender()}
+      {renderPowerPaintTaskType()}
+      {renderSteps()}
+      {renderGuidanceScale()}
+      {renderP2PImageGuidanceScale()}
+      {renderStrength()}
+      {renderSampler()}
+      {renderSeed()}
+      {renderNegativePrompt()}
      <Separator />
-
+      {renderConterNetSetting()}
+      {renderLCMLora()}
+      {renderMaskBlur()}
+      {renderMatchHistograms()}
+      {renderFreeu()}
      {renderPaintByExample()}
    </div>
  )
--- a/web_app/src/components/Workspace.tsx
+++ b/web_app/src/components/Workspace.tsx
@@ -14,11 +14,11 @@ const Workspace = () => {
  ])

  useEffect(() => {
-    currentModel()
-      .then((res) => res.json())
-      .then((model) => {
-        updateSettings({ model })
-      })
+    const fetchCurrentModel = async () => {
+      const model = await currentModel()
+      updateSettings({ model })
+    }
+    fetchCurrentModel()
  }, [])

  return (