diff --git a/README.md b/README.md index 2a43fab..7c90ecc 100644 --- a/README.md +++ b/README.md @@ -2,14 +2,28 @@ K.G.Studio Logo -## K.G.Studio — A Browser-based DAW with AI Assistant +# K.G.Studio — A Browser-based DAW with AI Assistant + +## New! + +> ### ✦ [**K.G.One Music Studio is available now.**](https://github.com/KGAudioLab/K.G.One) ✦
+> [**K.G.One Music Studio**](https://github.com/KGAudioLab/K.G.One) is a fully local, open-source integrated platform built around **K.G.Studio** (this project). It bundles [ACE-Step 1.5](https://github.com/ace-step/ACE-Step-1.5) for full-song generation, [Foundation-1](https://huggingface.co/RoyalCities/Foundation-1) for audio clip and MIDI loop generation, and [python-audio-separator (UVR5)](https://github.com/nomadkaraoke/python-audio-separator) for stem separation — bringing GPU-accelerated AI music generation directly into your browser-based production workflow. + +## What is K.G.Studio? K.G.Studio is a lightweight, modern DAW that runs entirely in the browser with **K.G.Studio Musician Assistant** at its core. It features realistic instrument playback via Tone.js samplers, a piano‑roll editor, track and region management with full undo/redo, project persistence to IndexedDB, a configurable settings panel, and an integrated AI assistant with tool execution. **K.G.Studio Musician Assistant** is an AI assistance agent for harmony, arrangement, and note editing — but not full auto‑composition. +
+ K.G.One Logo +
+ +> Note: Full-Song Generation Feature, Audio Clip Generation Feature, and Stem Separation Feature requires [**K.G.One Music Studio**](https://github.com/KGAudioLab/K.G.One) integration. + ## Latest Updates +- **2026.04.24**: Added [**K.G.One Music Studio**](https://github.com/KGAudioLab/K.G.One) integration! When K.G.Studio connects to a local K.G.One server, the **K.G.One Music Generator** panel (magic wand button ✦ in the toolbar) becomes available with three AI-powered tools: **Full Song Generation** (powered by ACE-Step 1.5 — generate full-length songs from text prompts), **Clip Generation** (powered by Foundation-1 — generate instrument clips and MIDI loops from text), and **Stem Separation** (powered by python-audio-separator — split any audio into vocals, instrumentals, and more). Generated audio and MIDI can be previewed instantly and dragged directly onto your tracks. K.G.One runs entirely on your own machine (Windows/Linux, CUDA GPU required); see the [K.G.One repository](https://github.com/KGAudioLab/K.G.One) for setup instructions. - **2026.04.11**: Migrated project storage from IndexedDB to OPFS (Origin Private File System) with a folder-based structure for better media file handling. Added audio track support with WAV/MP3 import, playback, looping, and non-destructive region trimming. Added bounce-to-WAV/MP3 export via offline rendering. - **2026.04.05**: Migrated the AI agent from XML-based tool calling to native OpenAI SDK function calling for improved reliability and compatibility. Added new LLM model options including GPT-5.4 series. - **2026.01.23**: Implemented seamless loop playback! Drag on the bar numbers to set loop range, or toggle loop mode with the Loop button in the toolbar. Loop playback uses `Tone.js`'s native looping for sample-accurate, gap-free looping. @@ -52,10 +66,12 @@ This project investigates how AI-human collaboration can enhance creative music- - [Click here to get a free OpenRouter API Key](https://openrouter.ai/keys) (you may need an OpenRouter account). - In **Settings ⚙️ → General → LLM Provider**, select **OpenAI Compatible**. - In **OpenAI Compatible Server → Key**, paste your key. (Note: on non‑localhost, your key isn't persisted by default for security; you can enable "Persist API Keys on Non-Localhost" in Settings to persist them, though this may increase XSS risk.) - - In **OpenAI Compatible Server → Model**, enter `qwen/qwen3.6-plus:free`. (Note: this is a free model [qwen3.6-plus](https://openrouter.ai/qwen/qwen3.6-plus:free); non‑free models may require billing; free model providers may collect your data, check the model page for details; this project is not affiliated with OpenRouter or any model provider.) + - In **OpenAI Compatible Server → Model**, enter `openai/gpt-oss-120b:free`. (Note: this is a free model; non‑free models may require billing; free model providers may collect your data, check the model page for details; this project is **not** affiliated with OpenRouter or any model provider.) - In **OpenAI Compatible Server → Base URL**, enter `https://openrouter.ai/api/v1`. -(Alternatively, you can use the official OpenAI API, other OpenAI‑compatible services, or your own hosted LLM server. e.g., Ollama, vLLM) +**Tips:** +- You can also use the official OpenAI API, other OpenAI-compatible services, or a self-hosted LLM server (e.g., Ollama, vLLM). Note that model quality varies — not all models perform equally well for music editing tasks. For local hosting, we recommend `qwen3.5-35b-a3b` as a good balance between generation quality and hardware requirements. +- If you have an active subscription with OpenAI or another LLM provider, you can use [CLIProxyAPI](https://github.com/router-for-me/CLIProxyAPI) to run a local proxy server that routes requests through your existing subscription, without needing a separate API key. ### Basic DAW operations - Double‑click (or hold Ctrl/Cmd and click) on a track to create a region. @@ -220,7 +236,10 @@ OpenRouter is a platform that provides unified access to a wide range of languag 5. Enter your chosen model name in **OpenAI Compatible Server → Model**. Recommended model series include: - `Anthropic: Claude Sonnet 4.6` (`anthropic/claude-sonnet-4.6`: [Link](https://openrouter.ai/anthropic/claude-sonnet-4.6)) — best balance of quality and cost for the Claude series - `Qwen: Qwen3.5-35B-A3B` (`qwen/qwen3.5-35b-a3b`: [Link](https://openrouter.ai/qwen/qwen3.5-35b-a3b)) — recommended open source model - - `Qwen: Qwen3.6 Plus` (FREE MODEL: `qwen/qwen3.6-plus:free`: [Link](https://openrouter.ai/qwen/qwen3.6-plus:free)) — recommended free model; note that free model providers may collect your data, check the model page for details + - `Qwen: Qwen3-Next-80B-A3B` (FREE MODEL: `qwen/qwen3-next-80b-a3b-instruct:free`: [Link](https://openrouter.ai/qwen/qwen3-next-80b-a3b-instruct:free)) — recommended free model + - `OpenAI: GPT-OSS 120B` (FREE MODEL: `openai/gpt-oss-120b:free`: [Link](https://openrouter.ai/openai/gpt-oss-120b:free)) — recommended free model + - Note: free model providers may collect your data; check the model page for details before use + - Note: free model availability changes frequently — for the latest free options, visit the [OpenRouter Models Page](https://openrouter.ai/models) and use the **Prompt Pricing** filter to find currently free models 6. Input the base URL `https://openrouter.ai/api/v1` **OpenAI Compatible Server → Base URL**. ### About the agent and LLM providers @@ -231,6 +250,53 @@ For security, when using K.G.Studio from a non‑local host, API keys are not pe K.G.Studio does not provide or host any of the models listed above, nor is it affiliated with any model provider. All data is stored locally on your device; K.G.Studio does not collect or transmit your data. You are solely responsible for any data you provide to third‑party model providers. +## K.G.One Music Generator + +> **Requires [K.G.One Music Studio](https://github.com/KGAudioLab/K.G.One) integration.** The K.G.One Music Generator panel is only available when K.G.Studio is connected to a running K.G.One server. See the [K.G.One repository](https://github.com/KGAudioLab/K.G.One) for setup instructions. + +The **K.G.One Music Generator** panel provides three GPU-accelerated AI tools for music generation and audio processing. Click the **✦ (magic wand)** button in the toolbar to open it. The panel is mutually exclusive with the AI Assistant chatbox — opening one will close the other. + +> **Note:** The first time you use each tool, the server needs to load the corresponding AI model, which can take 60 seconds or longer depending on your hardware. Switching between tabs may also trigger a model reload. + +### Full Song Generation + +Generate a complete, full-length song from a text description and optional lyrics. Powered by [ACE-Step 1.5](https://github.com/ace-step/ACE-Step-1.5). + +- In the **Full Song** tab, enter a **Caption** describing the desired style, mood, tempo, instrumentation, and structure in natural language. For example: `Genre: Eurodance, 90s dance-pop, upbeat electronic. Tempo: ~130 BPM. Instrumentation: driving kick drum, eurodance bassline...` +- Optionally, enter **Lyrics**. Use `[Intro]`, `[Verse]`, `[Chorus]`, `[Bridge]` tags to mark sections. Check **Instrumental** to skip vocals entirely. +- Click **Generate Song**. A progress indicator shows the generation stage and percentage in real time. +- Once complete, a preview player appears. Drag it onto an **audio track** to import the song as a region. +- Dropping onto a MIDI track is not supported for full song generation. +- **Advanced Settings** (expandable): Inference Steps, Guidance Scale, Seed, and Thinking (CoT metadata generation). + +### Clip Generation + +Generate short instrument clips and MIDI loops from text descriptions. Powered by [Foundation-1](https://huggingface.co/RoyalCities/Foundation-1). + +- In the **Clip** tab, enter a **Prompt** describing the clip using comma-separated tags covering instrument family, sub-type, timbre, effects, length, BPM, and key. For example: `Gritty, Acid, Bassline, 303, Synth Lead, FM, Sub, High Reverb, 8 Bars, 140 BPM, E minor` +- Optionally, enter a **Negative Prompt** to steer the generation away from unwanted characteristics (e.g. `distortion, noise`). +- Select **Bars**: 4 or 8. The BPM and key signature are pre-filled from your project settings and can be adjusted in **Advanced Settings**. +- Click **Generate Clip**. Once complete, a preview player appears with a drag handle on the left and a download button on the right. +- **To import**: drag the player onto a track on the timeline. + - Drop onto an **audio track** to import as a WAV audio region (recommended). + - Drop onto a **MIDI track** to import as a MIDI region. Note that the MIDI is transcribed from the audio and may not be perfectly accurate. +- **Advanced Settings** (expandable): Note, Scale, BPM, Steps, CFG Scale, Seed (`-1` for random), Sampler Type, Sigma Min/Max, and CFG Rescale. + +### Stem Separation + +Split an existing audio region into individual stems (e.g. vocals, instruments, drums). Powered by [python-audio-separator (UVR5)](https://github.com/nomadkaraoke/python-audio-separator). + +- **Select an audio region** on the timeline before opening this tab. The selected region and its track name are shown at the top of the **Separator** tab. Only audio regions are supported — MIDI regions cannot be separated. +- Choose a **Separation Model**: + - **Vocal and Instrument (Medium Accuracy)** (`UVR-MDX-NET-Inst_HQ_3`) — fast two-stem split (vocal / instrumental). + - **Vocal and Instrument (High Accuracy)** (`MDX23C-8KFFT-InstVoc_HQ`) — higher-quality two-stem split, slower. + - **Vocal, Drums, Bass, Guitar, Piano, and Others** (`htdemucs_6s`) — full six-stem separation. +- Click **Separate Stems**. If the selected region has a clip start offset or is trimmed, the audio is automatically sliced to match the region range before uploading. +- Once complete, each stem appears as a labelled preview player with a drag handle. You can preview each stem individually before importing. +- **To import stems**: + - Drag each stem player individually onto an **audio track** to place it where you want. + - Or click **Import All Stems to Timeline** to create one new audio track per stem automatically, positioned immediately below the source track and aligned to the same start beat as the original region. This is a single undoable operation. + ## Upcoming Features Feature priorities might change. @@ -240,7 +306,7 @@ Feature priorities might change. - [X] Intelligent Chord Assistant with functional harmony guidance (T/S/D) - [ ] Support track control automations (e.g. sustain, volume, pan, etc.) - [ ] Support MIDI control events (e.g. CC, pitch bend, etc.) -- [ ] Support WAV audio tracks +- [X] Support WAV audio tracks - [ ] Filters and effects - [ ] MCP Support - [X] Add support for OpenAI's open source models (`gpt-oss-20b` and `gpt-oss-120b`) diff --git a/docs/KGOne-Demo-GIF.gif b/docs/KGOne-Demo-GIF.gif new file mode 100644 index 0000000..6730348 Binary files /dev/null and b/docs/KGOne-Demo-GIF.gif differ diff --git a/package-lock.json b/package-lock.json index fba7196..5454528 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "K.G.Studio", - "version": "0.9.0-build.20260406", + "version": "0.10.0-build.20260411", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "K.G.Studio", - "version": "0.9.0-build.20260406", + "version": "0.10.0-build.20260411", "dependencies": { "@breezystack/lamejs": "^1.2.7", "class-transformer": "^0.5.1", @@ -3938,9 +3938,9 @@ } }, "node_modules/debug": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", - "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", "license": "MIT", "dependencies": { "ms": "^2.1.3" diff --git a/public/config.json b/public/config.json index 044f135..e63d612 100644 --- a/public/config.json +++ b/public/config.json @@ -28,6 +28,10 @@ }, "soundfont": { "base_url": "https://cdn.jsdelivr.net/npm/soundfont-for-samplers/FluidR3_GM/" + }, + "kgone": { + "enabled": false, + "base_url": "http://127.0.0.1:8000" } }, "hotkeys": { diff --git a/src/App.tsx b/src/App.tsx index 365fb93..381b81b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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'; @@ -17,6 +18,9 @@ import type { RenderingEvent } from './core/audio-interface/KGOfflineRenderer'; import { KGCore } from './core/KGCore'; import { ConfigManager } from './core/config/ConfigManager'; import { validateFunctionalChordsJSON } from './util/scaleUtil'; +import { showAlert } from './components/common/DialogProvider'; +import { KGProjectStorage } from './core/io/KGProjectStorage'; +import { RESERVED_PROJECT_NAME } from './util/projectNameUtil'; function App() { // Enable global keyboard handler for copy/paste and undo/redo @@ -26,7 +30,7 @@ function App() { const { refreshStatus, loadProject, showChatBox, showSettings, setShowSettings, initializeFromConfig, - showInstrumentSelection + showInstrumentSelection, showKGOnePanel } = useProjectStore(); // Track if app has been initialized to prevent multiple initializations @@ -41,12 +45,41 @@ function App() { hasInitialized.current = true; const initializeApp = async () => { + // Wipe the reserved "Untitled Project" OPFS folder on every startup so it stays ephemeral + try { + const storage = KGProjectStorage.getInstance(); + if (await storage.exists(RESERVED_PROJECT_NAME)) { + await storage.delete(RESERVED_PROJECT_NAME); + } + } catch (error) { + console.warn('Could not clear Untitled Project folder on startup:', error); + } + // Load the current project from KGCore loadProject(null); // Initialize ConfigManager first to load config.json and user settings await ConfigManager.instance().initialize(); + // Check for kgone-server.json (managed deployment override) + try { + const kgoneServerResponse = await fetch(`${import.meta.env.BASE_URL}kgone-server.json?ts=${Date.now()}`); + const contentType = kgoneServerResponse.headers.get('Content-Type') ?? ''; + if (kgoneServerResponse.ok && contentType.includes('application/json')) { + const data = await kgoneServerResponse.json(); + if (data.base_url) { + ConfigManager.instance().setKGOneManagedByServer(data.base_url); + console.log('K.G.One: server-managed config loaded from kgone-server.json, base URL:', data.base_url); + } + if (data.soundfont) { + ConfigManager.instance().setSoundfontManagedByServer(data.soundfont); + console.log('Soundfont: server-managed config loaded from kgone-server.json, base URL:', data.soundfont); + } + } + } catch { + // File not present — user configures manually + } + // Initialize store from config after ConfigManager is ready await initializeFromConfig(); @@ -134,6 +167,7 @@ function App() { )} + @@ -179,12 +213,11 @@ const GlobalLoadingOverlayContainer: React.FC = () => { useEffectReact(() => { // When loading starts, start a 30s timer if not already overdue/timed if (loadingCount > 0 && !overdue && timeoutRef.current === null) { - timeoutRef.current = window.setTimeout(() => { + timeoutRef.current = window.setTimeout(async () => { // Only trigger if still loading if (loadingCount > 0) { setOverdue(true); - // Friendly alert to the user - window.alert( + await showAlert( 'Loading resources is taking longer than expected and may have partially failed. If you notice any playback issues, please refresh the page to retry downloading the audio files.' ); } diff --git a/src/components/ChatBox.css b/src/components/ChatBox.css index 6018761..4f61eec 100644 --- a/src/components/ChatBox.css +++ b/src/components/ChatBox.css @@ -15,7 +15,8 @@ .chatbox-header { display: flex; align-items: center; - justify-content: space-between; /* left title, right actions */ + justify-content: space-between; + /* left title, right actions */ background-color: #3a3a3a; height: 40px; border-bottom: 1px solid #4a4a4a; @@ -148,7 +149,7 @@ } .chatbox-input:focus { - border-color: #6a6a6a; + border-color: #5a9fd4; background-color: #4a4a4a; } @@ -229,7 +230,7 @@ .abort-link { background: none !important; border: none !important; - color: #7b68ee !important; + color: #5a9fd4 !important; text-decoration: underline !important; cursor: pointer !important; padding: 0 !important; @@ -288,14 +289,12 @@ /* Processing wave animation */ .processing-wave { - background: linear-gradient( - 90deg, - rgba(135, 206, 250, 0.5) 0%, - rgba(135, 206, 250, 0.8) 25%, - rgb(171, 218, 250) 50%, - rgba(135, 206, 250, 0.8) 75%, - rgba(135, 206, 250, 0.5) 100% - ); + background: linear-gradient(90deg, + rgba(135, 206, 250, 0.5) 0%, + rgba(135, 206, 250, 0.8) 25%, + rgb(171, 218, 250) 50%, + rgba(135, 206, 250, 0.8) 75%, + rgba(135, 206, 250, 0.5) 100%); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; @@ -307,7 +306,8 @@ 0% { background-position: 200% 0%; } + 100% { background-position: -200% 0%; } -} +} \ No newline at end of file diff --git a/src/components/KGOnePanel.css b/src/components/KGOnePanel.css new file mode 100644 index 0000000..d37a191 --- /dev/null +++ b/src/components/KGOnePanel.css @@ -0,0 +1,407 @@ +/* KGOnePanel — mirrors ChatBox layout and style */ +.kgone-panel { + display: flex; + flex-direction: column; + width: var(--chat-box-width); + background-color: #2d2d2d; + border-left: 1px solid #3a3a3a; + flex-shrink: 0; + overflow: hidden; +} + +.kgone-panel.is-hidden { + display: none; +} + +/* Header */ +.kgone-panel-header { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #3a3a3a; + height: 40px; + border-bottom: 1px solid #4a4a4a; + padding: 0 15px; + flex-shrink: 0; +} + +.kgone-panel-header h3 { + color: #e0e0e0; + font-size: 12px; + font-weight: bold; + margin: 0; +} + +/* Tab switcher */ +.kgone-tabs { + display: flex; + background-color: #2d2d2d; + border-bottom: 1px solid #3a3a3a; + flex-shrink: 0; +} + +.kgone-tab { + flex: 1; + background: transparent; + border: none; + border-bottom: 2px solid transparent; + color: #999; + font-size: 11px; + font-weight: 500; + padding: 8px 4px; + cursor: pointer; + transition: color 0.15s, border-color 0.15s; +} + +.kgone-tab:hover { + color: #ccc; +} + +.kgone-tab.active { + color: #e0e0e0; + border-bottom-color: #5a9fd4; +} + +/* Scrollable body */ +.kgone-panel-body { + flex: 1; + overflow-y: auto; + padding: 12px; + display: flex; + flex-direction: column; + gap: 10px; +} + +/* Field groups */ +.kgone-field { + display: flex; + flex-direction: column; + gap: 4px; +} + +.kgone-label { + color: #aaa; + font-size: 11px; + font-weight: 500; +} + +.kgone-input, +.kgone-textarea, +.kgone-select { + background-color: #3a3a3a; + border: 1px solid #4a4a4a; + border-radius: 4px; + color: #e0e0e0; + font-size: 12px; + padding: 6px 8px; + outline: none; + width: 100%; + box-sizing: border-box; +} + +.kgone-input:focus, +.kgone-textarea:focus, +.kgone-select:focus { + border-color: #5a9fd4; +} + +.kgone-textarea { + resize: vertical; + min-height: 60px; + font-family: inherit; +} + +.kgone-input::placeholder, +.kgone-textarea::placeholder { + color: #666; +} + +/* Hint text below textarea */ +.kgone-hint { + color: #666; + font-size: 10px; + line-height: 1.4; + margin-top: 2px; +} + +.kgone-hint strong { + color: #999; + font-weight: 600; +} + +.kgone-powered-by { + color: #666; + font-size: 10px; + text-align: center; + margin-top: 12px; + padding-top: 8px; + border-top: 1px solid #333; +} + +.kgone-powered-by a { + color: #888; + text-decoration: none; + font-weight: 600; +} + +.kgone-powered-by a:hover { + color: #aaa; + text-decoration: underline; +} + +/* Two-column row (e.g. note + scale) */ +.kgone-row { + display: flex; + gap: 8px; +} + +.kgone-row .kgone-field { + flex: 1; +} + +/* Advanced expander */ +.kgone-expander-toggle { + background: transparent; + border: none; + color: #888; + font-size: 11px; + cursor: pointer; + display: flex; + align-items: center; + gap: 4px; + padding: 4px 0; +} + +.kgone-expander-toggle:hover { + color: #bbb; +} + +.kgone-expander-toggle .arrow { + font-size: 9px; + transition: transform 0.15s; +} + +.kgone-expander-toggle .arrow.open { + transform: rotate(90deg); +} + +.kgone-expander-body { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px 0 0 0; +} + +/* Separator tab */ +.kgone-separator-hint { + color: #888; + font-size: 11px; + line-height: 1.5; + text-align: center; + padding: 20px 8px; + background-color: #252525; + border-radius: 6px; +} + +.kgone-region-info { + background-color: #252525; + border: 1px solid #3a3a3a; + border-radius: 6px; + padding: 8px 10px; + display: flex; + flex-direction: column; + gap: 2px; +} + +.kgone-region-info-label { + color: #777; + font-size: 10px; +} + +.kgone-region-info-value { + color: #e0e0e0; + font-size: 11px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Generate / Separate button */ +.kgone-btn-generate { + background-color: #4a5fa0; + border: none; + border-radius: 4px; + color: #e0e0e0; + font-size: 12px; + font-weight: 600; + padding: 8px 12px; + cursor: pointer; + width: 100%; + margin-top: 6px; + transition: background-color 0.15s; +} + +.kgone-btn-generate:hover:not(:disabled) { + background-color: #5a70b8; +} + +.kgone-btn-generate:disabled { + background-color: #3a3a3a; + color: #666; + cursor: not-allowed; +} + +/* ── Audio player ──────────────────────────────────────────────────────────── */ +.kgone-audio-player { + display: flex; + align-items: center; + gap: 8px; + background-color: #252525; + border: 1px solid #3a3a3a; + border-radius: 6px; + padding: 8px 10px; +} + +.kgone-player-play-btn { + background: transparent; + border: none; + color: #e0e0e0; + cursor: pointer; + font-size: 13px; + padding: 2px 4px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.kgone-player-play-btn:hover { + color: #5a9fd4; +} + +.kgone-player-progress-track { + flex: 1; + height: 4px; + background-color: #3a3a3a; + border-radius: 2px; + cursor: pointer; + position: relative; +} + +.kgone-player-progress-track:hover { + height: 6px; + margin-top: -1px; +} + +.kgone-player-progress-fill { + height: 100%; + background-color: #5a9fd4; + border-radius: 2px; + pointer-events: none; + transition: width 0.1s linear; +} + +.kgone-player-time { + color: #888; + font-size: 10px; + white-space: nowrap; + flex-shrink: 0; +} + +.kgone-player-drag-handle { + color: #555; + cursor: grab; + font-size: 12px; + padding: 2px 4px; + flex-shrink: 0; + display: flex; + align-items: center; +} + +.kgone-player-drag-handle:hover { + color: #888; +} + +.kgone-player-download-btn { + background: transparent; + border: none; + color: #888; + cursor: pointer; + font-size: 12px; + padding: 2px 4px; + flex-shrink: 0; + display: flex; + align-items: center; +} + +.kgone-player-download-btn:hover { + color: #5a9fd4; +} + +/* ── Generation state feedback ─────────────────────────────────────────────── */ +.kgone-gen-hint { + color: #888; + font-size: 10px; + text-align: center; + margin-top: -4px; +} + +.kgone-error-msg { + color: #e07a7a; + font-size: 11px; + background-color: #2a1a1a; + border: 1px solid #5a2a2a; + border-radius: 4px; + padding: 6px 8px; + word-break: break-word; +} + +/* Spinner on button */ +.kgone-spinner { + animation: kgone-spin 0.8s linear infinite; + margin-right: 6px; +} + +@keyframes kgone-spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +/* Stem players (Separator tab) */ +.kgone-stems { + display: flex; + flex-direction: column; + gap: 8px; +} + +.kgone-stem-player { + display: flex; + flex-direction: column; +} + +/* Checkbox row (instrumental toggle) */ +.kgone-checkbox-row { + display: flex; + align-items: center; + gap: 8px; +} + +.kgone-checkbox-row input[type="checkbox"] { + width: 14px; + height: 14px; + accent-color: #5a9fd4; + cursor: pointer; +} + +.kgone-checkbox-row label { + color: #aaa; + font-size: 11px; + cursor: pointer; + user-select: none; +} \ No newline at end of file diff --git a/src/components/KGOnePanel.tsx b/src/components/KGOnePanel.tsx new file mode 100644 index 0000000..db30a23 --- /dev/null +++ b/src/components/KGOnePanel.tsx @@ -0,0 +1,1242 @@ +import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'; +import * as Tone from 'tone'; +import './KGOnePanel.css'; +import { FaPlay, FaPause, FaDownload } from 'react-icons/fa'; +import { FaCircleNotch, FaGripVertical } from 'react-icons/fa6'; +import { useProjectStore } from '../stores/projectStore'; +import { KGCore } from '../core/KGCore'; +import { KGAudioRegion } from '../core/region/KGAudioRegion'; +import { KGAudioFileStorage } from '../core/io/KGAudioFileStorage'; +import { ConfigManager } from '../core/config/ConfigManager'; +import { DEBUG_MODE } from '../constants/uiConstants'; +import { fetchWithRetry } from '../util/retryUtil'; +import { sliceAudioToWav } from '../util/audioUtil'; +import type { KeySignature } from '../core/KGProject'; +import { ImportStemsCommand } from '../core/commands'; +import type { StemImportEntry } from '../core/commands'; + +// ─── Types ──────────────────────────────────────────────────────────────────── + +type Tab = 'clip' | 'fullsong' | 'separator'; + +type GenStatus = 'idle' | 'loading-model' | 'generating' | 'polling' | 'downloading' | 'done' | 'error'; + +const SEPARATOR_MODELS = [ + { label: 'Vocal and Instrument (Medium Accuracy)', value: 'UVR-MDX-NET-Inst_HQ_3.onnx' }, + { label: 'Vocal and Instrument (High Accuracy)', value: 'MDX23C-8KFFT-InstVoc_HQ.ckpt' }, + { label: 'Vocal, Drums, Bass, Guitar, Piano, and Others', value: 'htdemucs_6s.yaml' }, +] as const; + +const CLIP_NOTES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; + +const FLAT_TO_SHARP: Record = { + Bb: 'A#', Eb: 'D#', Ab: 'G#', Db: 'C#', Gb: 'F#', Cb: 'B', Fb: 'E', +}; + +function parseKeySignature(ks: string): { note: string; scale: 'major' | 'minor' } { + const parts = ks.split(' '); + const rawNote = parts[0] ?? 'C'; + const note = FLAT_TO_SHARP[rawNote] ?? rawNote; + const scale = (parts[1] === 'minor' ? 'minor' : 'major') as 'major' | 'minor'; + return { note, scale }; +} + +// Debug helper — logs KGOne requests and responses when DEBUG_MODE.KGONE is on +function kgoneLog(direction: 'REQ' | 'RES', label: string, payload: unknown) { + if (!DEBUG_MODE.KGONE) return; + console.log(`[KGOne ${direction}] ${label}`, payload); +} + +function getKGOneBaseUrl(): string { + return (ConfigManager.instance().get('general.kgone.base_url') as string) || 'http://127.0.0.1:8000'; +} + +function formatTime(sec: number): string { + if (!isFinite(sec)) return '0:00'; + const m = Math.floor(sec / 60); + const s = Math.floor(sec % 60); + return `${m}:${s.toString().padStart(2, '0')}`; +} + +// ─── Shared components ──────────────────────────────────────────────────────── + +interface ExpanderProps { + label: string; + children: React.ReactNode; +} + +const Expander: React.FC = ({ label, children }) => { + const [open, setOpen] = useState(false); + return ( +
+ + {open &&
{children}
} +
+ ); +}; + +// ─── Audio Player ───────────────────────────────────────────────────────────── + +interface AudioPlayerProps { + src: string; + /** When provided, makes the player draggable (shows grip handle) and adds a download button */ + dragData?: { + midiUrl?: string; // full URL to /v1/clip/midi/{taskId}; absent = MIDI import not supported + audioFileName: string; // filename used for download and OPFS storage + }; +} + +const AudioPlayer: React.FC = ({ src, dragData }) => { + const audioRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + const [currentTime, setCurrentTime] = useState(0); + const [duration, setDuration] = useState(0); + + const togglePlay = () => { + const audio = audioRef.current; + if (!audio) return; + if (audio.paused) { + audio.play().catch(() => { }); + } else { + audio.pause(); + } + }; + + const handleProgressClick = (e: React.MouseEvent) => { + const audio = audioRef.current; + if (!audio || duration === 0) return; + const rect = e.currentTarget.getBoundingClientRect(); + const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); + audio.currentTime = ratio * duration; + setCurrentTime(ratio * duration); + }; + + const handleDragStart = (e: React.DragEvent) => { + if (!dragData) return; + e.dataTransfer.setData('application/kgone-clip', JSON.stringify({ + midiUrl: dragData.midiUrl, + audioUrl: src, + audioDurationSeconds: duration, + audioFileName: dragData.audioFileName, + })); + e.dataTransfer.effectAllowed = 'copy'; + }; + + const handleDownload = () => { + const a = document.createElement('a'); + a.href = src; + a.download = dragData?.audioFileName ?? 'kgone_clip.wav'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + }; + + const progress = duration > 0 ? (currentTime / duration) * 100 : 0; + + return ( +
+