Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Virtual MIDI Keyboard</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |
| <link rel="stylesheet" href="/file=static/styles.css" /> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <div class="welcome-header"> | |
| <div class="logo-wrap"> | |
| <img | |
| src="/file=synthia_logo.png" | |
| alt="SYNTHIA" | |
| class="logo-image" | |
| /> | |
| </div> | |
| </div> | |
| <div id="mainContainer"> | |
| <div class="keyboard-section card"> | |
| <div id="keyboard"></div> | |
| <div class="keyboard-toggle-row"> | |
| <label class="keyboard-toggle-pill"> | |
| <input type="checkbox" id="keyboardToggle"> | |
| <span class="toggle-track"></span> | |
| <span class="toggle-text">Enable Keyboard Input</span> | |
| </label> | |
| </div> | |
| <div class="controls card"> | |
| <div class="control-grid"> | |
| <label class="control-item"> | |
| Instrument | |
| <select id="instrumentSelect"> | |
| <option value="synth">Synth</option> | |
| <option value="piano">Piano</option> | |
| <option value="organ">Organ</option> | |
| <option value="bass">Bass</option> | |
| <option value="pluck">Pluck</option> | |
| <option value="fm">FM Synth</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| AI Voice | |
| <select id="aiInstrumentSelect"> | |
| <option value="synth">Synth</option> | |
| <option value="piano">Piano</option> | |
| <option value="organ">Organ</option> | |
| <option value="bass">Bass</option> | |
| <option value="pluck">Pluck</option> | |
| <option value="fm" selected>FM Synth</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| Engine | |
| <select id="engineSelect"> | |
| <option value="parrot">Parrot</option> | |
| <option value="reverse_parrot">Reverse Parrot</option> | |
| <option value="godzilla_continue">Godzilla</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| Runtime | |
| <select id="runtimeSelect"> | |
| <option value="cpu">CPU</option> | |
| <option value="gpu">ZeroGPU</option> | |
| <option value="auto" selected>Auto (GPU then CPU)</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| AI Style | |
| <select id="responseStyleSelect"> | |
| <option value="melodic">Melodic</option> | |
| <option value="motif_echo">Motif Echo</option> | |
| <option value="playful">Playful</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| Response Mode | |
| <select id="responseModeSelect"> | |
| <option value="raw_godzilla" selected>Raw Godzilla</option> | |
| <option value="current_pipeline">Current Pipeline</option> | |
| <option value="musical_polish">Musical Polish</option> | |
| </select> | |
| </label> | |
| <label class="control-item"> | |
| Response Length | |
| <select id="responseLengthSelect"> | |
| <option value="short" selected>Short</option> | |
| <option value="medium">Medium</option> | |
| <option value="long">Long</option> | |
| <option value="extended">Extended</option> | |
| </select> | |
| </label> | |
| </div> | |
| <div class="action-row"> | |
| <button id="recordBtn" class="btn btn-primary">Record</button> | |
| <button id="stopBtn" class="btn btn-secondary" disabled>Stop</button> | |
| <button id="playbackBtn" class="btn btn-secondary" disabled>Playback</button> | |
| <button id="gameStartBtn" class="btn btn-game">Start Game</button> | |
| <button id="gameStopBtn" class="btn btn-secondary" disabled>Stop Game</button> | |
| <button id="saveBtn" class="btn btn-secondary" disabled>Save MIDI</button> | |
| <button id="panicBtn" class="btn btn-danger">Panic</button> | |
| <span id="status">Idle</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="monitor-section card"> | |
| <div class="terminal-header"> | |
| <h4>MIDI MONITOR</h4> | |
| <button id="clearTerminal" class="btn btn-secondary">Clear</button> | |
| </div> | |
| <div id="terminal"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- External Dependencies --> | |
| <script src="https://unpkg.com/tone@next/build/Tone.js"></script> | |
| <!-- Application Logic --> | |
| <script src="/file=static/keyboard.js"></script> | |
| </body> | |
| </html> | |