From 22f4155cede57482aee08c06edce2f03da145f48 Mon Sep 17 00:00:00 2001 From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com> Date: Wed, 13 Aug 2025 22:51:09 -0700 Subject: [PATCH 1/3] added an automation tool, `inputChatBox`, which allows users to automatically input content into the chat box via the browser's console. --- src/core/KGDebugger.ts | 94 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 93 insertions(+), 1 deletion(-) diff --git a/src/core/KGDebugger.ts b/src/core/KGDebugger.ts index 634bf0c..7520155 100644 --- a/src/core/KGDebugger.ts +++ b/src/core/KGDebugger.ts @@ -29,7 +29,8 @@ export class KGDebugger { 'createTestRegion()', 'testExtractXMLFromString(input)', 'testXMLToolExecution(input)', - 'testAttemptCompletion(comment)' + 'testAttemptCompletion(comment)', + 'inputChatBox(content, interval?)' ]); } @@ -402,6 +403,7 @@ export class KGDebugger { console.log(" testExtractXMLFromString(input) - Test XML extraction from string"); console.log(" testXMLToolExecution(input) - Test complete XML tool execution pipeline"); console.log(" testAttemptCompletion(comment) - Test AttemptCompletionTool with agent state"); + console.log(" inputChatBox(content, interval?) - Type into ChatBox textarea and submit with Enter"); console.log(" help() - Show this help"); console.log(""); console.log("💡 Usage tips:"); @@ -412,4 +414,94 @@ export class KGDebugger { console.log(" - For full tool execution, try: await testXMLToolExecution('Create notes: C401');"); console.log(" - For completion testing, try: await testAttemptCompletion('Successfully created a C major chord');"); } + + /** + * Type content into ChatBox textarea character-by-character and submit with Enter. + * Honors auto-resize (by dispatching 'input' events) and ChatBox's Enter-to-send behavior. + * @param content - The text to type into the chat input + * @param interval - Delay in ms between characters (default 30ms) + */ + public async inputChatBox(content: string, interval: number = 30): Promise { + try { + const textarea = document.querySelector('textarea.chatbox-input') as HTMLTextAreaElement | null; + if (!textarea) { + console.error('❌ ChatBox textarea not found. Ensure ChatBox is mounted and visible.'); + return; + } + + // Focus to trigger ChatBox focus handlers and ensure caret/attribute setup + textarea.focus(); + + // Use native value setter to keep React's value tracker in sync + const valueSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set; + const setValue = (val: string) => { + if (valueSetter) { + valueSetter.call(textarea, val); + } else { + textarea.value = val; + } + }; + + // Helper to dispatch an InputEvent so React's onChange fires + const dispatchInput = (data?: string) => { + const ev = typeof InputEvent !== 'undefined' + ? new InputEvent('input', { bubbles: true, data, inputType: 'insertText' }) + : new Event('input', { bubbles: true }); + textarea.dispatchEvent(ev); + }; + + // Start from empty content to simulate a fresh user input + setValue(''); + dispatchInput(''); + + // Helper: sleep + const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); + + let typed = ''; + for (let i = 0; i < content.length; i++) { + typed += content[i]; + + // Update the controlled textarea and dispatch input so React onChange fires + setValue(typed); + dispatchInput(content[i]); + + // Place caret at end for realism + try { + textarea.selectionStart = textarea.selectionEnd = typed.length; + } catch { + // noop + } + + if (interval > 0) { + await sleep(interval); + } + } + + // Give React a brief moment to commit the last setState and run auto-resize effect + await sleep(Math.max(30, interval)); + + // Simulate pressing Enter to submit (ChatBox listens on keydown) + const enterEvent = new KeyboardEvent('keydown', { + key: 'Enter', + code: 'Enter', + keyCode: 13, + which: 13, + bubbles: true, + cancelable: true + } as KeyboardEventInit & { keyCode: number; which: number }); + textarea.dispatchEvent(enterEvent); + + // Optional: follow-up keyup to mirror real typing (some UIs inspect it) + const keyupEvent = new KeyboardEvent('keyup', { + key: 'Enter', + code: 'Enter', + keyCode: 13, + which: 13, + bubbles: true, + } as KeyboardEventInit & { keyCode: number; which: number }); + textarea.dispatchEvent(keyupEvent); + } catch (error) { + console.error('❌ Error in inputChatBox:', error); + } + } } \ No newline at end of file From dd6a70e0b2467332bee7411ea47158f851bbf9e8 Mon Sep 17 00:00:00 2001 From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com> Date: Wed, 13 Aug 2025 22:52:35 -0700 Subject: [PATCH 2/3] updated the input boxes on the settings page to take up the full width. --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index f04afec..32c534c 100644 --- a/src/App.css +++ b/src/App.css @@ -1591,7 +1591,7 @@ textarea { .settings-input, .settings-select, .settings-textarea { width: 100%; - max-width: 300px; + /* max-width: 300px; */ padding: 8px 12px; background-color: #3a3a3a; border: 1px solid #555; From 867ec281ba670996ee7e35bcd0c39701fb93eb4f Mon Sep 17 00:00:00 2001 From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com> Date: Fri, 15 Aug 2025 15:42:37 -0700 Subject: [PATCH 3/3] Update README.md --- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/README.md b/README.md index 92d0a2d..154215a 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,12 @@ K.G.Studio is a lightweight, modern DAW that runs entirely in the browser with * **K.G.Studio Musician Assistant** is an AI assistance agent for harmony, arrangement, and note editing — but not full auto‑composition. +## Project Status + +**K.G.Studio is an experimental project in early development.** We're exploring the possibilities of integrating AI agents and LLMs into music production workflows — essentially building a "Cursor or Claude Code for DAW" experience. + +This project investigates how AI-human collaboration can enhance creative music-making, from intelligent harmony suggestions to automated editing tasks. As an experimental platform, expect frequent changes, evolving features, and occasional instability as we push the boundaries of what's possible in AI-assisted music production. + ### Highlights - **K.G.Studio Musician Assistant**: Chat with the LLM‑powered K.G.Studio Musician Assistant AI Agent; it can automatically execute tools to make music edits. - **Multiple LLM providers**: OpenAI, Claude (via OpenRouter), Gemini (via OpenRouter), or OpenAI‑compatible (e.g., Ollama, OpenRouter). @@ -144,13 +150,48 @@ K.G.Studio does not provide or host any of the models listed above, nor is it af ## Upcoming Features - [ ] More instruments +- [ ] Automated testing (unit tests, integration tests, etc.) - [ ] Support track control automations (e.g. sustain, volume, pan, etc.) - [ ] Support MIDI control events (e.g. CC, pitch bend, etc.) - [ ] Support WAV audio tracks +- [ ] Filters and effects - [ ] MCP Support - [ ] Add support for OpenAI's open source models (`gpt-oss-20b` and `gpt-oss-120b`) - [ ] Automatically compact conversations when the context window runs low on space +## Help Needed + +We're looking for contributors to help make K.G.Studio even better! Whether you're a developer, musician, or designer, your expertise can make a real difference. + +### How You Can Help + +**🎵 Musicians & Music Producers** +- Test the DAW with real-world music production workflows +- Provide feedback on instrument quality and realism +- Suggest missing features that are essential for music creation +- Help improve the AI assistant's musical understanding + +**💻 Developers** +- Implement new features from our roadmap +- Fix bugs and improve performance +- Enhance the Web Audio integration +- Work on AI assistant capabilities + +**🎨 UI/UX Designers** +- Improve the user interface and workflow +- Design better visual feedback for music editing +- Create more intuitive interactions + +### Get Involved + +Interested in contributing? We'd love to hear from you! + +- **Email us**: [kgstudio@duck.com](mailto:kgstudio@duck.com) +- **Check our Issues**: Browse open issues labeled with `help wanted` or `good first issue` +- **Join Discussions**: Share ideas and feedback in GitHub Discussions + +No contribution is too small — from reporting bugs to suggesting new features, every bit of help moves the project forward! + ## License Licensed under the Apache License, Version 2.0, with additional terms (see `LICENSE`):