fix: improve LoRA Randomizer toggle UX and semantic clarity

- Fix toggle UX consistency: both toggles now follow 'enabled → slider enabled' pattern
- Rename useSameClipStrength to useCustomClipRange for semantic clarity
- Update 'Respect Recommended Strength' label to 'Preset Strength Scale'
- Add explicit conversion logic in composable for backend compatibility
- Add visual disabled state for clip strength slider container

vue-widgets/src/components/LoraRandomizerWidget.vue

@@ -7,7 +7,7 @@
       :count-max="state.countMax.value"
       :model-strength-min="state.modelStrengthMin.value"
       :model-strength-max="state.modelStrengthMax.value"
-      :use-same-clip-strength="state.useSameClipStrength.value"
+      :use-custom-clip-range="state.useCustomClipRange.value"
       :clip-strength-min="state.clipStrengthMin.value"
       :clip-strength-max="state.clipStrengthMax.value"
       :roll-mode="state.rollMode.value"
@@ -25,7 +25,7 @@
       @update:count-max="state.countMax.value = $event"
       @update:model-strength-min="state.modelStrengthMin.value = $event"
       @update:model-strength-max="state.modelStrengthMax.value = $event"
-      @update:use-same-clip-strength="state.useSameClipStrength.value = $event"
+      @update:use-custom-clip-range="state.useCustomClipRange.value = $event"
       @update:clip-strength-min="state.clipStrengthMin.value = $event"
       @update:clip-strength-max="state.clipStrengthMax.value = $event"
       @update:roll-mode="state.rollMode.value = $event"

vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue

@@ -77,7 +77,7 @@
     <div class="setting-section">
       <div class="section-header-with-toggle">
         <label class="setting-label">
-          Respect Recommended Strength
+          Preset Strength Scale
         </label>
         <button
           type="button"
@@ -86,7 +86,7 @@
           @click="$emit('update:useRecommendedStrength', !useRecommendedStrength)"
           role="switch"
           :aria-checked="useRecommendedStrength"
-          title="Use recommended strength values from usage tips"
+          title="Use scaled preset strength when enabled"
         >
           <span class="toggle-switch__track"></span>
           <span class="toggle-switch__thumb"></span>
@@ -111,22 +111,22 @@
     <div class="setting-section">
       <div class="section-header-with-toggle">
         <label class="setting-label">
-          Clip Strength Range - {{ useSameClipStrength ? 'Use Model Strength' : 'Custom Range' }}
+          Clip Strength Range - {{ useCustomClipRange ? 'Custom Range' : 'Use Model Strength' }}
         </label>
         <button
           type="button"
           class="toggle-switch"
-          :class="{ 'toggle-switch--active': useSameClipStrength }"
-          @click="$emit('update:useSameClipStrength', !useSameClipStrength)"
+          :class="{ 'toggle-switch--active': useCustomClipRange }"
+          @click="$emit('update:useCustomClipRange', !useCustomClipRange)"
           role="switch"
-          :aria-checked="useSameClipStrength"
-          title="Lock clip strength to model strength"
+          :aria-checked="useCustomClipRange"
+          title="Use custom clip strength range when enabled, otherwise use model strength"
         >
           <span class="toggle-switch__track"></span>
           <span class="toggle-switch__thumb"></span>
         </button>
       </div>
-      <div class="slider-container">
+      <div class="slider-container" :class="{ 'slider-container--disabled': isClipStrengthDisabled }">
         <DualRangeSlider
           :min="-10"
           :max="10"
@@ -225,7 +225,7 @@ defineProps<{
   countMax: number
   modelStrengthMin: number
   modelStrengthMax: number
-  useSameClipStrength: boolean
+  useCustomClipRange: boolean
   clipStrengthMin: number
   clipStrengthMax: number
   rollMode: 'fixed' | 'always'
@@ -246,7 +246,7 @@ defineEmits<{
   'update:countMax': [value: number]
   'update:modelStrengthMin': [value: number]
   'update:modelStrengthMax': [value: number]
-  'update:useSameClipStrength': [value: boolean]
+  'update:useCustomClipRange': [value: boolean]
   'update:clipStrengthMin': [value: number]
   'update:clipStrengthMax': [value: number]
   'update:rollMode': [value: 'fixed' | 'always']

vue-widgets/src/composables/useLoraRandomizerState.ts

@@ -9,7 +9,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
   const countMax = ref(5)
   const modelStrengthMin = ref(0.0)
   const modelStrengthMax = ref(1.0)
-  const useSameClipStrength = ref(true)
+  const useCustomClipRange = ref(false)
   const clipStrengthMin = ref(0.0)
   const clipStrengthMax = ref(1.0)
   const rollMode = ref<'fixed' | 'always'>('fixed')
@@ -29,7 +29,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
     count_max: countMax.value,
     model_strength_min: modelStrengthMin.value,
     model_strength_max: modelStrengthMax.value,
-    use_same_clip_strength: useSameClipStrength.value,
+    use_same_clip_strength: !useCustomClipRange.value,
     clip_strength_min: clipStrengthMin.value,
     clip_strength_max: clipStrengthMax.value,
     roll_mode: rollMode.value,
@@ -47,7 +47,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
     countMax.value = config.count_max || 5
     modelStrengthMin.value = config.model_strength_min ?? 0.0
     modelStrengthMax.value = config.model_strength_max ?? 1.0
-    useSameClipStrength.value = config.use_same_clip_strength ?? true
+    useCustomClipRange.value = !(config.use_same_clip_strength ?? true)
     clipStrengthMin.value = config.clip_strength_min ?? 0.0
     clipStrengthMax.value = config.clip_strength_max ?? 1.0
     // Migrate old roll_mode values to new ones
@@ -81,7 +81,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
       const requestBody: any = {
         model_strength_min: config.model_strength_min,
         model_strength_max: config.model_strength_max,
-        use_same_clip_strength: config.use_same_clip_strength,
+        use_same_clip_strength: !useCustomClipRange.value,
         clip_strength_min: config.clip_strength_min,
         clip_strength_max: config.clip_strength_max,
         locked_loras: lockedLoras,
@@ -141,7 +141,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
   }
 
   // Computed properties
-  const isClipStrengthDisabled = computed(() => useSameClipStrength.value)
+  const isClipStrengthDisabled = computed(() => !useCustomClipRange.value)
   const isRecommendedStrengthEnabled = computed(() => useRecommendedStrength.value)
 
   // Watch all state changes and update widget value
@@ -152,7 +152,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
     countMax,
     modelStrengthMin,
     modelStrengthMax,
-    useSameClipStrength,
+    useCustomClipRange,
     clipStrengthMin,
     clipStrengthMax,
     rollMode,
@@ -176,7 +176,7 @@ export function useLoraRandomizerState(widget: ComponentWidget) {
     countMax,
     modelStrengthMin,
     modelStrengthMax,
-    useSameClipStrength,
+    useCustomClipRange,
     clipStrengthMin,
     clipStrengthMax,
     rollMode,