File size: 4,932 Bytes
5b51485
c427c8f
5b51485
 
c427c8f
9de8877
c427c8f
5b51485
 
fb2cdc2
 
 
 
 
 
 
 
c427c8f
 
fb2cdc2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c427c8f
fb2cdc2
 
 
 
 
 
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
<!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">
      <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>