Add a persistent clip library with folders, optional password, and hidden-thumbnail glow.
Generated videos save into a chosen folder, sensitive clips skip thumbnails until played, and Docker writes the catalog to a Coolify volume. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
+265
-54
@@ -76,6 +76,34 @@
|
||||
<p class="mt-2 text-xs text-zinc-500">Output {{ outputSize.width }} × {{ outputSize.height }}{{ aspect === 'auto' ? ' · matching the still' : ' · override' }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-zinc-300">Save to library</p>
|
||||
<div v-if="libraryLocked && !libraryUnlocked" class="rounded-2xl border border-amber-300/20 bg-zinc-950/50 px-4 py-3 text-sm text-zinc-400">
|
||||
Unlock the library to choose a folder.
|
||||
</div>
|
||||
<div v-else class="space-y-3">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<select v-model="folderId" class="min-w-[12rem] flex-1 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm">
|
||||
<option v-for="folder in folders" :key="folder.id" :value="folder.id">{{ folder.name }}</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="newFolderName"
|
||||
class="w-40 rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm"
|
||||
placeholder="New folder"
|
||||
@keydown.enter.prevent="addFolder"
|
||||
>
|
||||
<button type="button" class="rounded-xl border border-white/15 px-3 py-2 text-sm hover:border-amber-300/50" @click="addFolder">Add</button>
|
||||
</div>
|
||||
<label class="flex items-start gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
|
||||
<input v-model="hideThumbnail" type="checkbox" class="mt-1 accent-amber-400">
|
||||
<span>
|
||||
<span class="block font-medium text-zinc-200">Hide thumbnail</span>
|
||||
<span class="text-xs text-zinc-500">For sensitive prompts. The preview glows when ready until you play the clip.</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3">
|
||||
<summary class="cursor-pointer text-sm font-medium">Generation settings</summary>
|
||||
<div class="mt-4 space-y-4">
|
||||
@@ -106,7 +134,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()"
|
||||
:disabled="busy || !file || !prompt.trim() || (libraryLocked && !libraryUnlocked)"
|
||||
@click="generate"
|
||||
>
|
||||
{{ busy ? 'Generating…' : 'Generate Video' }}
|
||||
@@ -137,23 +165,38 @@
|
||||
<div class="h-full rounded-full bg-amber-400 progress-glow transition-all duration-300" :style="{ width: progress + '%' }" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 overflow-hidden rounded-2xl bg-black/50">
|
||||
<div
|
||||
class="relative mt-5 overflow-hidden rounded-2xl bg-black/50"
|
||||
:class="{ 'sensitive-glow': awaitingReveal }"
|
||||
:style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}` }"
|
||||
>
|
||||
<video
|
||||
v-if="videoUrl"
|
||||
ref="player"
|
||||
:src="videoUrl"
|
||||
class="w-full bg-black"
|
||||
:style="{ aspectRatio: `${outputSize.width} / ${outputSize.height}` }"
|
||||
controls
|
||||
autoplay
|
||||
class="h-full w-full bg-black"
|
||||
:class="{ 'opacity-0': awaitingReveal }"
|
||||
:controls="!awaitingReveal"
|
||||
:autoplay="!awaitingReveal"
|
||||
loop
|
||||
playsinline
|
||||
@play="onPlayed"
|
||||
/>
|
||||
<div v-else class="flex items-center justify-center text-sm text-zinc-500" :style="{ aspectRatio: `${outputSize.width} / ${outputSize.height}` }">
|
||||
<button
|
||||
v-if="awaitingReveal"
|
||||
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>
|
||||
</button>
|
||||
<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"
|
||||
v-if="videoUrl && !awaitingReveal"
|
||||
:href="videoUrl"
|
||||
download="aigen.mp4"
|
||||
class="mt-4 inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50"
|
||||
@@ -163,21 +206,69 @@
|
||||
</div>
|
||||
|
||||
<div class="glass rounded-3xl p-5 sm:p-6">
|
||||
<h2 class="font-display text-xl font-bold">History</h2>
|
||||
<p v-if="!history.length" class="mt-3 text-sm text-zinc-500">Past runs stay in this browser.</p>
|
||||
<ul class="mt-4 space-y-3">
|
||||
<li v-for="item in history" :key="item.id" class="flex gap-3 rounded-2xl border border-white/5 bg-zinc-950/40 p-3">
|
||||
<img :src="item.thumbnail" alt="" class="h-16 w-16 rounded-xl object-cover">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm">{{ item.prompt }}</p>
|
||||
<p class="text-xs text-zinc-500">{{ item.width }}×{{ item.height }} · {{ item.steps }} steps · seed {{ item.seed }}</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<button type="button" class="text-xs text-amber-300" @click="rerun(item)">Rerun</button>
|
||||
<a v-if="item.videoUrl" :href="item.videoUrl" class="text-xs text-sky-300" target="_blank">Open</a>
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h2 class="font-display text-xl font-bold">Library</h2>
|
||||
<button
|
||||
v-if="libraryUnlocked && libraryLocked"
|
||||
type="button"
|
||||
class="text-xs text-zinc-400 hover:text-white"
|
||||
@click="lockLibrary"
|
||||
>
|
||||
Lock
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form v-if="libraryLocked && !libraryUnlocked" class="mt-4 space-y-3" @submit.prevent="unlockLibrary">
|
||||
<p class="text-sm text-zinc-400">This library is password protected.</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="Library password">
|
||||
<button type="submit" class="w-full rounded-xl bg-amber-400 px-4 py-2 font-semibold text-zinc-950">Unlock</button>
|
||||
</form>
|
||||
|
||||
<template v-else>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="folder in folders"
|
||||
:key="folder.id"
|
||||
type="button"
|
||||
class="rounded-full border px-3 py-1 text-xs"
|
||||
:class="browseFolderId === folder.id ? 'border-amber-300 bg-amber-400/10 text-amber-100' : 'border-white/10 text-zinc-400'"
|
||||
@click="browseFolderId = folder.id"
|
||||
>
|
||||
{{ folder.name }}
|
||||
<span class="text-zinc-500">({{ clipsIn(folder.id).length }})</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="!visibleClips.length" class="mt-4 text-sm text-zinc-500">Nothing in this folder yet. Generate into it from the left.</p>
|
||||
<ul class="mt-4 space-y-3">
|
||||
<li v-for="item in visibleClips" :key="item.id" class="flex gap-3 rounded-2xl border border-white/5 bg-zinc-950/40 p-3">
|
||||
<button type="button" class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900" @click="openClip(item)">
|
||||
<span v-if="item.hideThumbnail" class="sensitive-glow block h-full w-full" />
|
||||
<img v-else :src="`/api/library/clips/${item.id}/thumb`" alt="" class="h-full w-full object-cover">
|
||||
</button>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-sm">{{ item.prompt }}</p>
|
||||
<p class="text-xs text-zinc-500">{{ item.width }}×{{ item.height }} · {{ item.steps }} steps · seed {{ item.seed }}</p>
|
||||
<div class="mt-2 flex gap-3">
|
||||
<button type="button" class="text-xs text-amber-300" @click="openClip(item)">Open</button>
|
||||
<button type="button" class="text-xs text-amber-300" @click="rerun(item)">Rerun</button>
|
||||
<button type="button" class="text-xs text-red-300" @click="removeClip(item)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<details class="mt-5 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3">
|
||||
<summary class="cursor-pointer text-sm font-medium">Library password</summary>
|
||||
<form class="mt-4 space-y-3" @submit.prevent="savePassword">
|
||||
<input v-if="libraryLocked" v-model="currentPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" placeholder="Current password">
|
||||
<input v-model="nextPassword" type="password" class="w-full rounded-xl border border-white/10 bg-zinc-950 px-3 py-2 text-sm" :placeholder="libraryLocked ? 'New password (blank to remove)' : 'Set a password'">
|
||||
<button type="submit" class="rounded-xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50">
|
||||
{{ libraryLocked ? 'Update password' : 'Protect library' }}
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -197,17 +288,23 @@
|
||||
<script setup lang="ts">
|
||||
type AspectId = 'auto' | '16:9' | '9:16' | '1:1'
|
||||
|
||||
interface HistoryItem {
|
||||
interface LibraryFolder {
|
||||
id: string
|
||||
name: string
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
interface LibraryClip {
|
||||
id: string
|
||||
folderId: string
|
||||
prompt: string
|
||||
aspect?: AspectId
|
||||
aspect: string
|
||||
width: number
|
||||
height: number
|
||||
steps: number
|
||||
turbo: boolean
|
||||
seed: number
|
||||
thumbnail: string
|
||||
videoUrl?: string
|
||||
hideThumbnail: boolean
|
||||
createdAt: number
|
||||
}
|
||||
|
||||
@@ -225,6 +322,7 @@ const aspects = [
|
||||
]
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const player = ref<HTMLVideoElement | null>(null)
|
||||
const file = ref<File | null>(null)
|
||||
const preview = ref('')
|
||||
const dragging = ref(false)
|
||||
@@ -235,6 +333,7 @@ const imageHeight = ref(0)
|
||||
const turbo = ref(true)
|
||||
const duration = ref(5)
|
||||
const seedInput = ref('random')
|
||||
const hideThumbnail = ref(false)
|
||||
const busy = ref(false)
|
||||
const progress = ref(0)
|
||||
const statusMessage = ref('Waiting for a still.')
|
||||
@@ -243,11 +342,22 @@ const maxStep = ref(8)
|
||||
const elapsedMs = ref(0)
|
||||
const videoUrl = ref('')
|
||||
const jobId = ref('')
|
||||
const awaitingReveal = ref(false)
|
||||
const playerSize = ref({ width: 1344, height: 768 })
|
||||
const toasts = ref<{ id: string; message: string }[]>([])
|
||||
const history = ref<HistoryItem[]>([])
|
||||
const comfyOk = ref(false)
|
||||
const userName = ref('')
|
||||
const authEnabled = ref(false)
|
||||
const libraryLocked = ref(false)
|
||||
const libraryUnlocked = ref(true)
|
||||
const folders = ref<LibraryFolder[]>([])
|
||||
const clips = ref<LibraryClip[]>([])
|
||||
const folderId = ref('')
|
||||
const browseFolderId = ref('')
|
||||
const newFolderName = ref('')
|
||||
const unlockPassword = ref('')
|
||||
const currentPassword = ref('')
|
||||
const nextPassword = ref('')
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
let source: EventSource | null = null
|
||||
|
||||
@@ -288,11 +398,35 @@ const autoHint = computed(() => {
|
||||
return `${size.width} × ${size.height} · from still`
|
||||
})
|
||||
|
||||
const visibleClips = computed(() => clips.value.filter(clip => clip.folderId === browseFolderId.value))
|
||||
|
||||
function clipsIn(id: string) {
|
||||
return clips.value.filter(clip => clip.folderId === id)
|
||||
}
|
||||
|
||||
function applyLibrary(data: { locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }) {
|
||||
libraryLocked.value = Boolean(data.locked)
|
||||
libraryUnlocked.value = data.unlocked !== false
|
||||
folders.value = data.folders || []
|
||||
clips.value = data.clips || []
|
||||
if (!folderId.value || !folders.value.some(folder => folder.id === folderId.value)) {
|
||||
folderId.value = folders.value[0]?.id || ''
|
||||
}
|
||||
if (!browseFolderId.value || !folders.value.some(folder => folder.id === browseFolderId.value)) {
|
||||
browseFolderId.value = folderId.value
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLibrary() {
|
||||
const data = await $fetch<{ locked?: boolean; unlocked?: boolean; folders?: LibraryFolder[]; clips?: LibraryClip[] }>('/api/library')
|
||||
applyLibrary(data)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
history.value = JSON.parse(localStorage.getItem('aigen-history') || '[]')
|
||||
const [health, me] = await Promise.all([
|
||||
$fetch<{ comfy?: { ok?: boolean } }>('/api/health').catch(() => ({ comfy: { ok: false } })),
|
||||
$fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean }>('/api/auth/me').catch(() => ({ user: null }))
|
||||
$fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean }>('/api/auth/me').catch(() => ({ user: null })),
|
||||
loadLibrary().catch(() => applyLibrary({ locked: false, unlocked: true, folders: [], clips: [] }))
|
||||
])
|
||||
comfyOk.value = Boolean(health.comfy?.ok)
|
||||
userName.value = me.user?.name || me.user?.email || ''
|
||||
@@ -357,23 +491,107 @@ function stopTimer() {
|
||||
timer = null
|
||||
}
|
||||
|
||||
function persistHistory() {
|
||||
localStorage.setItem('aigen-history', JSON.stringify(history.value.slice(0, 12)))
|
||||
}
|
||||
|
||||
function rerun(item: HistoryItem) {
|
||||
function rerun(item: LibraryClip) {
|
||||
prompt.value = item.prompt
|
||||
turbo.value = item.turbo
|
||||
seedInput.value = String(item.seed)
|
||||
aspect.value = item.aspect || 'auto'
|
||||
aspect.value = (item.aspect as AspectId) || 'auto'
|
||||
hideThumbnail.value = item.hideThumbnail
|
||||
folderId.value = item.folderId
|
||||
toast('Settings restored. Drop the same still if it is not already loaded.')
|
||||
}
|
||||
|
||||
async function addFolder() {
|
||||
const name = newFolderName.value.trim()
|
||||
if (!name) return
|
||||
try {
|
||||
const folder = await $fetch<LibraryFolder>('/api/library/folders', { method: 'POST', body: { name } })
|
||||
newFolderName.value = ''
|
||||
await loadLibrary()
|
||||
folderId.value = folder.id
|
||||
browseFolderId.value = folder.id
|
||||
} catch (error: any) {
|
||||
toast(error?.data?.statusMessage || error?.statusMessage || 'Could not create folder')
|
||||
}
|
||||
}
|
||||
|
||||
async function unlockLibrary() {
|
||||
try {
|
||||
const data = await $fetch('/api/library/unlock', { method: 'POST', body: { password: unlockPassword.value } })
|
||||
unlockPassword.value = ''
|
||||
applyLibrary(data)
|
||||
} catch (error: any) {
|
||||
toast(error?.data?.statusMessage || error?.statusMessage || 'Unlock failed')
|
||||
}
|
||||
}
|
||||
|
||||
async function lockLibrary() {
|
||||
try {
|
||||
applyLibrary(await $fetch('/api/library/lock', { method: 'POST' }))
|
||||
} catch {
|
||||
await loadLibrary()
|
||||
}
|
||||
}
|
||||
|
||||
async function savePassword() {
|
||||
try {
|
||||
const data = await $fetch('/api/library/password', {
|
||||
method: 'PUT',
|
||||
body: { password: nextPassword.value, currentPassword: currentPassword.value }
|
||||
})
|
||||
currentPassword.value = ''
|
||||
nextPassword.value = ''
|
||||
applyLibrary(data)
|
||||
toast(libraryLocked.value ? 'Library password updated.' : 'Library password saved.')
|
||||
} catch (error: any) {
|
||||
toast(error?.data?.statusMessage || error?.statusMessage || 'Could not update password')
|
||||
}
|
||||
}
|
||||
|
||||
function openClip(item: LibraryClip) {
|
||||
videoUrl.value = `/api/library/clips/${item.id}/video`
|
||||
awaitingReveal.value = item.hideThumbnail
|
||||
playerSize.value = { width: item.width, height: item.height }
|
||||
browseFolderId.value = item.folderId
|
||||
statusMessage.value = item.hideThumbnail ? 'Hidden clip ready' : 'Loaded from library'
|
||||
progress.value = 100
|
||||
}
|
||||
|
||||
async function removeClip(item: LibraryClip) {
|
||||
try {
|
||||
await $fetch(`/api/library/clips/${item.id}`, { method: 'DELETE' })
|
||||
if (videoUrl.value.includes(item.id)) {
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
}
|
||||
await loadLibrary()
|
||||
} catch (error: any) {
|
||||
toast(error?.data?.statusMessage || 'Could not delete clip')
|
||||
}
|
||||
}
|
||||
|
||||
function onPlayed() {
|
||||
awaitingReveal.value = false
|
||||
}
|
||||
|
||||
function revealAndPlay() {
|
||||
awaitingReveal.value = false
|
||||
nextTick(() => {
|
||||
player.value?.play().catch(() => null)
|
||||
})
|
||||
}
|
||||
|
||||
async function generate() {
|
||||
if (!file.value || !prompt.value.trim()) return
|
||||
if (libraryLocked.value && !libraryUnlocked.value) {
|
||||
toast('Unlock the library before generating.')
|
||||
return
|
||||
}
|
||||
busy.value = true
|
||||
progress.value = 1
|
||||
videoUrl.value = ''
|
||||
awaitingReveal.value = false
|
||||
playerSize.value = outputSize.value
|
||||
statusMessage.value = 'Uploading image...'
|
||||
startTimer()
|
||||
try {
|
||||
@@ -387,13 +605,16 @@ async function generate() {
|
||||
body.append('steps', String(turbo.value ? 8 : 20))
|
||||
body.append('duration', String(duration.value))
|
||||
body.append('seed', seedInput.value || 'random')
|
||||
const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean }>('/api/generate', {
|
||||
body.append('folderId', folderId.value)
|
||||
body.append('hideThumbnail', String(hideThumbnail.value))
|
||||
const started = await $fetch<{ jobId: string; seed: number; width: number; height: number; steps: number; turbo: boolean; hideThumbnail?: boolean }>('/api/generate', {
|
||||
method: 'POST',
|
||||
body
|
||||
})
|
||||
jobId.value = started.jobId
|
||||
maxStep.value = started.steps
|
||||
listen(started.jobId, started)
|
||||
playerSize.value = { width: started.width, height: started.height }
|
||||
listen(started.jobId, started.hideThumbnail === true || hideThumbnail.value)
|
||||
} catch (error: any) {
|
||||
busy.value = false
|
||||
stopTimer()
|
||||
@@ -403,7 +624,7 @@ async function generate() {
|
||||
}
|
||||
}
|
||||
|
||||
function listen(id: string, meta: { seed: number; width: number; height: number; steps: number; turbo: boolean }) {
|
||||
function listen(id: string, hidden: boolean) {
|
||||
source?.close()
|
||||
source = new EventSource(`/api/generate/${id}/stream`)
|
||||
source.onmessage = (event) => {
|
||||
@@ -413,25 +634,15 @@ function listen(id: string, meta: { seed: number; width: number; height: number;
|
||||
if (typeof payload.step === 'number') step.value = payload.step
|
||||
if (typeof payload.maxStep === 'number') maxStep.value = payload.maxStep
|
||||
if (payload.type === 'complete') {
|
||||
const url = `/api/media?filename=${encodeURIComponent(payload.filename)}&subfolder=${encodeURIComponent(payload.subfolder || 'video')}&type=${encodeURIComponent(payload.mediaType || 'output')}`
|
||||
videoUrl.value = url
|
||||
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)
|
||||
busy.value = false
|
||||
stopTimer()
|
||||
source?.close()
|
||||
history.value.unshift({
|
||||
id,
|
||||
prompt: prompt.value.trim(),
|
||||
aspect: aspect.value,
|
||||
width: meta.width,
|
||||
height: meta.height,
|
||||
steps: meta.steps,
|
||||
turbo: meta.turbo,
|
||||
seed: meta.seed,
|
||||
thumbnail: preview.value,
|
||||
videoUrl: url,
|
||||
createdAt: Date.now()
|
||||
})
|
||||
persistHistory()
|
||||
loadLibrary().catch(() => null)
|
||||
}
|
||||
if (payload.type === 'error') {
|
||||
busy.value = false
|
||||
|
||||
Reference in New Issue
Block a user