mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-21 21:22:11 -03:00
refactor(LoraCyclerWidget): UI/UX improvements
- Replace REP badge with segmented progress bar for repeat indicator - Reorganize Starting Index & Repeat controls into aligned groups - Change repeat format from '× [count] times' to '[count] ×' for better alignment - Remove unnecessary refresh button and related logic
This commit is contained in:
@@ -23,7 +23,6 @@
|
|||||||
@update:repeat-count="handleRepeatCountChange"
|
@update:repeat-count="handleRepeatCountChange"
|
||||||
@toggle-pause="handleTogglePause"
|
@toggle-pause="handleTogglePause"
|
||||||
@reset-index="handleResetIndex"
|
@reset-index="handleResetIndex"
|
||||||
@refresh="handleRefresh"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -136,16 +135,6 @@ const handleUseCustomClipRangeChange = (newValue: boolean) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle refresh button click
|
|
||||||
const handleRefresh = async () => {
|
|
||||||
try {
|
|
||||||
const poolConfig = getPoolConfig()
|
|
||||||
await state.refreshList(poolConfig)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('[LoraCyclerWidget] Error refreshing:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle repeat count change
|
// Handle repeat count change
|
||||||
const handleRepeatCountChange = (newValue: number) => {
|
const handleRepeatCountChange = (newValue: number) => {
|
||||||
state.repeatCount.value = newValue
|
state.repeatCount.value = newValue
|
||||||
|
|||||||
@@ -16,97 +16,92 @@
|
|||||||
<span class="progress-separator">/</span>
|
<span class="progress-separator">/</span>
|
||||||
<span class="progress-total">{{ totalCount }}</span>
|
<span class="progress-total">{{ totalCount }}</span>
|
||||||
|
|
||||||
<!-- Repeat indicator (only shown when repeatCount > 1) -->
|
<!-- Repeat progress indicator (only shown when repeatCount > 1) -->
|
||||||
<div v-if="repeatCount > 1" class="repeat-badge">
|
<div v-if="repeatCount > 1" class="repeat-progress">
|
||||||
<span class="repeat-badge-label">Rep</span>
|
<div class="repeat-progress-track">
|
||||||
<span class="repeat-badge-value">{{ repeatUsed }}/{{ repeatCount }}</span>
|
<div
|
||||||
|
class="repeat-progress-fill"
|
||||||
|
:style="{ width: `${(repeatUsed / repeatCount) * 100}%` }"
|
||||||
|
:class="{ 'is-complete': repeatUsed >= repeatCount }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<span class="repeat-progress-text">{{ repeatUsed }}/{{ repeatCount }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
|
||||||
class="refresh-button"
|
|
||||||
:disabled="isLoading"
|
|
||||||
@click="$emit('refresh')"
|
|
||||||
title="Refresh list"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="refresh-icon"
|
|
||||||
:class="{ spinning: isLoading }"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
|
||||||
<path d="M21 3v5h-5"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Starting Index with Advanced Controls -->
|
<!-- Starting Index with Advanced Controls -->
|
||||||
<div class="setting-section">
|
<div class="setting-section">
|
||||||
<label class="setting-label">Starting Index</label>
|
|
||||||
<div class="index-controls-row">
|
<div class="index-controls-row">
|
||||||
<!-- Index input -->
|
<!-- Left: Index group -->
|
||||||
<input
|
<div class="control-group">
|
||||||
type="number"
|
<label class="control-group-label">Starting Index</label>
|
||||||
class="index-input"
|
<div class="control-group-content">
|
||||||
:min="1"
|
<input
|
||||||
:max="totalCount || 1"
|
type="number"
|
||||||
:value="currentIndex"
|
class="index-input"
|
||||||
:disabled="totalCount === 0"
|
:min="1"
|
||||||
@input="onIndexInput"
|
:max="totalCount || 1"
|
||||||
@blur="onIndexBlur"
|
:value="currentIndex"
|
||||||
@pointerdown.stop
|
:disabled="totalCount === 0"
|
||||||
@pointermove.stop
|
@input="onIndexInput"
|
||||||
@pointerup.stop
|
@blur="onIndexBlur"
|
||||||
/>
|
@pointerdown.stop
|
||||||
<span class="index-hint">1 - {{ totalCount || 1 }}</span>
|
@pointermove.stop
|
||||||
|
@pointerup.stop
|
||||||
|
/>
|
||||||
|
<span class="index-hint">/ {{ totalCount || 1 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Repeat control -->
|
<!-- Right: Repeat group -->
|
||||||
<span class="repeat-label">x</span>
|
<div class="control-group">
|
||||||
<input
|
<label class="control-group-label">Repeat</label>
|
||||||
type="number"
|
<div class="control-group-content">
|
||||||
class="repeat-input"
|
<input
|
||||||
min="1"
|
type="number"
|
||||||
max="99"
|
class="repeat-input"
|
||||||
:value="repeatCount"
|
min="1"
|
||||||
@input="onRepeatInput"
|
max="99"
|
||||||
@blur="onRepeatBlur"
|
:value="repeatCount"
|
||||||
@pointerdown.stop
|
@input="onRepeatInput"
|
||||||
@pointermove.stop
|
@blur="onRepeatBlur"
|
||||||
@pointerup.stop
|
@pointerdown.stop
|
||||||
title="Repeat each LoRA this many times"
|
@pointermove.stop
|
||||||
/>
|
@pointerup.stop
|
||||||
<span class="repeat-hint">times</span>
|
title="Each LoRA will be used this many times before moving to the next"
|
||||||
|
/>
|
||||||
|
<span class="repeat-suffix">×</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Control buttons -->
|
<!-- Action buttons -->
|
||||||
<button
|
<div class="action-buttons">
|
||||||
class="control-btn"
|
<button
|
||||||
:class="{ active: isPaused }"
|
class="control-btn"
|
||||||
:disabled="isPauseDisabled"
|
:class="{ active: isPaused }"
|
||||||
@click="$emit('toggle-pause')"
|
:disabled="isPauseDisabled"
|
||||||
:title="isPauseDisabled ? 'Cannot pause while prompts are queued' : (isPaused ? 'Continue iteration' : 'Pause iteration')"
|
@click="$emit('toggle-pause')"
|
||||||
>
|
:title="isPauseDisabled ? 'Cannot pause while prompts are queued' : (isPaused ? 'Continue iteration' : 'Pause iteration')"
|
||||||
<svg v-if="isPaused" viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
>
|
||||||
<path d="M8 5v14l11-7z"/>
|
<svg v-if="isPaused" viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
||||||
</svg>
|
<path d="M8 5v14l11-7z"/>
|
||||||
<svg v-else viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
</svg>
|
||||||
<path d="M6 4h4v16H6zm8 0h4v16h-4z"/>
|
<svg v-else viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
||||||
</svg>
|
<path d="M6 4h4v16H6zm8 0h4v16h-4z"/>
|
||||||
</button>
|
</svg>
|
||||||
<button
|
</button>
|
||||||
class="control-btn"
|
<button
|
||||||
@click="$emit('reset-index')"
|
class="control-btn"
|
||||||
title="Reset to index 1"
|
@click="$emit('reset-index')"
|
||||||
>
|
title="Reset to index 1"
|
||||||
<svg viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
>
|
||||||
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
|
<svg viewBox="0 0 24 24" fill="currentColor" class="control-icon">
|
||||||
</svg>
|
<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
|
||||||
</button>
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -172,7 +167,6 @@ const props = defineProps<{
|
|||||||
clipStrength: number
|
clipStrength: number
|
||||||
useCustomClipRange: boolean
|
useCustomClipRange: boolean
|
||||||
isClipStrengthDisabled: boolean
|
isClipStrengthDisabled: boolean
|
||||||
isLoading: boolean
|
|
||||||
repeatCount: number
|
repeatCount: number
|
||||||
repeatUsed: number
|
repeatUsed: number
|
||||||
isPaused: boolean
|
isPaused: boolean
|
||||||
@@ -189,7 +183,6 @@ const emit = defineEmits<{
|
|||||||
'update:repeatCount': [value: number]
|
'update:repeatCount': [value: number]
|
||||||
'toggle-pause': []
|
'toggle-pause': []
|
||||||
'reset-index': []
|
'reset-index': []
|
||||||
'refresh': []
|
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
// Temporary value for input while typing
|
// Temporary value for input while typing
|
||||||
@@ -354,94 +347,87 @@ const onRepeatBlur = (event: Event) => {
|
|||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
.refresh-button {
|
/* Repeat Progress */
|
||||||
|
.repeat-progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
gap: 6px;
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-left: 8px;
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: rgba(226, 232, 240, 0.6);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-button:hover:not(:disabled) {
|
|
||||||
background: rgba(66, 153, 225, 0.2);
|
|
||||||
border-color: rgba(66, 153, 225, 0.4);
|
|
||||||
color: rgba(191, 219, 254, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-button:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-icon.spinning {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Repeat Badge */
|
|
||||||
.repeat-badge {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
background: rgba(245, 158, 11, 0.15);
|
background: rgba(26, 32, 44, 0.6);
|
||||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
border: 1px solid rgba(226, 232, 240, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeat-badge-label {
|
.repeat-progress-track {
|
||||||
font-size: 10px;
|
width: 32px;
|
||||||
color: rgba(253, 230, 138, 0.7);
|
height: 4px;
|
||||||
text-transform: uppercase;
|
background: rgba(226, 232, 240, 0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeat-badge-value {
|
.repeat-progress-fill {
|
||||||
font-size: 12px;
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repeat-progress-fill.is-complete {
|
||||||
|
background: linear-gradient(90deg, #10b981, #34d399);
|
||||||
|
}
|
||||||
|
|
||||||
|
.repeat-progress-text {
|
||||||
|
font-size: 10px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
color: rgba(253, 230, 138, 1);
|
color: rgba(253, 230, 138, 0.9);
|
||||||
min-width: 3ch;
|
min-width: 3ch;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Index Controls Row */
|
/* Index Controls Row - Grouped Layout */
|
||||||
.index-controls-row {
|
.index-controls-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
gap: 8px;
|
gap: 16px;
|
||||||
flex-wrap: wrap;
|
}
|
||||||
|
|
||||||
|
/* Control Group */
|
||||||
|
.control-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group-label {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(226, 232, 240, 0.5);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.control-group-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 4px;
|
||||||
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-input {
|
.index-input {
|
||||||
width: 60px;
|
width: 50px;
|
||||||
padding: 6px 8px;
|
height: 32px;
|
||||||
|
padding: 0 8px;
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
color: #e4e4e7;
|
color: #e4e4e7;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
|
line-height: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-input:focus {
|
.index-input:focus {
|
||||||
@@ -455,22 +441,17 @@ const onRepeatBlur = (event: Event) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.index-hint {
|
.index-hint {
|
||||||
font-size: 11px;
|
font-size: 12px;
|
||||||
color: rgba(226, 232, 240, 0.4);
|
color: rgba(226, 232, 240, 0.4);
|
||||||
min-width: 7ch;
|
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Repeat Controls */
|
/* Repeat Controls */
|
||||||
.repeat-label {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(226, 232, 240, 0.6);
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.repeat-input {
|
.repeat-input {
|
||||||
width: 44px;
|
width: 40px;
|
||||||
padding: 6px 6px;
|
height: 32px;
|
||||||
|
padding: 0 6px;
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
@@ -478,6 +459,8 @@ const onRepeatBlur = (event: Event) => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
line-height: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeat-input:focus {
|
.repeat-input:focus {
|
||||||
@@ -485,9 +468,19 @@ const onRepeatBlur = (event: Event) => {
|
|||||||
border-color: rgba(66, 153, 225, 0.6);
|
border-color: rgba(66, 153, 225, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.repeat-hint {
|
.repeat-suffix {
|
||||||
font-size: 11px;
|
font-size: 13px;
|
||||||
color: rgba(226, 232, 240, 0.4);
|
color: rgba(226, 232, 240, 0.4);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Control Buttons */
|
/* Control Buttons */
|
||||||
|
|||||||
@@ -1464,16 +1464,16 @@ to { transform: rotate(360deg);
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cycler-settings[data-v-9be19e47] {
|
.cycler-settings[data-v-a14881ad] {
|
||||||
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-9be19e47] {
|
.settings-header[data-v-a14881ad] {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.settings-title[data-v-9be19e47] {
|
.settings-title[data-v-a14881ad] {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.05em;
|
letter-spacing: 0.05em;
|
||||||
@@ -1482,10 +1482,10 @@ to { transform: rotate(360deg);
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
.setting-section[data-v-9be19e47] {
|
.setting-section[data-v-a14881ad] {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.setting-label[data-v-9be19e47] {
|
.setting-label[data-v-a14881ad] {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(226, 232, 240, 0.8);
|
color: rgba(226, 232, 240, 0.8);
|
||||||
@@ -1494,10 +1494,10 @@ to { transform: rotate(360deg);
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Progress Display */
|
/* Progress Display */
|
||||||
.progress-section[data-v-9be19e47] {
|
.progress-section[data-v-a14881ad] {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.progress-display[data-v-9be19e47] {
|
.progress-display[data-v-a14881ad] {
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
@@ -1507,31 +1507,31 @@ to { transform: rotate(360deg);
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
transition: border-color 0.3s ease;
|
transition: border-color 0.3s ease;
|
||||||
}
|
}
|
||||||
.progress-display.executing[data-v-9be19e47] {
|
.progress-display.executing[data-v-a14881ad] {
|
||||||
border-color: rgba(66, 153, 225, 0.5);
|
border-color: rgba(66, 153, 225, 0.5);
|
||||||
animation: pulse-9be19e47 2s ease-in-out infinite;
|
animation: pulse-a14881ad 2s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@keyframes pulse-9be19e47 {
|
@keyframes pulse-a14881ad {
|
||||||
0%, 100% { border-color: rgba(66, 153, 225, 0.3);
|
0%, 100% { border-color: rgba(66, 153, 225, 0.3);
|
||||||
}
|
}
|
||||||
50% { border-color: rgba(66, 153, 225, 0.7);
|
50% { border-color: rgba(66, 153, 225, 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.progress-info[data-v-9be19e47] {
|
.progress-info[data-v-a14881ad] {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.progress-label[data-v-9be19e47] {
|
.progress-label[data-v-a14881ad] {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(226, 232, 240, 0.5);
|
color: rgba(226, 232, 240, 0.5);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
.progress-name[data-v-9be19e47] {
|
.progress-name[data-v-a14881ad] {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(191, 219, 254, 1);
|
color: rgba(191, 219, 254, 1);
|
||||||
@@ -1539,14 +1539,14 @@ to { transform: rotate(360deg);
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.progress-counter[data-v-9be19e47] {
|
.progress-counter[data-v-a14881ad] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
.progress-index[data-v-9be19e47] {
|
.progress-index[data-v-a14881ad] {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgba(66, 153, 225, 1);
|
color: rgba(66, 153, 225, 1);
|
||||||
@@ -1555,12 +1555,12 @@ to { transform: rotate(360deg);
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
.progress-separator[data-v-9be19e47] {
|
.progress-separator[data-v-a14881ad] {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: rgba(226, 232, 240, 0.4);
|
color: rgba(226, 232, 240, 0.4);
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
}
|
}
|
||||||
.progress-total[data-v-9be19e47] {
|
.progress-total[data-v-a14881ad] {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(226, 232, 240, 0.6);
|
color: rgba(226, 232, 240, 0.6);
|
||||||
@@ -1569,111 +1569,102 @@ to { transform: rotate(360deg);
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
.refresh-button[data-v-9be19e47] {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-left: 8px;
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: rgba(226, 232, 240, 0.6);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.refresh-button[data-v-9be19e47]:hover:not(:disabled) {
|
|
||||||
background: rgba(66, 153, 225, 0.2);
|
|
||||||
border-color: rgba(66, 153, 225, 0.4);
|
|
||||||
color: rgba(191, 219, 254, 1);
|
|
||||||
}
|
|
||||||
.refresh-button[data-v-9be19e47]:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.refresh-icon[data-v-9be19e47] {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
.refresh-icon.spinning[data-v-9be19e47] {
|
|
||||||
animation: spin-9be19e47 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin-9be19e47 {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Repeat Badge */
|
/* Repeat Progress */
|
||||||
.repeat-badge[data-v-9be19e47] {
|
.repeat-progress[data-v-a14881ad] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 6px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
background: rgba(245, 158, 11, 0.15);
|
background: rgba(26, 32, 44, 0.6);
|
||||||
border: 1px solid rgba(245, 158, 11, 0.3);
|
border: 1px solid rgba(226, 232, 240, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.repeat-badge-label[data-v-9be19e47] {
|
.repeat-progress-track[data-v-a14881ad] {
|
||||||
font-size: 10px;
|
width: 32px;
|
||||||
color: rgba(253, 230, 138, 0.7);
|
height: 4px;
|
||||||
text-transform: uppercase;
|
background: rgba(226, 232, 240, 0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.repeat-badge-value[data-v-9be19e47] {
|
.repeat-progress-fill[data-v-a14881ad] {
|
||||||
font-size: 12px;
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #f59e0b, #fbbf24);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
.repeat-progress-fill.is-complete[data-v-a14881ad] {
|
||||||
|
background: linear-gradient(90deg, #10b981, #34d399);
|
||||||
|
}
|
||||||
|
.repeat-progress-text[data-v-a14881ad] {
|
||||||
|
font-size: 10px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
color: rgba(253, 230, 138, 1);
|
color: rgba(253, 230, 138, 0.9);
|
||||||
min-width: 3ch;
|
min-width: 3ch;
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Index Controls Row */
|
/* Index Controls Row - Grouped Layout */
|
||||||
.index-controls-row[data-v-9be19e47] {
|
.index-controls-row[data-v-a14881ad] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
gap: 8px;
|
gap: 16px;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
.index-input[data-v-9be19e47] {
|
|
||||||
width: 60px;
|
/* Control Group */
|
||||||
padding: 6px 8px;
|
.control-group[data-v-a14881ad] {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.control-group-label[data-v-a14881ad] {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(226, 232, 240, 0.5);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.control-group-content[data-v-a14881ad] {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 4px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.index-input[data-v-a14881ad] {
|
||||||
|
width: 50px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 8px;
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
color: #e4e4e7;
|
color: #e4e4e7;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
|
line-height: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.index-input[data-v-9be19e47]:focus {
|
.index-input[data-v-a14881ad]:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: rgba(66, 153, 225, 0.6);
|
border-color: rgba(66, 153, 225, 0.6);
|
||||||
}
|
}
|
||||||
.index-input[data-v-9be19e47]:disabled {
|
.index-input[data-v-a14881ad]:disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.index-hint[data-v-9be19e47] {
|
.index-hint[data-v-a14881ad] {
|
||||||
font-size: 11px;
|
font-size: 12px;
|
||||||
color: rgba(226, 232, 240, 0.4);
|
color: rgba(226, 232, 240, 0.4);
|
||||||
min-width: 7ch;
|
|
||||||
font-variant-numeric: tabular-nums;
|
font-variant-numeric: tabular-nums;
|
||||||
|
line-height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Repeat Controls */
|
/* Repeat Controls */
|
||||||
.repeat-label[data-v-9be19e47] {
|
.repeat-input[data-v-a14881ad] {
|
||||||
font-size: 13px;
|
width: 40px;
|
||||||
color: rgba(226, 232, 240, 0.6);
|
height: 32px;
|
||||||
margin-left: 4px;
|
padding: 0 6px;
|
||||||
}
|
|
||||||
.repeat-input[data-v-9be19e47] {
|
|
||||||
width: 44px;
|
|
||||||
padding: 6px 6px;
|
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
@@ -1681,18 +1672,30 @@ to {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
font-family: 'SF Mono', 'Roboto Mono', monospace;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
line-height: 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.repeat-input[data-v-9be19e47]:focus {
|
.repeat-input[data-v-a14881ad]:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: rgba(66, 153, 225, 0.6);
|
border-color: rgba(66, 153, 225, 0.6);
|
||||||
}
|
}
|
||||||
.repeat-hint[data-v-9be19e47] {
|
.repeat-suffix[data-v-a14881ad] {
|
||||||
font-size: 11px;
|
font-size: 13px;
|
||||||
color: rgba(226, 232, 240, 0.4);
|
color: rgba(226, 232, 240, 0.4);
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
|
.action-buttons[data-v-a14881ad] {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Control Buttons */
|
/* Control Buttons */
|
||||||
.control-btn[data-v-9be19e47] {
|
.control-btn[data-v-a14881ad] {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -1706,52 +1709,52 @@ to {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.control-btn[data-v-9be19e47]:hover:not(:disabled) {
|
.control-btn[data-v-a14881ad]: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: rgba(191, 219, 254, 1);
|
color: rgba(191, 219, 254, 1);
|
||||||
}
|
}
|
||||||
.control-btn[data-v-9be19e47]:disabled {
|
.control-btn[data-v-a14881ad]:disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
.control-btn.active[data-v-9be19e47] {
|
.control-btn.active[data-v-a14881ad] {
|
||||||
background: rgba(245, 158, 11, 0.2);
|
background: rgba(245, 158, 11, 0.2);
|
||||||
border-color: rgba(245, 158, 11, 0.5);
|
border-color: rgba(245, 158, 11, 0.5);
|
||||||
color: rgba(253, 230, 138, 1);
|
color: rgba(253, 230, 138, 1);
|
||||||
}
|
}
|
||||||
.control-btn.active[data-v-9be19e47]:hover {
|
.control-btn.active[data-v-a14881ad]:hover {
|
||||||
background: rgba(245, 158, 11, 0.3);
|
background: rgba(245, 158, 11, 0.3);
|
||||||
border-color: rgba(245, 158, 11, 0.6);
|
border-color: rgba(245, 158, 11, 0.6);
|
||||||
}
|
}
|
||||||
.control-icon[data-v-9be19e47] {
|
.control-icon[data-v-a14881ad] {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Slider Container */
|
/* Slider Container */
|
||||||
.slider-container[data-v-9be19e47] {
|
.slider-container[data-v-a14881ad] {
|
||||||
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: 6px;
|
border-radius: 6px;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
.slider-container--disabled[data-v-9be19e47] {
|
.slider-container--disabled[data-v-a14881ad] {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.section-header-with-toggle[data-v-9be19e47] {
|
.section-header-with-toggle[data-v-a14881ad] {
|
||||||
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-9be19e47] {
|
.section-header-with-toggle .setting-label[data-v-a14881ad] {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Toggle Switch */
|
/* Toggle Switch */
|
||||||
.toggle-switch[data-v-9be19e47] {
|
.toggle-switch[data-v-a14881ad] {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@@ -1760,7 +1763,7 @@ to {
|
|||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.toggle-switch__track[data-v-9be19e47] {
|
.toggle-switch__track[data-v-a14881ad] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
background: var(--comfy-input-bg, #333);
|
background: var(--comfy-input-bg, #333);
|
||||||
@@ -1768,11 +1771,11 @@ to {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.toggle-switch--active .toggle-switch__track[data-v-9be19e47] {
|
.toggle-switch--active .toggle-switch__track[data-v-a14881ad] {
|
||||||
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-9be19e47] {
|
.toggle-switch__thumb[data-v-a14881ad] {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
@@ -1783,16 +1786,16 @@ to {
|
|||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
.toggle-switch--active .toggle-switch__thumb[data-v-9be19e47] {
|
.toggle-switch--active .toggle-switch__thumb[data-v-a14881ad] {
|
||||||
transform: translateX(16px);
|
transform: translateX(16px);
|
||||||
background: #4299e1;
|
background: #4299e1;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.toggle-switch:hover .toggle-switch__thumb[data-v-9be19e47] {
|
.toggle-switch:hover .toggle-switch__thumb[data-v-a14881ad] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lora-cycler-widget[data-v-9c17d0bf] {
|
.lora-cycler-widget[data-v-cce5520b] {
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: rgba(40, 44, 52, 0.6);
|
background: rgba(40, 44, 52, 0.6);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@@ -12819,34 +12822,39 @@ const _hoisted_7 = { class: "progress-index" };
|
|||||||
const _hoisted_8 = { class: "progress-total" };
|
const _hoisted_8 = { class: "progress-total" };
|
||||||
const _hoisted_9 = {
|
const _hoisted_9 = {
|
||||||
key: 0,
|
key: 0,
|
||||||
class: "repeat-badge"
|
class: "repeat-progress"
|
||||||
};
|
};
|
||||||
const _hoisted_10 = { class: "repeat-badge-value" };
|
const _hoisted_10 = { class: "repeat-progress-track" };
|
||||||
const _hoisted_11 = ["disabled"];
|
const _hoisted_11 = { class: "repeat-progress-text" };
|
||||||
const _hoisted_12 = { class: "setting-section" };
|
const _hoisted_12 = { class: "setting-section" };
|
||||||
const _hoisted_13 = { class: "index-controls-row" };
|
const _hoisted_13 = { class: "index-controls-row" };
|
||||||
const _hoisted_14 = ["max", "value", "disabled"];
|
const _hoisted_14 = { class: "control-group" };
|
||||||
const _hoisted_15 = { class: "index-hint" };
|
const _hoisted_15 = { class: "control-group-content" };
|
||||||
const _hoisted_16 = ["value"];
|
const _hoisted_16 = ["max", "value", "disabled"];
|
||||||
const _hoisted_17 = ["disabled", "title"];
|
const _hoisted_17 = { class: "index-hint" };
|
||||||
const _hoisted_18 = {
|
const _hoisted_18 = { class: "control-group" };
|
||||||
|
const _hoisted_19 = { class: "control-group-content" };
|
||||||
|
const _hoisted_20 = ["value"];
|
||||||
|
const _hoisted_21 = { class: "action-buttons" };
|
||||||
|
const _hoisted_22 = ["disabled", "title"];
|
||||||
|
const _hoisted_23 = {
|
||||||
key: 0,
|
key: 0,
|
||||||
viewBox: "0 0 24 24",
|
viewBox: "0 0 24 24",
|
||||||
fill: "currentColor",
|
fill: "currentColor",
|
||||||
class: "control-icon"
|
class: "control-icon"
|
||||||
};
|
};
|
||||||
const _hoisted_19 = {
|
const _hoisted_24 = {
|
||||||
key: 1,
|
key: 1,
|
||||||
viewBox: "0 0 24 24",
|
viewBox: "0 0 24 24",
|
||||||
fill: "currentColor",
|
fill: "currentColor",
|
||||||
class: "control-icon"
|
class: "control-icon"
|
||||||
};
|
};
|
||||||
const _hoisted_20 = { class: "setting-section" };
|
const _hoisted_25 = { class: "setting-section" };
|
||||||
const _hoisted_21 = { class: "slider-container" };
|
const _hoisted_26 = { class: "slider-container" };
|
||||||
const _hoisted_22 = { class: "setting-section" };
|
const _hoisted_27 = { class: "setting-section" };
|
||||||
const _hoisted_23 = { class: "section-header-with-toggle" };
|
const _hoisted_28 = { class: "section-header-with-toggle" };
|
||||||
const _hoisted_24 = { class: "setting-label" };
|
const _hoisted_29 = { class: "setting-label" };
|
||||||
const _hoisted_25 = ["aria-checked"];
|
const _hoisted_30 = ["aria-checked"];
|
||||||
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
||||||
__name: "LoraCyclerSettingsView",
|
__name: "LoraCyclerSettingsView",
|
||||||
props: {
|
props: {
|
||||||
@@ -12858,7 +12866,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
clipStrength: {},
|
clipStrength: {},
|
||||||
useCustomClipRange: { type: Boolean },
|
useCustomClipRange: { type: Boolean },
|
||||||
isClipStrengthDisabled: { type: Boolean },
|
isClipStrengthDisabled: { type: Boolean },
|
||||||
isLoading: { type: Boolean },
|
|
||||||
repeatCount: {},
|
repeatCount: {},
|
||||||
repeatUsed: {},
|
repeatUsed: {},
|
||||||
isPaused: { type: Boolean },
|
isPaused: { type: Boolean },
|
||||||
@@ -12866,7 +12873,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
isWorkflowExecuting: { type: Boolean },
|
isWorkflowExecuting: { type: Boolean },
|
||||||
executingRepeatStep: {}
|
executingRepeatStep: {}
|
||||||
},
|
},
|
||||||
emits: ["update:currentIndex", "update:modelStrength", "update:clipStrength", "update:useCustomClipRange", "update:repeatCount", "toggle-pause", "reset-index", "refresh"],
|
emits: ["update:currentIndex", "update:modelStrength", "update:clipStrength", "update:useCustomClipRange", "update:repeatCount", "toggle-pause", "reset-index"],
|
||||||
setup(__props, { emit: __emit }) {
|
setup(__props, { emit: __emit }) {
|
||||||
const props = __props;
|
const props = __props;
|
||||||
const emit2 = __emit;
|
const emit2 = __emit;
|
||||||
@@ -12906,7 +12913,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
};
|
};
|
||||||
return (_ctx, _cache) => {
|
return (_ctx, _cache) => {
|
||||||
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
return openBlock(), createElementBlock("div", _hoisted_1$3, [
|
||||||
_cache[23] || (_cache[23] = createBaseVNode("div", { class: "settings-header" }, [
|
_cache[20] || (_cache[20] = createBaseVNode("div", { class: "settings-header" }, [
|
||||||
createBaseVNode("h3", { class: "settings-title" }, "CYCLER SETTINGS")
|
createBaseVNode("h3", { class: "settings-title" }, "CYCLER SETTINGS")
|
||||||
], -1)),
|
], -1)),
|
||||||
createBaseVNode("div", _hoisted_2$2, [
|
createBaseVNode("div", _hoisted_2$2, [
|
||||||
@@ -12922,126 +12929,122 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
]),
|
]),
|
||||||
createBaseVNode("div", _hoisted_6, [
|
createBaseVNode("div", _hoisted_6, [
|
||||||
createBaseVNode("span", _hoisted_7, toDisplayString(__props.currentIndex), 1),
|
createBaseVNode("span", _hoisted_7, toDisplayString(__props.currentIndex), 1),
|
||||||
_cache[14] || (_cache[14] = createBaseVNode("span", { class: "progress-separator" }, "/", -1)),
|
_cache[11] || (_cache[11] = createBaseVNode("span", { class: "progress-separator" }, "/", -1)),
|
||||||
createBaseVNode("span", _hoisted_8, toDisplayString(__props.totalCount), 1),
|
createBaseVNode("span", _hoisted_8, toDisplayString(__props.totalCount), 1),
|
||||||
__props.repeatCount > 1 ? (openBlock(), createElementBlock("div", _hoisted_9, [
|
__props.repeatCount > 1 ? (openBlock(), createElementBlock("div", _hoisted_9, [
|
||||||
_cache[12] || (_cache[12] = createBaseVNode("span", { class: "repeat-badge-label" }, "Rep", -1)),
|
createBaseVNode("div", _hoisted_10, [
|
||||||
createBaseVNode("span", _hoisted_10, toDisplayString(__props.repeatUsed) + "/" + toDisplayString(__props.repeatCount), 1)
|
createBaseVNode("div", {
|
||||||
])) : createCommentVNode("", true),
|
class: normalizeClass(["repeat-progress-fill", { "is-complete": __props.repeatUsed >= __props.repeatCount }]),
|
||||||
createBaseVNode("button", {
|
style: normalizeStyle({ width: `${__props.repeatUsed / __props.repeatCount * 100}%` })
|
||||||
class: "refresh-button",
|
}, null, 6)
|
||||||
disabled: __props.isLoading,
|
]),
|
||||||
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("refresh")),
|
createBaseVNode("span", _hoisted_11, toDisplayString(__props.repeatUsed) + "/" + toDisplayString(__props.repeatCount), 1)
|
||||||
title: "Refresh list"
|
])) : createCommentVNode("", true)
|
||||||
}, [
|
|
||||||
(openBlock(), createElementBlock("svg", {
|
|
||||||
class: normalizeClass(["refresh-icon", { spinning: __props.isLoading }]),
|
|
||||||
viewBox: "0 0 24 24",
|
|
||||||
fill: "none",
|
|
||||||
stroke: "currentColor",
|
|
||||||
"stroke-width": "2",
|
|
||||||
"stroke-linecap": "round",
|
|
||||||
"stroke-linejoin": "round"
|
|
||||||
}, [..._cache[13] || (_cache[13] = [
|
|
||||||
createBaseVNode("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }, null, -1),
|
|
||||||
createBaseVNode("path", { d: "M21 3v5h-5" }, null, -1)
|
|
||||||
])], 2))
|
|
||||||
], 8, _hoisted_11)
|
|
||||||
])
|
])
|
||||||
], 2)
|
], 2)
|
||||||
]),
|
]),
|
||||||
createBaseVNode("div", _hoisted_12, [
|
createBaseVNode("div", _hoisted_12, [
|
||||||
_cache[20] || (_cache[20] = createBaseVNode("label", { class: "setting-label" }, "Starting Index", -1)),
|
|
||||||
createBaseVNode("div", _hoisted_13, [
|
createBaseVNode("div", _hoisted_13, [
|
||||||
createBaseVNode("input", {
|
createBaseVNode("div", _hoisted_14, [
|
||||||
type: "number",
|
_cache[12] || (_cache[12] = createBaseVNode("label", { class: "control-group-label" }, "Starting Index", -1)),
|
||||||
class: "index-input",
|
createBaseVNode("div", _hoisted_15, [
|
||||||
min: 1,
|
createBaseVNode("input", {
|
||||||
max: __props.totalCount || 1,
|
type: "number",
|
||||||
value: __props.currentIndex,
|
class: "index-input",
|
||||||
disabled: __props.totalCount === 0,
|
min: 1,
|
||||||
onInput: onIndexInput,
|
max: __props.totalCount || 1,
|
||||||
onBlur: onIndexBlur,
|
value: __props.currentIndex,
|
||||||
onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
|
disabled: __props.totalCount === 0,
|
||||||
}, ["stop"])),
|
onInput: onIndexInput,
|
||||||
onPointermove: _cache[2] || (_cache[2] = withModifiers(() => {
|
onBlur: onIndexBlur,
|
||||||
}, ["stop"])),
|
onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
|
||||||
onPointerup: _cache[3] || (_cache[3] = withModifiers(() => {
|
}, ["stop"])),
|
||||||
}, ["stop"]))
|
onPointermove: _cache[1] || (_cache[1] = withModifiers(() => {
|
||||||
}, null, 40, _hoisted_14),
|
}, ["stop"])),
|
||||||
createBaseVNode("span", _hoisted_15, "1 - " + toDisplayString(__props.totalCount || 1), 1),
|
onPointerup: _cache[2] || (_cache[2] = withModifiers(() => {
|
||||||
_cache[18] || (_cache[18] = createBaseVNode("span", { class: "repeat-label" }, "x", -1)),
|
}, ["stop"]))
|
||||||
createBaseVNode("input", {
|
}, null, 40, _hoisted_16),
|
||||||
type: "number",
|
createBaseVNode("span", _hoisted_17, "/ " + toDisplayString(__props.totalCount || 1), 1)
|
||||||
class: "repeat-input",
|
])
|
||||||
min: "1",
|
]),
|
||||||
max: "99",
|
createBaseVNode("div", _hoisted_18, [
|
||||||
value: __props.repeatCount,
|
_cache[14] || (_cache[14] = createBaseVNode("label", { class: "control-group-label" }, "Repeat", -1)),
|
||||||
onInput: onRepeatInput,
|
createBaseVNode("div", _hoisted_19, [
|
||||||
onBlur: onRepeatBlur,
|
createBaseVNode("input", {
|
||||||
onPointerdown: _cache[4] || (_cache[4] = withModifiers(() => {
|
type: "number",
|
||||||
}, ["stop"])),
|
class: "repeat-input",
|
||||||
onPointermove: _cache[5] || (_cache[5] = withModifiers(() => {
|
min: "1",
|
||||||
}, ["stop"])),
|
max: "99",
|
||||||
onPointerup: _cache[6] || (_cache[6] = withModifiers(() => {
|
value: __props.repeatCount,
|
||||||
}, ["stop"])),
|
onInput: onRepeatInput,
|
||||||
title: "Repeat each LoRA this many times"
|
onBlur: onRepeatBlur,
|
||||||
}, null, 40, _hoisted_16),
|
onPointerdown: _cache[3] || (_cache[3] = withModifiers(() => {
|
||||||
_cache[19] || (_cache[19] = createBaseVNode("span", { class: "repeat-hint" }, "times", -1)),
|
}, ["stop"])),
|
||||||
createBaseVNode("button", {
|
onPointermove: _cache[4] || (_cache[4] = withModifiers(() => {
|
||||||
class: normalizeClass(["control-btn", { active: __props.isPaused }]),
|
}, ["stop"])),
|
||||||
disabled: __props.isPauseDisabled,
|
onPointerup: _cache[5] || (_cache[5] = withModifiers(() => {
|
||||||
onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("toggle-pause")),
|
}, ["stop"])),
|
||||||
title: __props.isPauseDisabled ? "Cannot pause while prompts are queued" : __props.isPaused ? "Continue iteration" : "Pause iteration"
|
title: "Each LoRA will be used this many times before moving to the next"
|
||||||
}, [
|
}, null, 40, _hoisted_20),
|
||||||
__props.isPaused ? (openBlock(), createElementBlock("svg", _hoisted_18, [..._cache[15] || (_cache[15] = [
|
_cache[13] || (_cache[13] = createBaseVNode("span", { class: "repeat-suffix" }, "×", -1))
|
||||||
createBaseVNode("path", { d: "M8 5v14l11-7z" }, null, -1)
|
])
|
||||||
])])) : (openBlock(), createElementBlock("svg", _hoisted_19, [..._cache[16] || (_cache[16] = [
|
]),
|
||||||
createBaseVNode("path", { d: "M6 4h4v16H6zm8 0h4v16h-4z" }, null, -1)
|
createBaseVNode("div", _hoisted_21, [
|
||||||
])]))
|
createBaseVNode("button", {
|
||||||
], 10, _hoisted_17),
|
class: normalizeClass(["control-btn", { active: __props.isPaused }]),
|
||||||
createBaseVNode("button", {
|
disabled: __props.isPauseDisabled,
|
||||||
class: "control-btn",
|
onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("toggle-pause")),
|
||||||
onClick: _cache[8] || (_cache[8] = ($event) => _ctx.$emit("reset-index")),
|
title: __props.isPauseDisabled ? "Cannot pause while prompts are queued" : __props.isPaused ? "Continue iteration" : "Pause iteration"
|
||||||
title: "Reset to index 1"
|
|
||||||
}, [..._cache[17] || (_cache[17] = [
|
|
||||||
createBaseVNode("svg", {
|
|
||||||
viewBox: "0 0 24 24",
|
|
||||||
fill: "currentColor",
|
|
||||||
class: "control-icon"
|
|
||||||
}, [
|
}, [
|
||||||
createBaseVNode("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" })
|
__props.isPaused ? (openBlock(), createElementBlock("svg", _hoisted_23, [..._cache[15] || (_cache[15] = [
|
||||||
], -1)
|
createBaseVNode("path", { d: "M8 5v14l11-7z" }, null, -1)
|
||||||
])])
|
])])) : (openBlock(), createElementBlock("svg", _hoisted_24, [..._cache[16] || (_cache[16] = [
|
||||||
|
createBaseVNode("path", { d: "M6 4h4v16H6zm8 0h4v16h-4z" }, null, -1)
|
||||||
|
])]))
|
||||||
|
], 10, _hoisted_22),
|
||||||
|
createBaseVNode("button", {
|
||||||
|
class: "control-btn",
|
||||||
|
onClick: _cache[7] || (_cache[7] = ($event) => _ctx.$emit("reset-index")),
|
||||||
|
title: "Reset to index 1"
|
||||||
|
}, [..._cache[17] || (_cache[17] = [
|
||||||
|
createBaseVNode("svg", {
|
||||||
|
viewBox: "0 0 24 24",
|
||||||
|
fill: "currentColor",
|
||||||
|
class: "control-icon"
|
||||||
|
}, [
|
||||||
|
createBaseVNode("path", { d: "M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" })
|
||||||
|
], -1)
|
||||||
|
])])
|
||||||
|
])
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
createBaseVNode("div", _hoisted_20, [
|
createBaseVNode("div", _hoisted_25, [
|
||||||
_cache[21] || (_cache[21] = createBaseVNode("label", { class: "setting-label" }, "Model Strength", -1)),
|
_cache[18] || (_cache[18] = createBaseVNode("label", { class: "setting-label" }, "Model Strength", -1)),
|
||||||
createBaseVNode("div", _hoisted_21, [
|
createBaseVNode("div", _hoisted_26, [
|
||||||
createVNode(SingleSlider, {
|
createVNode(SingleSlider, {
|
||||||
min: -10,
|
min: -10,
|
||||||
max: 10,
|
max: 10,
|
||||||
value: __props.modelStrength,
|
value: __props.modelStrength,
|
||||||
step: 0.1,
|
step: 0.1,
|
||||||
"default-range": { min: 0.5, max: 1.5 },
|
"default-range": { min: 0.5, max: 1.5 },
|
||||||
"onUpdate:value": _cache[9] || (_cache[9] = ($event) => _ctx.$emit("update:modelStrength", $event))
|
"onUpdate:value": _cache[8] || (_cache[8] = ($event) => _ctx.$emit("update:modelStrength", $event))
|
||||||
}, null, 8, ["value"])
|
}, null, 8, ["value"])
|
||||||
])
|
])
|
||||||
]),
|
]),
|
||||||
createBaseVNode("div", _hoisted_22, [
|
createBaseVNode("div", _hoisted_27, [
|
||||||
createBaseVNode("div", _hoisted_23, [
|
createBaseVNode("div", _hoisted_28, [
|
||||||
createBaseVNode("label", _hoisted_24, " Clip Strength - " + toDisplayString(__props.useCustomClipRange ? "Custom Value" : "Use Model Strength"), 1),
|
createBaseVNode("label", _hoisted_29, " Clip Strength - " + toDisplayString(__props.useCustomClipRange ? "Custom Value" : "Use Model Strength"), 1),
|
||||||
createBaseVNode("button", {
|
createBaseVNode("button", {
|
||||||
type: "button",
|
type: "button",
|
||||||
class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useCustomClipRange }]),
|
class: normalizeClass(["toggle-switch", { "toggle-switch--active": __props.useCustomClipRange }]),
|
||||||
onClick: _cache[10] || (_cache[10] = ($event) => _ctx.$emit("update:useCustomClipRange", !__props.useCustomClipRange)),
|
onClick: _cache[9] || (_cache[9] = ($event) => _ctx.$emit("update:useCustomClipRange", !__props.useCustomClipRange)),
|
||||||
role: "switch",
|
role: "switch",
|
||||||
"aria-checked": __props.useCustomClipRange,
|
"aria-checked": __props.useCustomClipRange,
|
||||||
title: "Use custom clip strength when enabled, otherwise use model strength"
|
title: "Use custom clip strength when enabled, otherwise use model strength"
|
||||||
}, [..._cache[22] || (_cache[22] = [
|
}, [..._cache[19] || (_cache[19] = [
|
||||||
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_25)
|
])], 10, _hoisted_30)
|
||||||
]),
|
]),
|
||||||
createBaseVNode("div", {
|
createBaseVNode("div", {
|
||||||
class: normalizeClass(["slider-container", { "slider-container--disabled": __props.isClipStrengthDisabled }])
|
class: normalizeClass(["slider-container", { "slider-container--disabled": __props.isClipStrengthDisabled }])
|
||||||
@@ -13053,7 +13056,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
step: 0.1,
|
step: 0.1,
|
||||||
"default-range": { min: 0.5, max: 1.5 },
|
"default-range": { min: 0.5, max: 1.5 },
|
||||||
disabled: __props.isClipStrengthDisabled,
|
disabled: __props.isClipStrengthDisabled,
|
||||||
"onUpdate:value": _cache[11] || (_cache[11] = ($event) => _ctx.$emit("update:clipStrength", $event))
|
"onUpdate:value": _cache[10] || (_cache[10] = ($event) => _ctx.$emit("update:clipStrength", $event))
|
||||||
}, null, 8, ["value", "disabled"])
|
}, null, 8, ["value", "disabled"])
|
||||||
], 2)
|
], 2)
|
||||||
])
|
])
|
||||||
@@ -13061,7 +13064,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const LoraCyclerSettingsView = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9be19e47"]]);
|
const LoraCyclerSettingsView = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-a14881ad"]]);
|
||||||
function useLoraCyclerState(widget) {
|
function useLoraCyclerState(widget) {
|
||||||
let isRestoring = false;
|
let isRestoring = false;
|
||||||
const currentIndex = ref(1);
|
const currentIndex = ref(1);
|
||||||
@@ -13346,14 +13349,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|||||||
state.clipStrength.value = state.modelStrength.value;
|
state.clipStrength.value = state.modelStrength.value;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleRefresh = async () => {
|
|
||||||
try {
|
|
||||||
const poolConfig = getPoolConfig();
|
|
||||||
await state.refreshList(poolConfig);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("[LoraCyclerWidget] Error refreshing:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const handleRepeatCountChange = (newValue) => {
|
const handleRepeatCountChange = (newValue) => {
|
||||||
state.repeatCount.value = newValue;
|
state.repeatCount.value = newValue;
|
||||||
state.repeatUsed.value = 0;
|
state.repeatUsed.value = 0;
|
||||||
@@ -13558,14 +13553,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|||||||
"onUpdate:useCustomClipRange": handleUseCustomClipRangeChange,
|
"onUpdate:useCustomClipRange": handleUseCustomClipRangeChange,
|
||||||
"onUpdate:repeatCount": handleRepeatCountChange,
|
"onUpdate:repeatCount": handleRepeatCountChange,
|
||||||
onTogglePause: handleTogglePause,
|
onTogglePause: handleTogglePause,
|
||||||
onResetIndex: handleResetIndex,
|
onResetIndex: handleResetIndex
|
||||||
onRefresh: handleRefresh
|
|
||||||
}, null, 8, ["current-index", "total-count", "current-lora-name", "current-lora-filename", "model-strength", "clip-strength", "use-custom-clip-range", "is-clip-strength-disabled", "is-loading", "repeat-count", "repeat-used", "is-paused", "is-pause-disabled", "is-workflow-executing", "executing-repeat-step"])
|
}, null, 8, ["current-index", "total-count", "current-lora-name", "current-lora-filename", "model-strength", "clip-strength", "use-custom-clip-range", "is-clip-strength-disabled", "is-loading", "repeat-count", "repeat-used", "is-paused", "is-pause-disabled", "is-workflow-executing", "executing-repeat-step"])
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const LoraCyclerWidget = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9c17d0bf"]]);
|
const LoraCyclerWidget = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-cce5520b"]]);
|
||||||
const _hoisted_1$1 = { class: "json-display-widget" };
|
const _hoisted_1$1 = { class: "json-display-widget" };
|
||||||
const _hoisted_2$1 = {
|
const _hoisted_2$1 = {
|
||||||
class: "json-content",
|
class: "json-content",
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user