Ship duration control, hidden previews, job resume, and desktop file purge.
The slider never left this machine, so deploy the generate UI with separate input/output hide toggles, reconnect in-progress jobs after refresh, and delete Comfy input/output files after they are saved to the library.
This commit is contained in:
+278
-45
@@ -41,10 +41,16 @@
|
||||
@drop.prevent="onDrop"
|
||||
@click="pickerOpen = true"
|
||||
>
|
||||
<div v-if="preview" class="relative">
|
||||
<div v-if="preview && !hideInputPreview" class="relative">
|
||||
<img :src="preview" alt="Source still" class="max-h-72 w-full rounded-xl object-contain bg-black/40">
|
||||
<button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else-if="preview && hideInputPreview" class="relative flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<span class="sensitive-glow absolute inset-3 rounded-xl" />
|
||||
<p class="relative font-medium">Still loaded · preview hidden</p>
|
||||
<p class="relative mt-1 text-sm text-zinc-500">Toggle Hide input still off to show it</p>
|
||||
<button type="button" class="relative mt-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else class="flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<p class="font-medium">Choose an image</p>
|
||||
<p class="mt-1 text-sm text-zinc-500">Browse the library or upload a new PNG, JPG, or WEBP</p>
|
||||
@@ -97,21 +103,29 @@
|
||||
>
|
||||
</label>
|
||||
<form v-if="currentFolder?.protected && !currentFolder.unlocked" class="space-y-2" @submit.prevent="unlockFolder(folderId)">
|
||||
<p class="text-sm text-zinc-400">Unlock this folder to generate into it.</p>
|
||||
<p class="text-sm text-zinc-400">This folder is locked. You can still generate into it; unlock to view clips.</p>
|
||||
<div class="flex gap-2">
|
||||
<input v-model="unlockPassword" type="password" class="min-w-0 flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
|
||||
<button type="submit" class="rounded-xl bg-amber-400 px-3 py-2 text-sm font-semibold text-zinc-950">Unlock</button>
|
||||
</div>
|
||||
</form>
|
||||
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
|
||||
<span class="font-medium text-zinc-200">Thumbnail</span>
|
||||
<span class="font-medium text-zinc-200">Hide input still</span>
|
||||
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
||||
<input v-model="showThumbnail" type="checkbox" class="peer sr-only" role="switch">
|
||||
<input v-model="hideInputPreview" type="checkbox" class="peer sr-only" role="switch">
|
||||
<span class="absolute inset-0 rounded-full bg-zinc-700 transition peer-checked:bg-amber-400" />
|
||||
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
|
||||
</span>
|
||||
</label>
|
||||
<p class="text-xs text-zinc-500">Defaults to this folder’s thumbnail setting whenever you pick a new still. You can override it for this job.</p>
|
||||
<label class="flex cursor-pointer items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
|
||||
<span class="font-medium text-zinc-200">Hide output preview</span>
|
||||
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
|
||||
<input v-model="hideThumbnail" type="checkbox" class="peer sr-only" role="switch">
|
||||
<span class="absolute inset-0 rounded-full bg-zinc-700 transition peer-checked:bg-amber-400" />
|
||||
<span class="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
|
||||
</span>
|
||||
</label>
|
||||
<p class="text-xs text-zinc-500">Output preview hides library thumbs and autoplay. Click the player to reveal; click anywhere else on the page to hide it again. Folder default applies to output preview when you pick a new still.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -126,13 +140,37 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="text-sm">
|
||||
<div class="text-sm">
|
||||
<span class="mb-1 block text-zinc-400">Duration</span>
|
||||
<select v-model.number="duration" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2">
|
||||
<option :value="5">5 seconds</option>
|
||||
<option :value="10">10 seconds</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="durationDraft"
|
||||
type="text"
|
||||
inputmode="decimal"
|
||||
class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 pr-8 cursor-ns-resize outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:cursor-text focus:ring-2"
|
||||
:class="{ 'select-none caret-transparent': durationScrubbing }"
|
||||
placeholder="seconds"
|
||||
autocomplete="off"
|
||||
spellcheck="false"
|
||||
@blur="commitDuration"
|
||||
@keydown.enter.prevent="commitDuration"
|
||||
@pointerdown="onDurationPointerDown"
|
||||
>
|
||||
<span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-zinc-500">s</span>
|
||||
</div>
|
||||
<input
|
||||
class="aigen-slider mt-3 w-full"
|
||||
type="range"
|
||||
:min="DURATION_SLIDER_MIN"
|
||||
:max="DURATION_SLIDER_MAX"
|
||||
:step="0.1"
|
||||
:value="durationSlider"
|
||||
:style="{ background: `linear-gradient(to right, #fbbf24 ${durationSliderPct}%, #27272a ${durationSliderPct}%)` }"
|
||||
aria-label="Duration in seconds"
|
||||
@input="onDurationSlider"
|
||||
>
|
||||
<p class="mt-1 text-[11px] text-zinc-500">Type any length, use the slider, or drag up/down in the box.</p>
|
||||
</div>
|
||||
<label class="text-sm">
|
||||
<span class="mb-1 block text-zinc-400">Seed</span>
|
||||
<input v-model="seedInput" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2" placeholder="random">
|
||||
@@ -145,7 +183,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="flex-1 rounded-2xl bg-amber-400 px-5 py-3 font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
:disabled="busy || !file || !prompt.trim() || !currentFolder?.unlocked"
|
||||
:disabled="busy || !file || !prompt.trim() || !folderId"
|
||||
@click="generate"
|
||||
>
|
||||
{{ busy ? 'Generating…' : 'Generate Video' }}
|
||||
@@ -162,7 +200,7 @@
|
||||
</section>
|
||||
|
||||
<section class="space-y-5">
|
||||
<div class="glass rounded-3xl p-5 sm:p-6">
|
||||
<div ref="outputPanel" class="glass rounded-3xl p-5 sm:p-6">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="font-display text-2xl font-bold">Output</h2>
|
||||
<p class="text-xs text-zinc-500">{{ elapsedLabel }} · step {{ step }}/{{ maxStep || (turbo ? 8 : 20) }}</p>
|
||||
@@ -178,11 +216,11 @@
|
||||
</div>
|
||||
<div
|
||||
class="relative mt-5 overflow-hidden rounded-2xl bg-black/50"
|
||||
:class="{ 'sensitive-glow': awaitingReveal }"
|
||||
:class="{ 'sensitive-glow': awaitingReveal || lockedSave }"
|
||||
:style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}` }"
|
||||
>
|
||||
<video
|
||||
v-if="videoUrl"
|
||||
v-if="videoUrl && !lockedSave"
|
||||
ref="player"
|
||||
:src="videoUrl"
|
||||
class="h-full w-full bg-black"
|
||||
@@ -194,20 +232,27 @@
|
||||
@play="onPlayed"
|
||||
/>
|
||||
<button
|
||||
v-if="awaitingReveal"
|
||||
v-if="awaitingReveal && !lockedSave"
|
||||
type="button"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-amber-100"
|
||||
@click="revealAndPlay"
|
||||
>
|
||||
<span class="font-display text-lg font-bold">Ready</span>
|
||||
<span class="text-sm text-amber-100/80">Click to play · thumbnail hidden</span>
|
||||
<span class="text-sm text-amber-100/80">Click to play · preview hidden</span>
|
||||
</button>
|
||||
<div
|
||||
v-else-if="lockedSave"
|
||||
class="absolute inset-0 flex flex-col items-center justify-center gap-2 px-6 text-center text-amber-100"
|
||||
>
|
||||
<span class="font-display text-lg font-bold">Saved to a locked folder</span>
|
||||
<span class="text-sm text-amber-100/80">Unlock that folder in the library to view this clip</span>
|
||||
</div>
|
||||
<div v-else-if="!videoUrl" class="flex h-full min-h-[12rem] items-center justify-center text-sm text-zinc-500">
|
||||
Generated MP4 appears here
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="videoUrl && !awaitingReveal"
|
||||
v-if="videoUrl && !awaitingReveal && !lockedSave"
|
||||
:href="videoUrl"
|
||||
:download="`${outputDownloadName}.mp4`"
|
||||
class="mt-4 inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
|
||||
@@ -230,7 +275,7 @@
|
||||
</div>
|
||||
|
||||
<form v-if="browseFolder?.protected && !browseFolder.unlocked" class="mt-4 space-y-3" @submit.prevent="unlockFolder(browseFolderId)">
|
||||
<p class="text-sm text-zinc-400">This folder is password protected.</p>
|
||||
<p class="text-sm text-zinc-400">This folder is locked. Unlock to view {{ browseFolder.clipCount || 0 }} clip{{ browseFolder.clipCount === 1 ? '' : 's' }}.</p>
|
||||
<input v-model="unlockPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Folder password">
|
||||
<button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2 font-semibold text-zinc-950">Unlock</button>
|
||||
</form>
|
||||
@@ -246,7 +291,7 @@
|
||||
@click="browseFolderId = folder.id"
|
||||
>
|
||||
{{ folder.name }}
|
||||
<span class="text-zinc-500">({{ clipsIn(folder.id).length }})</span>
|
||||
<span class="text-zinc-500">({{ folder.unlocked ? clipsIn(folder.id).length : folder.clipCount }})</span>
|
||||
<span v-if="folder.protected">{{ folder.unlocked ? '' : ' · lock' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -343,6 +388,7 @@ interface LibraryFolder {
|
||||
thumbnailDefault: boolean
|
||||
protected: boolean
|
||||
unlocked: boolean
|
||||
clipCount?: number
|
||||
}
|
||||
|
||||
interface LibraryStill {
|
||||
@@ -384,6 +430,7 @@ const aspects = [
|
||||
]
|
||||
|
||||
const player = ref<HTMLVideoElement | null>(null)
|
||||
const outputPanel = ref<HTMLElement | null>(null)
|
||||
const file = ref<File | null>(null)
|
||||
const preview = ref('')
|
||||
const dragging = ref(false)
|
||||
@@ -394,13 +441,21 @@ const aspect = ref<AspectId>('auto')
|
||||
const imageWidth = ref(0)
|
||||
const imageHeight = ref(0)
|
||||
const turbo = ref(true)
|
||||
const DURATION_MIN = 0.5
|
||||
const DURATION_MAX = 120
|
||||
const DURATION_SLIDER_MIN = 1
|
||||
const DURATION_SLIDER_MAX = 30
|
||||
const duration = ref(5)
|
||||
const durationDraft = ref('5')
|
||||
const durationScrubbing = ref(false)
|
||||
const durationSlider = computed(() => Math.min(DURATION_SLIDER_MAX, Math.max(DURATION_SLIDER_MIN, duration.value)))
|
||||
const durationSliderPct = computed(() => {
|
||||
return ((durationSlider.value - DURATION_SLIDER_MIN) / (DURATION_SLIDER_MAX - DURATION_SLIDER_MIN)) * 100
|
||||
})
|
||||
const seedInput = ref('random')
|
||||
const hideThumbnail = ref(false)
|
||||
const showThumbnail = computed({
|
||||
get: () => !hideThumbnail.value,
|
||||
set: (value: boolean) => { hideThumbnail.value = !value }
|
||||
})
|
||||
const hideInputPreview = ref(false)
|
||||
const JOB_STORE = 'aigen-active-job'
|
||||
const busy = ref(false)
|
||||
const progress = ref(0)
|
||||
const statusMessage = ref('Waiting for a still.')
|
||||
@@ -411,6 +466,8 @@ const elapsedMs = ref(0)
|
||||
const videoUrl = ref('')
|
||||
const jobId = ref('')
|
||||
const awaitingReveal = ref(false)
|
||||
const concealOutput = ref(false)
|
||||
const lockedSave = ref(false)
|
||||
const playerSize = ref({ width: 1344, height: 768 })
|
||||
const toasts = ref<{ id: string; message: string }[]>([])
|
||||
const comfyOk = ref(false)
|
||||
@@ -499,6 +556,10 @@ async function loadLibrary() {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
hideInputPreview.value = localStorage.getItem('aigen-hide-input-preview') === 'true'
|
||||
} catch { /* ignore */ }
|
||||
window.addEventListener('pointerdown', onSitePointerDown, true)
|
||||
const [health, me] = await Promise.all([
|
||||
$fetch<{ comfy?: { ok?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false } })),
|
||||
$fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })),
|
||||
@@ -509,9 +570,11 @@ onMounted(async () => {
|
||||
authEnabled.value = Boolean(me.authEnabled)
|
||||
authMode.value = me.authMode || ''
|
||||
instanceName.value = me.instanceName || 'AIGen'
|
||||
await resumeActiveJob()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('pointerdown', onSitePointerDown, true)
|
||||
stopTimer()
|
||||
stopListen()
|
||||
})
|
||||
@@ -520,6 +583,67 @@ watch(folderId, () => {
|
||||
applyThumbnailDefault()
|
||||
})
|
||||
|
||||
watch(hideInputPreview, (value) => {
|
||||
try {
|
||||
localStorage.setItem('aigen-hide-input-preview', String(value))
|
||||
} catch { /* ignore */ }
|
||||
})
|
||||
|
||||
watch(duration, (value) => {
|
||||
if (!durationScrubbing.value) durationDraft.value = formatDuration(value)
|
||||
})
|
||||
|
||||
function clampDuration(value: number) {
|
||||
if (!Number.isFinite(value)) return 5
|
||||
return Math.min(DURATION_MAX, Math.max(DURATION_MIN, Math.round(value * 10) / 10))
|
||||
}
|
||||
|
||||
function formatDuration(value: number) {
|
||||
return Number.isInteger(value) ? String(value) : value.toFixed(1).replace(/\.0$/, '')
|
||||
}
|
||||
|
||||
function commitDuration() {
|
||||
const parsed = Number.parseFloat(durationDraft.value.replace(',', '.').trim())
|
||||
duration.value = clampDuration(parsed)
|
||||
durationDraft.value = formatDuration(duration.value)
|
||||
}
|
||||
|
||||
function onDurationSlider(event: Event) {
|
||||
duration.value = clampDuration(Number((event.target as HTMLInputElement).value))
|
||||
durationDraft.value = formatDuration(duration.value)
|
||||
}
|
||||
|
||||
function onDurationPointerDown(event: PointerEvent) {
|
||||
if (event.button !== 0) return
|
||||
const input = event.currentTarget as HTMLInputElement
|
||||
const startY = event.clientY
|
||||
const startValue = duration.value
|
||||
let moved = false
|
||||
const onMove = (move: PointerEvent) => {
|
||||
const delta = startY - move.clientY
|
||||
if (!moved && Math.abs(delta) < 5) return
|
||||
if (!moved) {
|
||||
moved = true
|
||||
durationScrubbing.value = true
|
||||
input.setPointerCapture(move.pointerId)
|
||||
input.blur()
|
||||
}
|
||||
move.preventDefault()
|
||||
const next = clampDuration(startValue + delta / 18)
|
||||
duration.value = next
|
||||
durationDraft.value = formatDuration(next)
|
||||
}
|
||||
const onUp = () => {
|
||||
input.removeEventListener('pointermove', onMove)
|
||||
input.removeEventListener('pointerup', onUp)
|
||||
input.removeEventListener('pointercancel', onUp)
|
||||
durationScrubbing.value = false
|
||||
}
|
||||
input.addEventListener('pointermove', onMove)
|
||||
input.addEventListener('pointerup', onUp)
|
||||
input.addEventListener('pointercancel', onUp)
|
||||
}
|
||||
|
||||
function toast(message: string) {
|
||||
const id = crypto.randomUUID()
|
||||
toasts.value.push({ id, message })
|
||||
@@ -553,10 +677,6 @@ function onPickedImage(next: File) {
|
||||
}
|
||||
|
||||
async function persistDroppedStill(next: File) {
|
||||
if (!currentFolder.value?.unlocked) {
|
||||
toast('Unlock this folder before adding stills.')
|
||||
return
|
||||
}
|
||||
const body = new FormData()
|
||||
body.append('image', next)
|
||||
body.append('folderId', folderId.value)
|
||||
@@ -575,15 +695,83 @@ function onDrop(event: DragEvent) {
|
||||
void persistDroppedStill(next)
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
elapsedMs.value = 0
|
||||
function startTimer(offset = 0) {
|
||||
elapsedMs.value = offset
|
||||
stopTimer()
|
||||
const started = Date.now()
|
||||
const started = Date.now() - offset
|
||||
timer = setInterval(() => {
|
||||
elapsedMs.value = Date.now() - started
|
||||
}, 250)
|
||||
}
|
||||
|
||||
function persistActiveJob(id: string, hidden: boolean, folderLocked: boolean) {
|
||||
try {
|
||||
localStorage.setItem(JOB_STORE, JSON.stringify({ jobId: id, hideThumbnail: hidden, folderLocked, savedAt: Date.now() }))
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function clearActiveJob() {
|
||||
try {
|
||||
localStorage.removeItem(JOB_STORE)
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function readStoredJob() {
|
||||
try {
|
||||
const raw = localStorage.getItem(JOB_STORE)
|
||||
if (!raw) return null
|
||||
const parsed = JSON.parse(raw) as { jobId?: string; hideThumbnail?: boolean; folderLocked?: boolean }
|
||||
return parsed?.jobId ? parsed : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function resumeActiveJob() {
|
||||
const stored = readStoredJob()
|
||||
const active = await $fetch<{ jobId?: string | null; hideThumbnail?: boolean; folderLocked?: boolean; status?: string; elapsedMs?: number } | null>('/api/generate/active').catch(() => null)
|
||||
const id = stored?.jobId || active?.jobId
|
||||
if (!id) return
|
||||
const hidden = Boolean(stored?.hideThumbnail || active?.hideThumbnail)
|
||||
const locked = Boolean(stored?.folderLocked || active?.folderLocked)
|
||||
try {
|
||||
const snap = await $fetch<Record<string, any>>(`/api/generate/${id}`)
|
||||
jobId.value = id
|
||||
concealOutput.value = hidden
|
||||
settledUi = false
|
||||
applyJobEvent(snap, hidden, locked)
|
||||
const running = snap.status === 'queued' || snap.status === 'uploading' || snap.status === 'running' || snap.type === 'snapshot'
|
||||
if (running && !settledUi) {
|
||||
busy.value = true
|
||||
statusMessage.value = snap.message || 'Reconnecting to ComfyUI...'
|
||||
startTimer(Number(snap.elapsedMs || 0))
|
||||
persistActiveJob(id, hidden, locked)
|
||||
listen(id, hidden, locked)
|
||||
} else if (settledUi) {
|
||||
clearActiveJob()
|
||||
}
|
||||
} catch {
|
||||
clearActiveJob()
|
||||
}
|
||||
}
|
||||
|
||||
function onSitePointerDown(event: PointerEvent) {
|
||||
if (!concealOutput.value || awaitingReveal.value || lockedSave.value || !videoUrl.value) return
|
||||
const root = outputPanel.value
|
||||
const target = event.target as Node | null
|
||||
if (root && target && root.contains(target)) return
|
||||
concealAndPause()
|
||||
}
|
||||
|
||||
function concealAndPause() {
|
||||
awaitingReveal.value = true
|
||||
const el = player.value
|
||||
if (el) {
|
||||
el.pause()
|
||||
el.currentTime = 0
|
||||
}
|
||||
}
|
||||
|
||||
function stopTimer() {
|
||||
if (timer) clearInterval(timer)
|
||||
timer = null
|
||||
@@ -609,6 +797,16 @@ async function unlockFolder(id: string) {
|
||||
const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value, folderId: id } })
|
||||
unlockPassword.value = ''
|
||||
applyLibrary(data)
|
||||
if (lockedSave.value) {
|
||||
const dest = folders.value.find(folder => folder.id === folderId.value)
|
||||
if (dest?.unlocked) {
|
||||
lockedSave.value = false
|
||||
const newest = clips.value
|
||||
.filter(clip => clip.folderId === folderId.value)
|
||||
.sort((a, b) => b.createdAt - a.createdAt)[0]
|
||||
if (newest) openClip(newest)
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast(error?.data?.statusMessage || error?.statusMessage || 'Unlock failed')
|
||||
}
|
||||
@@ -620,9 +818,19 @@ async function lockFolder(id: string) {
|
||||
} catch {
|
||||
await loadLibrary()
|
||||
}
|
||||
const stillVisible = clips.value.some(clip => videoUrl.value.includes(clip.id))
|
||||
if (videoUrl.value && !stillVisible) {
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
lockedSave.value = false
|
||||
concealOutput.value = false
|
||||
statusMessage.value = 'Folder locked'
|
||||
}
|
||||
}
|
||||
|
||||
function openClip(item: LibraryClip) {
|
||||
lockedSave.value = false
|
||||
concealOutput.value = item.hideThumbnail
|
||||
videoUrl.value = `/api/library/clips/${item.id}/video`
|
||||
awaitingReveal.value = item.hideThumbnail
|
||||
playerSize.value = { width: item.width || 1344, height: item.height || 768 }
|
||||
@@ -638,6 +846,8 @@ async function removeClip(item: LibraryClip) {
|
||||
if (videoUrl.value.includes(item.id)) {
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
concealOutput.value = false
|
||||
lockedSave.value = false
|
||||
}
|
||||
await loadLibrary()
|
||||
} catch (error: any) {
|
||||
@@ -658,8 +868,8 @@ function revealAndPlay() {
|
||||
|
||||
async function generate() {
|
||||
if (!file.value || !prompt.value.trim()) return
|
||||
if (!currentFolder.value?.unlocked) {
|
||||
toast('Unlock the selected folder before generating.')
|
||||
if (!folderId.value) {
|
||||
toast('Choose a library folder before generating.')
|
||||
return
|
||||
}
|
||||
statusBusy.value = false
|
||||
@@ -668,6 +878,8 @@ async function generate() {
|
||||
progress.value = 1
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
concealOutput.value = hideThumbnail.value
|
||||
lockedSave.value = false
|
||||
playerSize.value = outputSize.value
|
||||
statusMessage.value = 'Checking ComfyUI...'
|
||||
startTimer()
|
||||
@@ -686,18 +898,20 @@ async function generate() {
|
||||
body.append('hideThumbnail', String(hideThumbnail.value))
|
||||
body.append('name', clipName.value.trim())
|
||||
outputDownloadName.value = clipFileName(clipName.value.trim() || prompt.value.trim().split(/[.!?\n]/)[0] || 'aigen')
|
||||
const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean }>('/api/generate', {
|
||||
const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/generate', {
|
||||
method: 'POST',
|
||||
body
|
||||
})
|
||||
jobId.value = started.jobId
|
||||
maxStep.value = started.steps
|
||||
playerSize.value = { width: started.width, height: started.height }
|
||||
listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value)
|
||||
persistActiveJob(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
|
||||
listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
|
||||
} catch (error: any) {
|
||||
busy.value = false
|
||||
statusBusy.value = false
|
||||
stopTimer()
|
||||
clearActiveJob()
|
||||
const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Failed to start generation'
|
||||
statusMessage.value = message
|
||||
toast(message)
|
||||
@@ -713,7 +927,7 @@ function stopListen() {
|
||||
}
|
||||
}
|
||||
|
||||
function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
|
||||
function applyJobEvent(payload: Record<string, any>, hidden: boolean, folderLocked: boolean) {
|
||||
if (payload.message) statusMessage.value = payload.message
|
||||
statusBusy.value = payload.type === 'busy' || payload.busy === true
|
||||
if (typeof payload.progress === 'number') progress.value = payload.progress
|
||||
@@ -726,15 +940,33 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
|
||||
|
||||
if (complete && (payload.clipId || payload.filename)) {
|
||||
settledUi = true
|
||||
const clipUrl = payload.clipId
|
||||
? `/api/library/clips/${payload.clipId}/video`
|
||||
: `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
|
||||
videoUrl.value = clipUrl
|
||||
awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
|
||||
const dest = folders.value.find(folder => folder.id === folderId.value)
|
||||
const locked = dest
|
||||
? Boolean(dest.protected && !dest.unlocked)
|
||||
: (folderLocked || payload.folderLocked === true)
|
||||
if (locked) {
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
concealOutput.value = false
|
||||
lockedSave.value = true
|
||||
browseFolderId.value = folderId.value
|
||||
statusMessage.value = 'Saved to the locked folder. Unlock it to view.'
|
||||
} else if (payload.clipId) {
|
||||
videoUrl.value = `/api/library/clips/${payload.clipId}/video`
|
||||
awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
|
||||
concealOutput.value = awaitingReveal.value
|
||||
lockedSave.value = false
|
||||
} else {
|
||||
videoUrl.value = `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
|
||||
awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
|
||||
concealOutput.value = awaitingReveal.value
|
||||
lockedSave.value = false
|
||||
}
|
||||
busy.value = false
|
||||
statusBusy.value = false
|
||||
stopTimer()
|
||||
stopListen()
|
||||
clearActiveJob()
|
||||
loadLibrary().catch(() => null)
|
||||
return
|
||||
}
|
||||
@@ -745,15 +977,16 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean) {
|
||||
statusBusy.value = false
|
||||
stopTimer()
|
||||
stopListen()
|
||||
clearActiveJob()
|
||||
toast(payload.error || payload.message || 'Generation failed')
|
||||
}
|
||||
}
|
||||
|
||||
function listen(id: string, hidden: boolean) {
|
||||
function listen(id: string, hidden: boolean, folderLocked = false) {
|
||||
stopListen()
|
||||
source = new EventSource(`/api/generate/${id}/stream`)
|
||||
source.onmessage = (event) => {
|
||||
applyJobEvent(JSON.parse(event.data), hidden)
|
||||
applyJobEvent(JSON.parse(event.data), hidden, folderLocked)
|
||||
}
|
||||
const tick = async () => {
|
||||
if (settledUi) {
|
||||
@@ -762,14 +995,14 @@ function listen(id: string, hidden: boolean) {
|
||||
}
|
||||
try {
|
||||
const snap = await $fetch<Record<string, any>>(`/api/generate/${id}`)
|
||||
applyJobEvent(snap, hidden)
|
||||
applyJobEvent(snap, hidden, folderLocked)
|
||||
} catch {
|
||||
try {
|
||||
const recovered = await $fetch<Record<string, any>>('/api/generate/recover', {
|
||||
method: 'POST',
|
||||
body: { jobId: id }
|
||||
})
|
||||
applyJobEvent(recovered, hidden)
|
||||
applyJobEvent(recovered, hidden, folderLocked)
|
||||
} catch {
|
||||
// Job snapshot can 404 briefly after a restart; keep polling while busy.
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user