towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Keep the image batch popup open, and add a lock on each dial.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-08-31 00:09:55 -05:00
co-authored by Cursor
parent 1bdb96cbb7
commit f51fd4b159
5 changed files with 136 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DurationField.vue
+1
View File
@@ -20,6 +20,7 @@
<div class="mt-3">
<Thumbwheel
:model-value="slider"
lock-key="duration"
:min="SLIDER_MIN"
:max="SLIDER_MAX"
:step="0.1"
components/ImageBatchModal.vue
+31 -18
View File
@@ -2,13 +2,14 @@
<Teleport to="body">
<div
v-if="open"
class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8"
class="fixed inset-0 z-[80] flex items-start justify-center overflow-y-auto bg-black/70 p-4 sm:p-8"
role="dialog"
aria-modal="true"
aria-label="Batch image prompts"
@click.self="close"
@pointerdown.self="onBackdrop"
@click.self="onBackdrop"
>
<div class="glass flex w-full max-w-5xl flex-col rounded-3xl p-5 sm:p-6">
<div class="glass flex w-full max-w-5xl flex-col rounded-3xl p-5 sm:p-6" @pointerdown.stop @click.stop>
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="font-display text-2xl font-bold">Batch script</h2>
@@ -35,11 +36,10 @@
<span class="mb-2 block font-medium text-zinc-300">Shot list</span>
<textarea
ref="textareaEl"
:value="text"
v-model="draft"
rows="16"
class="max-h-[min(36rem,55vh)] min-h-[16rem] w-full overflow-y-auto rounded-2xl border border-white/10 bg-zinc-950/70 px-4 py-3 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 [overflow-wrap:anywhere] focus:ring-2"
:placeholder="placeholder"
@input="onInput"
@keydown.ctrl.enter.prevent="apply"
@keydown.meta.enter.prevent="apply"
/>
@@ -100,11 +100,13 @@ const props = withDefaults(defineProps<{
const emit = defineEmits<{
close: []
apply: []
apply: [text: string]
'update:text': [value: string]
}>()
const textareaEl = ref<HTMLTextAreaElement | null>(null)
const draft = ref('')
const ignoreBackdropUntil = ref(0)
const placeholder = `shot 1
Change her jacket to black leather.
@@ -115,7 +117,7 @@ Put her in a red dress.
shot 3
Make it night, city lights behind her.`
const parsed = computed(() => parseImageBatchScript(props.text))
const parsed = computed(() => parseImageBatchScript(draft.value))
const applyLabel = computed(() => {
const n = parsed.value.length
@@ -123,32 +125,43 @@ const applyLabel = computed(() => {
return n === 1 ? 'Apply 1 prompt' : `Apply ${n} prompts`
})
function onInput(event: Event) {
emit('update:text', (event.target as HTMLTextAreaElement).value)
}
function close() {
emit('close')
}
function onBackdrop() {
if (Date.now() < ignoreBackdropUntil.value) return
close()
}
function apply() {
if (!parsed.value.length) return
emit('apply')
const text = draft.value
if (!parseImageBatchScript(text).length) return
emit('update:text', text)
emit('apply', text)
}
function onKey(event: KeyboardEvent) {
if (event.key === 'Escape') close()
}
watch(() => props.open, (open) => {
watch(() => props.open, async (open) => {
if (typeof document === 'undefined') return
document.body.style.overflow = open ? 'hidden' : ''
if (open) {
document.addEventListener('keydown', onKey)
nextTick(() => textareaEl.value?.focus())
} else {
if (!open) {
document.removeEventListener('keydown', onKey)
return
}
ignoreBackdropUntil.value = Date.now() + 500
draft.value = props.text || ''
document.addEventListener('keydown', onKey)
await nextTick()
textareaEl.value?.focus()
if (draft.value.trim()) return
try {
const clip = await navigator.clipboard.readText()
if (clip.trim()) draft.value = clip
} catch { /* clipboard permission */ }
})
onBeforeUnmount(() => {
components/LoraSelect.vue
+2
View File
@@ -46,6 +46,7 @@
<Thumbwheel
:model-value="item.strengthModel"
label="Model"
:lock-key="`lora-model:${item.name}`"
:min="LORA_STRENGTH_MIN"
:max="LORA_STRENGTH_MAX"
:step="LORA_STRENGTH_STEP"
@@ -56,6 +57,7 @@
<Thumbwheel
:model-value="item.strengthClip"
label="CLIP"
:lock-key="`lora-clip:${item.name}`"
:min="LORA_STRENGTH_MIN"
:max="LORA_STRENGTH_MAX"
:step="LORA_STRENGTH_STEP"
components/Thumbwheel.vue
+77 -9
View File
@@ -1,30 +1,61 @@
<template>
<div class="w-[6.5rem] min-w-0" :class="disabled ? 'opacity-50' : ''">
<div v-if="label" class="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-zinc-500">{{ label }}</div>
<div class="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950">
<div class="border-b border-white/5">
<SegmentDigits :value="display" />
<div
class="overflow-hidden rounded-2xl border bg-zinc-950"
:class="locked ? 'border-amber-300/35' : 'border-white/10'"
>
<div class="flex items-stretch border-b border-white/5">
<div class="min-w-0 flex-1">
<SegmentDigits :value="display" />
</div>
<button
type="button"
class="flex w-7 shrink-0 items-center justify-center border-l transition"
:class="locked
? 'border-amber-300/25 bg-amber-400/10 text-amber-300'
: 'border-white/5 text-zinc-600 hover:text-zinc-300'"
:aria-pressed="locked"
:aria-label="locked ? `Unlock ${dialName}` : `Lock ${dialName}`"
:title="locked ? 'Unlock — wheel and scroll will change this again' : 'Lock — keep this value while you scroll'"
@click.stop="toggleLock"
@pointerdown.stop
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" class="h-3.5 w-3.5" aria-hidden="true">
<rect x="3.2" y="7.2" width="9.6" height="7" rx="1.4" />
<path
v-if="locked"
stroke-linecap="round"
d="M5.2 7.2V5.1a2.8 2.8 0 015.6 0v2.1"
/>
<path
v-else
stroke-linecap="round"
d="M5.2 7.2V5.1a2.8 2.8 0 015.2-1.4"
/>
</svg>
</button>
</div>
<div
ref="root"
class="thumbwheel relative w-full select-none"
:class="[
compact ? 'h-28' : 'h-36',
disabled ? 'pointer-events-none' : 'cursor-ns-resize'
frozen ? 'pointer-events-none cursor-default' : 'cursor-ns-resize'
]"
role="slider"
:aria-label="ariaLabel || label || 'Value'"
:aria-valuemin="min"
:aria-valuemax="max"
:aria-valuenow="model"
:aria-disabled="disabled"
:aria-disabled="disabled || locked"
tabindex="0"
@pointerdown="onPointerDown"
@wheel.prevent="onWheel"
@keydown="onKey"
>
<div
class="thumbwheel-drum pointer-events-none absolute inset-y-1 left-1 right-8 overflow-hidden rounded-xl"
:class="locked ? 'opacity-40' : ''"
:style="{ backgroundPositionY: `${drumShift}px` }"
/>
<div class="pointer-events-none absolute inset-y-2 right-2.5 w-2.5 rounded-full bg-zinc-900 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.08)]">
@@ -47,6 +78,7 @@ const props = withDefaults(defineProps<{
coarseStep?: number
label?: string
ariaLabel?: string
lockKey?: string
disabled?: boolean
compact?: boolean
digits?: number
@@ -56,6 +88,7 @@ const props = withDefaults(defineProps<{
coarseStep: 1,
label: '',
ariaLabel: '',
lockKey: '',
disabled: false,
compact: false,
digits: 1
@@ -63,12 +96,36 @@ const props = withDefaults(defineProps<{
const model = defineModel<number>({ required: true })
const root = ref<HTMLElement | null>(null)
const locked = ref(false)
const dialName = computed(() => props.label || props.ariaLabel || 'dial')
const storeKey = computed(() => {
const id = (props.lockKey || props.label || props.ariaLabel || '').trim().toLowerCase()
return id ? `aigen-thumb-lock:${id}` : ''
})
const frozen = computed(() => props.disabled || locked.value)
const span = computed(() => Math.max(props.max - props.min, 0.0001))
const pct = computed(() => ((clamp(model.value) - props.min) / span.value) * 100)
const display = computed(() => format(model.value))
const drumShift = computed(() => Math.round((pct.value / 100) * 72))
function readLock() {
if (!storeKey.value || typeof localStorage === 'undefined') return
try {
locked.value = localStorage.getItem(storeKey.value) === '1'
} catch {
locked.value = false
}
}
function toggleLock() {
locked.value = !locked.value
if (!storeKey.value || typeof localStorage === 'undefined') return
try {
localStorage.setItem(storeKey.value, locked.value ? '1' : '0')
} catch { /* ignore */ }
}
function clamp(value: number) {
if (!Number.isFinite(value)) return props.min
const step = props.step || 0.1
@@ -89,13 +146,14 @@ function nudge(delta: number) {
}
function onWheel(event: WheelEvent) {
if (props.disabled) return
if (frozen.value) return
event.preventDefault()
const step = event.shiftKey ? props.coarseStep : props.fineStep
nudge(event.deltaY < 0 ? step : -step)
}
function onKey(event: KeyboardEvent) {
if (props.disabled) return
if (frozen.value) return
const step = event.shiftKey ? props.coarseStep : props.fineStep
if (event.key === 'ArrowUp' || event.key === 'ArrowRight') {
event.preventDefault()
@@ -113,7 +171,7 @@ function onKey(event: KeyboardEvent) {
}
function onPointerDown(event: PointerEvent) {
if (props.disabled || event.button !== 0) return
if (frozen.value || event.button !== 0) return
const el = root.value
if (!el) return
event.preventDefault()
@@ -134,6 +192,16 @@ function onPointerDown(event: PointerEvent) {
el.addEventListener('pointerup', onUp)
el.addEventListener('pointercancel', onUp)
}
onMounted(() => {
readLock()
const el = root.value
if (!el) return
el.addEventListener('wheel', onWheel, { passive: false })
onBeforeUnmount(() => el.removeEventListener('wheel', onWheel))
})
watch(storeKey, readLock)
</script>
<style scoped>
pages/index.vue
+25 -7
View File
@@ -362,12 +362,11 @@
<button
v-if="imagePassMode === 'batch'"
type="button"
class="w-full rounded-2xl border border-dashed px-4 py-2.5 text-left text-sm transition"
class="w-full scroll-mt-24 rounded-2xl border border-dashed px-4 py-2.5 text-left text-sm transition"
:class="imageBatchScript.trim()
? 'border-amber-300/40 bg-amber-400/5 text-amber-100 hover:border-amber-300'
: 'border-white/15 text-zinc-300 hover:border-amber-300/40 hover:text-amber-100'"
:disabled="editBusy"
@click="openImageBatchModal"
@click.stop.prevent="openImageBatchModal"
>
<span class="block font-semibold">{{ imageBatchScript.trim() ? 'Edit batch script' : 'Paste batch script' }}</span>
<span class="text-[11px] leading-snug text-zinc-400">{{ imageBatchButtonHint }}</span>
@@ -796,6 +795,7 @@
<span class="mb-1 block text-zinc-300">Strength (denoise)</span>
<Thumbwheel
v-model="v2Denoise"
lock-key="v2-denoise"
:min="IMAGE_V2_DENOISE_MIN"
:max="IMAGE_V2_DENOISE_MAX"
:step="IMAGE_V2_DENOISE_STEP"
@@ -857,6 +857,7 @@
<Thumbwheel
v-model="v2Megapixels"
aria-label="Megapixels"
lock-key="megapixels"
:min="IMAGE_SCALE_MP_MIN"
:max="IMAGE_SCALE_MP_MAX"
:step="IMAGE_SCALE_MP_STEP"
@@ -5879,23 +5880,38 @@ function reconstructImageBatchScript() {
function openImageBatchModal() {
imageBatchDraft.value = reconstructImageBatchScript()
imageBatchOpen.value = true
requestAnimationFrame(() => {
imageBatchOpen.value = true
})
}
function applyImageBatch() {
const shots = parseImageBatchScript(imageBatchDraft.value)
function applyImageBatch(text?: string) {
const src = String(text ?? imageBatchDraft.value)
const shots = parseImageBatchScript(src)
if (!shots.length) {
toast('Paste at least one prompt. Put shot 1, shot 2 on their own lines.')
return
}
imagePassMode.value = 'batch'
imageBatchScript.value = imageBatchDraft.value
imageBatchDraft.value = src
imageBatchScript.value = src
prompt.value = shots[0].prompt
editPassQueue.value = shots.slice(1).map(item => ({ id: crypto.randomUUID(), prompt: item.prompt }))
imageBatchOpen.value = false
toast(shots.length === 1 ? 'Loaded 1 prompt' : `Loaded ${shots.length} prompts on the start still`)
}
function absorbPastedImageBatch() {
if (imagePassMode.value !== 'batch') return
if (!(studioMode.value === 'edit' || v2PassChaining.value)) return
if (editPassQueue.value.length) return
const shots = parseImageBatchScript(prompt.value)
if (shots.length < 2) return
imageBatchScript.value = prompt.value
prompt.value = shots[0].prompt
editPassQueue.value = shots.slice(1).map(item => ({ id: crypto.randomUUID(), prompt: item.prompt }))
}
function imagePassUnit() {
return imagePassMode.value === 'batch' ? 'Batch' : 'Pass'
}
@@ -5922,6 +5938,7 @@ async function editImage() {
toast('Choose a library folder before editing.')
return
}
absorbPastedImageBatch()
const extraPasses = editPassQueue.value.map(item => ({ prompt: item.prompt.trim() }))
const hideOut = hideThumbnail.value
try {
@@ -6137,6 +6154,7 @@ async function editImageV2() {
toast('Each extra pass needs a prompt.')
return
}
absorbPastedImageBatch()
const extraPasses = v2PassChaining.value ? editPassQueue.value.map(item => ({ prompt: item.prompt.trim() })) : []
const hideOut = hideThumbnail.value
try {