Spaces:
Running
Running
File size: 11,720 Bytes
5b51485 c427c8f 5b51485 c427c8f 9de8877 c427c8f 5b51485 cee0097 43a0d3f cee0097 c427c8f cee0097 c427c8f cee0097 c427c8f 5b51485 c427c8f 5b51485 c427c8f 5b51485 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 | <!doctype html>
<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">
<h1><span class="synth">SYNTH</span><i class="ia">IA</i></h1>
<div class="welcome-text">
<p class="welcome-intro">
Play a short phrase and let the AI respond musically. Choose your instrument, AI voice, and response style.
</p>
<div class="features-guide" style="display: none;">
<h3>Features</h3>
<ul class="features-list">
<li><strong>Game Mode:</strong> Start an interactive call-and-response session where the AI listens to your playing and responds musically</li>
<li><strong>Instrument:</strong> Choose the synth sound and effects for your keyboard—Synth, Piano, Organ, Bass, Pluck, or FM Synth create different tonal qualities</li>
<li><strong>AI Voice:</strong> Select which instrument sound the AI uses when it responds to your playing</li>
<li><strong>Engine:</strong> Choose how the AI responds:
<ul class="sub-list">
<li><em>Parrot:</em> Repeats exactly what you played</li>
<li><em>Reverse Parrot:</em> Plays your notes in reverse order (backward)</li>
<li><em>Godzilla:</em> Uses AI to generate a musically coherent continuation of your phrase</li>
</ul>
</li>
<li><strong>Runtime:</strong> Select where the AI runs—CPU (slower, always available), ZeroGPU (faster if available), or Auto (prefers GPU, falls back to CPU)</li>
<li><strong>AI Style:</strong> Post-processing that shapes the AI's melodic style (Godzilla engine only):
<ul class="sub-list">
<li><em>Melodic:</em> Smooth, singable melodies with minimal pitch leaps</li>
<li><em>Motif Echo:</em> Echoes the first couple notes from your input at the end of the response</li>
<li><em>Playful:</em> Adds bouncy alternating pitch shifts for a whimsical character</li>
</ul>
</li>
<li><strong>Response Mode:</strong> Determines the processing pipeline and sampling creativity (Godzilla engine only):
<ul class="sub-list">
<li><em>Raw Godzilla:</em> Pure AI output with maximum creativity (temperature=1.0, more unpredictable)</li>
<li><em>Current Pipeline:</em> Balanced mode applying your AI Style with moderate creativity (temperature=0.9, best of 3 candidates)</li>
<li><em>Musical Polish:</em> Refined mode with advanced processing—quantizes pitches to musical scales, adjusts rhythm, blends velocities, and ensures musical coherence (temperature=0.85, picks best of 4)</li>
</ul>
</li>
<li><strong>Response Length:</strong> How many notes the AI generates—Short (8 notes), Medium (14 notes), Long (20 notes), or Extended (28 notes)</li>
<li><strong>Record/Playback:</strong> Record your keyboard performance and play it back to hear it again</li>
<li><strong>Save MIDI:</strong> Export your recordings as MIDI files for use in DAWs or other music software</li>
</ul>
</div>
</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 class="tooltip-display-area" id="tooltipDisplay"></div>
</div>
<div class="controls card">
<div class="control-grid">
<label class="control-item" data-control-id="instrument">
Instrument
<select id="instrumentSelect" data-description="Choose the synth sound for your keyboard">
<option value="synth" data-tooltip="Bright, modern electronic sound">Synth</option>
<option value="piano" data-tooltip="Classic acoustic piano tone">Piano</option>
<option value="organ" data-tooltip="Rich, warm organ pipes">Organ</option>
<option value="bass" data-tooltip="Deep, resonant bass tones">Bass</option>
<option value="pluck" data-tooltip="Percussive plucked string sound">Pluck</option>
<option value="fm" data-tooltip="Complex, bell-like FM synthesis">FM Synth</option>
</select>
</label>
<label class="control-item" data-control-id="aiVoice">
AI Voice
<select id="aiInstrumentSelect" data-description="Select which instrument sound the AI uses when it responds">
<option value="synth" data-tooltip="Bright, modern electronic sound">Synth</option>
<option value="piano" data-tooltip="Classic acoustic piano tone">Piano</option>
<option value="organ" data-tooltip="Rich, warm organ pipes">Organ</option>
<option value="bass" data-tooltip="Deep, resonant bass tones">Bass</option>
<option value="pluck" data-tooltip="Percussive plucked string sound">Pluck</option>
<option value="fm" selected data-tooltip="Complex, bell-like FM synthesis">FM Synth</option>
</select>
</label>
<label class="control-item" data-control-id="engine">
Engine
<select id="engineSelect" data-description="Your generation model">
<option value="parrot" data-tooltip="Repeats your exact melody — useful for practicing or creating canon patterns">Parrot</option>
<option value="reverse_parrot" data-tooltip="Plays your melody backward — creates mirror images and harmonic inversions">Reverse Parrot</option>
<option value="godzilla_continue" data-tooltip="MIDI transformer that generates new musical continuations">Godzilla</option>
</select>
</label>
<label class="control-item" id="runtimeControl" data-control-id="runtime">
Runtime
<select id="runtimeSelect" data-description="Choose where the AI runs for faster or more reliable performance">
<option value="cpu" data-tooltip="Slower but always available, runs on CPU">CPU</option>
<option value="gpu" data-tooltip="Faster when available, uses ZeroGPU for inference">ZeroGPU</option>
<option value="auto" data-tooltip="Automatically prefers GPU if available, falls back to CPU" selected>Auto (GPU then CPU)</option>
</select>
</label>
<label class="control-item" data-control-id="aiStyle">
AI Style
<select id="responseStyleSelect" data-description="Applies post-processing styling to shape the AI's melodic character">
<option value="melodic" data-tooltip="Smooth, singable melodies with minimal pitch leaps">Melodic</option>
<option value="motif_echo" data-tooltip="Echoes the first couple notes from your input at the end of the response">Motif Echo</option>
<option value="playful" data-tooltip="Bouncy alternating pitch shifts for a whimsical, playful character">Playful</option>
</select>
</label>
<label class="control-item" data-control-id="responseMode">
Response Mode
<select id="responseModeSelect" data-description="Processing pipeline & creativity level">
<option value="raw_godzilla" data-tooltip="Pure AI output, maximum creativity (temperature=1.0, unpredictable)" selected>Raw Godzilla</option>
<option value="current_pipeline" data-tooltip="Balanced mode with AI Style applied, moderate creativity (temperature=0.9)">Current Pipeline</option>
<option value="musical_polish" data-tooltip="Refined with scale quantization and rhythm adjustment (temperature=0.85)">Musical Polish</option>
</select>
</label>
<label class="control-item" data-control-id="responseLength">
Response Length
<select id="responseLengthSelect" data-description="How many notes the AI generates in each response">
<option value="short" data-tooltip="8 notes - quick, snappy responses" selected>Short</option>
<option value="medium" data-tooltip="14 notes - balanced response length">Medium</option>
<option value="long" data-tooltip="20 notes - longer, more developed phrases">Long</option>
<option value="extended" data-tooltip="28 notes - extended musical conversations">Extended</option>
</select>
</label>
</div>
<div class="action-row">
<div class="btn-tooltip-wrapper">
<button id="recordBtn" class="btn btn-primary">Record</button>
<div class="btn-tooltip">Record your playing to MIDI. Click Record, play, then Stop.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="stopBtn" class="btn btn-secondary" disabled>Stop</button>
<div class="btn-tooltip">Stop recording your performance.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="playbackBtn" class="btn btn-secondary" disabled>Playback</button>
<div class="btn-tooltip">Play back your recorded performance.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="gameStartBtn" class="btn btn-game">Start Game</button>
<div class="btn-tooltip">Start call & response: play a phrase, AI responds, repeat.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="gameStopBtn" class="btn btn-secondary" disabled>Stop Game</button>
<div class="btn-tooltip">Stop the ongoing game session.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="saveBtn" class="btn btn-secondary" disabled>Save MIDI</button>
<div class="btn-tooltip">Export your recording as a MIDI file.</div>
</div>
<div class="btn-tooltip-wrapper">
<button id="panicBtn" class="btn btn-danger">Panic</button>
<div class="btn-tooltip">Stop all playing notes immediately.</div>
</div>
<span id="status">Idle</span>
</div>
</div>
</div>
<div class="monitor-section card">
<div class="terminal-header">
<h4>MIDI MONITOR</h4>
<div class="btn-tooltip-wrapper">
<button id="clearTerminal" class="btn btn-secondary">Clear</button>
<div class="btn-tooltip">Clear all MIDI events from the monitor.</div>
</div>
</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>
|