Held jobs
@@ -473,12 +482,20 @@Output
-+
+ {{ editElapsedLabel }} + · step {{ editStep }}/{{ editMaxStep }} +
+{{ elapsedLabel }} · chain {{ chainStep }}/{{ chainTotal }} · step {{ step }}/{{ maxStep || (turbo ? 8 : 20) }}
Video generation continues in the background.
+Image edit continues in the background.
+ +
{{ statusMessage }}
@@ -488,7 +505,7 @@
Step {{ chainStep }}/{{ chainTotal }}{{ chainLabel ? `: ${chainLabel}` : '' }}
· {{ overallProgress }}% overall
-
-
+
-
-
- {{ studioMode === 'edit' ? 'Edited still appears here' : 'Generated MP4 appears here' }}
+ Generated MP4 appears here
-
- Download still
-
-
-
+
+
+
+
+ {{ editStatusMessage }}
+ {{ editProgress }}%
+
+
+
+
+
+ ![Edited still]()
+
+
+
+ Saved to a locked folder
+ Unlock that folder in the library to view this still
+
+
+ Edited still appears here
+
+
+
+ Download still
+
+
+
+
@@ -928,7 +986,8 @@ const prompt = ref('')
const shotScriptMode = ref(false)
const extensionQueue = ref([])
const clipName = ref('')
-const outputDownloadName = ref('aigen')
+const videoDownloadName = ref('aigen')
+const editDownloadName = ref('aigen-edit')
const aspect = ref('auto')
const imageWidth = ref(0)
const imageHeight = ref(0)
@@ -950,7 +1009,9 @@ const hideThumbnail = ref(false)
const hideInputPreview = ref(false)
const autoplayEnabled = ref(false)
const JOB_STORE = 'aigen-active-job'
-const busy = ref(false)
+const EDIT_JOB_STORE = 'aigen-active-edit-job'
+const videoBusy = ref(false)
+const editBusy = ref(false)
const studioMode = ref('video')
const imageComfyOk = ref(false)
const imageComfyBusy = ref(false)
@@ -971,11 +1032,20 @@ const expandedFamilies = ref>({})
const elapsedMs = ref(0)
const videoUrl = ref('')
const editResultUrl = ref('')
+const editProgress = ref(0)
+const editStatusMessage = ref('Waiting for a still.')
+const editStatusBusy = ref(false)
+const editStep = ref(0)
+const editMaxStep = ref(4)
+const editElapsedMs = ref(0)
+const editAwaitingReveal = ref(false)
+const editLockedSave = ref(false)
const editSteps = ref(4)
const editCfg = ref(1)
const editDenoise = ref(0.75)
const editNegative = ref('blurry, low quality, deformed, bad anatomy, watermark, text, extra fingers')
-const jobId = ref('')
+const videoJobId = ref('')
+const editJobId = ref('')
const currentClipId = ref('')
const extendOpen = ref(false)
const extendPrompt = ref('')
@@ -1018,20 +1088,28 @@ const pickerHeading = computed(() => {
if (pickerSlot.value === 'main') return 'Choose an image'
return `Choose identity ref ${Number(pickerSlot.value) + 1}`
})
-let timer: ReturnType | null = null
-let source: EventSource | null = null
-let pollTimer: ReturnType | null = null
+let videoTimer: ReturnType | null = null
+let editTimer: ReturnType | null = null
+let videoSource: EventSource | null = null
+let editSource: EventSource | null = null
+let videoPollTimer: ReturnType | null = null
+let editPollTimer: ReturnType | null = null
let healthTimer: ReturnType | null = null
-let settledUi = false
-let listenGen = 0
+let videoSettledUi = false
+let editSettledUi = false
+let videoListenGen = 0
+let editListenGen = 0
let activeDraftId = ''
-const elapsedLabel = computed(() => {
- const seconds = Math.floor(elapsedMs.value / 1000)
+function formatElapsed(ms: number) {
+ const seconds = Math.floor(ms / 1000)
const mm = String(Math.floor(seconds / 60)).padStart(2, '0')
const ss = String(seconds % 60).padStart(2, '0')
return `${mm}:${ss}`
-})
+}
+
+const elapsedLabel = computed(() => formatElapsed(elapsedMs.value))
+const editElapsedLabel = computed(() => formatElapsed(editElapsedMs.value))
const comfyBadge = computed(() => {
if (!comfyOk.value) {
@@ -1135,9 +1213,25 @@ const queueReady = computed(() => {
if (shotScriptMode.value) return parsedShots.value.length > 0 && parsedShots.value.every(shot => shot.prompt.trim())
return extensionQueue.value.every(item => item.prompt.trim())
})
+const videoGenerateDisabled = computed(() => {
+ return videoBusy.value || !file.value || !prompt.value.trim() || !folderId.value || !queueReady.value
+})
+const editBlocked = computed(() => {
+ if (editBusy.value) return true
+ if (!file.value || !prompt.value.trim() || !folderId.value) return true
+ if (!imageComfyConfigured.value || !imageComfyOk.value) return true
+ if (imageComfyBusy.value) return true
+ return false
+})
+const editBlockReason = computed(() => {
+ if (!imageComfyConfigured.value) return 'Image edit sidecar is not configured.'
+ if (!imageComfyOk.value) return 'Edit Comfy is offline.'
+ if (imageComfyBusy.value && !editBusy.value) return 'Sidecar is busy with another prompt.'
+ return ''
+})
const generateLabel = computed(() => {
const n = shotScriptMode.value ? Math.max(0, parsedShots.value.length - 1) : extensionQueue.value.length
- if (busy.value) return 'Generating…'
+ if (videoBusy.value) return 'Generating…'
if (!n) return 'Generate Video'
return n === 1 ? 'Generate Initial + 1 Extension' : `Generate Initial + ${n} Extensions`
})
@@ -1221,7 +1315,7 @@ function chainPartDone(index: number) {
}
function chainPartCurrent(index: number) {
- return busy.value && index === completedChainStep.value
+ return videoBusy.value && index === completedChainStep.value
}
function chainPartClass(index: number) {
@@ -1509,30 +1603,35 @@ function onDrop(event: DragEvent) {
void persistDroppedStill(next)
}
-function startTimer(offset = 0) {
- elapsedMs.value = offset
- stopTimer()
+function startTimer(kind: 'video' | 'edit', offset = 0) {
+ const elapsed = kind === 'edit' ? editElapsedMs : elapsedMs
+ elapsed.value = offset
+ stopTimer(kind)
const started = Date.now() - offset
- timer = setInterval(() => {
- elapsedMs.value = Date.now() - started
+ const handle = setInterval(() => {
+ elapsed.value = Date.now() - started
}, 250)
+ if (kind === 'edit') editTimer = handle
+ else videoTimer = handle
}
-function persistActiveJob(id: string, hidden: boolean, folderLocked: boolean) {
+function persistActiveJob(kind: 'video' | 'edit', id: string, hidden: boolean, folderLocked: boolean) {
+ const key = kind === 'edit' ? EDIT_JOB_STORE : JOB_STORE
try {
- localStorage.setItem(JOB_STORE, JSON.stringify({ jobId: id, hideThumbnail: hidden, folderLocked, savedAt: Date.now() }))
+ localStorage.setItem(key, JSON.stringify({ jobId: id, hideThumbnail: hidden, folderLocked, savedAt: Date.now() }))
} catch { /* ignore */ }
}
-function clearActiveJob() {
+function clearActiveJob(kind?: 'video' | 'edit') {
try {
- localStorage.removeItem(JOB_STORE)
+ if (!kind || kind === 'video') localStorage.removeItem(JOB_STORE)
+ if (!kind || kind === 'edit') localStorage.removeItem(EDIT_JOB_STORE)
} catch { /* ignore */ }
}
-function readStoredJob() {
+function readStoredJob(key = JOB_STORE) {
try {
- const raw = localStorage.getItem(JOB_STORE)
+ const raw = localStorage.getItem(key)
if (!raw) return null
const parsed = JSON.parse(raw) as { jobId?: string; hideThumbnail?: boolean; folderLocked?: boolean }
return parsed?.jobId ? parsed : null
@@ -1541,31 +1640,68 @@ function readStoredJob() {
}
}
-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)
+async function resumeTrack(kind: 'video' | 'edit', id: string, hidden: boolean, locked: boolean) {
try {
const snap = await $fetch>(`/api/generate/${id}`)
- jobId.value = id
- concealOutput.value = hidden
- settledUi = false
- applyJobEvent(snap, hidden, locked, id)
+ if (kind === 'edit') {
+ editJobId.value = id
+ editSettledUi = false
+ } else {
+ videoJobId.value = id
+ concealOutput.value = hidden
+ videoSettledUi = false
+ }
+ applyJobEvent(kind, snap, hidden, locked, id)
const running = snap.status === 'queued' || snap.status === 'uploading' || snap.status === 'running'
- 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()
+ const settled = kind === 'edit' ? editSettledUi : videoSettledUi
+ if (running && !settled) {
+ if (kind === 'edit') {
+ editBusy.value = true
+ editStatusMessage.value = snap.message || 'Reconnecting to sidecar ComfyUI...'
+ } else {
+ videoBusy.value = true
+ statusMessage.value = snap.message || 'Reconnecting to ComfyUI...'
+ }
+ startTimer(kind, Number(snap.elapsedMs || 0))
+ persistActiveJob(kind, id, hidden, locked)
+ listen(kind, id, hidden, locked)
+ } else if (settled) {
+ clearActiveJob(kind)
}
} catch {
- clearActiveJob()
+ clearActiveJob(kind)
+ }
+}
+
+async function resumeActiveJob() {
+ const storedVideo = readStoredJob(JOB_STORE)
+ const storedEdit = readStoredJob(EDIT_JOB_STORE)
+ const active = await $fetch<{
+ jobId?: string | null
+ video?: { jobId?: string; hideThumbnail?: boolean; folderLocked?: boolean }
+ edit?: { jobId?: string; hideThumbnail?: boolean; folderLocked?: boolean }
+ hideThumbnail?: boolean
+ folderLocked?: boolean
+ } | null>('/api/generate/active').catch(() => null)
+
+ const videoId = storedVideo?.jobId || active?.video?.jobId || (!active?.edit?.jobId ? active?.jobId : null) || ''
+ const editId = storedEdit?.jobId || active?.edit?.jobId || ''
+
+ if (videoId) {
+ await resumeTrack(
+ 'video',
+ videoId,
+ Boolean(storedVideo?.hideThumbnail || active?.video?.hideThumbnail || active?.hideThumbnail),
+ Boolean(storedVideo?.folderLocked || active?.video?.folderLocked || active?.folderLocked)
+ )
+ }
+ if (editId) {
+ await resumeTrack(
+ 'edit',
+ editId,
+ Boolean(storedEdit?.hideThumbnail || active?.edit?.hideThumbnail),
+ Boolean(storedEdit?.folderLocked || active?.edit?.folderLocked)
+ )
}
}
@@ -1586,9 +1722,15 @@ function concealAndPause() {
}
}
-function stopTimer() {
- if (timer) clearInterval(timer)
- timer = null
+function stopTimer(kind?: 'video' | 'edit') {
+ if (!kind || kind === 'video') {
+ if (videoTimer) clearInterval(videoTimer)
+ videoTimer = null
+ }
+ if (!kind || kind === 'edit') {
+ if (editTimer) clearInterval(editTimer)
+ editTimer = null
+ }
}
function clipFileName(name: string) {
@@ -1741,13 +1883,12 @@ async function openExtend(item?: LibraryClip) {
async function generateExtension() {
const id = clipIdFromPlayer()
if (!id || !extendPrompt.value.trim()) return
- const switching = busy.value
+ const switching = videoBusy.value
statusBusy.value = false
- busy.value = true
+ videoBusy.value = true
watchingLibrary.value = false
- listenGen += 1
- stopListen()
- settledUi = false
+ stopListen('video')
+ videoSettledUi = false
progress.value = 1
awaitingReveal.value = false
concealOutput.value = hideThumbnail.value || currentClip.value?.hideThumbnail === true
@@ -1759,7 +1900,7 @@ async function generateExtension() {
completedChainStep.value = 0
activeChainPlan.value = []
statusMessage.value = 'Extracting last frame & stitching extension...'
- startTimer()
+ startTimer('video')
try {
const started = await $fetch<{ jobId: string; steps: number; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/extend', {
method: 'POST',
@@ -1771,17 +1912,17 @@ async function generateExtension() {
})
closeExtend()
if (switching) toast('Switched to this extension. The other job will keep saving to the library.')
- jobId.value = started.jobId
+ videoJobId.value = started.jobId
maxStep.value = started.steps
- settledUi = false
- persistActiveJob(started.jobId, started.hideThumbnail === true || concealOutput.value, started.folderLocked === true)
- listen(started.jobId, started.hideThumbnail === true || concealOutput.value, started.folderLocked === true)
+ videoSettledUi = false
+ persistActiveJob('video', started.jobId, started.hideThumbnail === true || concealOutput.value, started.folderLocked === true)
+ listen('video', started.jobId, started.hideThumbnail === true || concealOutput.value, started.folderLocked === true)
void pollComfyHealth()
} catch (error: any) {
- busy.value = false
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- clearActiveJob()
+ stopTimer('video')
+ clearActiveJob('video')
const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Failed to start extension'
statusMessage.value = message
toast(message)
@@ -1798,8 +1939,8 @@ function openClip(item: LibraryClip) {
awaitingReveal.value = item.hideThumbnail
playerSize.value = { width: item.width || 1344, height: item.height || 768 }
browseFolderId.value = item.folderId
- outputDownloadName.value = clipFileName(item.name || item.prompt.split(/[.!?\n]/)[0] || 'aigen')
- if (!busy.value) {
+ videoDownloadName.value = clipFileName(item.name || item.prompt.split(/[.!?\n]/)[0] || 'aigen')
+ if (!videoBusy.value) {
statusMessage.value = item.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
progress.value = 100
}
@@ -1875,7 +2016,7 @@ async function saveRename(item: LibraryClip) {
}))
cancelRename()
if (videoUrl.value.includes(item.id)) {
- outputDownloadName.value = clipFileName(name)
+ videoDownloadName.value = clipFileName(name)
}
statusMessage.value = `Renamed to ${name}`
} catch (error: any) {
@@ -1912,23 +2053,17 @@ async function editImage() {
toast('Choose a library folder before editing.')
return
}
- statusBusy.value = false
- busy.value = true
- listenGen += 1
- stopListen()
- settledUi = false
- progress.value = 2
- videoUrl.value = ''
+ editStatusBusy.value = false
+ editBusy.value = true
+ stopListen('edit')
+ editSettledUi = false
+ editProgress.value = 2
editResultUrl.value = ''
- currentClipId.value = ''
- closeExtend()
- awaitingReveal.value = false
- concealOutput.value = hideInputPreview.value
- lockedSave.value = false
- watchingLibrary.value = false
- statusMessage.value = 'Checking sidecar ComfyUI...'
- maxStep.value = editSteps.value
- startTimer()
+ editAwaitingReveal.value = false
+ editLockedSave.value = false
+ editStatusMessage.value = 'Checking sidecar ComfyUI...'
+ editMaxStep.value = editSteps.value
+ startTimer('edit')
try {
const body = new FormData()
body.append('image', file.value)
@@ -1941,23 +2076,24 @@ async function editImage() {
body.append('folderId', folderId.value)
body.append('hideInput', String(showPrivacyToggles.value && hideInputPreview.value))
body.append('name', clipName.value.trim())
- outputDownloadName.value = clipFileName(clipName.value.trim() || prompt.value.split(/[.!?\n]/)[0] || 'aigen-edit')
+ editDownloadName.value = clipFileName(clipName.value.trim() || prompt.value.split(/[.!?\n]/)[0] || 'aigen-edit')
const started = await $fetch<{ jobId: string; steps: number; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/edit', {
method: 'POST',
body
})
- jobId.value = started.jobId
- maxStep.value = started.steps
- persistActiveJob(started.jobId, started.hideThumbnail === true || hideInputPreview.value, started.folderLocked === true)
- listen(started.jobId, started.hideThumbnail === true || hideInputPreview.value, started.folderLocked === true)
+ editJobId.value = started.jobId
+ editMaxStep.value = started.steps
+ persistActiveJob('edit', started.jobId, started.hideThumbnail === true || hideInputPreview.value, started.folderLocked === true)
+ listen('edit', started.jobId, started.hideThumbnail === true || hideInputPreview.value, started.folderLocked === true)
+ void pollComfyHealth()
} catch (error: any) {
- settledUi = true
+ editSettledUi = true
const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Image edit failed'
- statusMessage.value = message
+ editStatusMessage.value = message
toast(message)
- busy.value = false
- statusBusy.value = false
- stopTimer()
+ editBusy.value = false
+ editStatusBusy.value = false
+ stopTimer('edit')
void pollComfyHealth()
}
}
@@ -1966,7 +2102,7 @@ async function useEditAsInput() {
if (!editResultUrl.value) return
try {
const blob = await $fetch(editResultUrl.value, { responseType: 'blob' })
- readFile(new File([blob], `${outputDownloadName.value || 'edited'}.png`, { type: blob.type || 'image/png' }))
+ readFile(new File([blob], `${editDownloadName.value || 'edited'}.png`, { type: blob.type || 'image/png' }))
toast('Edited still is now the input')
} catch {
toast('Could not load that still as input')
@@ -1994,13 +2130,11 @@ async function generate() {
? shots.slice(1).map(shot => ({ prompt: shot.prompt.trim(), duration: duration.value }))
: extensionQueue.value.map(item => ({ prompt: item.prompt.trim(), duration: item.duration }))
statusBusy.value = false
- busy.value = true
- listenGen += 1
- stopListen()
- settledUi = false
+ videoBusy.value = true
+ stopListen('video')
+ videoSettledUi = false
progress.value = 1
videoUrl.value = ''
- editResultUrl.value = ''
currentClipId.value = ''
closeExtend()
awaitingReveal.value = false
@@ -2015,7 +2149,7 @@ async function generate() {
overallProgress.value = 0
completedChainStep.value = 0
activeChainPlan.value = plannedChain.value.map(part => ({ ...part }))
- startTimer()
+ startTimer('video')
try {
const body = new FormData()
body.append('image', file.value)
@@ -2047,42 +2181,100 @@ async function generate() {
if (queued.length) {
body.append('extensions', JSON.stringify(queued))
}
- outputDownloadName.value = clipFileName(clipName.value.trim() || initialPrompt.split(/[.!?\n]/)[0] || 'aigen')
+ videoDownloadName.value = clipFileName(clipName.value.trim() || initialPrompt.split(/[.!?\n]/)[0] || 'aigen')
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
+ videoJobId.value = started.jobId
maxStep.value = started.steps
playerSize.value = { width: started.width, height: started.height }
- settledUi = false
- persistActiveJob(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
- listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
+ videoSettledUi = false
+ persistActiveJob('video', started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
+ listen('video', started.jobId, started.hideThumbnail === true || hideThumbnail.value, started.folderLocked === true)
void pollComfyHealth()
} catch (error: any) {
- busy.value = false
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- clearActiveJob()
+ stopTimer('video')
+ clearActiveJob('video')
const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Failed to start generation'
statusMessage.value = message
toast(message)
}
}
-function stopListen() {
- source?.close()
- source = null
- if (pollTimer) {
- clearInterval(pollTimer)
- pollTimer = null
+function stopListen(kind?: 'video' | 'edit') {
+ if (!kind || kind === 'video') {
+ videoSource?.close()
+ videoSource = null
+ if (videoPollTimer) {
+ clearInterval(videoPollTimer)
+ videoPollTimer = null
+ }
+ }
+ if (!kind || kind === 'edit') {
+ editSource?.close()
+ editSource = null
+ if (editPollTimer) {
+ clearInterval(editPollTimer)
+ editPollTimer = null
+ }
}
}
-function applyJobEvent(payload: Record, hidden: boolean, folderLocked: boolean, expectedJobId: string) {
- if (expectedJobId && jobId.value && expectedJobId !== jobId.value) return
- if (payload.jobId && expectedJobId && payload.jobId !== expectedJobId) return
+function applyEditEvent(payload: Record, hidden: boolean, folderLocked: boolean) {
+ if (payload.message) editStatusMessage.value = payload.message
+ editStatusBusy.value = payload.type === 'busy' || payload.busy === true
+ if (typeof payload.progress === 'number') editProgress.value = payload.progress
+ if (typeof payload.step === 'number') editStep.value = payload.step
+ if (typeof payload.maxStep === 'number') editMaxStep.value = payload.maxStep
+ const failed = payload.type === 'error' || payload.status === 'error' || payload.status === 'cancelled'
+ const complete = payload.type === 'complete' || payload.status === 'complete'
+ if (editSettledUi) return
+
+ if (complete && payload.stillId) {
+ editSettledUi = true
+ const dest = folders.value.find(folder => folder.id === folderId.value)
+ const locked = dest
+ ? Boolean(dest.protected && !dest.unlocked)
+ : (folderLocked || payload.folderLocked === true)
+ if (locked) {
+ editResultUrl.value = ''
+ editLockedSave.value = true
+ browseFolderId.value = folderId.value
+ editStatusMessage.value = 'Saved to the locked folder. Unlock it to view.'
+ } else {
+ editResultUrl.value = `/api/library/stills/${payload.stillId}`
+ editAwaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
+ editLockedSave.value = false
+ editStatusMessage.value = 'Edit finished'
+ }
+ editBusy.value = false
+ editStatusBusy.value = false
+ stopTimer('edit')
+ stopListen('edit')
+ clearActiveJob('edit')
+ loadLibrary().catch(() => null)
+ void pollComfyHealth()
+ return
+ }
+
+ if (failed) {
+ editSettledUi = true
+ editBusy.value = false
+ editStatusBusy.value = false
+ stopTimer('edit')
+ stopListen('edit')
+ clearActiveJob('edit')
+ loadLibrary().catch(() => null)
+ void pollComfyHealth()
+ toast(payload.error || payload.message || 'Image edit failed')
+ }
+}
+
+function applyVideoEvent(payload: Record, 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
@@ -2096,7 +2288,8 @@ function applyJobEvent(payload: Record, hidden: boolean, folderLock
const failed = payload.type === 'error' || payload.status === 'error' || payload.status === 'cancelled'
const complete = payload.type === 'complete' || payload.status === 'complete'
const deferred = payload.type === 'deferred' || payload.status === 'deferred'
- if (settledUi) return
+ if (videoSettledUi) return
+ if (payload.stillId) return
if (payload.type === 'checkpoint' && payload.clipId) {
completedChainStep.value = Math.max(completedChainStep.value, Number(payload.chainStep || chainStep.value) || 0)
@@ -2111,53 +2304,31 @@ function applyJobEvent(payload: Record, hidden: boolean, folderLock
}
if (deferred) {
- settledUi = true
- busy.value = false
+ videoSettledUi = true
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
+ stopTimer('video')
+ stopListen('video')
+ clearActiveJob('video')
loadLibrary().catch(() => null)
void pollComfyHealth()
toast(payload.message || 'Comfy was still busy. This job was saved under Held jobs.')
return
}
- if (complete && (payload.clipId || payload.filename || payload.stillId)) {
- settledUi = true
+ if (complete && (payload.clipId || payload.filename)) {
+ videoSettledUi = true
const dest = folders.value.find(folder => folder.id === folderId.value)
const locked = dest
? Boolean(dest.protected && !dest.unlocked)
: (folderLocked || payload.folderLocked === true)
- if (payload.stillId) {
- if (locked) {
- editResultUrl.value = ''
- lockedSave.value = true
- browseFolderId.value = folderId.value
- statusMessage.value = 'Saved to the locked folder. Unlock it to view.'
- } else {
- editResultUrl.value = `/api/library/stills/${payload.stillId}`
- awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
- concealOutput.value = awaitingReveal.value
- lockedSave.value = false
- statusMessage.value = 'Edit finished'
- }
- busy.value = false
- statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
- loadLibrary().catch(() => null)
- void pollComfyHealth()
- return
- }
const keepLibraryView = watchingLibrary.value && Boolean(currentClipId.value) && payload.clipId !== currentClipId.value
if (keepLibraryView) {
- busy.value = false
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
+ stopTimer('video')
+ stopListen('video')
+ clearActiveJob('video')
activeDraftId = ''
loadLibrary().catch(() => null)
void pollComfyHealth()
@@ -2187,11 +2358,11 @@ function applyJobEvent(payload: Record, hidden: boolean, folderLock
concealOutput.value = awaitingReveal.value
lockedSave.value = false
}
- busy.value = false
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
+ stopTimer('video')
+ stopListen('video')
+ clearActiveJob('video')
activeDraftId = ''
loadLibrary().catch(() => null)
void pollComfyHealth()
@@ -2199,68 +2370,96 @@ function applyJobEvent(payload: Record, hidden: boolean, folderLock
}
if (failed) {
- settledUi = true
- busy.value = false
+ videoSettledUi = true
+ videoBusy.value = false
statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
+ stopTimer('video')
+ stopListen('video')
+ clearActiveJob('video')
loadLibrary().catch(() => null)
void pollComfyHealth()
toast(payload.error || payload.message || 'Generation failed')
}
}
-function listen(id: string, hidden: boolean, folderLocked = false) {
- const gen = ++listenGen
- stopListen()
- source = new EventSource(`/api/generate/${id}/stream`)
+function applyJobEvent(kind: 'video' | 'edit', payload: Record, hidden: boolean, folderLocked: boolean, expectedJobId: string) {
+ const currentId = kind === 'edit' ? editJobId.value : videoJobId.value
+ if (expectedJobId && currentId && expectedJobId !== currentId) return
+ if (payload.jobId && expectedJobId && payload.jobId !== expectedJobId) return
+ if (kind === 'edit') applyEditEvent(payload, hidden, folderLocked)
+ else applyVideoEvent(payload, hidden, folderLocked)
+}
+
+function listen(kind: 'video' | 'edit', id: string, hidden: boolean, folderLocked = false) {
+ stopListen(kind)
+ const isEdit = kind === 'edit'
+ const gen = isEdit ? ++editListenGen : ++videoListenGen
+ const source = new EventSource(`/api/generate/${id}/stream`)
+ if (isEdit) editSource = source
+ else videoSource = source
source.onmessage = (event) => {
- if (gen !== listenGen) return
- applyJobEvent(JSON.parse(event.data), hidden, folderLocked, id)
+ if (gen !== (isEdit ? editListenGen : videoListenGen)) return
+ applyJobEvent(kind, JSON.parse(event.data), hidden, folderLocked, id)
}
const tick = async () => {
- if (gen !== listenGen || settledUi) {
- if (gen === listenGen && settledUi) stopListen()
+ const currentGen = isEdit ? editListenGen : videoListenGen
+ const settled = isEdit ? editSettledUi : videoSettledUi
+ if (gen !== currentGen || settled) {
+ if (gen === currentGen && settled) stopListen(kind)
return
}
try {
const snap = await $fetch>(`/api/generate/${id}`)
- if (gen !== listenGen) return
- applyJobEvent(snap, hidden, folderLocked, id)
+ if (gen !== (isEdit ? editListenGen : videoListenGen)) return
+ applyJobEvent(kind, snap, hidden, folderLocked, id)
} catch {
- if (gen !== listenGen) return
+ if (gen !== (isEdit ? editListenGen : videoListenGen)) return
try {
const recovered = await $fetch>('/api/generate/recover', {
method: 'POST',
body: { jobId: id }
})
- if (gen !== listenGen) return
- applyJobEvent(recovered, hidden, folderLocked, id)
+ if (gen !== (isEdit ? editListenGen : videoListenGen)) return
+ applyJobEvent(kind, recovered, hidden, folderLocked, id)
} catch {
// Job snapshot can 404 briefly after a restart; keep polling while busy.
}
}
}
void tick()
- pollTimer = setInterval(() => {
+ const poll = setInterval(() => {
void tick()
}, 1000)
+ if (isEdit) editPollTimer = poll
+ else videoPollTimer = poll
}
async function cancelJob() {
+ const kind = studioMode.value === 'edit' ? 'edit' : 'video'
+ const id = kind === 'edit' ? editJobId.value : videoJobId.value
try {
- await $fetch('/api/interrupt', { method: 'POST', body: { jobId: jobId.value } })
- statusMessage.value = 'Job cancelled. ComfyUI is idle — generate again.'
+ await $fetch('/api/interrupt', { method: 'POST', body: { jobId: id, kind } })
+ if (kind === 'edit') editStatusMessage.value = 'Edit cancelled. Sidecar is idle — edit again.'
+ else statusMessage.value = 'Job cancelled. ComfyUI is idle — generate again.'
} catch (error: any) {
toast(error?.statusMessage || error?.data?.statusMessage || 'Failed to interrupt ComfyUI')
- statusMessage.value = 'Cancelled locally. Generate again when ComfyUI is free.'
+ if (kind === 'edit') editStatusMessage.value = 'Cancelled locally. Edit again when the sidecar is free.'
+ else statusMessage.value = 'Cancelled locally. Generate again when ComfyUI is free.'
+ }
+ if (kind === 'edit') {
+ editSettledUi = true
+ editBusy.value = false
+ editStatusBusy.value = false
+ stopTimer('edit')
+ stopListen('edit')
+ clearActiveJob('edit')
+ } else {
+ videoSettledUi = true
+ videoBusy.value = false
+ statusBusy.value = false
+ stopTimer('video')
+ stopListen('video')
+ clearActiveJob('video')
}
- settledUi = true
- busy.value = false
- statusBusy.value = false
- stopTimer()
- stopListen()
- clearActiveJob()
}
diff --git a/server/api/extend.post.ts b/server/api/extend.post.ts
index dcb0232..5bed919 100644
--- a/server/api/extend.post.ts
+++ b/server/api/extend.post.ts
@@ -72,6 +72,7 @@ export default defineEventHandler(async (event) => {
const clipName = nextClipPartName(clipTitle(source))
const job = createJob()
+ job.kind = 'video'
job.maxStep = steps
job.hideThumbnail = source.hideThumbnail
const tmpDir = extendTempDir(owner, job.id)
diff --git a/server/api/generate.post.ts b/server/api/generate.post.ts
index 348b004..2b09568 100644
--- a/server/api/generate.post.ts
+++ b/server/api/generate.post.ts
@@ -146,6 +146,7 @@ export default defineEventHandler(async (event) => {
const chainTotal = 1 + extensions.length
const job = createJob()
+ job.kind = 'video'
job.maxStep = steps
job.hideThumbnail = hideThumbnail
job.library = {
diff --git a/server/api/generate/active.get.ts b/server/api/generate/active.get.ts
index a95969c..35e06ae 100644
--- a/server/api/generate/active.get.ts
+++ b/server/api/generate/active.get.ts
@@ -1,35 +1,59 @@
+function livePayload(job: ReturnType & {}) {
+ if (!job) return null
+ return {
+ jobId: job.id,
+ kind: job.kind || 'video',
+ hideThumbnail: job.hideThumbnail === true,
+ folderLocked: job.library?.folderLocked === true,
+ ...jobSnapshot(job)
+ }
+}
+
export default defineEventHandler(async (event) => {
const owner = libraryOwnerKey(event)
const live = listJobs()
.filter(job => job.library?.ownerKey === owner && (job.status === 'queued' || job.status === 'uploading' || job.status === 'running'))
- .sort((a, b) => b.startedAt - a.startedAt)[0]
- if (live) {
- return {
- jobId: live.id,
- hideThumbnail: live.hideThumbnail === true,
- folderLocked: live.library?.folderLocked === true,
- ...jobSnapshot(live)
+ .sort((a, b) => b.startedAt - a.startedAt)
+ const videoLive = live.find(job => job.kind !== 'edit')
+ const editLive = live.find(job => job.kind === 'edit')
+
+ let video = videoLive ? livePayload(videoLive) : null
+ const edit = editLive ? livePayload(editLive) : null
+
+ if (!video) {
+ const pending = listPendingJobs()
+ .filter(job => job.ownerKey === owner)
+ .sort((a, b) => b.startedAt - a.startedAt)[0]
+ if (pending) {
+ const resolved = await resolvePendingJob(pending).catch(() => null)
+ if (resolved) {
+ video = {
+ jobId: pending.jobId,
+ kind: 'video' as const,
+ hideThumbnail: pending.hideThumbnail === true,
+ folderLocked: pending.folderLocked === true,
+ ...resolved
+ }
+ } else {
+ video = {
+ jobId: pending.jobId,
+ kind: 'video',
+ type: 'snapshot',
+ status: 'running',
+ message: 'Reconnecting to ComfyUI...',
+ progress: Math.max(8, Math.min(90, Math.round((Date.now() - pending.startedAt) / 1000))),
+ promptId: pending.promptId,
+ elapsedMs: Date.now() - pending.startedAt,
+ hideThumbnail: pending.hideThumbnail === true,
+ folderLocked: pending.folderLocked === true
+ }
+ }
}
}
- const pending = listPendingJobs()
- .filter(job => job.ownerKey === owner)
- .sort((a, b) => b.startedAt - a.startedAt)[0]
- if (pending) {
- const resolved = await resolvePendingJob(pending).catch(() => null)
- if (resolved) return resolved
- return {
- jobId: pending.jobId,
- type: 'snapshot',
- status: 'running',
- message: 'Reconnecting to ComfyUI...',
- progress: Math.max(8, Math.min(90, Math.round((Date.now() - pending.startedAt) / 1000))),
- promptId: pending.promptId,
- elapsedMs: Date.now() - pending.startedAt,
- hideThumbnail: pending.hideThumbnail === true,
- folderLocked: pending.folderLocked === true
- }
+ return {
+ jobId: video?.jobId || edit?.jobId || null,
+ video,
+ edit
}
-
- return { jobId: null }
})
diff --git a/server/api/interrupt.post.ts b/server/api/interrupt.post.ts
index fa37a7e..1d6a04a 100644
--- a/server/api/interrupt.post.ts
+++ b/server/api/interrupt.post.ts
@@ -1,5 +1,5 @@
export default defineEventHandler(async (event) => {
- const body = await readBody<{ jobId?: string }>(event).catch(() => ({}))
+ const body = await readBody<{ jobId?: string; kind?: string }>(event).catch(() => ({}))
const jobId = String(body?.jobId || '')
const job = jobId ? getJob(jobId) : undefined
if (job) {
@@ -8,7 +8,8 @@ export default defineEventHandler(async (event) => {
removeExtendTemp(job.library?.extendTmpDir)
}
if (jobId) deletePendingJob(jobId)
- const ok = job?.kind === 'edit'
+ const kind = job?.kind || (body?.kind === 'edit' ? 'edit' : 'video')
+ const ok = kind === 'edit'
? await interruptImageComfy()
: await interruptComfy()
if (job) {
diff --git a/server/utils/jobs.ts b/server/utils/jobs.ts
index e6c6822..685157b 100644
--- a/server/utils/jobs.ts
+++ b/server/utils/jobs.ts
@@ -124,6 +124,7 @@ export function listJobs() {
export function jobSnapshot(job: Job) {
return {
jobId: job.id,
+ kind: job.kind || 'video',
type: 'snapshot' as const,
status: job.status,
message: job.message,