Align Studio display chrome to the Classic | Studio reference mock.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
@@ -34,7 +34,7 @@
|
||||
@click="setDisplayMode('classic')"
|
||||
>
|
||||
<span class="block font-display text-lg font-semibold text-zinc-50">Classic</span>
|
||||
<span class="mt-1 block text-xs text-zinc-400">Packed header, compact selects, tight gaps.</span>
|
||||
<span class="mt-1 block text-xs text-zinc-400">packed header, dropdowns</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -46,7 +46,7 @@
|
||||
@click="setDisplayMode('studio')"
|
||||
>
|
||||
<span class="block font-display text-lg font-semibold text-zinc-50">Studio</span>
|
||||
<span class="mt-1 block text-xs text-zinc-400">Task and model rails, locks by slots, eye toggles.</span>
|
||||
<span class="mt-1 block text-xs text-zinc-400">task rail, model rail, slots + eyes</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
+161
-186
@@ -1,259 +1,233 @@
|
||||
<template>
|
||||
<main class="display-stack w-full min-w-0 p-4 md:p-6 xl:p-8" :data-display="displayMode">
|
||||
<header class="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="display-title font-display font-bold tracking-tight text-zinc-50">Studio 2</h1>
|
||||
<p class="display-body mt-1 text-zinc-400">One hero. Every shot.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<label class="display-body text-zinc-300">Folder
|
||||
<select v-model="form.folderId" class="display-control ml-2 border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
|
||||
<option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<div v-if="isClassic && form.mode!=='music'" class="flex flex-wrap items-center gap-3 text-sm text-zinc-300" aria-label="Identity locks">
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockFace" type="checkbox" class="accent-amber-400">Lock face</label>
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockOutfit" type="checkbox" class="accent-amber-400">Lock outfit</label>
|
||||
</div>
|
||||
<div v-if="isClassic && xaigen" class="flex flex-wrap items-center gap-3 text-sm text-zinc-300" aria-label="Preview hide">
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideInput" type="checkbox" class="accent-amber-400">Hide input</label>
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideOutput" type="checkbox" class="accent-amber-400">Hide output</label>
|
||||
</div>
|
||||
<nav class="flex flex-wrap items-center gap-3 text-sm" aria-label="Studio links">
|
||||
<Studio2GpuStatus :status="gpu" />
|
||||
<NuxtLink to="/queue" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Queue</NuxtLink>
|
||||
<NuxtLink to="/library" class="text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2">Library</NuxtLink>
|
||||
<NuxtLink to="/settings" class="text-zinc-300 outline-none ring-amber-300/40 focus-visible:ring-2">Settings</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="display-stack min-w-0">
|
||||
<label v-if="isClassic" class="display-body block text-zinc-300">Task
|
||||
<select :value="form.mode" class="display-control mt-1 w-full max-w-xs border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="onTaskSelect">
|
||||
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
|
||||
<main class="display-app w-full min-w-0" :data-display="displayMode">
|
||||
<header class="display-top">
|
||||
<span class="display-brand">{{ instanceName }}</span>
|
||||
<label class="text-[var(--type-sm)] text-[var(--muted)]">Folder
|
||||
<select v-model="form.folderId" class="ml-2 h-[var(--rail-h)] rounded-[var(--radius)] border border-[var(--line)] bg-[var(--bg-slot)] px-2 text-[var(--text)] outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--amber)_50%,transparent)]">
|
||||
<option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<nav v-else class="display-rail" aria-label="Tasks">
|
||||
<button
|
||||
v-for="task in tasks"
|
||||
:key="task"
|
||||
type="button"
|
||||
class="display-rail__seg capitalize"
|
||||
:aria-pressed="form.mode===task"
|
||||
@click="chooseTask(task)"
|
||||
>{{ task }}</button>
|
||||
</nav>
|
||||
|
||||
<div v-if="form.mode!=='music'" class="min-w-0">
|
||||
<label v-if="isClassic" class="display-body block text-zinc-300">Model
|
||||
<select v-model="form.engine" class="display-control mt-1 w-full max-w-md border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
|
||||
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<div v-else class="display-rail" role="group" aria-label="Model">
|
||||
<button
|
||||
v-for="opt in engineOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="display-rail__seg"
|
||||
:aria-pressed="form.engine===opt.value"
|
||||
:aria-disabled="opt.disabled || undefined"
|
||||
:disabled="opt.disabled"
|
||||
:title="opt.hint || undefined"
|
||||
@click="!opt.disabled && (form.engine=opt.value)"
|
||||
>
|
||||
<span class="block">{{ opt.label }}</span>
|
||||
<span v-if="opt.hint" class="mt-0.5 block text-[11px] font-normal opacity-80">{{ opt.hint }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="display-grow" />
|
||||
<div v-if="form.mode!=='music'" class="identity-header" aria-label="Identity locks">
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockFace" type="checkbox" class="accent-[var(--amber)]">Lock face</label>
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockOutfit" type="checkbox" class="accent-[var(--amber)]">Lock outfit</label>
|
||||
</div>
|
||||
<p v-else class="display-body text-zinc-400">Model · YuE2</p>
|
||||
<div v-if="xaigen" class="classic-hide" aria-label="Preview hide">
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideInput" type="checkbox" class="accent-[var(--amber)]">Hide input</label>
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="classicHideOutput" type="checkbox" class="accent-[var(--amber)]">Hide output</label>
|
||||
</div>
|
||||
<nav class="display-nav" aria-label="Studio links">
|
||||
<NuxtLink to="/library">Library</NuxtLink>
|
||||
<NuxtLink to="/queue">Queue</NuxtLink>
|
||||
<NuxtLink to="/settings">Settings</NuxtLink>
|
||||
</nav>
|
||||
<span class="display-gpu-pill" :data-tone="gpu.tone" role="status" :title="gpu.detail">{{ gpu.label }}</span>
|
||||
</header>
|
||||
|
||||
<nav class="rail rail-task" aria-label="Tasks">
|
||||
<button
|
||||
v-for="task in tasks"
|
||||
:key="task"
|
||||
type="button"
|
||||
class="seg capitalize"
|
||||
:aria-pressed="form.mode===task"
|
||||
@click="chooseTask(task)"
|
||||
>{{ task }}</button>
|
||||
</nav>
|
||||
|
||||
<div v-if="form.mode!=='music'" class="rail rail-model" role="group" aria-label="Model">
|
||||
<button
|
||||
v-for="opt in engineOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="seg"
|
||||
:aria-pressed="form.engine===opt.value"
|
||||
:aria-disabled="opt.disabled || undefined"
|
||||
:disabled="opt.disabled"
|
||||
:title="opt.hint || undefined"
|
||||
@click="!opt.disabled && (form.engine=opt.value)"
|
||||
>
|
||||
{{ opt.label }}<span v-if="opt.hint" class="ml-1 text-[11px] opacity-80">· {{ opt.hint }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-else class="rail-model text-[var(--type-sm)] text-[var(--muted)]">Model · YuE2</p>
|
||||
|
||||
<div class="classic-selects">
|
||||
<select :value="form.mode" class="capitalize" aria-label="Task" @change="onTaskSelect">
|
||||
<option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
|
||||
</select>
|
||||
<select v-if="form.mode!=='music'" v-model="form.engine" aria-label="Model">
|
||||
<option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
|
||||
</select>
|
||||
<span v-else class="flex h-[var(--rail-h)] items-center text-[var(--type-sm)] text-[var(--muted)]">YuE2</span>
|
||||
</div>
|
||||
|
||||
<div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
|
||||
<section class="min-w-0 space-y-4">
|
||||
<div class="display-viewer relative flex min-h-80 items-center justify-center overflow-hidden border border-white/10 bg-black">
|
||||
<div class="display-grid" :class="form.mode==='music' ? 'display-grid--music' : ''">
|
||||
<aside v-if="form.mode!=='music'" class="display-col space-y-2">
|
||||
<Studio2AssetSlot label="Hero" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="slotHidden(form.identityStillId)" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
|
||||
<Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="slotHidden(form.mode==='extend'?form.startClipId:form.imageAId)" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
|
||||
<Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="slotHidden(form.imageBId)" @pick="picker='imageBId'" />
|
||||
<Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="slotHidden(form.maskId)" @pick="picker='maskId'" />
|
||||
<Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="slotHidden(form.endStillId)" @pick="picker='endStillId'" />
|
||||
<div class="identity-slots" aria-label="Identity locks">
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockFace" type="checkbox" class="accent-[var(--amber)]">Lock face</label>
|
||||
<label class="inline-flex items-center gap-1.5"><input v-model="form.lockOutfit" type="checkbox" class="accent-[var(--amber)]">Lock outfit</label>
|
||||
<p class="hint">hero encode + lock text — not a MiniMax face/clothes split on stills</p>
|
||||
</div>
|
||||
<label v-if="form.mode==='refine'" class="block text-[var(--type-sm)]">Mask still (white = change). On-canvas mask comes later.
|
||||
<select v-model="form.maskId" class="display-field mt-1"><option value="">Choose mask still</option><option v-for="a in stills" :key="a.id" :value="a.id">{{ assetLabel(a) }}</option></select>
|
||||
</label>
|
||||
<p v-if="uploading || uploadMessage" role="status" class="text-[var(--type-sm)] text-[var(--amber)]">{{ uploading?'Uploading image…':uploadMessage }}</p>
|
||||
<details v-if="video" class="rounded-[var(--radius)] border border-[var(--line)] p-2"><summary class="text-[var(--type-sm)]">Add Guide stills</summary>
|
||||
<div v-for="(g,i) in form.guides" :key="i" class="mt-2 flex gap-2">
|
||||
<Studio2AssetSlot label="Guide" :asset="stills.find((a:any)=>a.id===g.stillId)" :hidden="slotHidden(g.stillId)" @pick="picker='guide:'+i" />
|
||||
<input v-model.number="g.frame" type="number" min="1" aria-label="Guide frame" class="display-field w-20">
|
||||
<button type="button" @click="form.guides.splice(i,1)">Remove</button>
|
||||
</div>
|
||||
<button type="button" class="mt-3 text-[var(--amber)]" @click="form.guides.push({stillId:'',frame:24})">Add guide</button>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<section class="display-col min-w-0">
|
||||
<div class="display-viewer">
|
||||
<button
|
||||
v-if="selected && xaigen && isStudio"
|
||||
v-if="selected && xaigen"
|
||||
type="button"
|
||||
class="absolute right-3 top-3 z-10 rounded-full border border-white/20 bg-zinc-950/80 p-2 text-zinc-200 outline-none ring-amber-300/50 hover:border-amber-300/50 focus-visible:ring-2"
|
||||
class="eye-viewer"
|
||||
:aria-pressed="!isHidden(selected)"
|
||||
:aria-label="isHidden(selected) ? 'Show preview' : 'Hide preview'"
|
||||
@click.stop="toggleReveal(selected.id)"
|
||||
>
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
|
||||
<path v-if="isHidden(selected)" d="M3 3l18 18M10.5 10.6a2.5 2.5 0 0 0 3 3M9.4 5.1A10.4 10.4 0 0 1 12 4.5c5 0 9.3 3.1 11 7.5a11.6 11.6 0 0 1-4.2 5.1M6.2 6.2A11.5 11.5 0 0 0 1 12c1.2 2.7 3.3 4.9 5.9 6.3A10.5 10.5 0 0 0 12 19.5c1.2 0 2.4-.2 3.5-.6" stroke-linecap="round"/>
|
||||
<template v-else>
|
||||
<path d="M2 12s3.5-7.5 10-7.5S22 12 22 12s-3.5 7.5-10 7.5S2 12 2 12Z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</template>
|
||||
</svg>
|
||||
<img :src="isHidden(selected) ? '/icons/display/eye-off.svg' : '/icons/display/eye.svg'" alt="" width="20" height="20">
|
||||
</button>
|
||||
<p v-if="selected && isHidden(selected)" class="text-zinc-400">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
|
||||
<p v-if="selected && isHidden(selected)">{{ selected.kind==='track' ? 'Track loaded · preview hidden' : selected.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</p>
|
||||
<div v-else-if="selected?.kind==='track'" class="w-full max-w-xl px-6 py-4">
|
||||
<AudioPlayer :src="`/api/library/tracks/${selected.id}/audio`" :download-name="`${selected.name || 'track'}.${selected.ext || 'wav'}`" :label="selected.name || 'Track'" />
|
||||
</div>
|
||||
<video v-else-if="selected?.kind==='clip'" :key="selected.id" :src="`/api/library/clips/${selected.id}/video`" controls class="max-h-[65vh] w-full object-contain" />
|
||||
<img v-else-if="selected" :src="stillUrl(selected.id)" class="max-h-[65vh] max-w-full object-contain" alt="Current output">
|
||||
<p v-else class="text-zinc-500">Select a result to view it here</p>
|
||||
<p v-else>Select a result to view it here</p>
|
||||
</div>
|
||||
|
||||
<div v-if="selected" class="flex flex-wrap items-start gap-3">
|
||||
<button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="restore(selected)">Use as input</button>
|
||||
<button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsSource(form,selected))">Use as source still</button>
|
||||
<button v-if="selected.kind==='still'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="Object.assign(form,useAsHero(form,selected))">Use as hero</button>
|
||||
<button v-if="selected.kind!=='track'" class="rounded-full border border-white/20 px-4 py-2 text-sm outline-none ring-amber-300/40 focus-visible:ring-2" @click="detailsOpen=true">Details</button>
|
||||
<button class="rounded-full border border-red-400/40 px-4 py-2 text-sm text-red-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="deleteOutput">Delete</button>
|
||||
<div v-if="selected" class="mt-3 flex flex-wrap items-start gap-2">
|
||||
<button v-if="selected.kind!=='track'" type="button" class="seg h-8 text-[var(--type-sm)]" @click="restore(selected)">Use as input</button>
|
||||
<button v-if="selected.kind==='still'" type="button" class="seg h-8 text-[var(--type-sm)]" @click="Object.assign(form,useAsSource(form,selected))">Use as source still</button>
|
||||
<button v-if="selected.kind==='still'" type="button" class="seg h-8 text-[var(--type-sm)]" @click="Object.assign(form,useAsHero(form,selected))">Use as hero</button>
|
||||
<button v-if="selected.kind!=='track'" type="button" class="seg h-8 text-[var(--type-sm)]" @click="detailsOpen=true">Details</button>
|
||||
<button type="button" class="seg h-8 text-[var(--type-sm)] text-red-200" @click="deleteOutput">Delete</button>
|
||||
<VideoUpscaleControl v-if="selected.kind==='clip'" :clip-id="selected.id" queue-only @complete="refresh" />
|
||||
</div>
|
||||
|
||||
<div class="flex min-w-0 max-w-full gap-2 overflow-x-auto" aria-label="Current family outputs">
|
||||
<div class="display-strip" aria-label="Current family outputs">
|
||||
<div
|
||||
v-for="o in family"
|
||||
:key="o.id"
|
||||
class="relative shrink-0 rounded-lg border p-1"
|
||||
:class="selected?.id===o.id ? 'border-amber-300' : 'border-white/10'"
|
||||
class="display-tile"
|
||||
:data-active="selected?.id===o.id ? 'true' : undefined"
|
||||
>
|
||||
<button type="button" class="block outline-none ring-amber-300/40 focus-visible:ring-2" @click="selectOutput(o)">
|
||||
<span v-if="isHidden(o)" class="flex h-20 w-24 items-center justify-center p-1 text-xs text-zinc-400">{{ o.kind==='track' ? 'Audio hidden' : o.role==='input' ? 'Still loaded · preview hidden' : 'Output hidden' }}</span>
|
||||
<span v-else-if="o.kind==='track'" class="flex h-20 w-24 items-center justify-center rounded bg-zinc-900 text-xs text-amber-100">Audio</span>
|
||||
<img v-else :src="o.kind==='clip' ? `/api/library/clips/${o.id}/thumb` : stillUrl(o.id)" class="h-20 w-24 rounded object-cover" alt="Family output">
|
||||
<button type="button" class="block h-full w-full outline-none" @click="selectOutput(o)">
|
||||
<span v-if="isHidden(o)" class="flex h-full items-center justify-center p-1 text-[10px] text-[var(--muted)]">{{ o.kind==='track' ? 'Audio hidden' : o.role==='input' ? 'Hidden' : 'Hidden' }}</span>
|
||||
<span v-else-if="o.kind==='track'" class="flex h-full items-center justify-center text-[10px] text-[var(--amber)]">Audio</span>
|
||||
<img v-else :src="o.kind==='clip' ? `/api/library/clips/${o.id}/thumb` : stillUrl(o.id)" class="h-full w-full object-cover" alt="Family output">
|
||||
</button>
|
||||
<button
|
||||
v-if="xaigen && isStudio"
|
||||
v-if="xaigen"
|
||||
type="button"
|
||||
class="absolute right-1 top-1 rounded-md border border-white/20 bg-zinc-950/80 p-1 text-zinc-200 outline-none ring-amber-300/50 focus-visible:ring-2"
|
||||
class="eye-tile"
|
||||
:aria-label="isHidden(o) ? 'Show tile' : 'Hide tile'"
|
||||
:aria-pressed="!isHidden(o)"
|
||||
@click.stop="toggleReveal(o.id)"
|
||||
>
|
||||
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
|
||||
<path v-if="isHidden(o)" d="M3 3l18 18M10.5 10.6a2.5 2.5 0 0 0 3 3M9.4 5.1A10.4 10.4 0 0 1 12 4.5c5 0 9.3 3.1 11 7.5a11.6 11.6 0 0 1-4.2 5.1M6.2 6.2A11.5 11.5 0 0 0 1 12c1.2 2.7 3.3 4.9 5.9 6.3A10.5 10.5 0 0 0 12 19.5c1.2 0 2.4-.2 3.5-.6" stroke-linecap="round"/>
|
||||
<template v-else>
|
||||
<path d="M2 12s3.5-7.5 10-7.5S22 12 22 12s-3.5 7.5-10 7.5S2 12 2 12Z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</template>
|
||||
</svg>
|
||||
<img :src="isHidden(o) ? '/icons/display/eye-off.svg' : '/icons/display/eye.svg'" alt="" width="12" height="12">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section v-if="form.mode!=='music'" aria-label="Source" class="display-card">
|
||||
<div class="mb-3 flex flex-wrap items-start justify-between gap-3">
|
||||
<h2 class="text-xs uppercase tracking-wider text-zinc-400">Source</h2>
|
||||
<div v-if="isStudio" class="flex flex-wrap gap-4 text-sm text-zinc-300" aria-label="Identity locks">
|
||||
<label class="flex items-start gap-2"><input v-model="form.lockFace" type="checkbox" class="mt-1 accent-amber-400"><span>Lock face<span class="block text-xs text-zinc-500">Hero encode + lock on Klein / Krea stills</span></span></label>
|
||||
<label class="flex items-start gap-2"><input v-model="form.lockOutfit" type="checkbox" class="mt-1 accent-amber-400"><span>Lock outfit<span class="block text-xs text-zinc-500">Hero encode + lock on Klein / Krea stills</span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<Studio2AssetSlot label="Hero" :asset="stills.find((a:any)=>a.id===form.identityStillId)" :hidden="slotHidden(form.identityStillId)" upload :disabled="uploading" @pick="picker='identityStillId'" @upload="upload($event,'hero')" />
|
||||
<Studio2AssetSlot :label="form.mode==='extend'?'Previous clip':'Start still'" :asset="sourceSlot" :hidden="slotHidden(form.mode==='extend'?form.startClipId:form.imageAId)" upload :disabled="uploading" @pick="picker=form.mode==='extend'?'startClipId':'imageAId'" @upload="upload($event,'source')" />
|
||||
<Studio2AssetSlot v-if="form.mode==='compose'" label="Second still" :asset="stills.find((a:any)=>a.id===form.imageBId)" :hidden="slotHidden(form.imageBId)" @pick="picker='imageBId'" />
|
||||
<Studio2AssetSlot v-if="form.mode==='refine'" label="Mask" :asset="stills.find((a:any)=>a.id===form.maskId)" :hidden="slotHidden(form.maskId)" @pick="picker='maskId'" />
|
||||
<Studio2AssetSlot v-if="video" label="End still" :asset="stills.find((a:any)=>a.id===form.endStillId)" :hidden="slotHidden(form.endStillId)" @pick="picker='endStillId'" />
|
||||
</div>
|
||||
<label v-if="form.mode==='refine'" class="mt-3 block text-sm">Mask still (white = change). On-canvas mask comes later.
|
||||
<select v-model="form.maskId" class="mt-1 w-full rounded-xl bg-zinc-800 p-2"><option value="">Choose mask still</option><option v-for="a in stills" :key="a.id" :value="a.id">{{ assetLabel(a) }}</option></select>
|
||||
</label>
|
||||
<p v-if="uploading || uploadMessage" role="status" class="mt-2 text-sm text-amber-200">{{ uploading?'Uploading image…':uploadMessage }}</p>
|
||||
</section>
|
||||
|
||||
<details v-if="video" class="rounded-xl border border-white/10 p-3"><summary>Add Guide stills</summary>
|
||||
<div v-for="(g,i) in form.guides" :key="i" class="mt-2 flex gap-2">
|
||||
<Studio2AssetSlot label="Guide" :asset="stills.find((a:any)=>a.id===g.stillId)" :hidden="slotHidden(g.stillId)" @pick="picker='guide:'+i" />
|
||||
<input v-model.number="g.frame" type="number" min="1" aria-label="Guide frame" class="w-20 bg-zinc-800 p-2">
|
||||
<button type="button" @click="form.guides.splice(i,1)">Remove</button>
|
||||
</div>
|
||||
<button type="button" class="mt-3 text-amber-200" @click="form.guides.push({stillId:'',frame:24})">Add guide</button>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="min-w-0 space-y-4">
|
||||
<section class="display-col min-w-0 space-y-3">
|
||||
<template v-if="form.mode==='music'">
|
||||
<p class="text-sm text-zinc-400">YuE2 · lyrics-to-song · plan → synthesize → decode</p>
|
||||
<label class="block text-sm">Genre / style tags
|
||||
<textarea v-model="music.tags" rows="3" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="tagsPlaceholder" />
|
||||
<p class="text-[var(--type-sm)] text-[var(--muted)]">YuE2 · lyrics-to-song · plan → synthesize → decode</p>
|
||||
<label class="block text-[var(--type-sm)]">Genre / style tags
|
||||
<textarea v-model="music.tags" rows="3" class="display-field mt-1" :placeholder="tagsPlaceholder" />
|
||||
</label>
|
||||
<label class="block text-sm">Lyrics
|
||||
<textarea v-model="music.lyrics" rows="8" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" :placeholder="lyricsPlaceholder" />
|
||||
<label class="block text-[var(--type-sm)]">Lyrics
|
||||
<textarea v-model="music.lyrics" rows="8" class="display-field mt-1" :placeholder="lyricsPlaceholder" />
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="block text-sm">Target length (sec)
|
||||
<input v-model.number="music.duration" type="number" min="15" max="150" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
|
||||
<span class="mt-1 block text-[11px] text-zinc-500">Caps semantic tokens (~25/s). Actual length follows the model end token — not an FFmpeg trim.</span>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<label class="block text-[var(--type-sm)]">Target length (sec)
|
||||
<input v-model.number="music.duration" type="number" min="15" max="150" class="display-field mt-1">
|
||||
<span class="mt-1 block text-[11px] text-[var(--muted)]">Caps semantic tokens (~25/s). Actual length follows the model end token — not an FFmpeg trim.</span>
|
||||
</label>
|
||||
<label class="block text-sm">Seed
|
||||
<input v-model="music.seed" placeholder="random" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2">
|
||||
<label class="block text-[var(--type-sm)]">Seed
|
||||
<input v-model="music.seed" placeholder="random" class="display-field mt-1">
|
||||
</label>
|
||||
</div>
|
||||
<label class="block text-sm">Track name (optional)
|
||||
<input v-model="music.name" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Optional track name">
|
||||
<label class="block text-[var(--type-sm)]">Track name (optional)
|
||||
<input v-model="music.name" class="display-field mt-1" placeholder="Optional track name">
|
||||
</label>
|
||||
</template>
|
||||
<template v-else>
|
||||
<label class="block">Prompt<textarea v-model="form.promptSections.action" rows="4" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="Describe the image or the shot." /></label>
|
||||
<label class="block text-[var(--type-sm)]">Prompt<textarea v-model="form.promptSections.action" rows="5" class="display-field mt-1" placeholder="Describe the image or the shot." /></label>
|
||||
<Studio2PromptControls v-if="video" v-model="form.promptSections" />
|
||||
<Studio2StyleChips v-else v-model="form.imageStyles" />
|
||||
<label v-if="video" class="block">Extra constraints (optional) — do not repeat the Prompt. Example: keep the black glasses, no extra people.
|
||||
<textarea v-model="form.promptSections.locks" rows="2" class="mt-1 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" />
|
||||
<label v-if="video" class="block text-[var(--type-sm)]">Extra constraints (optional) — do not repeat the Prompt. Example: keep the black glasses, no extra people.
|
||||
<textarea v-model="form.promptSections.locks" rows="2" class="display-field mt-1" />
|
||||
</label>
|
||||
<details v-if="video || form.mode==='edit'" class="rounded-xl border border-white/10 p-3">
|
||||
<summary>{{ video?'Queue more shots':'Queue extra edit passes' }}</summary>
|
||||
<p class="mt-2 text-xs text-zinc-400">Each blank-line-separated block is another job. Hero and settings stay. Press Enter twice between shots. A wrapped sentence is still one shot.{{ video?'':' Each extra pass edits the previous result with Klein.' }}</p>
|
||||
<textarea v-model="batchText" rows="5" class="mt-2 w-full rounded-xl bg-zinc-900 p-3 outline-none ring-amber-300/40 focus:ring-2" placeholder="First additional prompt Next additional prompt" />
|
||||
<details v-if="video || form.mode==='edit'" class="rounded-[var(--radius)] border border-[var(--line)] p-2">
|
||||
<summary class="text-[var(--type-sm)]">{{ video?'Queue more shots':'Queue extra edit passes' }}</summary>
|
||||
<p class="mt-2 text-[11px] text-[var(--muted)]">Each blank-line-separated block is another job. Hero and settings stay. Press Enter twice between shots. A wrapped sentence is still one shot.{{ video?'':' Each extra pass edits the previous result with Klein.' }}</p>
|
||||
<textarea v-model="batchText" rows="5" class="display-field mt-2" placeholder="First additional prompt Next additional prompt" />
|
||||
</details>
|
||||
<button type="button" class="text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=true">Generation settings</button>
|
||||
<p v-if="!video && form.engine==='krea'" class="text-sm text-zinc-400">Krea does not attach the hero identity reference.</p>
|
||||
<p v-if="form.mode==='extend'" class="text-sm text-amber-200">{{ form.startClipId ? 'Extend · '+(clips.find((c:any)=>c.id===form.startClipId)?.name || form.startClipId)+' · last frame' : 'Select the clip in the family strip or Previous clip.' }}</p>
|
||||
<button type="button" class="text-[var(--type-sm)] text-[var(--amber)] outline-none focus-visible:underline" @click="settingsOpen=true">Generation settings</button>
|
||||
<p v-if="!video && form.engine==='krea'" class="text-[var(--type-sm)] text-[var(--muted)]">Krea does not attach the hero identity reference.</p>
|
||||
<p v-if="form.mode==='extend'" class="text-[var(--type-sm)] text-[var(--amber)]">{{ form.startClipId ? 'Extend · '+(clips.find((c:any)=>c.id===form.startClipId)?.name || form.startClipId)+' · last frame' : 'Select the clip in the family strip or Previous clip.' }}</p>
|
||||
</template>
|
||||
|
||||
<p v-if="error" role="alert" class="text-sm text-red-300">{{ error }}</p>
|
||||
<button type="button" :disabled="submitting" class="display-cta w-full p-4 outline-none disabled:opacity-50" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
|
||||
<p v-if="error" role="alert" class="text-[var(--type-sm)] text-red-300">{{ error }}</p>
|
||||
<button type="button" :disabled="submitting" class="display-cta" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
|
||||
|
||||
<h2 class="text-sm font-semibold text-zinc-300">Job queue</h2>
|
||||
<div v-for="job in upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-4 text-sm" role="status">
|
||||
<div class="flex justify-between gap-3"><strong>Video upscale</strong><span class="capitalize text-amber-200">{{ job.status }}</span></div>
|
||||
<p class="truncate text-zinc-300">{{ job.name }}</p>
|
||||
<p class="text-xs text-zinc-400">{{ job.width?job.width+' × '+job.height+' · ':'' }}{{ Math.round((job.elapsedMs||0)/1000) }}s elapsed</p>
|
||||
<progress class="h-2 w-full accent-amber-300" max="100" :value="job.progress || 0" />
|
||||
<p class="text-xs text-zinc-400">{{ job.message }}</p>
|
||||
<h2 class="text-[var(--type-sm)] font-semibold text-[var(--muted)]">Job queue</h2>
|
||||
<div v-for="job in upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-[var(--radius)] border border-[color-mix(in_srgb,var(--amber)_25%,transparent)] bg-[var(--bg-slot)] p-3 text-[var(--type-sm)]" role="status">
|
||||
<div class="flex justify-between gap-3"><strong>Video upscale</strong><span class="capitalize text-[var(--amber)]">{{ job.status }}</span></div>
|
||||
<p class="truncate">{{ job.name }}</p>
|
||||
<p class="text-[11px] text-[var(--muted)]">{{ job.width?job.width+' × '+job.height+' · ':'' }}{{ Math.round((job.elapsedMs||0)/1000) }}s elapsed</p>
|
||||
<progress class="h-2 w-full accent-[var(--amber)]" max="100" :value="job.progress || 0" />
|
||||
<p class="text-[11px] text-[var(--muted)]">{{ job.message }}</p>
|
||||
</div>
|
||||
<div v-for="job in musicJobs" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-3 text-sm" aria-live="polite" role="status">
|
||||
<div v-for="job in musicJobs" :key="job.id" class="space-y-2 rounded-[var(--radius)] border border-[color-mix(in_srgb,var(--amber)_25%,transparent)] bg-[var(--bg-slot)] p-3 text-[var(--type-sm)]" aria-live="polite" role="status">
|
||||
<div class="flex justify-between gap-3">
|
||||
<strong class="truncate">{{ job.name || 'YuE2' }}</strong>
|
||||
<span class="capitalize text-amber-200">{{ job.live?.status || job.status }}</span>
|
||||
<span class="capitalize text-[var(--amber)]">{{ job.live?.status || job.status }}</span>
|
||||
</div>
|
||||
<p class="text-xs text-zinc-400">YuE2 · target {{ job.duration || '—' }}s<span v-if="job.live?.message"> · {{ job.live.message }}</span></p>
|
||||
<progress v-if="job.live?.progress" class="h-2 w-full accent-amber-300" max="100" :value="job.live.progress || 0" />
|
||||
<p class="text-[11px] text-[var(--muted)]">YuE2 · target {{ job.duration || '—' }}s<span v-if="job.live?.message"> · {{ job.live.message }}</span></p>
|
||||
<progress v-if="job.live?.progress" class="h-2 w-full accent-[var(--amber)]" max="100" :value="job.live.progress || 0" />
|
||||
<p v-if="job.lastError || job.live?.error" role="alert" class="text-red-300">{{ job.lastError || job.live?.error }}</p>
|
||||
</div>
|
||||
<Studio2JobProgress v-for="job in benchJobs" :key="job.id" :job="job" :now="now" @select="focusJob(job)" @cancel="cancel(job)" />
|
||||
<button v-if="folderJobs.some(j=>['complete','failed','cancelled'].includes(j.state)) || musicJobs.some(j=>['complete','done','error','cancelled'].includes(j.status))" type="button" class="text-sm text-zinc-400 outline-none ring-amber-300/40 focus-visible:ring-2" @click="clearFinished">Clear finished</button>
|
||||
<button v-if="folderJobs.some(j=>['complete','failed','cancelled'].includes(j.state)) || musicJobs.some(j=>['complete','done','error','cancelled'].includes(j.status))" type="button" class="text-[var(--type-sm)] text-[var(--muted)] outline-none focus-visible:underline" @click="clearFinished">Clear finished</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="settingsOpen || detailsOpen" class="fixed inset-0 z-50 bg-black/70" @click.self="settingsOpen=false;detailsOpen=false">
|
||||
<aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-white/15 bg-zinc-950 p-6">
|
||||
<button type="button" class="float-right outline-none ring-amber-300/40 focus-visible:ring-2" @click="settingsOpen=false;detailsOpen=false">Close</button>
|
||||
<aside class="absolute inset-y-0 right-0 w-full max-w-md overflow-auto border-l border-[var(--line)] bg-[var(--bg)] p-6">
|
||||
<button type="button" class="float-right outline-none focus-visible:underline" @click="settingsOpen=false;detailsOpen=false">Close</button>
|
||||
<template v-if="settingsOpen">
|
||||
<h2 class="mb-6 text-xl font-semibold">Generation settings</h2>
|
||||
<AspectRatioPick v-model="form.settings.aspect" heading="Aspect" :options="aspectOptions" />
|
||||
<p class="my-3 text-sm text-zinc-400">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding, never stretch</p>
|
||||
<p class="my-3 text-[var(--type-sm)] text-[var(--muted)]">{{ resolvedSize.width }} × {{ resolvedSize.height }} · fit with padding, never stretch</p>
|
||||
<label v-for="key in ['steps','cfg',...(video?['duration','fps']:[])]" :key="key" class="mb-4 block capitalize">{{ key }}
|
||||
<input v-model.number="form.settings[key]" type="number" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2">
|
||||
<input v-model.number="form.settings[key]" type="number" class="display-field mt-1">
|
||||
</label>
|
||||
<label class="mb-4 block">Seed · {{ form.settings.seedMode==='locked'?'Locked':'Random each job' }}
|
||||
<input :value="form.settings.seed" type="number" min="0" max="2147483647" class="mt-1 w-full rounded bg-zinc-800 p-2 outline-none ring-amber-300/40 focus:ring-2" @input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'">
|
||||
<input :value="form.settings.seed" type="number" min="0" max="2147483647" class="display-field mt-1" @input="form.settings.seed=Number(($event.target as HTMLInputElement).value);form.settings.seedMode='locked'">
|
||||
</label>
|
||||
<button type="button" class="mb-4 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">Random</button>
|
||||
<label v-if="video"><input v-model="form.settings.turbo" type="checkbox" class="accent-amber-400"> Turbo</label>
|
||||
<button type="button" class="mb-4 text-[var(--type-sm)] text-[var(--amber)] outline-none focus-visible:underline" @click="form.settings.seedMode='random';form.settings.seed=randomSeed()">Random</button>
|
||||
<label v-if="video"><input v-model="form.settings.turbo" type="checkbox" class="accent-[var(--amber)]"> Turbo</label>
|
||||
<LoraSelect v-model="form.settings.loraStack" class="mt-5" :names="pickerLoras" :use="currentLoraUse" :clip-strength="true" filename-subtitle :aliases="{...loraNames.aliases,...library.loraAliases}" :triggers="{...loraNames.triggers,...library.loraTriggers}" missing-label="No cached LoRAs yet — Refresh to check Comfy" @insert-trigger="form.promptSections.action += ' '+$event" />
|
||||
<button type="button" class="mt-2 text-sm text-amber-200 outline-none ring-amber-300/40 focus-visible:ring-2" @click="loadLoras(true)">Refresh LoRAs</button>
|
||||
<button type="button" class="mt-2 text-[var(--type-sm)] text-[var(--amber)] outline-none focus-visible:underline" @click="loadLoras(true)">Refresh LoRAs</button>
|
||||
<details class="mt-6"><summary>Compiled prompt</summary>
|
||||
<pre class="whitespace-pre-wrap text-xs text-zinc-400">{{ compiled }}</pre>
|
||||
<p v-if="!video" class="mt-3 text-xs text-zinc-400">Negative: {{ stylePrompt(form.imageStyles,true) || 'None' }}</p>
|
||||
<pre class="whitespace-pre-wrap text-xs text-[var(--muted)]">{{ compiled }}</pre>
|
||||
<p v-if="!video" class="mt-3 text-xs text-[var(--muted)]">Negative: {{ stylePrompt(form.imageStyles,true) || 'None' }}</p>
|
||||
</details>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -264,12 +238,12 @@
|
||||
</div>
|
||||
|
||||
<div v-if="picker" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6" @click.self="picker=''">
|
||||
<section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-2xl border border-white/15 bg-zinc-950 p-5">
|
||||
<section role="dialog" aria-modal="true" aria-label="Choose source asset" class="max-h-[80vh] w-full max-w-4xl overflow-auto rounded-[var(--radius)] border border-[var(--line)] bg-[var(--bg)] p-5">
|
||||
<div class="mb-4 flex justify-between"><h2>Choose {{ picker==='identityStillId'?'hero':'source' }}</h2><button type="button" @click="picker=''">Close</button></div>
|
||||
<button type="button" class="mb-4 text-sm text-zinc-400" @click="pickAsset(null)">Clear slot</button>
|
||||
<button type="button" class="mb-4 text-[var(--type-sm)] text-[var(--muted)]" @click="pickAsset(null)">Clear slot</button>
|
||||
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-5">
|
||||
<button v-for="a in pickerAssets" :key="a.id" type="button" class="rounded-xl border border-white/15 p-2 text-left outline-none ring-amber-300/40 focus-visible:ring-2" @click="pickAsset(a)">
|
||||
<span v-if="isHidden(a)" class="flex h-24 items-center text-xs text-zinc-400">Still loaded · preview hidden</span>
|
||||
<button v-for="a in pickerAssets" :key="a.id" type="button" class="rounded-[var(--radius)] border border-[var(--line)] p-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--amber)_50%,transparent)]" @click="pickAsset(a)">
|
||||
<span v-if="isHidden(a)" class="flex h-24 items-center text-xs text-[var(--muted)]">Still loaded · preview hidden</span>
|
||||
<img v-else :src="a.kind==='clip'?'/api/library/clips/'+a.id+'/thumb':stillUrl(a.id)" class="h-24 w-full object-contain" alt="Source option">
|
||||
<span class="mt-2 block truncate text-xs">{{ assetLabel(a) }}</span>
|
||||
</button>
|
||||
@@ -293,7 +267,8 @@ import {randomSeed} from '~/shared/studio2/seed.mjs'
|
||||
import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
|
||||
|
||||
const xaigen=useRuntimeConfig().public.studio==='xaigen'
|
||||
const {displayMode,isStudio,isClassic}=useDisplayMode()
|
||||
const instanceName=String(useRuntimeConfig().public.instanceName || 'AIGen')
|
||||
const {displayMode,isClassic}=useDisplayMode()
|
||||
const classicHideInput=ref(true)
|
||||
const classicHideOutput=ref(true)
|
||||
const picker=ref('')
|
||||
|
||||
Reference in New Issue
Block a user