Add an image batch-script popup that splits a pasted shot list onto the start still.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<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"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Batch image prompts"
|
||||
@click.self="close"
|
||||
>
|
||||
<div class="glass flex w-full max-w-5xl flex-col rounded-3xl p-5 sm:p-6">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="font-display text-2xl font-bold">Batch script</h2>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
Paste a block. Put
|
||||
<span class="font-medium text-zinc-300">shot 1</span>,
|
||||
<span class="font-medium text-zinc-300">shot 2</span>
|
||||
on their own lines —
|
||||
<span class="font-medium text-zinc-300">image 1</span>
|
||||
works the same. Each one is a new prompt on the start still, not the last output.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="shrink-0 rounded-full border border-white/10 px-3 py-1 text-sm text-zinc-400 hover:text-white"
|
||||
@click="close"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 grid min-h-0 gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(16rem,1fr)]">
|
||||
<label class="block min-w-0 text-sm">
|
||||
<span class="mb-2 block font-medium text-zinc-300">Shot list</span>
|
||||
<textarea
|
||||
ref="textareaEl"
|
||||
:value="text"
|
||||
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"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div class="min-w-0 space-y-2">
|
||||
<p class="text-sm font-medium text-zinc-300">
|
||||
<span v-if="parsed.length">{{ parsed.length }} image{{ parsed.length === 1 ? '' : 's' }} from the start still</span>
|
||||
<span v-else class="font-normal text-zinc-500">Images appear here once the first prompt is in.</span>
|
||||
</p>
|
||||
<div class="max-h-[min(36rem,55vh)] space-y-2 overflow-y-auto">
|
||||
<div
|
||||
v-for="(shot, index) in parsed"
|
||||
:key="shot.n + '-' + index"
|
||||
class="rounded-xl border border-white/10 bg-zinc-950/50 px-3 py-2"
|
||||
>
|
||||
<p class="text-xs font-medium text-amber-100">
|
||||
Image {{ index + 1 }}
|
||||
<span class="font-normal text-zinc-500"> · shot {{ shot.n }}</span>
|
||||
</p>
|
||||
<p class="mt-1 whitespace-pre-wrap text-xs text-zinc-300 [overflow-wrap:anywhere]">{{ shot.prompt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex flex-wrap items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-white/10 px-4 py-2 text-sm text-zinc-300 hover:text-white"
|
||||
@click="close"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-amber-400 px-4 py-2 text-sm font-semibold text-zinc-950 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
:disabled="!parsed.length"
|
||||
@click="apply"
|
||||
>
|
||||
{{ applyLabel }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { parseImageBatchScript } from '~/utils/parseShots'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
open: boolean
|
||||
text?: string
|
||||
}>(), {
|
||||
text: ''
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
apply: []
|
||||
'update:text': [value: string]
|
||||
}>()
|
||||
|
||||
const textareaEl = ref<HTMLTextAreaElement | null>(null)
|
||||
|
||||
const placeholder = `shot 1
|
||||
Change her jacket to black leather.
|
||||
|
||||
shot 2
|
||||
Put her in a red dress.
|
||||
|
||||
shot 3
|
||||
Make it night, city lights behind her.`
|
||||
|
||||
const parsed = computed(() => parseImageBatchScript(props.text))
|
||||
|
||||
const applyLabel = computed(() => {
|
||||
const n = parsed.value.length
|
||||
if (!n) return 'Apply'
|
||||
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 apply() {
|
||||
if (!parsed.value.length) return
|
||||
emit('apply')
|
||||
}
|
||||
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') close()
|
||||
}
|
||||
|
||||
watch(() => props.open, (open) => {
|
||||
if (typeof document === 'undefined') return
|
||||
document.body.style.overflow = open ? 'hidden' : ''
|
||||
if (open) {
|
||||
document.addEventListener('keydown', onKey)
|
||||
nextTick(() => textareaEl.value?.focus())
|
||||
} else {
|
||||
document.removeEventListener('keydown', onKey)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (typeof document !== 'undefined') document.body.style.overflow = ''
|
||||
document.removeEventListener('keydown', onKey)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user