aigen/components/ImageBatchModal.vue

<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>