Make Studio 2 the home bench with YuE2 music, LTX, and per-preview hide.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-09-15 18:19:34 -05:00
co-authored by Cursor
parent a216afc4ce
commit 1db62e9187
14 changed files with 413 additions and 330 deletions
+5 -42
View File
@@ -1,7 +1,7 @@
<template>
<nav v-if="!advanced" aria-label="Generation type" class="grid grid-cols-3 gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 p-2">
<button v-for="kind in ['image', 'video'] as const" :key="kind" type="button" :aria-pressed="current === kind" class="rounded-xl px-3 py-3 font-semibold capitalize" :class="current === kind ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'" @click="emit('select', kind)">{{ kind }}</button>
<NuxtLink to="/music" class="rounded-xl px-3 py-3 text-center font-semibold" :aria-current="current === 'music' ? 'page' : undefined" :class="current === 'music' ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'">Music</NuxtLink>
<NuxtLink to="/music?engine=yue2" class="rounded-xl px-3 py-3 text-center font-semibold" :aria-current="current === 'music' ? 'page' : undefined" :class="current === 'music' ? 'bg-amber-400 text-zinc-950' : 'text-zinc-300 hover:bg-white/5'">Music</NuxtLink>
</nav>
<div v-else class="mb-4 grid grid-cols-3 gap-3">
<div
@@ -89,7 +89,7 @@
:class="current === 'music' ? 'border-amber-300 bg-amber-400/10 text-amber-50' : 'border-white/10 text-zinc-400'"
>
<NuxtLink
to="/music"
to="/music?engine=yue2"
class="block w-full px-4 pb-3 pt-4 text-left transition"
:class="current === 'music' ? '' : 'hover:text-zinc-200'"
>
@@ -99,35 +99,7 @@
</svg>
<span class="mt-3 block font-display text-lg font-bold text-zinc-100">Music</span>
</NuxtLink>
<div class="grid grid-cols-3 border-t border-white/10">
<button
type="button"
class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
:class="engineBtnClass(current === 'music' && musicEngine === 'ace')"
@click="pickMusic('ace')"
>
<span class="block font-semibold">ACE</span>
<span class="text-xs opacity-80">Step</span>
</button>
<button
type="button"
class="border-r border-white/10 px-3 py-2.5 text-left text-sm transition"
:class="engineBtnClass(current === 'music' && musicEngine === 'yue')"
@click="pickMusic('yue')"
>
<span class="block font-semibold">YuE</span>
<span class="text-xs opacity-80">v1</span>
</button>
<button
type="button"
class="px-3 py-2.5 text-left text-sm transition"
:class="engineBtnClass(current === 'music' && musicEngine === 'yue2')"
@click="pickMusic('yue2')"
>
<span class="block font-semibold">YuE2</span>
<span class="text-xs opacity-80">3B</span>
</button>
</div>
<p class="border-t border-white/10 px-4 py-2 text-xs text-zinc-400">YuE2 · 3B lyrics-to-song</p>
</div>
</div>
</template>
@@ -140,20 +112,19 @@ const props = withDefaults(defineProps<{
videoEngine?: 'minimax' | 'ltx'
videoStart?: 'still' | 'text'
imageEngine?: 'flux' | 'krea'
musicEngine?: 'ace' | 'yue' | 'yue2'
musicEngine?: 'yue2'
}>(), {
ltxEnabled: false,
videoEngine: 'minimax',
videoStart: 'still',
imageEngine: 'flux',
musicEngine: 'ace'
musicEngine: 'yue2'
})
const emit = defineEmits<{
select: [kind: 'video' | 'image']
'video-engine': [engine: 'minimax' | 'ltx']
'image-engine': [engine: 'flux' | 'krea']
'music-engine': [engine: 'ace' | 'yue' | 'yue2']
}>()
function engineBtnClass(active: boolean) {
@@ -170,12 +141,4 @@ function pickImage(engine: 'flux' | 'krea') {
emit('image-engine', engine)
if (props.current !== 'image') emit('select', 'image')
}
function pickMusic(engine: 'ace' | 'yue' | 'yue2') {
if (props.current === 'music') {
emit('music-engine', engine)
return
}
void navigateTo({ path: '/music', query: { engine } })
}
</script>