fix: update default TurboMix LoRA (#51)

* fix: update default TurboMix LoRA

* feat: add build id to footer

* chore: update footer padding and add animated "Made With" emoji component

* chore: update changelog

app/_components/AdvancedOptions/StylePresetSelect/stylePresetSelectComponent.tsx

@@ -14,7 +14,7 @@ import {
   StylePreviewConfigurations
 } from '@/app/_types/HordeTypes'
 import { useCallback } from 'react'
-import PromptInput, { DEFAULT_TURBO_LORA } from '@/app/_data-models/PromptInput'
+import PromptInput, { DEFAULT_TURBO_EULER_LORA } from '@/app/_data-models/PromptInput'
 import { SavedLora } from '@/app/_data-models/Civitai'
 import { useStore } from 'statery'
 import { ModelStore } from '@/app/_stores/ModelStore'
@@ -57,8 +57,8 @@ export default function StylePresetSelectComponent({
           updateInput.loras = []
           presetSettings.loras.forEach((lora) => {
             let updateLora: SavedLora
-            if (lora.name == '247778') {
-              updateLora = DEFAULT_TURBO_LORA
+            if (lora.name == DEFAULT_TURBO_EULER_LORA.versionId) {
+              updateLora = DEFAULT_TURBO_EULER_LORA
             } else {
               updateLora = new SavedLora({
                 id: lora.name,

app/_components/Footer/AnimatedEmoji.tsx

@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from 'react';
+
+const emojis = ['🎨', '😀', '🖌️', '🖍️', '☀️', '🍻', '❤️', '🎉', '🦄', '🤖', '💻', '😬', '🤪', '✨'];
+
+export default function AnimatedEmoji() {
+  const [currentEmoji, setCurrentEmoji] = useState(emojis[0]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentEmoji(emojis[Math.floor(Math.random() * emojis.length)]);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <span className="inline-block w-6">{currentEmoji}</span>;
+}

app/_components/Footer/buildId.tsx

@@ -0,0 +1,10 @@
+import { AppStore } from "@/app/_stores/AppStore"
+import { useStore } from "statery"
+
+export default function BuildId() {
+  const { buildId } = useStore(AppStore)
+
+  if (!buildId) return null
+
+  return <div className="w-full text-center text-xs">v{buildId}</div>
+}

app/_components/Footer/footer.module.css

@@ -5,7 +5,7 @@
   flex-direction: column;
   margin-top: 16px;
   padding: 16px 32px;
-  padding-bottom: 66px;
+  padding-bottom: 72px;
   width: 100%;
 }
 
@@ -38,7 +38,7 @@
 
 .AboutWrapper {
   margin-top: 32px;
-  padding-bottom: 16px;
+  /* padding-bottom: 16px; */
   text-align: center;
 }
 

app/_components/Footer/index.tsx

@@ -8,11 +8,14 @@ import {
   IconCamera,
   IconExternalLink,
   IconInfoCircle,
+  IconMessage,
   IconPhoto,
   IconQuestionMark,
   IconRobot
 } from '@tabler/icons-react'
 import Linker from '../Linker'
+import BuildId from './buildId'
+import AnimatedEmoji from './AnimatedEmoji'
 
 export default function Footer() {
   const pathname = usePathname()
@@ -164,10 +167,10 @@ export default function Footer() {
           </div>
         </div>
         <div className={styles.Section}>
-          {/* <div className={styles.SectionTitle}>
+          <div className={styles.SectionTitle}>
             <IconMessage stroke={1} />
             Contact
-          </div> */}
+          </div>
           <div>
             <Link
               href="https://discord.com/channels/781145214752129095/1107628882783391744"
@@ -264,9 +267,9 @@ export default function Footer() {
       </div>
       <div className={styles.AboutWrapper} id="ArtBot_MadeWithLove">
         <div>
-          ArtBot is created with ❤️ , ☕️ and ☀️ by{' '}
+          ArtBot is created with <AnimatedEmoji /> by{' '}
           <Linker
-            href="https://mastodon.world/@davely"
+            href="https://www.threads.net/@dave.ly"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -275,6 +278,7 @@ export default function Footer() {
           in California.
         </div>
       </div>
+      <BuildId />
     </div>
   )
 }

app/_data-models/PromptInput.test.ts

@@ -1,4 +1,4 @@
-import PromptInput, { DEFAULT_TURBO_LORA } from './PromptInput'
+import PromptInput, { DEFAULT_TURBO_EULER_LORA } from './PromptInput'
 import { JobType } from '@/app/_types/ArtbotTypes'
 import { SourceProcessing } from '@/app/_types/HordeTypes'
 import { SavedLora } from './Civitai'
@@ -93,7 +93,7 @@ describe('PromptInput', () => {
 
   it('should correctly set non-turbo default prompt input', () => {
     const input = new PromptInput({
-      loras: [DEFAULT_TURBO_LORA, { id: 'other', versionId: 'other' } as SavedLora]
+      loras: [DEFAULT_TURBO_EULER_LORA, { id: 'other', versionId: 'other' } as SavedLora]
     })
     const result = PromptInput.setNonTurboDefaultPromptInput(input)
 
@@ -112,6 +112,6 @@ describe('PromptInput', () => {
     expect(result.steps).toBe(8)
     expect(result.cfg_scale).toBe(2)
     expect(result.loras).toHaveLength(2)
-    expect(result.loras[0]).toEqual(DEFAULT_TURBO_LORA)
+    expect(result.loras[0]).toEqual(DEFAULT_TURBO_EULER_LORA)
   })
 })

app/_data-models/PromptInput.ts

@@ -7,7 +7,7 @@ import {
 } from '@/app/_types/HordeTypes'
 import { SavedEmbedding, SavedLora } from './Civitai'
 
-export const DEFAULT_TURBO_LORA = new SavedLora({
+export const DEFAULT_TURBO_SDE_LORA = new SavedLora({
   id: '247778',
   civitAiType: 'LORA',
   versionId: '247778',
@@ -18,6 +18,17 @@ export const DEFAULT_TURBO_LORA = new SavedLora({
   clip: 1
 })
 
+export const DEFAULT_TURBO_EULER_LORA = new SavedLora({
+  id: '246747',
+  civitAiType: 'LORA',
+  versionId: '246747',
+  versionName: '',
+  isArtbotManualEntry: true,
+  name: 'SDXL | TurboMix LoRA (Euler sampler)',
+  strength: 1,
+  clip: 1
+})
+
 class PromptInput {
   // ArtBot ID for mainting relationships in IndexedDb
   artbot_id: string = ''
@@ -56,7 +67,7 @@ class PromptInput {
   jobType: JobType = JobType.Text2Img
   karras: boolean = true
   loras: SavedLora[] = [
-    DEFAULT_TURBO_LORA
+    DEFAULT_TURBO_EULER_LORA
   ]
   models: Array<string> = ['AlbedoBase XL (SDXL)']
   negative: string = ''
@@ -88,9 +99,10 @@ class PromptInput {
    * @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 hasTurboLora = input.loras.filter(lora => lora.versionId === DEFAULT_TURBO_EULER_LORA.versionId).length > 0
+    const hasDefaultSampler = input.sampler === 'k_euler_a'
     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
+    const hasDefaultModelAndLora = input.models[0] === 'AlbedoBase XL (SDXL)' && hasTurboLora && hasDefaultSampler
 
     return hasDefaultStepsAndCfgScale || hasDefaultModelAndLora
   }
@@ -104,7 +116,7 @@ class PromptInput {
    */
   static setNonTurboDefaultPromptInput(input: PromptInput): PromptInput {
     // Remove the LCM TurboMix LoRA if present
-    input.loras = input.loras.filter(lora => lora.versionId != '247778');
+    input.loras = input.loras.filter(lora => lora.versionId != DEFAULT_TURBO_EULER_LORA.versionId);
 
     return new PromptInput({
       ...input,
@@ -116,18 +128,20 @@ class PromptInput {
   /**
    * 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.
+   * add the 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')) {
+    // Check if the TurboMix LoRA is not present in the input.loras array
+    if (!input.loras.some(lora => lora.versionId == DEFAULT_TURBO_EULER_LORA.versionId)) {
       // If not present, add it to the beginning of the array
-      input.loras.unshift(DEFAULT_TURBO_LORA);
+      input.loras.unshift(DEFAULT_TURBO_EULER_LORA);
     }
 
 
+
+
     return new PromptInput({
       ...input,
       steps: 8,

app/_hooks/usePromptInputValidation.tsx

@@ -7,6 +7,7 @@ import { useStore } from 'statery'
 import { ModelStore } from '../_stores/ModelStore'
 import { Workflow } from '../_types/ArtbotTypes'
 import { AppConstants } from '../_data-models/AppConstants'
+import { DEFAULT_TURBO_EULER_LORA, DEFAULT_TURBO_SDE_LORA } from '../_data-models/PromptInput'
 
 export interface PromptError {
   message: string
@@ -98,6 +99,28 @@ export default function usePromptInputValidation(): [PromptError[], boolean] {
       }
     })
 
+    // Check if using TurboMix LoRA with correct sampler
+    if (
+      input.loras.filter(lora => lora.versionId === DEFAULT_TURBO_EULER_LORA.versionId).length > 0 &&
+      input.sampler !== 'k_euler_a'
+    ) {
+      updateErrors.push({
+        message: 'TurboMix Euler LoRA requires "k_euler_a" sampler',
+        type: 'warning'
+      })
+    }
+
+    // Check if using TurboMix LoRA with correct sampler
+    if (
+      input.loras.filter(lora => lora.versionId === DEFAULT_TURBO_SDE_LORA.versionId).length > 0 &&
+      input.sampler !== 'k_dpmpp_sde'
+    ) {
+      updateErrors.push({
+        message: 'TurboMix LCM SDE LoRA requires "k_dpmpp_sde" sampler',
+        type: 'warning'
+      })
+    }
+
     // Remix is only availble with Stable Cascade 1.0
     if (
       input.models[0] !== 'Stable Cascade 1.0' &&

app/changelog/_updates/2024.09.06.md

@@ -0,0 +1,6 @@
+# 2024.08.29 (v2.0.6-beta)
+
+- (fix) Update default TurboMix LoRA due to change in default sampler (k_euler_a)
+- (fix) Padding issues with footer
+- (feat) Add build ID to footer
+- (feat) Update "Made with" message in footer to use random rotating emoji

app/layout.tsx

@@ -74,7 +74,6 @@ export default function RootLayout({
             className="flex flex-col flex-1"
             style={{
               padding: '42px 0 0 0',
-              paddingBottom: 'var(--footer-padding)'
             }}
           >
             <HeaderNav />