lots of updates

lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { appState, croperState, settingState } from '../../store/Atoms'
+import Slider from '../Editor/Slider'
+import SettingBlock from '../Settings/SettingBlock'
+
+const ImageResizeScale = () => {
+  const [setting, setSettingState] = useRecoilState(settingState)
+  const app = useRecoilValue(appState)
+  const croper = useRecoilValue(croperState)
+
+  const handleSliderChange = (value: number) => {
+    setSettingState(old => {
+      return { ...old, sdScale: value }
+    })
+  }
+
+  const scaledWidth = () => {
+    let width = app.imageWidth
+    if (setting.showCroper) {
+      width = croper.width
+    }
+    return Math.round((width * setting.sdScale) / 100)
+  }
+
+  const scaledHeight = () => {
+    let height = app.imageHeight
+    if (setting.showCroper) {
+      height = croper.height
+    }
+    return Math.round((height * setting.sdScale) / 100)
+  }
+
+  return (
+    <SettingBlock
+      className="sub-setting-block"
+      title="Resize"
+      titleSuffix={
+        <div
+          style={{ width: 86 }}
+        >{`(${scaledWidth()}x${scaledHeight()})`}</div>
+      }
+      desc="Resize the image before inpainting, the area outside the mask will not lose quality."
+      input={
+        <Slider
+          label=""
+          width={70}
+          min={50}
+          max={100}
+          value={setting.sdScale}
+          onChange={handleSliderChange}
+        />
+      }
+    />
+  )
+}
+
+export default ImageResizeScale

lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx

@@ -14,6 +14,7 @@ import { Switch, SwitchThumb } from '../shared/Switch'
 import Button from '../shared/Button'
 import emitter, { EVENT_PAINT_BY_EXAMPLE } from '../../event'
 import { useImage } from '../../utils'
+import ImageResizeScale from './ImageResizeScale'
 
 const INPUT_WIDTH = 30
 
@@ -68,22 +69,6 @@ const PESidePanel = () => {
         </PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content className="side-panel-content">
-            <SettingBlock
-              title="Croper"
-              input={
-                <Switch
-                  checked={setting.showCroper}
-                  onCheckedChange={value => {
-                    setSettingState(old => {
-                      return { ...old, showCroper: value }
-                    })
-                  }}
-                >
-                  <SwitchThumb />
-                </Switch>
-              }
-            />
-
             <NumberInputSetting
               title="Steps"
               width={INPUT_WIDTH}
@@ -97,6 +82,8 @@ const PESidePanel = () => {
               }}
             />
 
+            <ImageResizeScale />
+
             <NumberInputSetting
               title="Guidance Scale"
               width={INPUT_WIDTH}

lama_cleaner/app/src/components/SidePanel/SidePanel.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useState } from 'react'
+import React, { FormEvent } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { useToggle } from 'react-use'
@@ -15,6 +15,7 @@ import Selector from '../shared/Selector'
 import { Switch, SwitchThumb } from '../shared/Switch'
 import TextAreaInput from '../shared/Textarea'
 import emitter, { EVENT_PROMPT } from '../../event'
+import ImageResizeScale from './ImageResizeScale'
 
 const INPUT_WIDTH = 30
 
@@ -71,6 +72,9 @@ const SidePanel = () => {
                 </Switch>
               }
             />
+
+            <ImageResizeScale />
+
             {/* 
             <NumberInputSetting
               title="Num Samples"
@@ -98,21 +102,6 @@ const SidePanel = () => {
               }}
             />
 
-            {/* <NumberInputSetting
-              title="Strength"
-              width={INPUT_WIDTH}
-              allowFloat
-              value={`${setting.sdStrength}`}
-              desc="TODO"
-              onValue={value => {
-                const val = value.length === 0 ? 0 : parseFloat(value)
-                console.log(val)
-                setSettingState(old => {
-                  return { ...old, sdStrength: val }
-                })
-              }}
-            /> */}
-
             <NumberInputSetting
               title="Guidance Scale"
               width={INPUT_WIDTH}