alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 15:15:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve LoRA Randomizer toggle UX and semantic clarity

Browse Source 
- 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
This commit is contained in:
Will Miao
2026-01-14 18:43:46 +08:00
parent fc8240e99e
commit 30077099ec
5 changed files with 93 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
vue-widgets/src/components/LoraRandomizerWidget.vue
View File

@@ -7,7 +7,7 @@
:count-max="state.countMax.value" :count-max="state.countMax.value"
:model-strength-min="state.modelStrengthMin.value" :model-strength-min="state.modelStrengthMin.value"
:model-strength-max="state.modelStrengthMax.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-min="state.clipStrengthMin.value"
:clip-strength-max="state.clipStrengthMax.value" :clip-strength-max="state.clipStrengthMax.value"
:roll-mode="state.rollMode.value" :roll-mode="state.rollMode.value"
@@ -25,7 +25,7 @@
@update:count-max="state.countMax.value = $event" @update:count-max="state.countMax.value = $event"
@update:model-strength-min="state.modelStrengthMin.value = $event" @update:model-strength-min="state.modelStrengthMin.value = $event"
@update:model-strength-max="state.modelStrengthMax.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-min="state.clipStrengthMin.value = $event"
@update:clip-strength-max="state.clipStrengthMax.value = $event" @update:clip-strength-max="state.clipStrengthMax.value = $event"
@update:roll-mode="state.rollMode.value = $event" @update:roll-mode="state.rollMode.value = $event"

20
vue-widgets/src/components/lora-randomizer/LoraRandomizerSettingsView.vue
View File

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

14
vue-widgets/src/composables/useLoraRandomizerState.ts
View File

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

145
web/comfyui/vue-widgets/lora-manager-widgets.js
View File

