From 78d6b1cc3ee073f2602ff653af0002a7298e92db Mon Sep 17 00:00:00 2001 From: Sanster Date: Thu, 14 Apr 2022 20:43:07 +0800 Subject: [PATCH] wip: add setting page --- lama_cleaner/app/.eslintrc.json | 1 + .../components/Setting/HDSettingBlock.scss | 7 ++ .../src/components/Setting/HDSettingBlock.tsx | 34 +++++++- .../components/Setting/ModelSettingBlock.scss | 4 + .../components/Setting/ModelSettingBlock.tsx | 87 +++++++++++++++++++ .../Setting/SavePathSettingBlock.tsx | 2 +- .../app/src/components/Setting/Setting.scss | 4 +- .../src/components/Setting/SettingBlock.scss | 7 +- .../src/components/Setting/SettingModal.tsx | 2 + .../app/src/components/shared/Selector.tsx | 7 +- lama_cleaner/app/src/store/Atoms.tsx | 15 +++- 11 files changed, 155 insertions(+), 15 deletions(-) create mode 100644 lama_cleaner/app/src/components/Setting/HDSettingBlock.scss create mode 100644 lama_cleaner/app/src/components/Setting/ModelSettingBlock.scss create mode 100644 lama_cleaner/app/src/components/Setting/ModelSettingBlock.tsx diff --git a/lama_cleaner/app/.eslintrc.json b/lama_cleaner/app/.eslintrc.json index d19d2dc..c2681ae 100644 --- a/lama_cleaner/app/.eslintrc.json +++ b/lama_cleaner/app/.eslintrc.json @@ -17,6 +17,7 @@ "project": "./tsconfig.json" }, "rules": { + "jsx-a11y/click-events-have-key-events": 0, "react/jsx-props-no-spreading": 0, "import/no-unresolved": 0, "react/jsx-no-bind": "off", diff --git a/lama_cleaner/app/src/components/Setting/HDSettingBlock.scss b/lama_cleaner/app/src/components/Setting/HDSettingBlock.scss new file mode 100644 index 0000000..06b426c --- /dev/null +++ b/lama_cleaner/app/src/components/Setting/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/Setting/HDSettingBlock.tsx b/lama_cleaner/app/src/components/Setting/HDSettingBlock.tsx index 44a1437..2d87f19 100644 --- a/lama_cleaner/app/src/components/Setting/HDSettingBlock.tsx +++ b/lama_cleaner/app/src/components/Setting/HDSettingBlock.tsx @@ -22,6 +22,7 @@ function PixelSizeInputSetting(props: PixelSizeInputProps) { return ( { + const val = value.length === 0 ? 0 : parseInt(value, 10) setSettingState(old => { - return { ...old, hdStrategyResizeLimit: value } + return { ...old, hdStrategyResizeLimit: val } }) } const onCropTriggerSizeChange = (value: string) => { + const val = value.length === 0 ? 0 : parseInt(value, 10) setSettingState(old => { - return { ...old, hdStrategyCropTrigerSize: value } + return { ...old, hdStrategyCropTrigerSize: val } + }) + } + + const onCropMarginChange = (value: string) => { + const val = value.length === 0 ? 0 : parseInt(value, 10) + setSettingState(old => { + return { ...old, hdStrategyCropMargin: val } }) } @@ -69,7 +79,16 @@ function HDSettingBlock() { return (
Use the original resolution of the picture, suitable for picture size - below 2K, of course you can try it on higher resolution pictures + below 2K. Try{' '} +
onStrategyChange(HDStrategy.REISIZE)} + > + Resize Strategy +
{' '} + if you do not get good results on high resolution images.
) } @@ -79,7 +98,7 @@ function HDSettingBlock() {
Resize the longer side of the image to a specific size(keep ratio), - then do inpainting on the entire resized image. + then do inpainting on the resized image.
+
) } @@ -122,9 +146,11 @@ function HDSettingBlock() { return ( onStrategyChange(val as HDStrategy)} /> diff --git a/lama_cleaner/app/src/components/Setting/ModelSettingBlock.scss b/lama_cleaner/app/src/components/Setting/ModelSettingBlock.scss new file mode 100644 index 0000000..414f878 --- /dev/null +++ b/lama_cleaner/app/src/components/Setting/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/Setting/ModelSettingBlock.tsx b/lama_cleaner/app/src/components/Setting/ModelSettingBlock.tsx new file mode 100644 index 0000000..2d7891c --- /dev/null +++ b/lama_cleaner/app/src/components/Setting/ModelSettingBlock.tsx @@ -0,0 +1,87 @@ +import React, { ReactNode } from 'react' +import { useRecoilState } from 'recoil' +import { settingState } from '../../store/Atoms' +import Selector from '../shared/Selector' +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 ( +
+ + {name} + + +
+ + + {githubUrl} + +
+ ) + } + + 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 renderModelDesc( + 'High-Resolution Image Synthesis with Latent Diffusion Models', + 'https://arxiv.org/abs/2112.10752', + 'https://github.com/CompVis/latent-diffusion' + ) + default: + return <> + } + } + + return ( + onModelChange(val as AIModel)} + /> + } + optionDesc={renderOptionDesc()} + /> + ) +} + +export default ModelSettingBlock diff --git a/lama_cleaner/app/src/components/Setting/SavePathSettingBlock.tsx b/lama_cleaner/app/src/components/Setting/SavePathSettingBlock.tsx index fcd5fe7..536e67a 100644 --- a/lama_cleaner/app/src/components/Setting/SavePathSettingBlock.tsx +++ b/lama_cleaner/app/src/components/Setting/SavePathSettingBlock.tsx @@ -6,7 +6,7 @@ import SettingBlock from './SettingBlock' function SavePathSettingBlock() { return ( diff --git a/lama_cleaner/app/src/components/Setting/Setting.scss b/lama_cleaner/app/src/components/Setting/Setting.scss index 81c57f9..17adcb6 100644 --- a/lama_cleaner/app/src/components/Setting/Setting.scss +++ b/lama_cleaner/app/src/components/Setting/Setting.scss @@ -1,12 +1,14 @@ @use '../../styles/Mixins/' as *; @import './SettingBlock.scss'; +@import './HDSettingBlock.scss'; +@import './ModelSettingBlock.scss'; .modal-setting { grid-area: main-content; background-color: var(--modal-bg); color: var(--modal-text-color); box-shadow: 0px 0px 20px rgb(0, 0, 40, 0.2); - min-height: 450px; + min-height: 600px; width: 700px; @include mobile { diff --git a/lama_cleaner/app/src/components/Setting/SettingBlock.scss b/lama_cleaner/app/src/components/Setting/SettingBlock.scss index f790e85..91a2ee3 100644 --- a/lama_cleaner/app/src/components/Setting/SettingBlock.scss +++ b/lama_cleaner/app/src/components/Setting/SettingBlock.scss @@ -1,13 +1,18 @@ .setting-block { display: flex; flex-direction: column; - margin-top: 12px; .option-desc { + color: var(--text-color-gray); margin-top: 12px; border: 1px solid var(--border-color); border-radius: 0.3rem; padding: 2rem; + + .sub-setting-block { + margin-top: 8px; + color: var(--text-color); + } } } diff --git a/lama_cleaner/app/src/components/Setting/SettingModal.tsx b/lama_cleaner/app/src/components/Setting/SettingModal.tsx index 98410ad..262b9e1 100644 --- a/lama_cleaner/app/src/components/Setting/SettingModal.tsx +++ b/lama_cleaner/app/src/components/Setting/SettingModal.tsx @@ -4,6 +4,7 @@ import { useRecoilState } from 'recoil' import { settingState } from '../../store/Atoms' import Modal from '../shared/Modal' import HDSettingBlock from './HDSettingBlock' +import ModelSettingBlock from './ModelSettingBlock' import SavePathSettingBlock from './SavePathSettingBlock' export default function SettingModal() { @@ -23,6 +24,7 @@ export default function SettingModal() { show={setting.show} > + ) diff --git a/lama_cleaner/app/src/components/shared/Selector.tsx b/lama_cleaner/app/src/components/shared/Selector.tsx index d256606..d912fe3 100644 --- a/lama_cleaner/app/src/components/shared/Selector.tsx +++ b/lama_cleaner/app/src/components/shared/Selector.tsx @@ -7,6 +7,7 @@ type SelectorChevronDirection = 'up' | 'down' type SelectorProps = { minWidth?: number chevronDirection?: SelectorChevronDirection + value: string options: string[] onChange: (value: string) => void } @@ -17,9 +18,8 @@ const selectorDefaultProps = { } function Selector(props: SelectorProps) { - const { minWidth, chevronDirection, options, onChange } = props + const { minWidth, chevronDirection, value, options, onChange } = props const [showOptions, setShowOptions] = useState(false) - const [index, setIndex] = useState(0) const selectorRef = useRef(null) const showOptionsHandler = () => { @@ -46,7 +46,6 @@ function Selector(props: SelectorProps) { const currentRes = e.target.textContent.split('x') onChange(currentRes[0]) setShowOptions(false) - setIndex(newIndex) } return ( @@ -57,7 +56,7 @@ function Selector(props: SelectorProps) { onClick={showOptionsHandler} aria-hidden="true" > -

{options[index]}

+

{value}

{chevronDirection === 'up' ? : }
diff --git a/lama_cleaner/app/src/store/Atoms.tsx b/lama_cleaner/app/src/store/Atoms.tsx index f37164a..82e2362 100644 --- a/lama_cleaner/app/src/store/Atoms.tsx +++ b/lama_cleaner/app/src/store/Atoms.tsx @@ -1,5 +1,6 @@ import { atom } from 'recoil' import { HDStrategy } from '../components/Setting/HDSettingBlock' +import { AIModel } from '../components/Setting/ModelSettingBlock' export const fileState = atom({ key: 'fileState', @@ -13,17 +14,23 @@ export const shortcutsState = atom({ export interface Setting { show: boolean + saveImageBesideOrigin: boolean + model: AIModel hdStrategy: HDStrategy - hdStrategyResizeLimit: string - hdStrategyCropTrigerSize: string + hdStrategyResizeLimit: number + hdStrategyCropTrigerSize: number + hdStrategyCropMargin: number } export const settingState = atom({ key: 'settingsState', default: { show: false, + saveImageBesideOrigin: false, + model: AIModel.LAMA, hdStrategy: HDStrategy.ORIGINAL, - hdStrategyResizeLimit: '2048', - hdStrategyCropTrigerSize: '2048', + hdStrategyResizeLimit: 2048, + hdStrategyCropTrigerSize: 2048, + hdStrategyCropMargin: 128, }, })