feat: integrate K.G.One music generation panel

- ConfigManager: add `general.kgone` config block (enabled toggle +
base URL); add `setKGOneManagedByServer()` / `isKGOneServerManaged()`
for managed deployments that supply a `kgone-server.txt` override
- App.tsx: probe for `kgone-server.txt` on startup (Content-Type guard
to avoid Vite SPA fallback false-positive)
- GeneralSettings: new K.G.One section with enable toggle + base URL
input; fields disabled when server-managed
- Toolbar: magic wand button (FaWandMagicSparkles) that toggles the
panel; disabled with reduced opacity when K.G.One is turned off;
mutually exclusive with the Chat panel
- projectStore: add `showKGOnePanel` state + `toggleKGOnePanel` action
- KGOnePanel (new): three-tab panel (Clip / Full Song / Separator)
- Clip: prompt + advanced params → POST /v1/clip/generate → poll
    /v1/clip/result → download WAV → AudioPlayer preview
- Full Song: caption + lyrics + advanced params → POST
    /v1/fullsong/generate → poll /v1/fullsong/result (live progress %
    from nested JSON string) → download MP3 → AudioPlayer preview
- Separator: reads selected audio region from OPFS via
    KGAudioFileStorage → POST /v1/separator/separate (multipart) →
    poll /v1/separator/result → parallel-download all stem files →
    multiple labeled AudioPlayer instances rendered vertically
- Shared: custom AudioPlayer (play/pause, clickable seek bar),
    spinner + hint text, error card, AbortController cleanup,
    DEBUG_MODE.KGONE-gated REQ/RES console logging
This commit is contained in:
Xiaohan-Tian
2026-04-15 19:51:16 -07:00
parent b307b32456
commit cadd51c3a4
9 changed files with 1534 additions and 6 deletions
+15 -1
View File
@@ -76,6 +76,9 @@ interface ProjectState {
// ChatBox state
showChatBox: boolean;
// K.G.One panel state
showKGOnePanel: boolean;
// Instrument selection panel state
showInstrumentSelection: boolean;
// instrumentSelectionTrackId removed; panel now follows selectedTrackId
@@ -137,6 +140,9 @@ interface ProjectState {
setShowChatBox: (show: boolean) => void;
toggleChatBox: () => void;
// K.G.One panel actions
toggleKGOnePanel: () => void;
// Instrument selection panel actions
openInstrumentSelectionForTrack: () => void;
toggleInstrumentSelectionForTrack: () => void;
@@ -278,6 +284,9 @@ export const useProjectStore = create<ProjectState>((set, get) => {
// Initial ChatBox state
showChatBox: initialChatBoxState,
// Initial K.G.One panel state
showKGOnePanel: false,
// Initial Instrument Selection panel state
showInstrumentSelection: initialShowInstrumentSelection,
@@ -898,7 +907,12 @@ export const useProjectStore = create<ProjectState>((set, get) => {
toggleChatBox: () => {
const { showChatBox } = get();
set({ showChatBox: !showChatBox });
set({ showChatBox: !showChatBox, showKGOnePanel: false });
},
toggleKGOnePanel: () => {
const { showKGOnePanel } = get();
set({ showKGOnePanel: !showKGOnePanel, showChatBox: false });
},
// Instrument selection panel actions