Add per-image iteration settings and steps/CFG sweeps

2026-09-06 17:02:42 -05:00
parent 0c6a035d04
commit 666c922f40
12 changed files with 370 additions and 59 deletions
@@ -0,0 +1,48 @@
+<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>