optimize settings
This commit is contained in:
Qing
parent
4534d9275e
commit
8b1f7a672e
@ -66,7 +66,7 @@ function HDSettingBlock() {
|
||||
|
||||
const renderResizeOptionDesc = () => {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<div>
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const renderCropOptionDesc = () => {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<div>
|
||||
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}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<Tooltip content={name}>
|
||||
<a
|
||||
className="model-desc-link"
|
||||
href={paperUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Paper: {name}
|
||||
Paper
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content={githubUrl}>
|
||||
<a
|
||||
className="model-desc-link"
|
||||
href={githubUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Offical Repository: {githubUrl}
|
||||
Code
|
||||
</a>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderLDMModelDesc = () => {
|
||||
return (
|
||||
<div>
|
||||
{renderModelDesc(
|
||||
'High-Resolution Image Synthesis with Latent Diffusion Models',
|
||||
'https://arxiv.org/abs/2112.10752',
|
||||
'https://github.com/CompVis/latent-diffusion'
|
||||
)}
|
||||
<>
|
||||
<NumberInputSetting
|
||||
title="Steps"
|
||||
value={`${setting.ldmSteps}`}
|
||||
desc="Large steps result in better result, but more time-consuming"
|
||||
onValue={value => {
|
||||
const val = value.length === 0 ? 0 : parseInt(value, 10)
|
||||
setSettingState(old => {
|
||||
@ -87,21 +88,17 @@ function ModelSettingBlock() {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const renderZITSModelDesc = () => {
|
||||
return (
|
||||
<div>
|
||||
{renderModelDesc(
|
||||
'Incremental Transformer Structure Enhanced Image Inpainting with Masking Positional Encoding',
|
||||
'https://arxiv.org/abs/2203.00867',
|
||||
'https://github.com/DQiaole/ZITS_inpainting'
|
||||
)}
|
||||
<SettingBlock
|
||||
className="sub-setting-block"
|
||||
title="Wireframe"
|
||||
desc="Enable edge and line detect"
|
||||
input={
|
||||
<Switch
|
||||
checked={setting.zitsWireframe}
|
||||
@ -122,11 +119,7 @@ function ModelSettingBlock() {
|
||||
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'
|
||||
)
|
||||
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 (
|
||||
<SettingBlock
|
||||
className="model-setting-block"
|
||||
title="Inpainting Model"
|
||||
titleSuffix={renderPaperCodeBadge()}
|
||||
input={
|
||||
<Selector
|
||||
width={80}
|
||||
|
||||
@ -4,18 +4,20 @@ import SettingBlock from './SettingBlock'
|
||||
|
||||
interface NumberInputSettingProps {
|
||||
title: string
|
||||
desc?: string
|
||||
value: string
|
||||
suffix?: string
|
||||
onValue: (val: string) => void
|
||||
}
|
||||
|
||||
function NumberInputSetting(props: NumberInputSettingProps) {
|
||||
const { title, value, suffix, onValue } = props
|
||||
const { title, desc, value, suffix, onValue } = props
|
||||
|
||||
return (
|
||||
<SettingBlock
|
||||
className="sub-setting-block"
|
||||
title={title}
|
||||
desc={desc}
|
||||
input={
|
||||
<div
|
||||
style={{
|
||||
|
||||
@ -8,9 +8,11 @@
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.3rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.sub-setting-block {
|
||||
margin-top: 8px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,36 +4,28 @@ import Tooltip from '../shared/Tooltip'
|
||||
interface SettingBlockProps {
|
||||
title: string
|
||||
desc?: string
|
||||
titleSuffix?: ReactNode
|
||||
input: ReactNode
|
||||
optionDesc?: ReactNode
|
||||
className?: string
|
||||
}
|
||||
|
||||
function SettingBlock(props: SettingBlockProps) {
|
||||
const { title, desc, input, optionDesc, className } = props
|
||||
const { title, titleSuffix, desc, input, optionDesc, className } = props
|
||||
return (
|
||||
<div className={`setting-block ${className}`}>
|
||||
<div className="setting-block-content">
|
||||
<div className="setting-block-content-title">
|
||||
<span>{title}</span>
|
||||
{desc && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
{desc ? (
|
||||
<Tooltip content={<div style={{ maxWidth: 400 }}>{desc}</div>}>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 15 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.877075 7.49972C0.877075 3.84204 3.84222 0.876892 7.49991 0.876892C11.1576 0.876892 14.1227 3.84204 14.1227 7.49972C14.1227 11.1574 11.1576 14.1226 7.49991 14.1226C3.84222 14.1226 0.877075 11.1574 0.877075 7.49972ZM7.49991 1.82689C4.36689 1.82689 1.82708 4.36671 1.82708 7.49972C1.82708 10.6327 4.36689 13.1726 7.49991 13.1726C10.6329 13.1726 13.1727 10.6327 13.1727 7.49972C13.1727 4.36671 10.6329 1.82689 7.49991 1.82689ZM8.24993 10.5C8.24993 10.9142 7.91414 11.25 7.49993 11.25C7.08571 11.25 6.74993 10.9142 6.74993 10.5C6.74993 10.0858 7.08571 9.75 7.49993 9.75C7.91414 9.75 8.24993 10.0858 8.24993 10.5ZM6.05003 6.25C6.05003 5.57211 6.63511 4.925 7.50003 4.925C8.36496 4.925 8.95003 5.57211 8.95003 6.25C8.95003 6.74118 8.68002 6.99212 8.21447 7.27494C8.16251 7.30651 8.10258 7.34131 8.03847 7.37854L8.03841 7.37858C7.85521 7.48497 7.63788 7.61119 7.47449 7.73849C7.23214 7.92732 6.95003 8.23198 6.95003 8.7C6.95004 9.00376 7.19628 9.25 7.50004 9.25C7.8024 9.25 8.04778 9.00601 8.05002 8.70417L8.05056 8.7033C8.05924 8.6896 8.08493 8.65735 8.15058 8.6062C8.25207 8.52712 8.36508 8.46163 8.51567 8.37436L8.51571 8.37433C8.59422 8.32883 8.68296 8.27741 8.78559 8.21506C9.32004 7.89038 10.05 7.35382 10.05 6.25C10.05 4.92789 8.93511 3.825 7.50003 3.825C6.06496 3.825 4.95003 4.92789 4.95003 6.25C4.95003 6.55376 5.19628 6.8 5.50003 6.8C5.80379 6.8 6.05003 6.55376 6.05003 6.25Z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>{title}</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span>{title}</span>
|
||||
)}
|
||||
{titleSuffix}
|
||||
</div>
|
||||
</div>
|
||||
{input}
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user