@@ -1195,16 +1195,16 @@ to { transform: rotate(360deg);
text-align: center; text-align: center;
} }
.randomizer-settings[data-v-90189966] { .randomizer-settings[data-v-370936aa] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #e4e4e7; color: #e4e4e7;
} }
.settings-header[data-v-90189966] { .settings-header[data-v-370936aa] {
margin-bottom: 8px; margin-bottom: 8px;
} }
.settings-title[data-v-90189966] { .settings-title[data-v-370936aa] {
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -1213,28 +1213,28 @@ to { transform: rotate(360deg);
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
} }
.setting-section[data-v-90189966] { .setting-section[data-v-370936aa] {
margin-bottom: 16px; margin-bottom: 16px;
} }
.setting-label[data-v-90189966] { .setting-label[data-v-370936aa] {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #d4d4d8; color: #d4d4d8;
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
} }
.section-header-with-toggle[data-v-90189966] { .section-header-with-toggle[data-v-370936aa] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px; margin-bottom: 8px;
} }
.section-header-with-toggle .setting-label[data-v-90189966] { .section-header-with-toggle .setting-label[data-v-370936aa] {
margin-bottom: 0; margin-bottom: 0;
} }
/* Count Mode Tabs */ /* Count Mode Tabs */
.count-mode-tabs[data-v-90189966] { .count-mode-tabs[data-v-370936aa] {
display: flex; display: flex;
background: rgba(26, 32, 44, 0.9); background: rgba(26, 32, 44, 0.9);
border: 1px solid rgba(226, 232, 240, 0.2); border: 1px solid rgba(226, 232, 240, 0.2);
@@ -1242,7 +1242,7 @@ to { transform: rotate(360deg);
overflow: hidden; overflow: hidden;
margin-bottom: 8px; margin-bottom: 8px;
} }
.count-mode-tab[data-v-90189966] { .count-mode-tab[data-v-370936aa] {
flex: 1; flex: 1;
position: relative; position: relative;
padding: 8px 12px; padding: 8px 12px;
@@ -1250,29 +1250,29 @@ to { transform: rotate(360deg);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.count-mode-tab input[type="radio"][data-v-90189966] { .count-mode-tab input[type="radio"][data-v-370936aa] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.count-mode-tab-label[data-v-90189966] { .count-mode-tab-label[data-v-370936aa] {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: rgba(226, 232, 240, 0.7); color: rgba(226, 232, 240, 0.7);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.count-mode-tab:hover .count-mode-tab-label[data-v-90189966] { .count-mode-tab:hover .count-mode-tab-label[data-v-370936aa] {
color: rgba(226, 232, 240, 0.9); color: rgba(226, 232, 240, 0.9);
} }
.count-mode-tab.active .count-mode-tab-label[data-v-90189966] { .count-mode-tab.active .count-mode-tab-label[data-v-370936aa] {
color: rgba(191, 219, 254, 1); color: rgba(191, 219, 254, 1);
font-weight: 600; font-weight: 600;
} }
.count-mode-tab.active[data-v-90189966] { .count-mode-tab.active[data-v-370936aa] {
background: rgba(66, 153, 225, 0.2); background: rgba(66, 153, 225, 0.2);
} }
.count-mode-tab.active[data-v-90189966]::after { .count-mode-tab.active[data-v-370936aa]::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -1281,19 +1281,19 @@ to { transform: rotate(360deg);
height: 2px; height: 2px;
background: rgba(66, 153, 225, 0.9); background: rgba(66, 153, 225, 0.9);
} }
.slider-container[data-v-90189966] { .slider-container[data-v-370936aa] {
background: rgba(26, 32, 44, 0.9); background: rgba(26, 32, 44, 0.9);
border: 1px solid rgba(226, 232, 240, 0.2); border: 1px solid rgba(226, 232, 240, 0.2);
border-radius: 4px; border-radius: 4px;
padding: 4px 8px; padding: 4px 8px;
} }
.slider-container--disabled[data-v-90189966] { .slider-container--disabled[data-v-370936aa] {
opacity: 0.5; opacity: 0.5;
pointer-events: none; pointer-events: none;
} }
/* Toggle Switch (same style as LicenseSection) */ /* Toggle Switch (same style as LicenseSection) */
.toggle-switch[data-v-90189966] { .toggle-switch[data-v-370936aa] {
position: relative; position: relative;
width: 36px; width: 36px;
height: 20px; height: 20px;
@@ -1302,7 +1302,7 @@ to { transform: rotate(360deg);
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.toggle-switch__track[data-v-90189966] { .toggle-switch__track[data-v-370936aa] {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--comfy-input-bg, #333); background: var(--comfy-input-bg, #333);
@@ -1310,11 +1310,11 @@ to { transform: rotate(360deg);
border-radius: 10px; border-radius: 10px;
transition: all 0.2s; transition: all 0.2s;
} }
.toggle-switch--active .toggle-switch__track[data-v-90189966] { .toggle-switch--active .toggle-switch__track[data-v-370936aa] {
background: rgba(66, 153, 225, 0.3); background: rgba(66, 153, 225, 0.3);
border-color: rgba(66, 153, 225, 0.6); border-color: rgba(66, 153, 225, 0.6);
} }
.toggle-switch__thumb[data-v-90189966] { .toggle-switch__thumb[data-v-370936aa] {
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 2px; left: 2px;
@@ -1325,27 +1325,27 @@ to { transform: rotate(360deg);
transition: all 0.2s; transition: all 0.2s;
opacity: 0.6; opacity: 0.6;
} }
.toggle-switch--active .toggle-switch__thumb[data-v-90189966] { .toggle-switch--active .toggle-switch__thumb[data-v-370936aa] {
transform: translateX(16px); transform: translateX(16px);
background: #4299e1; background: #4299e1;
opacity: 1; opacity: 1;
} }
.toggle-switch:hover .toggle-switch__thumb[data-v-90189966] { .toggle-switch:hover .toggle-switch__thumb[data-v-370936aa] {
opacity: 1; opacity: 1;
} }
/* Roll buttons with tooltip container */ /* Roll buttons with tooltip container */
.roll-buttons-with-tooltip[data-v-90189966] { .roll-buttons-with-tooltip[data-v-370936aa] {
position: relative; position: relative;
} }
/* Roll buttons container */ /* Roll buttons container */
.roll-buttons[data-v-90189966] { .roll-buttons[data-v-370936aa] {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 8px; gap: 8px;
} }
.roll-button[data-v-90189966] { .roll-button[data-v-370936aa] {
padding: 8px 10px; padding: 8px 10px;
background: rgba(30, 30, 36, 0.6); background: rgba(30, 30, 36, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
@@ -1362,44 +1362,44 @@ to { transform: rotate(360deg);
transition: all 0.2s; transition: all 0.2s;
white-space: nowrap; white-space: nowrap;
} }
.roll-button[data-v-90189966]:hover:not(:disabled) { .roll-button[data-v-370936aa]:hover:not(:disabled) {
background: rgba(66, 153, 225, 0.2); background: rgba(66, 153, 225, 0.2);
border-color: rgba(66, 153, 225, 0.4); border-color: rgba(66, 153, 225, 0.4);
color: #bfdbfe; color: #bfdbfe;
} }
.roll-button.selected[data-v-90189966] { .roll-button.selected[data-v-370936aa] {
background: rgba(66, 153, 225, 0.3); background: rgba(66, 153, 225, 0.3);
border-color: rgba(66, 153, 225, 0.6); border-color: rgba(66, 153, 225, 0.6);
color: #e4e4e7; color: #e4e4e7;
box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.3); box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.3);
} }
.roll-button[data-v-90189966]:disabled { .roll-button[data-v-370936aa]:disabled {
opacity: 0.4; opacity: 0.4;
cursor: not-allowed; cursor: not-allowed;
} }
.roll-button__icon[data-v-90189966] { .roll-button__icon[data-v-370936aa] {
width: 20px; width: 20px;
height: 20px; height: 20px;
flex-shrink: 0; flex-shrink: 0;
} }
.roll-button__text[data-v-90189966] { .roll-button__text[data-v-370936aa] {
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
line-height: 1.2; line-height: 1.2;
} }
/* Tooltip transitions */ /* Tooltip transitions */
.tooltip-enter-active[data-v-90189966], .tooltip-enter-active[data-v-370936aa],
.tooltip-leave-active[data-v-90189966] { .tooltip-leave-active[data-v-370936aa] {
transition: opacity 0.15s ease, transform 0.15s ease; transition: opacity 0.15s ease, transform 0.15s ease;
} }
.tooltip-enter-from[data-v-90189966], .tooltip-enter-from[data-v-370936aa],
.tooltip-leave-to[data-v-90189966] { .tooltip-leave-to[data-v-370936aa] {
opacity: 0; opacity: 0;
transform: translateY(4px); transform: translateY(4px);
} }
.lora-randomizer-widget[data-v-69f71f06] { .lora-randomizer-widget[data-v-6f60504d] {
padding: 12px; padding: 12px;
background: rgba(40, 44, 52, 0.6); background: rgba(40, 44, 52, 0.6);
border-radius: 4px; border-radius: 4px;
@@ -11672,13 +11672,12 @@ const _hoisted_12 = { class: "setting-section" };
const _hoisted_13 = { class: "section-header-with-toggle" }; const _hoisted_13 = { class: "section-header-with-toggle" };
const _hoisted_14 = { class: "setting-label" }; const _hoisted_14 = { class: "setting-label" };
const _hoisted_15 = ["aria-checked"]; const _hoisted_15 = ["aria-checked"];
const _hoisted_16 = { class: "slider-container" }; const _hoisted_16 = { class: "setting-section" };
const _hoisted_17 = { class: "setting-section" }; const _hoisted_17 = { class: "roll-buttons-with-tooltip" };
const _hoisted_18 = { class: "roll-buttons-with-tooltip" }; const _hoisted_18 = { class: "roll-buttons" };
const _hoisted_19 = { class: "roll-buttons" }; const _hoisted_19 = ["disabled"];
const _hoisted_20 = ["disabled"]; const _hoisted_20 = ["disabled"];
const _hoisted_21 = ["disabled"]; const _hoisted_21 = ["disabled"];
const _hoisted_22 = ["disabled"];
const _sfc_main$1 = /* @__PURE__ */ defineComponent({ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "LoraRandomizerSettingsView", __name: "LoraRandomizerSettingsView",
props: { props: {
@@ -11688,7 +11687,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
countMax: {}, countMax: {},
modelStrengthMin: {}, modelStrengthMin: {},
modelStrengthMax: {}, modelStrengthMax: {},
useSameClipStrength: { type: Boolean }, useCustomClipRange: { type: Boolean },
clipStrengthMin: {}, clipStrengthMin: {},
clipStrengthMax: {}, clipStrengthMax: {},
rollMode: {}, rollMode: {},
@@ -11701,7 +11700,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
recommendedStrengthScaleMin: {}, recommendedStrengthScaleMin: {},
recommendedStrengthScaleMax: {} recommendedStrengthScaleMax: {}
}, },
emits: ["update:countMode", "update:countFixed", "update:countMin", "update:countMax", "update:modelStrengthMin", "update:modelStrengthMax", "update:useSameClipStrength", "update:clipStrengthMin", "update:clipStrengthMax", "update:rollMode", "update:useRecommendedStrength", "update:recommendedStrengthScaleMin", "update:recommendedStrengthScaleMax", "generate-fixed", "always-randomize", "reuse-last"], emits: ["update:countMode", "update:countFixed", "update:countMin", "update:countMax", "update:modelStrengthMin", "update:modelStrengthMax", "update:useCustomClipRange", "update:clipStrengthMin", "update:clipStrengthMax", "update:rollMode", "update:useRecommendedStrength", "update:recommendedStrengthScaleMin", "update:recommendedStrengthScaleMax", "generate-fixed", "always-randomize", "reuse-last"],
setup(__props) { setup(__props) {
const strengthSegments = [ const strengthSegments = [
{ min: -10, max: -2, widthPercent: 20 }, { min: -10, max: -2, widthPercent: 20 },
@@ -11792,14 +11791,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
]), ]),
createBaseVNode("div", _hoisted_9, [ createBaseVNode("div", _hoisted_9, [
createBaseVNode("div", _hoisted_10, [ createBaseVNode("div", _hoisted_10, [
_cache[23] || (_cache[23] = createBaseVNode("label", { class: "setting-label" }, " Respect Recommended Strength ", -1)), _cache[23] || (_cache[23] = createBaseVNode("label", { class: "setting-label" }, " Preset Strength Scale ", -1)),
createBaseVNode("button", { createBaseVNode("button", {
type: "button", type: "button",
class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useRecommendedStrength }]), class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useRecommendedStrength }]),
onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("update:useRecommendedStrength", !__props.useRecommendedStrength)), onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("update:useRecommendedStrength", !__props.useRecommendedStrength)),
role: "switch", role: "switch",
"aria-checked": __props.useRecommendedStrength, "aria-checked": __props.useRecommendedStrength,
title: "Use recommended strength values from usage tips" title: "Use scaled preset strength when enabled"
}, [..._cache[22] || (_cache[22] = [ }, [..._cache[22] || (_cache[22] = [
createBaseVNode("span", { class: "toggle-switch__track" }, null, -1), createBaseVNode("span", { class: "toggle-switch__track" }, null, -1),
createBaseVNode("span", { class: "toggle-switch__thumb" }, null, -1) createBaseVNode("span", { class: "toggle-switch__thumb" }, null, -1)
@@ -11823,20 +11822,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
]), ]),
createBaseVNode("div", _hoisted_12, [ createBaseVNode("div", _hoisted_12, [
createBaseVNode("div", _hoisted_13, [ createBaseVNode("div", _hoisted_13, [
createBaseVNode("label", _hoisted_14, " Clip Strength Range - " + toDisplayString(__props.useSameClipStrength ? "Use Model Strength" : "Custom Range"), 1), createBaseVNode("label", _hoisted_14, " Clip Strength Range - " + toDisplayString(__props.useCustomClipRange ? "Custom Range" : "Use Model Strength"), 1),
createBaseVNode("button", { createBaseVNode("button", {
type: "button", type: "button",
class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useSameClipStrength }]), class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useCustomClipRange }]),
onClick: _cache[10] || (_cache[10] = ($event) => _ctx.$emit("update:useSameClipStrength", !__props.useSameClipStrength)), onClick: _cache[10] || (_cache[10] = ($event) => _ctx.$emit("update:useCustomClipRange", !__props.useCustomClipRange)),
role: "switch", role: "switch",
"aria-checked": __props.useSameClipStrength, "aria-checked": __props.useCustomClipRange,
title: "Lock clip strength to model strength" title: "Use custom clip strength range when enabled, otherwise use model strength"
}, [..._cache[24] || (_cache[24] = [ }, [..._cache[24] || (_cache[24] = [
createBaseVNode("span", { class: "toggle-switch__track" }, null, -1), createBaseVNode("span", { class: "toggle-switch__track" }, null, -1),
createBaseVNode("span", { class: "toggle-switch__thumb" }, null, -1) createBaseVNode("span", { class: "toggle-switch__thumb" }, null, -1)
])], 10, _hoisted_15) ])], 10, _hoisted_15)
]), ]),
createBaseVNode("div", _hoisted_16, [ createBaseVNode("div", {
class: normalizeClass(["slider-container", { "slider-container--disabled": __props.isClipStrengthDisabled }])
}, [
createVNode(DualRangeSlider, { createVNode(DualRangeSlider, {
min: -10, min: -10,
max: 10, max: 10,
@@ -11850,26 +11851,26 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
"onUpdate:valueMin": _cache[11] || (_cache[11] = ($event) => _ctx.$emit("update:clipStrengthMin", $event)), "onUpdate:valueMin": _cache[11] || (_cache[11] = ($event) => _ctx.$emit("update:clipStrengthMin", $event)),
"onUpdate:valueMax": _cache[12] || (_cache[12] = ($event) => _ctx.$emit("update:clipStrengthMax", $event)) "onUpdate:valueMax": _cache[12] || (_cache[12] = ($event) => _ctx.$emit("update:clipStrengthMax", $event))
}, null, 8, ["value-min", "value-max", "disabled"]) }, null, 8, ["value-min", "value-max", "disabled"])
]) ], 2)
]), ]),
createBaseVNode("div", _hoisted_17, [ createBaseVNode("div", _hoisted_16, [
_cache[28] || (_cache[28] = createBaseVNode("label", { class: "setting-label" }, "Roll Mode", -1)), _cache[28] || (_cache[28] = createBaseVNode("label", { class: "setting-label" }, "Roll Mode", -1)),
createBaseVNode("div", _hoisted_18, [ createBaseVNode("div", _hoisted_17, [
createBaseVNode("div", _hoisted_19, [ createBaseVNode("div", _hoisted_18, [
createBaseVNode("button", { createBaseVNode("button", {
class: normalizeClass(["roll-button", { selected: __props.rollMode === "fixed" }]), class: normalizeClass(["roll-button", { selected: __props.rollMode === "fixed" }]),
disabled: __props.isRolling, disabled: __props.isRolling,
onClick: _cache[13] || (_cache[13] = ($event) => _ctx.$emit("generate-fixed")) onClick: _cache[13] || (_cache[13] = ($event) => _ctx.$emit("generate-fixed"))
}, [..._cache[25] || (_cache[25] = [ }, [..._cache[25] || (_cache[25] = [
createStaticVNode('<svg class="roll-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-90189966><rect x="2" y="2" width="20" height="20" rx="5" data-v-90189966></rect><circle cx="12" cy="12" r="3" data-v-90189966></circle><circle cx="6" cy="8" r="1.5" data-v-90189966></circle><circle cx="18" cy="16" r="1.5" data-v-90189966></circle></svg><span class="roll-button__text" data-v-90189966>Generate Fixed</span>', 2) createStaticVNode('<svg class="roll-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-370936aa><rect x="2" y="2" width="20" height="20" rx="5" data-v-370936aa></rect><circle cx="12" cy="12" r="3" data-v-370936aa></circle><circle cx="6" cy="8" r="1.5" data-v-370936aa></circle><circle cx="18" cy="16" r="1.5" data-v-370936aa></circle></svg><span class="roll-button__text" data-v-370936aa>Generate Fixed</span>', 2)
])], 10, _hoisted_20), ])], 10, _hoisted_19),
createBaseVNode("button", { createBaseVNode("button", {
class: normalizeClass(["roll-button", { selected: __props.rollMode === "always" }]), class: normalizeClass(["roll-button", { selected: __props.rollMode === "always" }]),
disabled: __props.isRolling, disabled: __props.isRolling,
onClick: _cache[14] || (_cache[14] = ($event) => _ctx.$emit("always-randomize")) onClick: _cache[14] || (_cache[14] = ($event) => _ctx.$emit("always-randomize"))
}, [..._cache[26] || (_cache[26] = [ }, [..._cache[26] || (_cache[26] = [
createStaticVNode('<svg class="roll-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-90189966><path d="M21 12a9 9 0 1 1-6.219-8.56" data-v-90189966></path><path d="M21 3v5h-5" data-v-90189966></path><circle cx="12" cy="12" r="3" data-v-90189966></circle><circle cx="6" cy="8" r="1.5" data-v-90189966></circle><circle cx="18" cy="16" r="1.5" data-v-90189966></circle></svg><span class="roll-button__text" data-v-90189966>Always Randomize</span>', 2) createStaticVNode('<svg class="roll-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-370936aa><path d="M21 12a9 9 0 1 1-6.219-8.56" data-v-370936aa></path><path d="M21 3v5h-5" data-v-370936aa></path><circle cx="12" cy="12" r="3" data-v-370936aa></circle><circle cx="6" cy="8" r="1.5" data-v-370936aa></circle><circle cx="18" cy="16" r="1.5" data-v-370936aa></circle></svg><span class="roll-button__text" data-v-370936aa>Always Randomize</span>', 2)
])], 10, _hoisted_21), ])], 10, _hoisted_20),
createBaseVNode("button", { createBaseVNode("button", {
class: normalizeClass(["roll-button", { selected: __props.rollMode === "fixed" && __props.canReuseLast && areLorasEqual(__props.currentLoras, __props.lastUsed) }]), class: normalizeClass(["roll-button", { selected: __props.rollMode === "fixed" && __props.canReuseLast && areLorasEqual(__props.currentLoras, __props.lastUsed) }]),
disabled: !__props.canReuseLast, disabled: !__props.canReuseLast,
@@ -11890,7 +11891,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
createBaseVNode("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" }) createBaseVNode("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11" })
], -1), ], -1),
createBaseVNode("span", { class: "roll-button__text" }, "Reuse Last", -1) createBaseVNode("span", { class: "roll-button__text" }, "Reuse Last", -1)
])], 42, _hoisted_22) ])], 42, _hoisted_21)
]), ]),
createVNode(Transition, { name: "tooltip" }, { createVNode(Transition, { name: "tooltip" }, {
default: withCtx(() => [ default: withCtx(() => [
@@ -11907,7 +11908,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
}; };
} }
}); });
const LoraRandomizerSettingsView = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-90189966"]]); const LoraRandomizerSettingsView = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-370936aa"]]);
function useLoraRandomizerState(widget) { function useLoraRandomizerState(widget) {
const countMode = ref("range"); const countMode = ref("range");
const countFixed = ref(3); const countFixed = ref(3);
@@ -11915,7 +11916,7 @@ function useLoraRandomizerState(widget) {
const countMax = ref(5); const countMax = ref(5);
const modelStrengthMin = ref(0); const modelStrengthMin = ref(0);
const modelStrengthMax = ref(1); const modelStrengthMax = ref(1);
const useSameClipStrength = ref(true); const useCustomClipRange = ref(false);
const clipStrengthMin = ref(0); const clipStrengthMin = ref(0);
const clipStrengthMax = ref(1); const clipStrengthMax = ref(1);
const rollMode = ref("fixed"); const rollMode = ref("fixed");
@@ -11931,7 +11932,7 @@ function useLoraRandomizerState(widget) {
count_max: countMax.value, count_max: countMax.value,
model_strength_min: modelStrengthMin.value, model_strength_min: modelStrengthMin.value,
model_strength_max: modelStrengthMax.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_min: clipStrengthMin.value,
clip_strength_max: clipStrengthMax.value, clip_strength_max: clipStrengthMax.value,
roll_mode: rollMode.value, roll_mode: rollMode.value,
@@ -11947,7 +11948,7 @@ function useLoraRandomizerState(widget) {
countMax.value = config.count_max || 5; countMax.value = config.count_max || 5;
modelStrengthMin.value = config.model_strength_min ?? 0; modelStrengthMin.value = config.model_strength_min ?? 0;
modelStrengthMax.value = config.model_strength_max ?? 1; modelStrengthMax.value = config.model_strength_max ?? 1;
useSameClipStrength.value = config.use_same_clip_strength ?? true; useCustomClipRange.value = !(config.use_same_clip_strength ?? true);
clipStrengthMin.value = config.clip_strength_min ?? 0; clipStrengthMin.value = config.clip_strength_min ?? 0;
clipStrengthMax.value = config.clip_strength_max ?? 1; clipStrengthMax.value = config.clip_strength_max ?? 1;
const rawRollMode = config.roll_mode; const rawRollMode = config.roll_mode;
@@ -11972,7 +11973,7 @@ function useLoraRandomizerState(widget) {
const requestBody = { const requestBody = {
model_strength_min: config.model_strength_min, model_strength_min: config.model_strength_min,
model_strength_max: config.model_strength_max, 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_min: config.clip_strength_min,
clip_strength_max: config.clip_strength_max, clip_strength_max: config.clip_strength_max,
locked_loras: lockedLoras, locked_loras: lockedLoras,
@@ -12018,7 +12019,7 @@ function useLoraRandomizerState(widget) {
} }
return null; return null;
}; };
const isClipStrengthDisabled = computed(() => useSameClipStrength.value); const isClipStrengthDisabled = computed(() => !useCustomClipRange.value);
const isRecommendedStrengthEnabled = computed(() => useRecommendedStrength.value); const isRecommendedStrengthEnabled = computed(() => useRecommendedStrength.value);
watch([ watch([
countMode, countMode,
@@ -12027,7 +12028,7 @@ function useLoraRandomizerState(widget) {
countMax, countMax,
modelStrengthMin, modelStrengthMin,
modelStrengthMax, modelStrengthMax,
useSameClipStrength, useCustomClipRange,
clipStrengthMin, clipStrengthMin,
clipStrengthMax, clipStrengthMax,
rollMode, rollMode,
@@ -12050,7 +12051,7 @@ function useLoraRandomizerState(widget) {
countMax, countMax,
modelStrengthMin, modelStrengthMin,
modelStrengthMax, modelStrengthMax,
useSameClipStrength, useCustomClipRange,
clipStrengthMin, clipStrengthMin,
clipStrengthMax, clipStrengthMax,
rollMode, rollMode,
@@ -12198,7 +12199,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
"count-max": unref(state).countMax.value, "count-max": unref(state).countMax.value,
"model-strength-min": unref(state).modelStrengthMin.value, "model-strength-min": unref(state).modelStrengthMin.value,
"model-strength-max": unref(state).modelStrengthMax.value, "model-strength-max": unref(state).modelStrengthMax.value,
"use-same-clip-strength": unref(state).useSameClipStrength.value, "use-custom-clip-range": unref(state).useCustomClipRange.value,
"clip-strength-min": unref(state).clipStrengthMin.value, "clip-strength-min": unref(state).clipStrengthMin.value,
"clip-strength-max": unref(state).clipStrengthMax.value, "clip-strength-max": unref(state).clipStrengthMax.value,
"roll-mode": unref(state).rollMode.value, "roll-mode": unref(state).rollMode.value,
@@ -12216,7 +12217,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
"onUpdate:countMax": _cache[3] || (_cache[3] = ($event) => unref(state).countMax.value = $event), "onUpdate:countMax": _cache[3] || (_cache[3] = ($event) => unref(state).countMax.value = $event),
"onUpdate:modelStrengthMin": _cache[4] || (_cache[4] = ($event) => unref(state).modelStrengthMin.value = $event), "onUpdate:modelStrengthMin": _cache[4] || (_cache[4] = ($event) => unref(state).modelStrengthMin.value = $event),
"onUpdate:modelStrengthMax": _cache[5] || (_cache[5] = ($event) => unref(state).modelStrengthMax.value = $event), "onUpdate:modelStrengthMax": _cache[5] || (_cache[5] = ($event) => unref(state).modelStrengthMax.value = $event),
"onUpdate:useSameClipStrength": _cache[6] || (_cache[6] = ($event) => unref(state).useSameClipStrength.value = $event), "onUpdate:useCustomClipRange": _cache[6] || (_cache[6] = ($event) => unref(state).useCustomClipRange.value = $event),
"onUpdate:clipStrengthMin": _cache[7] || (_cache[7] = ($event) => unref(state).clipStrengthMin.value = $event), "onUpdate:clipStrengthMin": _cache[7] || (_cache[7] = ($event) => unref(state).clipStrengthMin.value = $event),
"onUpdate:clipStrengthMax": _cache[8] || (_cache[8] = ($event) => unref(state).clipStrengthMax.value = $event), "onUpdate:clipStrengthMax": _cache[8] || (_cache[8] = ($event) => unref(state).clipStrengthMax.value = $event),
"onUpdate:rollMode": _cache[9] || (_cache[9] = ($event) => unref(state).rollMode.value = $event), "onUpdate:rollMode": _cache[9] || (_cache[9] = ($event) => unref(state).rollMode.value = $event),
@@ -12226,12 +12227,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
onGenerateFixed: handleGenerateFixed, onGenerateFixed: handleGenerateFixed,
onAlwaysRandomize: handleAlwaysRandomize, onAlwaysRandomize: handleAlwaysRandomize,
onReuseLast: handleReuseLast onReuseLast: handleReuseLast
}, null, 8, ["count-mode", "count-fixed", "count-min", "count-max", "model-strength-min", "model-strength-max", "use-same-clip-strength", "clip-strength-min", "clip-strength-max", "roll-mode", "is-rolling", "is-clip-strength-disabled", "last-used", "current-loras", "can-reuse-last", "use-recommended-strength", "recommended-strength-scale-min", "recommended-strength-scale-max"]) }, null, 8, ["count-mode", "count-fixed", "count-min", "count-max", "model-strength-min", "model-strength-max", "use-custom-clip-range", "clip-strength-min", "clip-strength-max", "roll-mode", "is-rolling", "is-clip-strength-disabled", "last-used", "current-loras", "can-reuse-last", "use-recommended-strength", "recommended-strength-scale-min", "recommended-strength-scale-max"])
]); ]);
}; };
} }
}); });
const LoraRandomizerWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-69f71f06"]]); const LoraRandomizerWidget = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6f60504d"]]);
const app = {}; const app = {};
const ROOT_GRAPH_ID = "root"; const ROOT_GRAPH_ID = "root";
function isMapLike(collection) { function isMapLike(collection) {

2
web/comfyui/vue-widgets/lora-manager-widgets.js.map
View File

File diff suppressed because one or more lines are too long