optimize settings

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>
+      </>
     )
   }
 

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;
 }

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' }}>
+      <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(
+        return undefined
-          '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()
       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}

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={{

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);
     }
   }

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>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          {desc && (
+            {desc ? (
               <Tooltip content={<div style={{ maxWidth: 400 }}>{desc}</div>}>
-              <svg
+                <span>{title}</span>
-                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>
+            ) : (
+              <span>{title}</span>
             )}
+            {titleSuffix}
+          </div>
         </div>
         {input}
       </div>

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;

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);

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);

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%);
 }

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%);
 }