Move engine pickers into the Video / Image / Music cards.
Flux/Krea, MiniMax/LTX, and ACE/YuE sit on the top kind cards so you choose the engine before the prompt form.
This commit is contained in:
+40
-77
@@ -8,7 +8,15 @@
|
||||
/>
|
||||
|
||||
<main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
|
||||
<StudioKindCards :current="imageStudio ? 'image' : 'video'" @select="selectStudioKind" />
|
||||
<StudioKindCards
|
||||
:current="imageStudio ? 'image' : 'video'"
|
||||
:ltx-enabled="ltxEnabled"
|
||||
:video-engine="videoEngine"
|
||||
:image-engine="v2Engine"
|
||||
@select="selectStudioKind"
|
||||
@video-engine="selectVideoEngine"
|
||||
@image-engine="setV2Engine"
|
||||
/>
|
||||
<div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
|
||||
<section id="studio-input" class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
|
||||
<div>
|
||||
@@ -27,89 +35,44 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-white/15 bg-zinc-950/50"
|
||||
v-if="!(studioMode === 'editv2' && v2Mode === 'generate')"
|
||||
class="relative cursor-pointer rounded-2xl border border-dashed border-white/15 bg-zinc-950/50 p-4 transition hover:border-amber-300/50"
|
||||
:class="{ 'border-amber-300/70 bg-amber-400/5': dragging }"
|
||||
@dragover.prevent="dragging = true"
|
||||
@dragleave.prevent="dragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
@click="openPicker('main')"
|
||||
>
|
||||
<div
|
||||
v-if="!(studioMode === 'editv2' && v2Mode === 'generate')"
|
||||
class="relative cursor-pointer border-dashed p-4 transition hover:border-amber-300/50"
|
||||
:class="studioMode === 'editv2' || (studioMode === 'video' && ltxEnabled) ? 'border-b border-white/10' : ''"
|
||||
@dragover.prevent="dragging = true"
|
||||
@dragleave.prevent="dragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
@click="openPicker('main')"
|
||||
>
|
||||
<div v-if="studioMode === 'editv2' && v2Mode === 'refine' && preview" class="relative" @click.stop>
|
||||
<ImageV2MaskPainter
|
||||
ref="refinePainter"
|
||||
:src="preview"
|
||||
:hide-preview="hideInputPreview"
|
||||
@painted="refineMaskDirty = $event"
|
||||
/>
|
||||
<button type="button" class="absolute right-3 top-3 z-10 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else-if="preview && !hideInputPreview" class="relative">
|
||||
<img :src="preview" alt="Source still" class="max-h-72 w-full rounded-xl object-contain bg-black/40">
|
||||
<button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else-if="preview && hideInputPreview" class="relative flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<span class="sensitive-glow absolute inset-3 rounded-xl" />
|
||||
<p class="relative font-medium">Still loaded · preview hidden</p>
|
||||
<p class="relative mt-1 text-sm text-zinc-500">Toggle Hide input still off to show it</p>
|
||||
<button type="button" class="relative mt-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else class="flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<p class="font-medium">{{ studioMode === 'edit' || studioMode === 'editv2' ? (studioMode === 'editv2' ? (v2Mode === 'refine' ? 'Still A · canvas' : 'Still A') : 'Image 1') : (textToVideo ? 'Start still · optional' : 'Choose an image') }}</p>
|
||||
<p class="mt-1 text-sm text-zinc-500">{{ textToVideo ? 'Text-to-video does not need a still. Shot 2+ will still extend from the last frame.' : 'Browse the library or upload a new PNG, JPG, or WEBP' }}</p>
|
||||
</div>
|
||||
<div v-if="studioMode === 'editv2' && v2Mode === 'refine' && preview" class="relative" @click.stop>
|
||||
<ImageV2MaskPainter
|
||||
ref="refinePainter"
|
||||
:src="preview"
|
||||
:hide-preview="hideInputPreview"
|
||||
@painted="refineMaskDirty = $event"
|
||||
/>
|
||||
<button type="button" class="absolute right-3 top-3 z-10 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="studioMode === 'editv2' && v2Mode === 'generate' && (file || inputStillId)"
|
||||
class="border-b border-white/10 px-4 py-3 text-sm text-zinc-400"
|
||||
>
|
||||
Still A is loaded for Edit / Compose / Refine. Generate ignores it and uses the prompt only.
|
||||
<div v-else-if="preview && !hideInputPreview" class="relative">
|
||||
<img :src="preview" alt="Source still" class="max-h-72 w-full rounded-xl object-contain bg-black/40">
|
||||
<button type="button" class="absolute right-3 top-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-if="studioMode === 'editv2'" class="grid grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
|
||||
:class="v2Engine === 'flux' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
|
||||
@click="setV2Engine('flux')"
|
||||
>
|
||||
<span class="block font-semibold">Flux</span>
|
||||
<span class="text-xs opacity-80">Klein 9B</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2.5 text-left text-sm transition"
|
||||
:class="v2Engine === 'krea' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
|
||||
@click="setV2Engine('krea')"
|
||||
>
|
||||
<span class="block font-semibold">Krea</span>
|
||||
<span class="text-xs opacity-80">Krea 2 Turbo</span>
|
||||
</button>
|
||||
<div v-else-if="preview && hideInputPreview" class="relative flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<span class="sensitive-glow absolute inset-3 rounded-xl" />
|
||||
<p class="relative font-medium">Still loaded · preview hidden</p>
|
||||
<p class="relative mt-1 text-sm text-zinc-500">Toggle Hide input still off to show it</p>
|
||||
<button type="button" class="relative mt-3 rounded-full bg-zinc-950/80 px-3 py-1 text-xs" @click.stop="resetImage">Reset</button>
|
||||
</div>
|
||||
<div v-else-if="studioMode === 'video' && ltxEnabled" class="grid grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
|
||||
:class="videoEngine === 'minimax' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
|
||||
@click="selectVideoEngine('minimax')"
|
||||
>
|
||||
<span class="block font-semibold">MiniMax H3</span>
|
||||
<span class="text-xs opacity-80">Stereo · identity refs</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-3 py-2.5 text-left text-sm transition"
|
||||
:class="videoEngine === 'ltx' ? 'bg-amber-400/10 text-amber-100' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-200'"
|
||||
@click="selectVideoEngine('ltx')"
|
||||
>
|
||||
<span class="block font-semibold">LTX-2.3</span>
|
||||
<span class="text-xs opacity-80">PinkCherry</span>
|
||||
</button>
|
||||
<div v-else class="flex min-h-44 flex-col items-center justify-center text-center">
|
||||
<p class="font-medium">{{ studioMode === 'edit' || studioMode === 'editv2' ? (studioMode === 'editv2' ? (v2Mode === 'refine' ? 'Still A · canvas' : 'Still A') : 'Image 1') : (textToVideo ? 'Start still · optional' : 'Choose an image') }}</p>
|
||||
<p class="mt-1 text-sm text-zinc-500">{{ textToVideo ? 'Text-to-video does not need a still. Shot 2+ will still extend from the last frame.' : 'Browse the library or upload a new PNG, JPG, or WEBP' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="studioMode === 'editv2' && v2Mode === 'generate' && (file || inputStillId)"
|
||||
class="rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm text-zinc-400"
|
||||
>
|
||||
Still A is loaded for Edit / Compose / Refine. Generate ignores it and uses the prompt only.
|
||||
</div>
|
||||
|
||||
<div v-if="file || inputStillId" class="mt-2 flex min-w-0 items-center gap-2">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user