feat(cycler): add preset strength scale (#865)

vue-widgets/src/components/LoraCyclerWidget.vue

@@ -8,6 +8,8 @@
       :model-strength="state.modelStrength.value"
       :clip-strength="state.clipStrength.value"
       :use-custom-clip-range="state.useCustomClipRange.value"
+      :use-preset-strength="state.usePresetStrength.value"
+      :preset-strength-scale="state.presetStrengthScale.value"
       :is-clip-strength-disabled="state.isClipStrengthDisabled.value"
       :is-loading="state.isLoading.value"
       :repeat-count="state.repeatCount.value"
@@ -22,6 +24,8 @@
       @update:model-strength="state.modelStrength.value = $event"
       @update:clip-strength="state.clipStrength.value = $event"
       @update:use-custom-clip-range="handleUseCustomClipRangeChange"
+      @update:use-preset-strength="state.usePresetStrength.value = $event"
+      @update:preset-strength-scale="state.presetStrengthScale.value = $event"
       @update:repeat-count="handleRepeatCountChange"
       @update:include-no-lora="handleIncludeNoLoraChange"
       @toggle-pause="handleTogglePause"

vue-widgets/src/components/lora-cycler/LoraCyclerSettingsView.vue

@@ -131,6 +131,38 @@
       </div>
     </div>
 
+    <!-- Preset Strength Scale -->
+    <div class="setting-section">
+      <div class="section-header-with-toggle">
+        <label class="setting-label">
+          Preset Strength Scale
+        </label>
+        <button
+          type="button"
+          class="toggle-switch"
+          :class="{ 'toggle-switch--active': usePresetStrength }"
+          @click="$emit('update:usePresetStrength', !usePresetStrength)"
+          role="switch"
+          :aria-checked="usePresetStrength"
+          title="Use scaled preset strength when enabled"
+        >
+          <span class="toggle-switch__track"></span>
+          <span class="toggle-switch__thumb"></span>
+        </button>
+      </div>
+      <div class="slider-container" :class="{ 'slider-container--disabled': !usePresetStrength }">
+        <SingleSlider
+          :min="0"
+          :max="2"
+          :value="presetStrengthScale"
+          :step="0.1"
+          :default-range="{ min: 0.5, max: 1.0 }"
+          :disabled="!usePresetStrength"
+          @update:value="$emit('update:presetStrengthScale', $event)"
+        />
+      </div>
+    </div>
+
     <!-- Clip Strength -->
     <div class="setting-section">
       <div class="section-header-with-toggle">
@@ -198,6 +230,8 @@ const props = defineProps<{
   modelStrength: number
   clipStrength: number
   useCustomClipRange: boolean
+  usePresetStrength: boolean
+  presetStrengthScale: number
   isClipStrengthDisabled: boolean
   repeatCount: number
   repeatUsed: number
@@ -214,6 +248,8 @@ const emit = defineEmits<{
   'update:modelStrength': [value: number]
   'update:clipStrength': [value: number]
   'update:useCustomClipRange': [value: boolean]
+  'update:usePresetStrength': [value: boolean]
+  'update:presetStrengthScale': [value: number]
   'update:repeatCount': [value: number]
   'update:includeNoLora': [value: boolean]
   'toggle-pause': []

vue-widgets/src/composables/types.ts

@@ -80,6 +80,8 @@ export interface CyclerConfig {
   model_strength: number
   clip_strength: number
   use_same_clip_strength: boolean
+  use_preset_strength: boolean
+  preset_strength_scale: number
   sort_by: 'filename' | 'model_name'
   current_lora_name: string   // For display
   current_lora_filename: string

vue-widgets/src/composables/useLoraCyclerState.ts

@@ -19,6 +19,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
   const modelStrength = ref(1.0)
   const clipStrength = ref(1.0)
   const useCustomClipRange = ref(false)
+  const usePresetStrength = ref(false)
+  const presetStrengthScale = ref(1.0)
   const sortBy = ref<'filename' | 'model_name'>('filename')
   const currentLoraName = ref('')
   const currentLoraFilename = ref('')
@@ -52,6 +54,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
         model_strength: modelStrength.value,
         clip_strength: clipStrength.value,
         use_same_clip_strength: !useCustomClipRange.value,
+        use_preset_strength: usePresetStrength.value,
+        preset_strength_scale: presetStrengthScale.value,
         sort_by: sortBy.value,
         current_lora_name: currentLoraName.value,
         current_lora_filename: currentLoraFilename.value,
@@ -70,6 +74,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
       model_strength: modelStrength.value,
       clip_strength: clipStrength.value,
       use_same_clip_strength: !useCustomClipRange.value,
+      use_preset_strength: usePresetStrength.value,
+      preset_strength_scale: presetStrengthScale.value,
       sort_by: sortBy.value,
       current_lora_name: currentLoraName.value,
       current_lora_filename: currentLoraFilename.value,
@@ -94,6 +100,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
       modelStrength.value = config.model_strength ?? 1.0
       clipStrength.value = config.clip_strength ?? 1.0
       useCustomClipRange.value = !(config.use_same_clip_strength ?? true)
+      usePresetStrength.value = config.use_preset_strength ?? false
+      presetStrengthScale.value = config.preset_strength_scale ?? 1.0
       sortBy.value = config.sort_by || 'filename'
       currentLoraName.value = config.current_lora_name || ''
       currentLoraFilename.value = config.current_lora_filename || ''
@@ -277,6 +285,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
     modelStrength,
     clipStrength,
     useCustomClipRange,
+    usePresetStrength,
+    presetStrengthScale,
     sortBy,
     currentLoraName,
     currentLoraFilename,
@@ -296,6 +306,8 @@ export function useLoraCyclerState(widget: ComponentWidget<CyclerConfig>) {
     modelStrength,
     clipStrength,
     useCustomClipRange,
+    usePresetStrength,
+    presetStrengthScale,
     sortBy,
     currentLoraName,
     currentLoraFilename,

vue-widgets/src/main.ts

@@ -18,7 +18,7 @@ const LORA_RANDOMIZER_WIDGET_MIN_WIDTH = 500
 const LORA_RANDOMIZER_WIDGET_MIN_HEIGHT = 448
 const LORA_RANDOMIZER_WIDGET_MAX_HEIGHT = LORA_RANDOMIZER_WIDGET_MIN_HEIGHT
 const LORA_CYCLER_WIDGET_MIN_WIDTH = 380
-const LORA_CYCLER_WIDGET_MIN_HEIGHT = 344
+const LORA_CYCLER_WIDGET_MIN_HEIGHT = 408
 const LORA_CYCLER_WIDGET_MAX_HEIGHT = LORA_CYCLER_WIDGET_MIN_HEIGHT
 const JSON_DISPLAY_WIDGET_MIN_WIDTH = 300
 const JSON_DISPLAY_WIDGET_MIN_HEIGHT = 200
@@ -244,7 +244,24 @@ function createLoraCyclerWidget(node) {
 
   forwardMiddleMouseToCanvas(container)
 
-  let internalValue: CyclerConfig | undefined
+  const defaultConfig: CyclerConfig = {
+    current_index: 1,
+    total_count: 0,
+    pool_config_hash: '',
+    model_strength: 1.0,
+    clip_strength: 1.0,
+    use_same_clip_strength: true,
+    use_preset_strength: false,
+    preset_strength_scale: 1.0,
+    sort_by: 'filename',
+    current_lora_name: '',
+    current_lora_filename: '',
+    repeat_count: 1,
+    repeat_used: 0,
+    is_paused: false,
+    include_no_lora: false,
+  }
+  let internalValue: CyclerConfig | undefined = defaultConfig
 
   const widget = node.addDOMWidget(
     'cycler_config',