49 lines
3.7 KiB
Vue
49 lines
3.7 KiB
Vue
<template>
|
|
<div class="mt-3 space-y-3 border-t border-white/10 pt-3">
|
|
<p class="text-xs text-zinc-400">Blank values use the shared settings. A blank prompt uses the first prompt.</p>
|
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
<label class="text-sm text-zinc-300">Steps
|
|
<input :value="modelValue.steps" type="number" min="1" max="50" step="1" :placeholder="String(baseSteps)" class="iteration-input" :disabled="disabled" @input="numberField('steps', $event)">
|
|
</label>
|
|
<label class="text-sm text-zinc-300">CFG
|
|
<input :value="modelValue.cfg" type="number" min="0" max="20" step="0.1" :placeholder="String(baseCfg)" class="iteration-input" :disabled="disabled" @input="numberField('cfg', $event)">
|
|
</label>
|
|
<label class="text-sm text-zinc-300">Seed
|
|
<select :value="seedMode" class="iteration-input" :disabled="disabled" @change="setSeedMode($event)">
|
|
<option value="random">Random</option><option value="same">Same as first</option><option value="custom">Custom</option>
|
|
</select>
|
|
</label>
|
|
<label v-if="seedMode === 'custom'" class="text-sm text-zinc-300">Seed number
|
|
<input :value="modelValue.seed" type="number" min="0" max="2147483647" step="1" class="iteration-input" :disabled="disabled" @input="numberField('seed', $event)">
|
|
</label>
|
|
<label v-if="allowStrength" class="text-sm text-zinc-300">Denoise
|
|
<input :value="modelValue.strength" type="number" min="0.15" max="0.75" step="0.01" placeholder="Shared" class="iteration-input" :disabled="disabled" @input="numberField('strength', $event)">
|
|
</label>
|
|
</div>
|
|
<label class="flex items-center gap-2 text-sm text-zinc-300">
|
|
<input type="checkbox" :checked="modelValue.loraStack === undefined" :disabled="disabled" @change="inheritLoras($event)"> Use shared LoRAs
|
|
</label>
|
|
<LoraSelect v-if="modelValue.loraStack !== undefined" :model-value="modelValue.loraStack" :names="loraNames" :engine="engine" :disabled="disabled" label="This variation's LoRAs" empty-label="No LoRAs" @update:model-value="update({ loraStack: $event })" />
|
|
<p v-if="modelValue.steps !== undefined || modelValue.cfg !== undefined" class="text-xs text-zinc-400">Custom steps or CFG override the shared Turbo preset for this variation.</p>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type { ImageIteration } from '~/utils/imageIterations'
|
|
const props = withDefaults(defineProps<{ modelValue: ImageIteration; baseSteps?: number; baseCfg?: number; loraNames?: string[]; engine?: 'flux' | 'krea'; allowStrength?: boolean; disabled?: boolean }>(), { baseSteps: 20, baseCfg: 1, loraNames: () => [], engine: 'flux', allowStrength: false, disabled: false })
|
|
const emit = defineEmits<{ 'update:modelValue': [value: ImageIteration] }>()
|
|
const seedMode = computed(() => typeof props.modelValue.seed === 'number' ? 'custom' : props.modelValue.seed || 'random')
|
|
function update(patch: Partial<ImageIteration>) { emit('update:modelValue', { ...props.modelValue, ...patch }) }
|
|
function numberField(key: 'steps' | 'cfg' | 'seed' | 'strength', event: Event) {
|
|
const value = (event.target as HTMLInputElement).value
|
|
update({ [key]: value === '' ? undefined : Number(value) })
|
|
}
|
|
function setSeedMode(event: Event) {
|
|
const mode = (event.target as HTMLSelectElement).value
|
|
update({ seed: mode === 'custom' ? 0 : mode === 'same' ? 'same' : 'random' })
|
|
}
|
|
function inheritLoras(event: Event) { update({ loraStack: (event.target as HTMLInputElement).checked ? undefined : [] }) }
|
|
</script>
|
|
<style scoped>
|
|
.iteration-input { @apply mt-1 w-full rounded-lg border border-white/15 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 outline-none focus:ring-2 focus:ring-amber-300/40 disabled:opacity-50; }
|
|
</style>
|