+
+
diff --git a/lama_cleaner/app/src/components/Settings/HDSettingBlock.scss b/lama_cleaner/app/src/components/Settings/HDSettingBlock.scss
new file mode 100644
index 0000000..06b426c
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.scss
@@ -0,0 +1,7 @@
+.hd-setting-block {
+ .inline-tip {
+ display: inline;
+ cursor: pointer;
+ color: var(--text-color);
+ }
+}
diff --git a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
new file mode 100644
index 0000000..c4ce001
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx
@@ -0,0 +1,132 @@
+import React, { ReactNode } from 'react'
+import { useRecoilState } from 'recoil'
+import { settingState } from '../../store/Atoms'
+import Selector from '../shared/Selector'
+import NumberInputSetting from './NumberInputSetting'
+import SettingBlock from './SettingBlock'
+
+export enum HDStrategy {
+ ORIGINAL = 'Original',
+ RESIZE = 'Resize',
+ CROP = 'Crop',
+}
+
+function HDSettingBlock() {
+ const [setting, setSettingState] = useRecoilState(settingState)
+
+ const onStrategyChange = (value: HDStrategy) => {
+ setSettingState(old => {
+ return { ...old, hdStrategy: value }
+ })
+ }
+
+ const onResizeLimitChange = (value: string) => {
+ const val = value.length === 0 ? 0 : parseInt(value, 10)
+ setSettingState(old => {
+ return { ...old, hdStrategyResizeLimit: val }
+ })
+ }
+
+ const onCropTriggerSizeChange = (value: string) => {
+ const val = value.length === 0 ? 0 : parseInt(value, 10)
+ setSettingState(old => {
+ return { ...old, hdStrategyCropTrigerSize: val }
+ })
+ }
+
+ const onCropMarginChange = (value: string) => {
+ const val = value.length === 0 ? 0 : parseInt(value, 10)
+ setSettingState(old => {
+ return { ...old, hdStrategyCropMargin: val }
+ })
+ }
+
+ const renderOriginalOptionDesc = () => {
+ return (
+
+ Use the original resolution of the picture, suitable for picture size
+ below 2K. Try{' '}
+
onStrategyChange(HDStrategy.RESIZE)}
+ >
+ Resize Strategy
+
{' '}
+ if you do not get good results on high resolution images.
+
+ )
+ }
+
+ const renderResizeOptionDesc = () => {
+ return (
+
+
+ Resize the longer side of the image to a specific size(keep ratio),
+ then do inpainting on the resized image.
+
+
+
+ )
+ }
+
+ const renderCropOptionDesc = () => {
+ return (
+
+
+ Crop masking area from the original image to do inpainting, and paste
+ the result back. Mainly for performance and memory reasons on high
+ resolution image.
+
+
+
+
+ )
+ }
+
+ const renderHDStrategyOptionDesc = (): ReactNode => {
+ switch (setting.hdStrategy) {
+ case HDStrategy.ORIGINAL:
+ return renderOriginalOptionDesc()
+ case HDStrategy.CROP:
+ return renderCropOptionDesc()
+ case HDStrategy.RESIZE:
+ return renderResizeOptionDesc()
+ default:
+ return renderOriginalOptionDesc()
+ }
+ }
+
+ return (
+
onStrategyChange(val as HDStrategy)}
+ />
+ }
+ optionDesc={renderHDStrategyOptionDesc()}
+ />
+ )
+}
+
+export default HDSettingBlock
diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
new file mode 100644
index 0000000..414f878
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss
@@ -0,0 +1,4 @@
+.model-desc-link {
+ color: var(--text-color-gray);
+ text-decoration: none;
+}
diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
new file mode 100644
index 0000000..dce8851
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx
@@ -0,0 +1,103 @@
+import React, { ReactNode } from 'react'
+import { useRecoilState } from 'recoil'
+import { settingState } from '../../store/Atoms'
+import Selector from '../shared/Selector'
+import NumberInputSetting from './NumberInputSetting'
+import SettingBlock from './SettingBlock'
+
+export enum AIModel {
+ LAMA = 'lama',
+ LDM = 'ldm',
+}
+
+function ModelSettingBlock() {
+ const [setting, setSettingState] = useRecoilState(settingState)
+
+ const onModelChange = (value: AIModel) => {
+ setSettingState(old => {
+ return { ...old, model: value }
+ })
+ }
+
+ const renderModelDesc = (
+ name: string,
+ paperUrl: string,
+ githubUrl: string
+ ) => {
+ return (
+
+ )
+ }
+
+ const renderLDMModelDesc = () => {
+ return (
+
+ {renderModelDesc(
+ 'High-Resolution Image Synthesis with Latent Diffusion Models',
+ 'https://arxiv.org/abs/2112.10752',
+ 'https://github.com/CompVis/latent-diffusion'
+ )}
+ {
+ const val = value.length === 0 ? 0 : parseInt(value, 10)
+ setSettingState(old => {
+ return { ...old, ldmSteps: val }
+ })
+ }}
+ />
+
+ )
+ }
+
+ const renderOptionDesc = (): ReactNode => {
+ switch (setting.model) {
+ case AIModel.LAMA:
+ return renderModelDesc(
+ 'Resolution-robust Large Mask Inpainting with Fourier Convolutions',
+ 'https://arxiv.org/abs/2109.07161',
+ 'https://github.com/saic-mdal/lama'
+ )
+ case AIModel.LDM:
+ return renderLDMModelDesc()
+ default:
+ return <>
+ }
+ }
+
+ return (
+ onModelChange(val as AIModel)}
+ />
+ }
+ optionDesc={renderOptionDesc()}
+ />
+ )
+}
+
+export default ModelSettingBlock
diff --git a/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx b/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
new file mode 100644
index 0000000..543a92a
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import NumberInput from '../shared/NumberInput'
+import SettingBlock from './SettingBlock'
+
+interface NumberInputSettingProps {
+ title: string
+ value: string
+ suffix?: string
+ onValue: (val: string) => void
+}
+
+function NumberInputSetting(props: NumberInputSettingProps) {
+ const { title, value, suffix, onValue } = props
+
+ return (
+
+
+ {suffix && {suffix}}
+
+ }
+ />
+ )
+}
+
+export default NumberInputSetting
diff --git a/lama_cleaner/app/src/components/Settings/SavePathSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/SavePathSettingBlock.tsx
new file mode 100644
index 0000000..06bc3dd
--- /dev/null
+++ b/lama_cleaner/app/src/components/Settings/SavePathSettingBlock.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react'
+import { useRecoilState } from 'recoil'
+import { settingState } from '../../store/Atoms'
+import { Switch, SwitchThumb } from '../shared/Switch'
+import SettingBlock from './SettingBlock'
+
+function SavePathSettingBlock() {
+ const [setting, setSettingState] = useRecoilState(settingState)
+
+ const onCheckChange = (checked: boolean) => {
+ setSettingState(old => {
+ return { ...old, saveImageBesideOrigin: checked }
+ })
+ }
+
+ return (
+