30 lines
2.0 KiB
Vue
30 lines
2.0 KiB
Vue
<template>
|
|
<details class="rounded-2xl border border-amber-300/25 bg-amber-400/5 p-4">
|
|
<summary class="cursor-pointer text-sm font-semibold text-amber-100">Compare settings · build a sweep</summary>
|
|
<p class="mt-3 text-sm text-zinc-300">Use one prompt with several step counts or CFG values. Each combination becomes an editable variation.</p>
|
|
<div class="mt-3 grid gap-3 sm:grid-cols-2">
|
|
<label class="text-sm text-zinc-300">Steps, separated by commas
|
|
<input v-model="steps" class="mt-1 w-full rounded-lg border border-white/15 bg-zinc-950 px-3 py-2" placeholder="24, 20, 18, 19">
|
|
</label>
|
|
<label class="text-sm text-zinc-300">CFG values
|
|
<input v-model="cfg" class="mt-1 w-full rounded-lg border border-white/15 bg-zinc-950 px-3 py-2" placeholder="1.5">
|
|
</label>
|
|
</div>
|
|
<p class="mt-3 text-sm text-zinc-300">{{ preview }}</p>
|
|
<p class="mt-1 text-xs text-zinc-400">Uses the same seed for comparison and the original input for every image. Replaces the current variations; nothing renders until you queue.</p>
|
|
<button type="button" class="mt-3 rounded-lg bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950 disabled:opacity-50" :disabled="!rows.length" @click="emit('apply', rows)">Build {{ rows.length || '' }} variations</button>
|
|
</details>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { imageIterationSweep, type ImageIteration } from '~/utils/imageIterations'
|
|
const emit = defineEmits<{ apply: [rows: ImageIteration[]] }>()
|
|
const steps = ref('24, 20, 18, 19')
|
|
const cfg = ref('1.5')
|
|
const result = computed(() => {
|
|
try { return { rows: imageIterationSweep(steps.value, cfg.value), error: '' } }
|
|
catch (error) { return { rows: [] as ImageIteration[], error: error instanceof Error ? error.message : String(error) } }
|
|
})
|
|
const rows = computed(() => result.value.rows)
|
|
const preview = computed(() => result.value.error || `${rows.value.length} images · ${rows.value.map(row => `${row.steps} steps / CFG ${row.cfg}`).join(' · ')}`)
|
|
</script>
|