chore: update default sampler (#49)

* feat: auto config some settings based on chosen model

* chore: handle clip skip when selecting pony model

* chore: fix layout issue

* chore: UI improvements on orientation select modal

* chore: update changelog

Author: daveschumaker

.prettierrc

@@ -1,9 +1,9 @@
 {
   "bracketSpacing": true,
   "printWidth": 80,
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "none",
   "useTabs": false
-}
+}

app/_components/AdvancedOptions/ImageOrientation_Custom.tsx

@@ -5,6 +5,7 @@ import { IconArrowsShuffle, IconLock, IconLockOpen } from '@tabler/icons-react'
 import Button from '../Button'
 import PromptInput from '@/app/_data-models/PromptInput'
 import useImageSize from '@/app/_hooks/useImageSize'
+import NiceModal from '@ebay/nice-modal-react'
 
 export default function CustomImageOrientation({
   input,
@@ -22,7 +23,7 @@ export default function CustomImageOrientation({
     input.width,
     input.height
   )
-  const [lockRatio, setLockRatio] = useState(true)
+  const [lockRatio, setLockRatio] = useState(false)
 
   const handleSetDimensions = (w: number, h: number) => {
     setHeight(h)
@@ -118,7 +119,12 @@ export default function CustomImageOrientation({
       </div>
       <div className="row w-full gap-2 justify-end">
         <div
+          onClick={() => {
+            handleSetDimensions(width, height)
+            setLockRatio(!lockRatio)
+          }}
           style={{
+            cursor: 'pointer',
             position: 'relative',
             width: '20px',
             height: '22px',
@@ -236,6 +242,16 @@ export default function CustomImageOrientation({
             <IconArrowsShuffle /> Swap
           </span>
         </Button>
+        <Button
+          onClick={() => {
+            NiceModal.remove('modal')
+          }}
+          style={{
+            minWidth: '60px'
+          }}
+        >
+          OK
+        </Button>
       </div>
     </div>
   )

app/_components/AdvancedOptions/ModelSelect/index.tsx

@@ -55,11 +55,8 @@ export async function getData() {
 }
 
 export default async function ModelSelect() {
-  // const data = await getData()
   return (
     <ModelSelectComponent
-    // hasError={data.success === false}
-    // models={data.models}
     />
   )
 }

app/_components/AdvancedOptions/ModelSelect/modelSelectComponent.tsx

@@ -8,7 +8,8 @@ import { IconListDetails, IconWand } from '@tabler/icons-react'
 import ModelModalWrapper from './modalWrapper'
 import { useStore } from 'statery'
 import { ModelStore } from '@/app/_stores/ModelStore'
-import SelectCombo, { SelectOption } from '../../ComboBox'
+import SelectCombo from '../../ComboBox'
+import PromptInput from '@/app/_data-models/PromptInput'
 
 export default function ModelSelect() {
   const { availableModels, modelDetails } = useStore(ModelStore)
@@ -30,18 +31,39 @@ export default function ModelSelect() {
     >
       <div className="w-full row">
         <SelectCombo
-          onChange={(option: SelectOption) => {
+          // @ts-expect-error - value will always be string here
+          onChange={(option: { value: string }) => {
             if (!option || !option.value) return
 
             const modelInfo = {
               baseline: modelDetails[option.value as string]?.baseline ?? '',
               version: modelDetails[option.value as string]?.version ?? ''
             }
 
-            setInput({
-              models: [option.value as string],
-              modelDetails: modelInfo
-            })
+            // PonyXL models require a CLIP setting of at least 2
+            const isPonyModel = option.value.toLowerCase().indexOf('pony') >= 0
+
+            if (PromptInput.isDefaultPromptInput(input) && option.value !== 'AlbedoBase XL (SDXL)') {
+              setInput(PromptInput.setNonTurboDefaultPromptInput({
+                ...input, models: [option.value as string],
+                clipskip: isPonyModel && input.clipskip < 2 ? 2 : input.clipskip
+              }))
+            } else if (input.models[0] !== 'AlbedoBase XL (SDXL)' && option.value === 'AlbedoBase XL (SDXL)') {
+              setInput(PromptInput.setTurboDefaultPromptInput({ ...input, models: [option.value as string] }))
+            } else {
+              setInput({
+                models: [option.value as string],
+                modelDetails: modelInfo
+              })
+            }
+
+            if (option.value.toLowerCase().indexOf('pony') >= 0 && input.clipskip < 2) {
+              setInput({
+                models: [option.value as string],
+                modelDetails: modelInfo,
+                clipskip: 2
+              })
+            }
           }}
           options={availableModels.map((model) => ({
             value: model.name,
@@ -60,7 +82,7 @@ export default function ModelSelect() {
 
             const randomModel =
               availableModels[
-                Math.floor(Math.random() * availableModels.length)
+              Math.floor(Math.random() * availableModels.length)
               ]
 
             setInput({ models: [randomModel.name] })

app/_components/AdvancedOptions/StylePresetSelect/stylePresetSelectComponent.tsx

@@ -14,7 +14,7 @@ import {
   StylePreviewConfigurations
 } from '@/app/_types/HordeTypes'
 import { useCallback } from 'react'
-import PromptInput from '@/app/_data-models/PromptInput'
+import PromptInput, { DEFAULT_TURBO_LORA } from '@/app/_data-models/PromptInput'
 import { SavedLora } from '@/app/_data-models/Civitai'
 import { useStore } from 'statery'
 import { ModelStore } from '@/app/_stores/ModelStore'
@@ -55,17 +55,21 @@ export default function StylePresetSelectComponent({
 
         if (key === 'loras' && typeof presetSettings.loras !== 'undefined') {
           updateInput.loras = []
-
           presetSettings.loras.forEach((lora) => {
-            const updateLora = new SavedLora({
-              id: lora.name,
-              versionId: lora.is_version ? Number(lora.name) : false,
-              versionName: lora.name,
-              isArtbotManualEntry: true,
-              name: lora.name,
-              strength: lora.model || 1,
-              clip: lora.clip_skip || 1
-            })
+            let updateLora: SavedLora
+            if (lora.name == '247778') {
+              updateLora = DEFAULT_TURBO_LORA
+            } else {
+              updateLora = new SavedLora({
+                id: lora.name,
+                versionId: lora.is_version ? Number(lora.name) : false,
+                versionName: lora.name,
+                isArtbotManualEntry: true,
+                name: lora.name,
+                strength: lora.model || 1,
+                clip: lora.clip_skip || 1
+              })
+            }
 
             // @ts-expect-error updateInput.loras is defined right above this.
             updateInput.loras.push({ ...updateLora })
@@ -138,7 +142,7 @@ export default function StylePresetSelectComponent({
               modalClassName: 'w-full md:min-w-[640px] max-w-[648px]'
             })
           }}
-          onChange={() => {}}
+          onChange={() => { }}
           options={options}
           value={options[0]}
         />

app/_components/AdvancedOptions/index.tsx

@@ -13,11 +13,11 @@ import ModelSelect from './ModelSelect'
 import SamplerSelect from './SamplerSelect'
 import Seed from './Seed'
 import Steps from './Steps'
-import UploadImage from './UploadImage'
 import Upscalers from './Upscalers'
 import StylePresetSelect from './StylePresetSelect'
 import AddWorkflow from './AddWorkflow'
 import HiresFix from './HiresFix'
+import UploadImage from './UploadImage'
 
 export default function AdvancedOptions() {
   return (

app/_data-models/PromptInput.test.ts

@@ -1,6 +1,7 @@
-import PromptInput from './PromptInput'
+import PromptInput, { DEFAULT_TURBO_LORA } from './PromptInput'
 import { JobType } from '@/app/_types/ArtbotTypes'
 import { SourceProcessing } from '@/app/_types/HordeTypes'
+import { SavedLora } from './Civitai'
 
 describe('PromptInput', () => {
   it('should initialize with default values', () => {
@@ -30,7 +31,7 @@ describe('PromptInput', () => {
     expect(defaultPromptInput.preset).toEqual([])
     expect(defaultPromptInput.prompt).toBe('')
     expect(defaultPromptInput.return_control_map).toBe(false)
-    expect(defaultPromptInput.sampler).toBe('k_dpmpp_sde')
+    expect(defaultPromptInput.sampler).toBe('euler_a')
     expect(defaultPromptInput.seed).toBe('')
     expect(defaultPromptInput.source_processing).toBe(SourceProcessing.Prompt)
     expect(defaultPromptInput.steps).toBe(8)
@@ -77,4 +78,40 @@ describe('PromptInput', () => {
       { text: 'example', reference: 'ref' }
     ])
   })
+
+  it('should correctly identify a default prompt', () => {
+    const defaultPromptInput = new PromptInput({})
+    expect(PromptInput.isDefaultPromptInput(defaultPromptInput)).toBe(true)
+
+    const nonDefaultPromptInput = new PromptInput({
+      models: ['Different Model'],
+      steps: 10,
+      cfg_scale: 3
+    })
+    expect(PromptInput.isDefaultPromptInput(nonDefaultPromptInput)).toBe(false)
+  })
+
+  it('should correctly set non-turbo default prompt input', () => {
+    const input = new PromptInput({
+      loras: [DEFAULT_TURBO_LORA, { id: 'other', versionId: 'other' } as SavedLora]
+    })
+    const result = PromptInput.setNonTurboDefaultPromptInput(input)
+
+    expect(result.steps).toBe(24)
+    expect(result.cfg_scale).toBe(6)
+    expect(result.loras).toHaveLength(1)
+    expect(result.loras[0].versionId).not.toBe('247778')
+  })
+
+  it('should correctly set turbo default prompt input', () => {
+    const input = new PromptInput({
+      loras: [{ id: 'other', versionId: 'other' } as SavedLora]
+    })
+    const result = PromptInput.setTurboDefaultPromptInput(input)
+
+    expect(result.steps).toBe(8)
+    expect(result.cfg_scale).toBe(2)
+    expect(result.loras).toHaveLength(2)
+    expect(result.loras[0]).toEqual(DEFAULT_TURBO_LORA)
+  })
 })

app/_data-models/PromptInput.ts

@@ -6,6 +6,17 @@ import {
 } from '@/app/_types/HordeTypes'
 import { SavedEmbedding, SavedLora } from './Civitai'
 
+export const DEFAULT_TURBO_LORA = new SavedLora({
+  id: '247778',
+  civitAiType: 'LORA',
+  versionId: '247778',
+  versionName: '',
+  isArtbotManualEntry: true,
+  name: 'SDXL | LCM TurboMix LoRA (SDE sampler)',
+  strength: 1,
+  clip: 1
+})
+
 class PromptInput {
   // ArtBot ID for mainting relationships in IndexedDb
   artbot_id: string = ''
@@ -44,16 +55,7 @@ class PromptInput {
   jobType: JobType = JobType.Text2Img
   karras: boolean = true
   loras: SavedLora[] = [
-    new SavedLora({
-      id: '247778',
-      civitAiType: 'LORA',
-      versionId: '247778',
-      versionName: '',
-      isArtbotManualEntry: true,
-      name: 'SDXL | LCM TurboMix LoRA (SDE sampler)',
-      strength: 1,
-      clip: 1
-    })
+    DEFAULT_TURBO_LORA
   ]
   models: Array<string> = ['AlbedoBase XL (SDXL)']
   negative: string = ''
@@ -62,7 +64,7 @@ class PromptInput {
   post_processing: Array<string> = []
   prompt: string = ''
   return_control_map: boolean = false
-  sampler: string = 'k_dpmpp_sde'
+  sampler: string = 'euler_a'
   seed: string = ''
   source_processing?: SourceProcessing = SourceProcessing.Prompt
   steps: number = 8
@@ -77,6 +79,60 @@ class PromptInput {
   constructor(params: Partial<PromptInput> = {}) {
     Object.assign(this, params)
   }
+
+  /**
+   * Checks if the prompt input is a default prompt. I've hardcoded some default values here
+   * but this should be okay as any changes above will cause the below test to fail at built time.
+   * @param input - The prompt input to check.
+   * @returns True if the prompt input is a default prompt, false otherwise.
+   */
+  static isDefaultPromptInput(input: PromptInput): boolean {
+    const hasTurboLora = input.loras.filter(lora => lora.versionId === '247778').length > 0
+    const hasDefaultStepsAndCfgScale = input.models[0] === 'AlbedoBase XL (SDXL)' && Number(input.steps) === 8 && Number(input.cfg_scale) === 2
+    const hasDefaultModelAndLora = input.models[0] === 'AlbedoBase XL (SDXL)' && hasTurboLora
+
+    return hasDefaultStepsAndCfgScale || hasDefaultModelAndLora
+  }
+
+  /**
+   * Sets the prompt input to a non-turbo default prompt. This occurs when a user
+   * selects a non-SDXL turbo model, so we need to adjust steps and cfg_scale to
+   * the non-turbo defaults.
+   * @param input - The prompt input to set to a non-turbo default prompt.
+   * @returns The prompt input set to a non-turbo default prompt.
+   */
+  static setNonTurboDefaultPromptInput(input: PromptInput): PromptInput {
+    // Remove the LCM TurboMix LoRA if present
+    input.loras = input.loras.filter(lora => lora.versionId != '247778');
+
+    return new PromptInput({
+      ...input,
+      steps: 24,
+      cfg_scale: 6
+    })
+  }
+
+  /**
+   * Sets the prompt input to a turbo default prompt. This occurs when a user
+   * selects a SDXL turbo model, so we need to adjust steps, cfg_scale, and
+   * add the LCM TurboMix LoRA to the loras array.
+   * @param input - The prompt input to set to a turbo default prompt.
+   * @returns The prompt input set to a turbo default prompt.
+   */
+  static setTurboDefaultPromptInput(input: PromptInput): PromptInput {
+    // Check if the LCM TurboMix LoRA is not present in the input.loras array
+    if (!input.loras.some(lora => lora.versionId == '247778')) {
+      // If not present, add it to the beginning of the array
+      input.loras.unshift(DEFAULT_TURBO_LORA);
+    }
+
+
+    return new PromptInput({
+      ...input,
+      steps: 8,
+      cfg_scale: 2
+    })
+  }
 }
 
 export default PromptInput

app/changelog/_updates/2024.08.29.md

@@ -31,3 +31,6 @@
 - (fix) more work handling stuck jobs when "is_possible" is false. It really works, this time!
 - (feat) add ability to cancel job in progress without losing existing downloaded images (useful for jobs where GPU worker goes offline).
 - (feat) likewise, if a job returns a 404 error after taking too long to complete, you will no longer lose existing images related to the job if they had already been downloaded.
+- (chore) update default sampler
+- (feat) update some common settings if selecting different model from default AlbedoXL (update steps, cfg, LoRA) to reduce confusion
+- (feat) update CLIP if selecting a PonyXL model and CLIP skip is less than 2.

app/layout.tsx

@@ -73,12 +73,12 @@ export default function RootLayout({
           <div
             className="flex flex-col flex-1"
             style={{
-              padding: '42px 8px 8px 8px',
+              padding: '42px 0 0 0',
               paddingBottom: 'var(--footer-padding)'
             }}
           >
             <HeaderNav />
-            <main className="flex flex-col gap-2 w-full flex-1 sm:p-1">
+            <main className="flex flex-col gap-2 w-full flex-1" style={{ padding: '8px' }}>
               <ContentWrapper>
                 <BetaBanner />
                 {children}