optimize settings

2022-07-18 21:20:52 +08:00 · 2022-07-18 21:20:52 +08:00 · 8b1f7a672e
commit 8b1f7a672e
parent 4534d9275e
11 changed files with 91 additions and 64 deletions
--- 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 (
-      <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>
+      </>
    )
  }

--- 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;
 }
--- 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 (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-        <a
-          className="model-desc-link"
-          href={paperUrl}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Paper: {name}
-        </a>
+      <div style={{ display: 'flex', gap: '12px' }}>
+        <Tooltip content={name}>
+          <a
+            className="model-desc-link"
+            href={paperUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Paper
+          </a>
+        </Tooltip>

-        <a
-          className="model-desc-link"
-          href={githubUrl}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Offical Repository: {githubUrl}
-        </a>
+        <Tooltip content={githubUrl}>
+          <a
+            className="model-desc-link"
+            href={githubUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            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}
--- a/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
+++ b/lama_cleaner/app/src/components/Settings/NumberInputSetting.tsx
@ -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={{
--- a/lama_cleaner/app/src/components/Settings/SettingBlock.scss
+++ b/lama_cleaner/app/src/components/Settings/SettingBlock.scss
@ -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);
    }
  }
--- a/lama_cleaner/app/src/components/Settings/SettingBlock.tsx
+++ b/lama_cleaner/app/src/components/Settings/SettingBlock.tsx
@ -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 && (
-            <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>
-            </Tooltip>
-          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+            {desc ? (
+              <Tooltip content={<div style={{ maxWidth: 400 }}>{desc}</div>}>
+                <span>{title}</span>
+              </Tooltip>
+            ) : (
+              <span>{title}</span>
+            )}
+            {titleSuffix}
+          </div>
        </div>
        {input}
      </div>
--- 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;
--- 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);
--- 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);
--- 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%);
 }
--- 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%);
 }