From 8b1f7a672e6630a47c6f3ba229971a7c29e9b15e Mon Sep 17 00:00:00 2001 From: Qing Date: Mon, 18 Jul 2022 21:20:52 +0800 Subject: [PATCH] optimize settings --- .../components/Settings/HDSettingBlock.tsx | 8 +- .../Settings/ModelSettingBlock.scss | 6 +- .../components/Settings/ModelSettingBlock.tsx | 87 +++++++++++-------- .../Settings/NumberInputSetting.tsx | 4 +- .../src/components/Settings/SettingBlock.scss | 4 +- .../src/components/Settings/SettingBlock.tsx | 32 +++---- .../app/src/components/shared/Modal.scss | 2 +- .../src/components/shared/NumberInput.scss | 2 +- .../app/src/components/shared/Selector.scss | 2 +- lama_cleaner/app/src/styles/_Colors.scss | 4 + lama_cleaner/app/src/styles/_ColorsDark.scss | 4 + 11 files changed, 91 insertions(+), 64 deletions(-) diff --git a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx index 57fed00..9c77f53 100644 --- a/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx +++ b/lama_cleaner/app/src/components/Settings/HDSettingBlock.tsx @@ -66,7 +66,7 @@ function HDSettingBlock() { const renderResizeOptionDesc = () => { return ( -
+ <>
Resize the longer side of the image to a specific size(keep ratio), then do inpainting on the resized image. @@ -77,13 +77,13 @@ function HDSettingBlock() { suffix="pixel" onValue={onResizeLimitChange} /> -
+ ) } 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 @@ -101,7 +101,7 @@ function HDSettingBlock() { suffix="pixel" onValue={onCropMarginChange} /> -
+ ) } diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss index 414f878..29ae13a 100644 --- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss +++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.scss @@ -1,4 +1,8 @@ .model-desc-link { - color: var(--text-color-gray); + background-color: var(--badge-background-color); + color: var(--badge-color); + + padding: 3px 12px; + border-radius: 999px; text-decoration: none; } diff --git a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx index b43ee37..79b0f49 100644 --- a/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx +++ b/lama_cleaner/app/src/components/Settings/ModelSettingBlock.tsx @@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil' import { settingState } from '../../store/Atoms' import Selector from '../shared/Selector' import { Switch, SwitchThumb } from '../shared/Switch' +import Tooltip from '../shared/Tooltip' import { LDMSampler } from './HDSettingBlock' import NumberInputSetting from './NumberInputSetting' import SettingBlock from './SettingBlock' @@ -34,39 +35,39 @@ function ModelSettingBlock() { githubUrl: string ) => { return ( -
- - Paper: {name} - +
+ + + Paper + + - - Offical Repository: {githubUrl} - + + + Code + +
) } 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 => { @@ -87,21 +88,17 @@ function ModelSettingBlock() { /> } /> -
+ ) } const renderZITSModelDesc = () => { return (
- {renderModelDesc( - 'Incremental Transformer Structure Enhanced Image Inpainting with Masking Positional Encoding', - 'https://arxiv.org/abs/2203.00867', - 'https://github.com/DQiaole/ZITS_inpainting' - )} { 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' - ) + return undefined case AIModel.LDM: return renderLDMModelDesc() case AIModel.ZITS: @@ -136,10 +129,36 @@ function ModelSettingBlock() { } } + const renderPaperCodeBadge = (): 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' + ) + case AIModel.ZITS: + return renderModelDesc( + 'Incremental Transformer Structure Enhanced Image Inpainting with Masking Positional Encoding', + 'https://arxiv.org/abs/2203.00867', + 'https://github.com/DQiaole/ZITS_inpainting' + ) + default: + return <> + } + } + return ( void } function NumberInputSetting(props: NumberInputSettingProps) { - const { title, value, suffix, onValue } = props + const { title, desc, value, suffix, onValue } = props return (
- {title} - {desc && ( - {desc}
}> - - - - - )} +
+ {desc ? ( + {desc}
}> + {title} + + ) : ( + {title} + )} + {titleSuffix} +
{input}
diff --git a/lama_cleaner/app/src/components/shared/Modal.scss b/lama_cleaner/app/src/components/shared/Modal.scss index 53291f0..5d17e31 100644 --- a/lama_cleaner/app/src/components/shared/Modal.scss +++ b/lama_cleaner/app/src/components/shared/Modal.scss @@ -30,7 +30,7 @@ transform: translate(-50%, -50%); display: grid; grid-auto-rows: max-content; - row-gap: 2rem; + row-gap: 1rem; place-self: center; padding: 2rem; border-radius: 0.95rem; diff --git a/lama_cleaner/app/src/components/shared/NumberInput.scss b/lama_cleaner/app/src/components/shared/NumberInput.scss index 673cb98..cd44cd0 100644 --- a/lama_cleaner/app/src/components/shared/NumberInput.scss +++ b/lama_cleaner/app/src/components/shared/NumberInput.scss @@ -4,7 +4,7 @@ border-radius: 0.5rem; padding: 0 0.8rem; outline: 1px solid var(--border-color); - height: 36px; + height: 32px; &:focus-visible { outline: 1px solid var(--yellow-accent); diff --git a/lama_cleaner/app/src/components/shared/Selector.scss b/lama_cleaner/app/src/components/shared/Selector.scss index ebf6d8d..a54ffd5 100644 --- a/lama_cleaner/app/src/components/shared/Selector.scss +++ b/lama_cleaner/app/src/components/shared/Selector.scss @@ -4,7 +4,7 @@ align-items: center; justify-content: space-between; border-radius: 0.5rem; - height: 38px; + height: 32px; gap: 8px; padding: 0 0.8rem; border: 1px solid var(--border-color); diff --git a/lama_cleaner/app/src/styles/_Colors.scss b/lama_cleaner/app/src/styles/_Colors.scss index fe26002..704fd3f 100644 --- a/lama_cleaner/app/src/styles/_Colors.scss +++ b/lama_cleaner/app/src/styles/_Colors.scss @@ -47,4 +47,8 @@ // tooltip --tooltip-bg: var(--page-bg); + + // badge + --badge-background-color: hsl(209 13.3% 95.3%); + --badge-color: hsl(206 6% 43.5%); } diff --git a/lama_cleaner/app/src/styles/_ColorsDark.scss b/lama_cleaner/app/src/styles/_ColorsDark.scss index 2f12da6..c1f1ed7 100644 --- a/lama_cleaner/app/src/styles/_ColorsDark.scss +++ b/lama_cleaner/app/src/styles/_ColorsDark.scss @@ -45,4 +45,8 @@ // tooltip --tooltip-bg: hsl(197 6.8% 13.6%); + + // badge + --badge-background-color: hsl(197 6.8% 13.6%); + --badge-color: hsl(206 6% 63%); }