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
+18 -1
View File
@@ -10,6 +10,7 @@ import InstrumentSelection from './components/InstrumentSelection';
import ChatBox from './components/ChatBox';
import { SettingsPanel } from './components/settings';
import LoadingOverlay from './components/common/LoadingOverlay';
import KGOnePanel from './components/KGOnePanel';
import { useEffect as useEffectReact, useState, useRef } from 'react';
import { KGToneBuffersPool } from './core/audio-interface/KGToneBuffersPool';
import { KGOfflineRenderer } from './core/audio-interface/KGOfflineRenderer';
@@ -26,7 +27,7 @@ function App() {
const {
refreshStatus,
loadProject, showChatBox, showSettings, setShowSettings, initializeFromConfig,
showInstrumentSelection
showInstrumentSelection, showKGOnePanel
} = useProjectStore();
// Track if app has been initialized to prevent multiple initializations
@@ -47,6 +48,21 @@ function App() {
// Initialize ConfigManager first to load config.json and user settings
await ConfigManager.instance().initialize();
// Check for kgone-server.txt (managed deployment override)
try {
const kgoneServerResponse = await fetch(`${import.meta.env.BASE_URL}kgone-server.txt`);
const contentType = kgoneServerResponse.headers.get('Content-Type') ?? '';
if (kgoneServerResponse.ok && contentType.includes('text/plain')) {
const url = (await kgoneServerResponse.text()).trim();
if (url) {
ConfigManager.instance().setKGOneManagedByServer(url);
console.log('K.G.One: server-managed config loaded from kgone-server.txt, base URL:', url);
}
}
} catch {
// File not present — user configures manually
}
// Initialize store from config after ConfigManager is ready
await initializeFromConfig();
@@ -134,6 +150,7 @@ function App() {
<MainContent />
</>
)}
<KGOnePanel isVisible={showKGOnePanel && !showSettings} />
<ChatBox isVisible={showChatBox && !showSettings} />
</div>