Add clip extension from the last frame with FFmpeg stitching.

Let a finished player continue into a new MiniMax segment, then losslessly concat the parts and discard the intermediate files so the library keeps one extended MP4. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-25 23:06:58 -05:00
parent dbe45fd2ff
commit e81f12f89a
10 changed files with 666 additions and 18 deletions
@@ -331,18 +331,84 @@
              <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 && !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"
+          <div
+            v-else-if="!videoUrl"
+            class="flex h-full min-h-[12rem] items-center justify-center text-sm text-zinc-500"
          >
-            Download MP4
-          </a>
+            Generated MP4 appears here
+          </div>
+          </div>
+          <div v-if="videoUrl && !awaitingReveal && !lockedSave" class="mt-4 flex flex-wrap gap-3">
+            <a
+              :href="videoUrl"
+              :download="`${outputDownloadName}.mp4`"
+              class="inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
+            >
+              Download MP4
+            </a>
+            <button
+              v-if="canExtend"
+              type="button"
+              class="inline-flex rounded-2xl border border-amber-300/40 px-4 py-2 text-sm text-amber-100 hover:border-amber-300/70"
+              :disabled="busy"
+              @click="openExtend"
+            >
+              Extend Video
+            </button>
+          </div>
+          <div v-if="extendOpen && canExtend" class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-zinc-950/50 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div>
+                <h3 class="text-sm font-semibold text-amber-100">Extend this clip</h3>
+                <p class="mt-1 text-xs text-zinc-500">Continue from the last frame with a new motion prompt, then stitch the segments together.</p>
+              </div>
+              <button type="button" class="text-xs text-zinc-400 hover:text-white" @click="closeExtend">Close</button>
+            </div>
+            <div class="overflow-hidden rounded-xl bg-black/40">
+              <img v-if="lastFrameUrl" :src="lastFrameUrl" alt="Last frame" class="max-h-48 w-full object-contain">
+              <p v-else class="px-3 py-8 text-center text-xs text-zinc-500">
+                {{ lastFrameLoading ? 'Reading last frame…' : 'Last frame preview unavailable' }}
+              </p>
+            </div>
+            <label class="block text-sm">
+              <span class="mb-1 block text-zinc-400">Extension prompt</span>
+              <textarea
+                v-model="extendPrompt"
+                rows="4"
+                class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm outline-none ring-amber-300/40 placeholder:text-zinc-600 focus:ring-2"
+                placeholder="Continue the motion from this frame…"
+              />
+            </label>
+            <div>
+              <p class="mb-2 text-xs uppercase tracking-wider text-zinc-500">Extension duration</p>
+              <div class="grid grid-cols-2 gap-2">
+                <button
+                  type="button"
+                  class="rounded-xl border px-3 py-2 text-sm"
+                  :class="extendDuration === 3 ? 'border-amber-300 bg-amber-400/10' : 'border-white/10'"
+                  @click="extendDuration = 3"
+                >
+                  3s
+                </button>
+                <button
+                  type="button"
+                  class="rounded-xl border px-3 py-2 text-sm"
+                  :class="extendDuration === 5 ? 'border-amber-300 bg-amber-400/10' : 'border-white/10'"
+                  @click="extendDuration = 5"
+                >
+                  5s
+                </button>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="w-full rounded-2xl bg-amber-400 px-4 py-2.5 text-sm font-semibold text-zinc-950 transition hover:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="busy || !extendPrompt.trim() || lastFrameLoading"
+              @click="generateExtension"
+            >
+              Generate Extension
+            </button>
+          </div>
        </div>

        <div class="glass rounded-3xl p-5 sm:p-6">
@@ -614,6 +680,13 @@ const maxStep = ref(8)
 const elapsedMs = ref(0)
 const videoUrl = ref('')
 const jobId = ref('')
+const currentClipId = ref('')
+const extendOpen = ref(false)
+const extendPrompt = ref('')
+const extendDuration = ref(5)
+const lastFrameUrl = ref('')
+const lastFrameLoading = ref(false)
+let lastFrameObjectUrl = ''
 const awaitingReveal = ref(false)
 const concealOutput = ref(false)
 const lockedSave = ref(false)
@@ -686,6 +759,13 @@ function normalizeAspect(raw?: string, width?: number, height?: number): AspectI
 const outputSize = computed(() => PRESETS[aspect.value])
 const frameCount = computed(() => Math.max(5, Math.floor(duration.value * fps.value)))
 const cfgPct = computed(() => ((cfg.value - CFG_MIN) / (CFG_MAX - CFG_MIN)) * 100)
+const currentClip = computed(() => clips.value.find(clip => clip.id === currentClipId.value))
+const canExtend = computed(() => Boolean(
+  videoUrl.value
+  && !lockedSave.value
+  && !awaitingReveal.value
+  && (currentClipId.value || clipIdFromPlayer())
+))

 const visibleClips = computed(() => clips.value.filter(clip => clip.folderId === browseFolderId.value))
 const currentFolder = computed(() => folders.value.find(folder => folder.id === folderId.value))
