towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Simplify generation controls with task navigation and settings drawer

Browse Source
This commit is contained in:
Towsty
2026-09-07 08:36:33 -05:00
parent 7a2069462e
commit 174d40a7dc
7 changed files with 177 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/music.vue
+14 -4
View File
@@ -1,18 +1,20 @@
<template>
<div class="min-h-dvh min-w-0">
<AppHeader
:subtitle="headerSubtitle"
:subtitle="advanced ? headerSubtitle : 'Create music from text'"
current="music"
:queue-count="queueCount"
/>
<main class="mx-auto min-w-0 max-w-7xl space-y-6 px-4 py-6 sm:px-6">
<StudioKindCards
:advanced="advanced"
current="music"
:music-engine="engineFamily"
@select="goStudio"
@music-engine="selectEngineFamily"
/>
<div class="flex items-center justify-between gap-3"><span class="rounded-full border border-amber-300/60 px-4 py-2 text-sm text-amber-100">From text</span><label class="flex items-center gap-2 text-sm text-zinc-300"><input v-model="advanced" type="checkbox" class="accent-amber-400">Advanced mode</label></div>
<div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
<section class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
<div>
@@ -22,6 +24,12 @@
</p>
</div>
<GenerationSettings :advanced="advanced">
<label class="block space-y-2 text-sm"><span>Model</span><select :value="engineFamily" class="w-full rounded-xl border border-white/15 bg-zinc-900 p-3" @change="selectEngineFamily(($event.target as HTMLSelectElement).value as 'ace' | 'yue')"><option value="ace">ACE-Step</option><option value="yue">YuE</option></select></label>
<div v-if="!advanced" class="space-y-4">
<label v-if="engineFamily !== 'yue'" class="block text-sm">Steps<input v-model.number="steps" type="number" :min="stepsMin" :max="stepsMax" class="mt-2 w-full rounded-xl border border-white/15 bg-zinc-900 p-3"></label>
<label class="block text-sm">Seed<input v-model="seed" placeholder="random" class="mt-2 w-full rounded-xl border border-white/15 bg-zinc-900 p-3"></label>
</div>
<div v-if="engineFamily === 'ace'" class="flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-zinc-950/40 px-4 py-3 text-sm">
<span class="min-w-0">
<span class="flex items-center gap-2">
@@ -40,6 +48,7 @@
</label>
</div>
</GenerationSettings>
<p v-if="error" class="rounded-2xl border border-red-400/30 bg-red-400/10 px-4 py-3 text-sm text-red-200">{{ error }}</p>
<label class="block text-sm">
@@ -93,7 +102,7 @@
>
<span class="mt-1 block text-[11px] text-zinc-500">{{ engineFamily === 'yue' ? 'YuE uses this as stage-A length' : `${durationMin}–${durationMax} seconds` }}</span>
</label>
<label v-if="engineFamily !== 'yue'" class="block text-sm">
<label v-if="advanced && engineFamily !== 'yue'" class="block text-sm">
<span class="mb-1 block font-medium text-zinc-300">Steps · {{ steps }}</span>
<input
v-model.number="steps"
@@ -108,7 +117,7 @@
</div>
<div class="grid gap-3 sm:grid-cols-2">
<label class="block text-sm">
<label v-if="advanced" class="block text-sm">
<span class="mb-1 block font-medium text-zinc-300">Seed</span>
<input
v-model="seed"
@@ -144,7 +153,7 @@
v-if="busy"
class="h-4 w-4 animate-spin rounded-full border-2 border-zinc-950/20 border-t-zinc-950"
/>
{{ busy ? (status || 'Generating…') : 'Generate' }}
{{ busy ? (status || 'Generating…') : advanced ? 'Generate' : 'Queue' }}
</button>
<button
v-if="busy || queued"
@@ -213,6 +222,7 @@
</template>
<script setup lang="ts">
const { advanced } = useStudioLayout()
import {
DEFAULT_MUSIC_LYRICS,
DEFAULT_MUSIC_TAGS,