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
+22 -2
View File
@@ -16,7 +16,7 @@ import {
} from 'react-icons/fa';
import { KGProject, type KeySignature } from '../core/KGProject';
import { plainToInstance } from 'class-transformer';
import { FaPencil, FaCopy, FaPaste, FaTrash } from 'react-icons/fa6';
import { FaPencil, FaCopy, FaPaste, FaTrash, FaWandMagicSparkles } from 'react-icons/fa6';
import { KGMainContentState } from '../core/state/KGMainContentState';
import { regionDeleteManager } from '../util/regionDeleteUtil';
import { handleCopyOperation, handlePasteOperation } from '../util/copyPasteUtil';
@@ -28,6 +28,7 @@ import FileImportModal from './common/FileImportModal';
import OpenProjectModal from './common/OpenProjectModal';
import { clearChatHistoryAndUI } from '../util/chatUtil';
import PianoIcon from './common/icons/PianoIcon';
import { ConfigManager } from '../core/config/ConfigManager';
const Toolbar: React.FC = () => {
const {
@@ -40,7 +41,7 @@ const Toolbar: React.FC = () => {
barWidthMultiplier, setBarWidthMultiplier,
isLooping, toggleLoop,
canUndo, canRedo, undoDescription, redoDescription, undo, redo,
toggleChatBox, toggleSettings, cleanupProjectState,
toggleChatBox, toggleSettings, toggleKGOnePanel, showKGOnePanel, cleanupProjectState,
// Piano roll state/actions
showPianoRoll, setShowPianoRoll, activeRegionId, setActiveRegionId,
// Selection state
@@ -740,6 +741,16 @@ const Toolbar: React.FC = () => {
setStatus("Settings toggled");
};
// K.G.One panel toggle
const isKGOneEnabled = ConfigManager.instance().get('general.kgone.enabled') as boolean ?? false;
const handleKGOneClick = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("K.G.One button clicked");
}
toggleKGOnePanel();
};
// Handle Piano button click: open piano roll if closed, targeting active or selected region
const handlePianoButtonClick = () => {
if (DEBUG_MODE.TOOLBAR) {
@@ -916,6 +927,15 @@ const Toolbar: React.FC = () => {
</div>
</div>
<button title="Settings" onClick={handleSettingsClick}><FaCog /></button>
<button
title={isKGOneEnabled ? 'K.G.One Music Generator' : 'K.G.One integration is disabled — enable it in Settings'}
onClick={handleKGOneClick}
disabled={!isKGOneEnabled}
className={showKGOnePanel ? 'active' : ''}
style={!isKGOneEnabled ? { opacity: 0.4, cursor: 'not-allowed' } : undefined}
>
<FaWandMagicSparkles />
</button>
<button title="Chat" onClick={handleChatClick}><FaComments /></button>
</div>
</div>