@@ -756,6 +836,7 @@ onBeforeUnmount(() => {
  healthTimer = null
  stopTimer()
  stopListen()
+  closeExtend()
 })

 watch(folderId, () => {
@@ -1092,11 +1173,95 @@ async function lockFolder(id: string) {
  }
 }

+function clipIdFromPlayer() {
+  const match = videoUrl.value.match(/\/api\/library\/clips\/([^/?#]+)\/video/)
+  return match?.[1] || currentClipId.value
+}
+
 function clipVideoUrl(clipId: string) {
  return `/api/library/clips/${clipId}/video?t=${Date.now()}`
 }

+function closeExtend() {
+  extendOpen.value = false
+  lastFrameLoading.value = false
+  if (lastFrameObjectUrl) {
+    URL.revokeObjectURL(lastFrameObjectUrl)
+    lastFrameObjectUrl = ''
+  }
+  lastFrameUrl.value = ''
+}
+
+async function openExtend() {
+  const id = clipIdFromPlayer()
+  if (!id) {
+    toast('Load a generated clip before extending it.')
+    return
+  }
+  currentClipId.value = id
+  const clip = clips.value.find(item => item.id === id)
+  extendPrompt.value = clip?.prompt || prompt.value
+  extendDuration.value = 5
+  extendOpen.value = true
+  lastFrameLoading.value = true
+  lastFrameUrl.value = ''
+  player.value?.pause()
+  try {
+    const blob = await $fetch<Blob>(`/api/library/clips/${id}/last-frame`, { responseType: 'blob' })
+    if (lastFrameObjectUrl) URL.revokeObjectURL(lastFrameObjectUrl)
+    lastFrameObjectUrl = URL.createObjectURL(blob)
+    lastFrameUrl.value = lastFrameObjectUrl
+  } catch (error: any) {
+    toast(error?.data?.statusMessage || 'Could not extract the last frame')
+  } finally {
+    lastFrameLoading.value = false
+  }
+}
+
+async function generateExtension() {
+  const id = clipIdFromPlayer()
+  if (!id || !extendPrompt.value.trim()) return
+  statusBusy.value = false
+  busy.value = true
+  listenGen += 1
+  stopListen()
+  settledUi = false
+  progress.value = 1
+  awaitingReveal.value = false
+  concealOutput.value = hideThumbnail.value || currentClip.value?.hideThumbnail === true
+  lockedSave.value = false
+  statusMessage.value = 'Extracting last frame & stitching extension...'
+  startTimer()
+  try {
+    const started = await $fetch<{ jobId: string; steps: number; hideThumbnail?: boolean; folderLocked?: boolean }>('/api/extend', {
+      method: 'POST',
+      body: {
+        clipId: id,
+        prompt: extendPrompt.value.trim(),
+        duration: extendDuration.value
+      }
+    })
+    closeExtend()
+    jobId.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)
+    void pollComfyHealth()
+  } catch (error: any) {
+    busy.value = false
+    statusBusy.value = false
+    stopTimer()
+    clearActiveJob()
+    const message = error?.data?.statusMessage || error?.statusMessage || error?.message || 'Failed to start extension'
+    statusMessage.value = message
+    toast(message)
+  }
+}
+
 function openClip(item: LibraryClip) {
+  closeExtend()
+  currentClipId.value = item.id
  lockedSave.value = false
  concealOutput.value = item.hideThumbnail
  videoUrl.value = clipVideoUrl(item.id)
@@ -1116,6 +1281,8 @@ async function removeClip(item: LibraryClip) {
      awaitingReveal.value = false
      concealOutput.value = false
      lockedSave.value = false
+      currentClipId.value = ''
+      closeExtend()
    }
    await loadLibrary()
  } catch (error: any) {
@@ -1208,6 +1375,8 @@ async function generate() {
  settledUi = false
  progress.value = 1
  videoUrl.value = ''
+  currentClipId.value = ''
+  closeExtend()
  awaitingReveal.value = false
  concealOutput.value = hideThumbnail.value
  lockedSave.value = false
@@ -1308,7 +1477,9 @@ function applyJobEvent(payload: Record<string, any>, hidden: boolean, folderLock
      lockedSave.value = true
      browseFolderId.value = folderId.value
      statusMessage.value = 'Saved to the locked folder. Unlock it to view.'
+      currentClipId.value = payload.clipId || currentClipId.value
    } else if (payload.clipId) {
+      currentClipId.value = payload.clipId
      videoUrl.value = clipVideoUrl(payload.clipId)
      awaitingReveal.value = Boolean(payload.hideThumbnail || hidden)
      concealOutput.value = awaitingReveal.value