Hugging Face's logo

Spaces:
222tuesday
/
musicml-controller
Running

App Files Community
222tuesday commited on
Commit
b382ffd
·
verified ·
1 Parent(s): 414d3a6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +702 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Musicml Controller
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: musicml-controller
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,702 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Lyria Model Control Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary-bg: #f0f0f0;
12
+ --shadow-light: rgba(255, 255, 255, 0.8);
13
+ --shadow-dark: rgba(0, 0, 0, 0.1);
14
+ --display-color: #00ff88;
15
+ --text-muted: #777777;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
20
+ background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
21
+ min-height: 100vh;
22
+ padding: 2rem;
23
+ color: #333;
24
+ }
25
+
26
+ .neumorphic {
27
+ background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
28
+ border-radius: 16px;
29
+ box-shadow: -8px -8px 16px var(--shadow-light),
30
+ 8px 8px 16px var(--shadow-dark);
31
+ }
32
+
33
+ .neumorphic-inset {
34
+ background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
35
+ border-radius: 16px;
36
+ box-shadow: inset -4px -4px 8px var(--shadow-light),
37
+ inset 4px 4px 8px var(--shadow-dark);
38
+ }
39
+
40
+ .neumorphic-btn {
41
+ width: 40px;
42
+ height: 40px;
43
+ border-radius: 50%;
44
+ background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
45
+ box-shadow: -4px -4px 8px var(--shadow-light),
46
+ 4px 4px 8px var(--shadow-dark);
47
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
48
+ }
49
+
50
+ .neumorphic-btn:active {
51
+ box-shadow: inset -4px -4px 8px var(--shadow-light),
52
+ inset 4px 4px 8px var(--shadow-dark);
53
+ }
54
+
55
+ .neumorphic-btn:hover {
56
+ transform: translateY(-2px);
57
+ box-shadow: -6px -6px 12px var(--shadow-light),
58
+ 6px 6px 12px var(--shadow-dark);
59
+ }
60
+
61
+ .neumorphic-knob {
62
+ width: 50px;
63
+ height: 50px;
64
+ border-radius: 50%;
65
+ background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
66
+ box-shadow: -6px -6px 12px var(--shadow-light),
67
+ 6px 6px 12px var(--shadow-dark);
68
+ position: relative;
69
+ cursor: pointer;
70
+ }
71
+
72
+ .knob-indicator {
73
+ position: absolute;
74
+ width: 2px;
75
+ height: 15px;
76
+ background-color: var(--text-muted);
77
+ top: 5px;
78
+ left: 50%;
79
+ transform-origin: bottom center;
80
+ transform: translateX(-50%) rotate(0deg);
81
+ }
82
+
83
+ .neumorphic-slider {
84
+ -webkit-appearance: none;
85
+ width: 4px;
86
+ height: 80px;
87
+ background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
88
+ box-shadow: inset -2px -2px 4px var(--shadow-light),
89
+ inset 2px 2px 4px var(--shadow-dark);
90
+ border-radius: 2px;
91
+ outline: none;
92
+ }
93
+
94
+ .neumorphic-slider::-webkit-slider-thumb {
95
+ -webkit-appearance: none;
96
+ width: 16px;
97
+ height: 16px;
98
+ border-radius: 50%;
99
+ background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
100
+ box-shadow: -2px -2px 4px var(--shadow-light),
101
+ 2px 2px 4px var(--shadow-dark);
102
+ cursor: pointer;
103
+ }
104
+
105
+ .display {
106
+ background-color: #1a1a1a;
107
+ color: var(--display-color);
108
+ font-family: monospace;
109
+ font-size: 14px;
110
+ padding: 8px 12px;
111
+ border-radius: 8px;
112
+ box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.05),
113
+ inset 4px 4px 8px rgba(0, 0, 0, 0.3);
114
+ text-align: center;
115
+ min-height: 36px;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ }
120
+
121
+ .waveform {
122
+ height: 60px;
123
+ width: 100%;
124
+ position: relative;
125
+ overflow: hidden;
126
+ }
127
+
128
+ .waveform-line {
129
+ position: absolute;
130
+ bottom: 0;
131
+ left: 0;
132
+ width: 100%;
133
+ height: 2px;
134
+ background-color: var(--display-color);
135
+ animation: wave 2s infinite ease-in-out;
136
+ }
137
+
138
+ @keyframes wave {
139
+ 0%, 100% { transform: scaleY(0.5); }
140
+ 50% { transform: scaleY(1.5); }
141
+ }
142
+
143
+ .module {
144
+ opacity: 0;
145
+ transform: translateY(20px);
146
+ animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
147
+ }
148
+
149
+ @keyframes fadeIn {
150
+ to {
151
+ opacity: 1;
152
+ transform: translateY(0);
153
+ }
154
+ }
155
+
156
+ .patch-point {
157
+ width: 16px;
158
+ height: 16px;
159
+ border-radius: 50%;
160
+ background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
161
+ box-shadow: -2px -2px 4px var(--shadow-light),
162
+ 2px 2px 4px var(--shadow-dark);
163
+ cursor: pointer;
164
+ transition: all 0.2s ease;
165
+ }
166
+
167
+ .patch-point:hover {
168
+ transform: scale(1.2);
169
+ }
170
+
171
+ .patch-point.active {
172
+ background: var(--display-color);
173
+ box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
174
+ }
175
+
176
+ /* New visualizer styles */
177
+ .spectrum-visualizer {
178
+ height: 40px;
179
+ width: 100%;
180
+ display: flex;
181
+ align-items: flex-end;
182
+ justify-content: space-between;
183
+ margin: 8px 0;
184
+ }
185
+
186
+ .spectrum-bar {
187
+ width: 4px;
188
+ background-color: var(--display-color);
189
+ border-radius: 2px;
190
+ transition: height 0.1s ease-out;
191
+ }
192
+
193
+ .oscilloscope {
194
+ height: 60px;
195
+ width: 100%;
196
+ position: relative;
197
+ overflow: hidden;
198
+ }
199
+
200
+ .oscilloscope-line {
201
+ position: absolute;
202
+ width: 100%;
203
+ height: 2px;
204
+ background-color: var(--display-color);
205
+ animation: oscillate 1s infinite linear;
206
+ }
207
+
208
+ @keyframes oscillate {
209
+ 0% { transform: translateX(-100%); }
210
+ 100% { transform: translateX(100%); }
211
+ }
212
+
213
+ .level-meter {
214
+ height: 100px;
215
+ width: 12px;
216
+ background: linear-gradient(to top, #00ff88, #00cc66);
217
+ border-radius: 4px;
218
+ position: relative;
219
+ overflow: hidden;
220
+ }
221
+
222
+ .level-indicator {
223
+ position: absolute;
224
+ bottom: 0;
225
+ left: 0;
226
+ width: 100%;
227
+ height: 30%;
228
+ background-color: rgba(0, 0, 0, 0.2);
229
+ transition: height 0.1s ease-out;
230
+ }
231
+
232
+ .vu-meter {
233
+ display: flex;
234
+ height: 8px;
235
+ width: 100%;
236
+ background-color: #1a1a1a;
237
+ border-radius: 4px;
238
+ overflow: hidden;
239
+ }
240
+
241
+ .vu-segment {
242
+ flex: 1;
243
+ height: 100%;
244
+ margin-right: 2px;
245
+ background-color: #333;
246
+ }
247
+
248
+ .vu-segment:last-child {
249
+ margin-right: 0;
250
+ }
251
+
252
+ .vu-segment.active {
253
+ background-color: var(--display-color);
254
+ }
255
+
256
+ @media (max-width: 768px) {
257
+ .module-grid {
258
+ grid-template-columns: 1fr !important;
259
+ }
260
+ }
261
+ </style>
262
+ </head>
263
+ <body class="flex flex-col items-center">
264
+ <div class="max-w-5xl w-full">
265
+ <h1 class="text-2xl font-light tracking-widest text-center mb-8 text-gray-700">LYRIA MODEL CONTROL INTERFACE</h1>
266
+
267
+ <div class="module-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
268
+ <!-- Oscillator Module -->
269
+ <div class="module p-5 neumorphic" style="animation-delay: 100ms">
270
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OSCILLATOR</h2>
271
+ <div class="flex flex-col items-center space-y-4">
272
+ <div class="neumorphic-knob">
273
+ <div class="knob-indicator" id="osc-freq-indicator"></div>
274
+ </div>
275
+ <span class="text-xs uppercase tracking-wider text-gray-500">FREQUENCY</span>
276
+ <div class="display w-full">440 Hz</div>
277
+
278
+ <!-- Oscilloscope visualizer -->
279
+ <div class="oscilloscope neumorphic-inset">
280
+ <div class="oscilloscope-line"></div>
281
+ </div>
282
+
283
+ <div class="flex space-x-6 mt-2">
284
+ <div class="flex flex-col items-center space-y-2">
285
+ <div class="neumorphic-knob">
286
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div>
287
+ </div>
288
+ <span class="text-xs uppercase tracking-wider text-gray-500">WAVE</span>
289
+ </div>
290
+ <div class="flex flex-col items-center space-y-2">
291
+ <div class="neumorphic-knob">
292
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-30deg);"></div>
293
+ </div>
294
+ <span class="text-xs uppercase tracking-wider text-gray-500">DETUNE</span>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Filter Module -->
301
+ <div class="module p-5 neumorphic" style="animation-delay: 200ms">
302
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">FILTER</h2>
303
+ <div class="flex flex-col items-center space-y-4">
304
+ <div class="neumorphic-knob">
305
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(60deg);"></div>
306
+ </div>
307
+ <span class="text-xs uppercase tracking-wider text-gray-500">CUTOFF</span>
308
+
309
+ <!-- Spectrum analyzer -->
310
+ <div class="spectrum-visualizer neumorphic-inset p-2">
311
+ <div class="spectrum-bar" style="height: 10%;"></div>
312
+ <div class="spectrum-bar" style="height: 30%;"></div>
313
+ <div class="spectrum-bar" style="height: 60%;"></div>
314
+ <div class="spectrum-bar" style="height: 80%;"></div>
315
+ <div class="spectrum-bar" style="height: 100%;"></div>
316
+ <div class="spectrum-bar" style="height: 70%;"></div>
317
+ <div class="spectrum-bar" style="height: 40%;"></div>
318
+ <div class="spectrum-bar" style="height: 20%;"></div>
319
+ </div>
320
+
321
+ <div class="flex space-x-6">
322
+ <div class="flex flex-col items-center space-y-2">
323
+ <div class="neumorphic-slider" id="filter-res-slider"></div>
324
+ <span class="text-xs uppercase tracking-wider text-gray-500">RES</span>
325
+ </div>
326
+ <div class="flex flex-col items-center space-y-2">
327
+ <div class="neumorphic-slider" style="transform: rotate(180deg);"></div>
328
+ <span class="text-xs uppercase tracking-wider text-gray-500">DRIVE</span>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="display w-full mt-2">LPF 12dB</div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Envelope Module -->
337
+ <div class="module p-5 neumorphic" style="animation-delay: 300ms">
338
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">ENVELOPE</h2>
339
+ <div class="grid grid-cols-2 gap-4">
340
+ <div class="flex flex-col items-center space-y-2">
341
+ <div class="neumorphic-knob">
342
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(20deg);"></div>
343
+ </div>
344
+ <span class="text-xs uppercase tracking-wider text-gray-500">ATTACK</span>
345
+ <div class="display text-xs">25ms</div>
346
+ </div>
347
+ <div class="flex flex-col items-center space-y-2">
348
+ <div class="neumorphic-knob">
349
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div>
350
+ </div>
351
+ <span class="text-xs uppercase tracking-wider text-gray-500">DECAY</span>
352
+ <div class="display text-xs">120ms</div>
353
+ </div>
354
+ <div class="flex flex-col items-center space-y-2">
355
+ <div class="neumorphic-slider"></div>
356
+ <span class="text-xs uppercase tracking-wider text-gray-500">SUSTAIN</span>
357
+ <div class="display text-xs">75%</div>
358
+ </div>
359
+ <div class="flex flex-col items-center space-y-2">
360
+ <div class="neumorphic-knob">
361
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-15deg);"></div>
362
+ </div>
363
+ <span class="text-xs uppercase tracking-wider text-gray-500">RELEASE</span>
364
+ <div class="display text-xs">300ms</div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Envelope visualizer -->
369
+ <div class="mt-4 neumorphic-inset p-2" style="height: 80px; position: relative;">
370
+ <svg width="100%" height="100%" viewBox="0 0 100 40" preserveAspectRatio="none">
371
+ <path d="M0,40 L25,10 L45,30 L85,30 L100,40"
372
+ stroke="var(--display-color)"
373
+ stroke-width="1"
374
+ fill="none" />
375
+ </svg>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- LFO Module -->
380
+ <div class="module p-5 neumorphic" style="animation-delay: 400ms">
381
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LFO</h2>
382
+ <div class="flex flex-col items-center space-y-4">
383
+ <div class="neumorphic-knob">
384
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(90deg);"></div>
385
+ </div>
386
+ <span class="text-xs uppercase tracking-wider text-gray-500">RATE</span>
387
+
388
+ <div class="waveform neumorphic-inset">
389
+ <div class="waveform-line"></div>
390
+ </div>
391
+
392
+ <div class="flex space-x-4 mt-2">
393
+ <button class="neumorphic-btn"></button>
394
+ <button class="neumorphic-btn"></button>
395
+ <button class="neumorphic-btn"></button>
396
+ </div>
397
+
398
+ <div class="display w-full mt-2">SINE 2.5Hz</div>
399
+ </div>
400
+
401
+ <!-- LFO phase visualizer -->
402
+ <div class="mt-4 flex justify-center">
403
+ <div class="neumorphic-knob" style="width: 70px; height: 70px;">
404
+ <div class="knob-indicator" style="height: 25px; top: 10px;"></div>
405
+ <div class="absolute inset-0 flex items-center justify-center">
406
+ <div class="w-4 h-4 rounded-full bg-var(--display-color)" style="background-color: var(--display-color);"></div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Effects Module -->
413
+ <div class="module p-5 neumorphic" style="animation-delay: 500ms">
414
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">EFFECTS</h2>
415
+ <div class="grid grid-cols-2 gap-4">
416
+ <div class="flex flex-col items-center space-y-2">
417
+ <div class="neumorphic-knob">
418
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div>
419
+ </div>
420
+ <span class="text-xs uppercase tracking-wider text-gray-500">DELAY</span>
421
+ <div class="display text-xs">250ms</div>
422
+ </div>
423
+ <div class="flex flex-col items-center space-y-2">
424
+ <div class="neumorphic-knob">
425
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-45deg);"></div>
426
+ </div>
427
+ <span class="text-xs uppercase tracking-wider text-gray-500">REVERB</span>
428
+ <div class="display text-xs">1.2s</div>
429
+ </div>
430
+ <div class="flex flex-col items-center space-y-2">
431
+ <div class="neumorphic-slider"></div>
432
+ <span class="text-xs uppercase tracking-wider text-gray-500">CHORUS</span>
433
+ <div class="display text-xs">OFF</div>
434
+ </div>
435
+ <div class="flex flex-col items-center space-y-2">
436
+ <div class="neumorphic-btn"></div>
437
+ <span class="text-xs uppercase tracking-wider text-gray-500">DIST</span>
438
+ <div class="display text-xs">OFF</div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Effects visualization -->
443
+ <div class="mt-4 neumorphic-inset p-2" style="height: 60px; position: relative;">
444
+ <div class="absolute inset-0 flex items-center justify-center">
445
+ <div class="w-full h-1 bg-gray-400 rounded-full overflow-hidden">
446
+ <div class="h-full bg-var(--display-color)" style="width: 60%; background-color: var(--display-color);"></div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+
452
+ <!-- Output Module -->
453
+ <div class="module p-5 neumorphic" style="animation-delay: 600ms">
454
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OUTPUT</h2>
455
+ <div class="flex flex-col items-center space-y-4">
456
+ <div class="neumorphic-slider w-full" style="height: 120px;"></div>
457
+ <span class="text-xs uppercase tracking-wider text-gray-500">VOLUME</span>
458
+
459
+ <!-- VU Meter -->
460
+ <div class="vu-meter neumorphic-inset p-2">
461
+ <div class="vu-segment"></div>
462
+ <div class="vu-segment"></div>
463
+ <div class="vu-segment"></div>
464
+ <div class="vu-segment"></div>
465
+ <div class="vu-segment"></div>
466
+ <div class="vu-segment"></div>
467
+ <div class="vu-segment"></div>
468
+ <div class="vu-segment"></div>
469
+ </div>
470
+
471
+ <div class="waveform neumorphic-inset w-full">
472
+ <div class="waveform-line" style="animation-delay: 0.5s;"></div>
473
+ <div class="waveform-line" style="height: 1px; bottom: 50%; transform: translateY(-50%); animation: none; background-color: rgba(0, 255, 136, 0.3);"></div>
474
+ </div>
475
+
476
+ <div class="flex space-x-4 mt-2">
477
+ <button class="neumorphic-btn"></button>
478
+ <button class="neumorphic-btn"></button>
479
+ <div class="display px-4">OUT L/R</div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Level meter -->
484
+ <div class="mt-4 flex justify-center">
485
+ <div class="level-meter neumorphic-inset">
486
+ <div class="level-indicator"></div>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Patch Bay -->
493
+ <div class="neumorphic p-6 mb-8">
494
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">PATCH BAY</h2>
495
+ <div class="grid grid-cols-8 gap-4">
496
+ <div class="patch-point"></div>
497
+ <div class="patch-point"></div>
498
+ <div class="patch-point"></div>
499
+ <div class="patch-point"></div>
500
+ <div class="patch-point"></div>
501
+ <div class="patch-point"></div>
502
+ <div class="patch-point"></div>
503
+ <div class="patch-point"></div>
504
+ </div>
505
+
506
+ <!-- Patch visualization -->
507
+ <div class="mt-4 neumorphic-inset p-4" style="height: 60px; position: relative;">
508
+ <svg width="100%" height="100%" viewBox="0 0 100 20" preserveAspectRatio="none">
509
+ <path d="M10,10 C30,0 70,20 90,10"
510
+ stroke="var(--display-color)"
511
+ stroke-width="1"
512
+ stroke-dasharray="2,2"
513
+ fill="none" />
514
+ </svg>
515
+ </div>
516
+ </div>
517
+
518
+ <!-- Model Controls -->
519
+ <div class="neumorphic p-6">
520
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LYRIA MODEL CONTROLS</h2>
521
+ <div class="flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
522
+ <div class="flex-1">
523
+ <div class="flex items-center space-x-4 mb-4">
524
+ <div class="neumorphic-btn"></div>
525
+ <span class="text-sm text-gray-700">Enable Model</span>
526
+ </div>
527
+ <div class="flex items-center space-x-4 mb-4">
528
+ <div class="neumorphic-slider" style="width: 100%; height: 8px;"></div>
529
+ <span class="text-sm text-gray-700">Creativity</span>
530
+ </div>
531
+
532
+ <!-- Model activity visualization -->
533
+ <div class="neumorphic-inset p-2" style="height: 40px;">
534
+ <div class="flex h-full items-center">
535
+ <div class="w-full h-2 bg-gray-300 rounded-full overflow-hidden">
536
+ <div class="h-full bg-var(--display-color)" style="width: 75%; background-color: var(--display-color);"></div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="flex-1">
543
+ <div class="grid grid-cols-2 gap-4">
544
+ <div class="flex flex-col">
545
+ <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TEMPERATURE</span>
546
+ <div class="neumorphic-knob mx-auto">
547
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div>
548
+ </div>
549
+ </div>
550
+ <div class="flex flex-col">
551
+ <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TOP P</span>
552
+ <div class="neumorphic-knob mx-auto">
553
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(75deg);"></div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <!-- Model parameter visualization -->
559
+ <div class="mt-4 neumorphic-inset p-2" style="height: 60px;">
560
+ <div class="flex h-full items-center justify-center">
561
+ <div class="w-4 h-4 rounded-full bg-var(--display-color) mr-2" style="background-color: var(--display-color);"></div>
562
+ <div class="w-4 h-4 rounded-full bg-var(--display-color) mr-2" style="background-color: var(--display-color); opacity: 0.7;"></div>
563
+ <div class="w-4 h-4 rounded-full bg-var(--display-color) mr-2" style="background-color: var(--display-color); opacity: 0.5;"></div>
564
+ <div class="w-4 h-4 rounded-full bg-var(--display-color) mr-2" style="background-color: var(--display-color); opacity: 0.3;"></div>
565
+ <div class="w-4 h-4 rounded-full bg-var(--display-color)" style="background-color: var(--display-color); opacity: 0.1;"></div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="flex-1">
571
+ <div class="display h-full flex items-center justify-center">MODEL READY</div>
572
+
573
+ <!-- Model status visualization -->
574
+ <div class="mt-4 neumorphic-inset p-2" style="height: 40px;">
575
+ <div class="flex h-full items-center justify-center">
576
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
577
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
578
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-1"></div>
579
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+
587
+ <script>
588
+ document.addEventListener('DOMContentLoaded', function() {
589
+ // Make knobs draggable
590
+ const knobs = document.querySelectorAll('.neumorphic-knob');
591
+ knobs.forEach(knob => {
592
+ const indicator = knob.querySelector('.knob-indicator');
593
+ let isDragging = false;
594
+ let startY, startRotation;
595
+
596
+ knob.addEventListener('mousedown', (e) => {
597
+ isDragging = true;
598
+ startY = e.clientY;
599
+ startRotation = parseFloat(indicator.style.transform.replace('translateX(-50%) rotate(', '').replace('deg)', '')) || 0;
600
+ knob.style.cursor = 'grabbing';
601
+ });
602
+
603
+ document.addEventListener('mousemove', (e) => {
604
+ if (!isDragging) return;
605
+
606
+ const deltaY = e.clientY - startY;
607
+ let newRotation = startRotation + deltaY;
608
+
609
+ // Limit rotation between -135 and 135 degrees
610
+ newRotation = Math.max(-135, Math.min(135, newRotation));
611
+
612
+ indicator.style.transform = `translateX(-50%) rotate(${newRotation}deg)`;
613
+
614
+ // Update visualizers based on knob position
615
+ updateVisualizers();
616
+ });
617
+
618
+ document.addEventListener('mouseup', () => {
619
+ isDragging = false;
620
+ knob.style.cursor = 'pointer';
621
+ });
622
+ });
623
+
624
+ // Make patch points clickable
625
+ const patchPoints = document.querySelectorAll('.patch-point');
626
+ patchPoints.forEach(point => {
627
+ point.addEventListener('click', () => {
628
+ point.classList.toggle('active');
629
+ updateVisualizers();
630
+ });
631
+ });
632
+
633
+ // Make buttons interactive
634
+ const buttons = document.querySelectorAll('.neumorphic-btn');
635
+ buttons.forEach(button => {
636
+ button.addEventListener('mousedown', () => {
637
+ button.classList.add('active');
638
+ updateVisualizers();
639
+ });
640
+
641
+ button.addEventListener('mouseup', () => {
642
+ button.classList.remove('active');
643
+ });
644
+
645
+ button.addEventListener('mouseleave', () => {
646
+ button.classList.remove('active');
647
+ });
648
+ });
649
+
650
+ // Animate sliders
651
+ const sliders = document.querySelectorAll('.neumorphic-slider');
652
+ sliders.forEach(slider => {
653
+ slider.addEventListener('input', () => {
654
+ updateVisualizers();
655
+ });
656
+ });
657
+
658
+ // Animate visualizers
659
+ function updateVisualizers() {
660
+ // Spectrum analyzer animation
661
+ const spectrumBars = document.querySelectorAll('.spectrum-bar');
662
+ spectrumBars.forEach((bar, i) => {
663
+ const height = 10 + Math.random() * 90;
664
+ bar.style.height = `${height}%`;
665
+ bar.style.transition = `height ${0.05 + i * 0.01}s ease-out`;
666
+ });
667
+
668
+ // VU meter animation
669
+ const vuSegments = document.querySelectorAll('.vu-segment');
670
+ const activeSegments = Math.floor(Math.random() * vuSegments.length);
671
+ vuSegments.forEach((segment, i) => {
672
+ if (i <= activeSegments) {
673
+ segment.classList.add('active');
674
+ } else {
675
+ segment.classList.remove('active');
676
+ }
677
+ });
678
+
679
+ // Level meter animation
680
+ const levelIndicators = document.querySelectorAll('.level-indicator');
681
+ levelIndicators.forEach(indicator => {
682
+ const level = 30 + Math.random() * 70;
683
+ indicator.style.height = `${level}%`;
684
+ });
685
+
686
+ // Oscilloscope animation
687
+ const oscilloscopeLines = document.querySelectorAll('.oscilloscope-line');
688
+ oscilloscopeLines.forEach(line => {
689
+ line.style.animationDuration = `${0.5 + Math.random() * 1.5}s`;
690
+ });
691
+
692
+ // Request next animation frame
693
+ requestAnimationFrame(updateVisualizers);
694
+ }
695
+
696
+ // Start visualizer animations
697
+ updateVisualizers();
698
+ });
699
+ </script>
700
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222tuesday/interface-contrtol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p>
701
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222tuesday/musicml-controller" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
702
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ Integration Instructions (DO NOT ALTER UI): Objective: Integrate Google GenAI Lyria, Node.js backend support, and SynthID audio watermarking into the current application. Constraint: You must not make any changes to the existing user interface—layout, design, and all UI/UX elements must remain exactly as they are. All modifications must be strictly limited to back-end, audio processing, and feature integration. Implementation Roadmap 1. Lyria Integration Connect the Google GenAI Lyria music generation service to your application. Implement a service layer (LyriaService.js or equivalent) that wraps all Lyria API calls. Integrate Lyria as a controller for audio synthesis parameters based on user text prompts. Route generated audio from Lyria into the current audio processing pipeline and visualizers. 2. Node.js Audio/Backend Infrastructure Ensure the audio processing stack runs on a Node.js backend where appropriate. Use Node.js for all back-end audio data routing, session management, and any server-side SynthID operations. No UI changes; all API endpoints, sockets, and middleware should be invisible to the end user. 3. SynthID Watermarking Integration Incorporate SynthID to watermark audio generated through Lyria or the local synthesizer. Ensure watermarking is applied after final audio output, but before the file is made available for download or sharing. Watermarking must be handled entirely in the audio processing layer—users should not see or control this in the UI. 4. Audio Utilities & Feature Extraction (No UI Impact) Integrate or expose the following utilities for internal use only (not user-facing): hertz_to_mel, mel_to_hertz mel_filter_bank optimal_fft_length Utilities should be available for feature extraction, visualizer enhancements, and synthesis, but not exposed in the user interface. 5. Audio Signal Chain and Visualizer Connectivity Audio chain must run as: Oscillator → Filter → Envelope → Effects → Output. All UI controls must map directly to real audio parameters using Tone.js or your chosen audio library. Visualizers (spectrum, oscilloscope, waveform) must display actual audio data, including both live synthesis and Lyria-generated output. Use Web Audio API AnalyserNode for visualizer data—no UI rework. 6. Lyria x Synthesis Interactivity Allow Lyria to set or modify synthesis parameters in real time, visible in the current interface (but do not alter UI layout/components). Lyria-generated audio should be treated as a native source—visualized, processed, and routed as with user-generated audio. 7. User Experience (No UI Additions/Deletions) Show visual feedback for Lyria activity and parameter changes using only existing UI affordances (highlights, changes to existing displays). All new features (watermarking, AI audio routing) must be seamlessly integrated so users experience functionality without any new buttons, modals, or layout elements. Implement robust error handling, but only through existing notification or logging systems. Summary UI remains absolutely unchanged. Integrate: Lyria (music generation, parameter control) Node.js (audio routing/processing) SynthID (watermarking, backend) Expose audio utilities only in backend/processing code—never in UI. All new features must be invisible in the interface, except as enabled by existing UI affordances. Make NO changes to the user interface except as strictly required to enable the above integrations.
2
+ okay but put the interface back!
3
+ nope update it <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lyria Model Control Interface</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> :root { --primary-bg: #f0f0f0; --shadow-light: rgba(255, 255, 255, 0.8); --shadow-dark: rgba(0, 0, 0, 0.1); --display-color: #00ff88; --text-muted: #777777; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(145deg, #e8e8e8, #f5f5f5); min-height: 100vh; padding: 2rem; color: #333; } .neumorphic { background: linear-gradient(145deg, #f0f0f0, #e0e0e0); border-radius: 16px; box-shadow: -8px -8px 16px var(--shadow-light), 8px 8px 16px var(--shadow-dark); } .neumorphic-inset { background: linear-gradient(145deg, #e0e0e0, #f0f0f0); border-radius: 16px; box-shadow: inset -4px -4px 8px var(--shadow-light), inset 4px 4px 8px var(--shadow-dark); } .neumorphic-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -4px -4px 8px var(--shadow-light), 4px 4px 8px var(--shadow-dark); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .neumorphic-btn:active { box-shadow: inset -4px -4px 8px var(--shadow-light), inset 4px 4px 8px var(--shadow-dark); } .neumorphic-btn:hover { transform: translateY(-2px); box-shadow: -6px -6px 12px var(--shadow-light), 6px 6px 12px var(--shadow-dark); } .neumorphic-knob { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -6px -6px 12px var(--shadow-light), 6px 6px 12px var(--shadow-dark); position: relative; cursor: pointer; } .knob-indicator { position: absolute; width: 2px; height: 15px; background-color: var(--text-muted); top: 5px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); } .neumorphic-slider { -webkit-appearance: none; width: 4px; height: 80px; background: linear-gradient(145deg, #e0e0e0, #f0f0f0); box-shadow: inset -2px -2px 4px var(--shadow-light), inset 2px 2px 4px var(--shadow-dark); border-radius: 2px; outline: none; } .neumorphic-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -2px -2px 4px var(--shadow-light), 2px 2px 4px var(--shadow-dark); cursor: pointer; } .display { background-color: #1a1a1a; color: var(--display-color); font-family: monospace; font-size: 14px; padding: 8px 12px; border-radius: 8px; box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.05), inset 4px 4px 8px rgba(0, 0, 0, 0.3); text-align: center; min-height: 36px; display: flex; align-items: center; justify-content: center; } .waveform { height: 60px; width: 100%; position: relative; overflow: hidden; } .waveform-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--display-color); animation: wave 2s infinite ease-in-out; } @keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.5); } } .module { opacity: 0; transform: translateY(20px); animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .patch-point { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #e0e0e0, #f0f0f0); box-shadow: -2px -2px 4px var(--shadow-light), 2px 2px 4px var(--shadow-dark); cursor: pointer; transition: all 0.2s ease; } .patch-point:hover { transform: scale(1.2); } .patch-point.active { background: var(--display-color); box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); } @media (max-width: 768px) { .module-grid { grid-template-columns: 1fr !important; } } </style> </head> <body class="flex flex-col items-center"> <div class="max-w-5xl w-full"> <h1 class="text-2xl font-light tracking-widest text-center mb-8 text-gray-700">LYRIA MODEL CONTROL INTERFACE</h1> <div class="module-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> <!-- Oscillator Module --> <div class="module p-5 neumorphic" style="animation-delay: 100ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OSCILLATOR</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" id="osc-freq-indicator"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">FREQUENCY</span> <div class="display w-full">440 Hz</div> <div class="flex space-x-6 mt-2"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">WAVE</span> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-30deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DETUNE</span> </div> </div> </div> </div> <!-- Filter Module --> <div class="module p-5 neumorphic" style="animation-delay: 200ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">FILTER</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(60deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">CUTOFF</span> <div class="flex space-x-6"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider" id="filter-res-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">RES</span> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider" style="transform: rotate(180deg);"></div> <span class="text-xs uppercase tracking-wider text-gray-500">DRIVE</span> </div> </div> <div class="display w-full mt-2">LPF 12dB</div> </div> </div> <!-- Envelope Module --> <div class="module p-5 neumorphic" style="animation-delay: 300ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">ENVELOPE</h2> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(20deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">ATTACK</span> <div class="display text-xs">25ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DECAY</span> <div class="display text-xs">120ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">SUSTAIN</span> <div class="display text-xs">75%</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-15deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">RELEASE</span> <div class="display text-xs">300ms</div> </div> </div> </div> <!-- LFO Module --> <div class="module p-5 neumorphic" style="animation-delay: 400ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LFO</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(90deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">RATE</span> <div class="waveform neumorphic-inset"> <div class="waveform-line"></div> </div> <div class="flex space-x-4 mt-2"> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> </div> <div class="display w-full mt-2">SINE 2.5Hz</div> </div> </div> <!-- Effects Module --> <div class="module p-5 neumorphic" style="animation-delay: 500ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">EFFECTS</h2> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DELAY</span> <div class="display text-xs">250ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">REVERB</span> <div class="display text-xs">1.2s</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">CHORUS</span> <div class="display text-xs">OFF</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-btn"></div> <span class="text-xs uppercase tracking-wider text-gray-500">DIST</span> <div class="display text-xs">OFF</div> </div> </div> </div> <!-- Output Module --> <div class="module p-5 neumorphic" style="animation-delay: 600ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OUTPUT</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-slider w-full" style="height: 120px;"></div> <span class="text-xs uppercase tracking-wider text-gray-500">VOLUME</span> <div class="waveform neumorphic-inset w-full"> <div class="waveform-line" style="animation-delay: 0.5s;"></div> <div class="waveform-line" style="height: 1px; bottom: 50%; transform: translateY(-50%); animation: none; background-color: rgba(0, 255, 136, 0.3);"></div> </div> <div class="flex space-x-4 mt-2"> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> <div class="display px-4">OUT L/R</div> </div> </div> </div> </div> <!-- Patch Bay --> <div class="neumorphic p-6 mb-8"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">PATCH BAY</h2> <div class="grid grid-cols-8 gap-4"> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> </div> </div> <!-- Model Controls --> <div class="neumorphic p-6"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LYRIA MODEL CONTROLS</h2> <div class="flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0"> <div class="flex-1"> <div class="flex items-center space-x-4 mb-4"> <div class="neumorphic-btn"></div> <span class="text-sm text-gray-700">Enable Model</span> </div> <div class="flex items-center space-x-4 mb-4"> <div class="neumorphic-slider" style="width: 100%; height: 8px;"></div> <span class="text-sm text-gray-700">Creativity</span> </div> </div> <div class="flex-1"> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col"> <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TEMPERATURE</span> <div class="neumorphic-knob mx-auto"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div> </div> </div> <div class="flex flex-col"> <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TOP P</span> <div class="neumorphic-knob mx-auto"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(75deg);"></div> </div> </div> </div> </div> <div class="flex-1"> <div class="display h-full flex items-center justify-center">MODEL READY</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Make knobs draggable const knobs = document.querySelectorAll('.neumorphic-knob'); knobs.forEach(knob => { const indicator = knob.querySelector('.knob-indicator'); let isDragging = false; let startY, startRotation; knob.addEventListener('mousedown', (e) => { isDragging = true; startY = e.clientY; startRotation = parseFloat(indicator.style.transform.replace('translateX(-50%) rotate(', '').replace('deg)', '')) || 0; knob.style.cursor = 'grabbing'; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const deltaY = e.clientY - startY; let newRotation = startRotation + deltaY; // Limit rotation between -135 and 135 degrees newRotation = Math.max(-135, Math.min(135, newRotation)); indicator.style.transform = `translateX(-50%) rotate(${newRotation}deg)`; }); document.addEventListener('mouseup', () => { isDragging = false; knob.style.cursor = 'pointer'; }); }); // Make patch points clickable const patchPoints = document.querySelectorAll('.patch-point'); patchPoints.forEach(point => { point.addEventListener('click', () => { point.classList.toggle('active'); }); }); // Make buttons interactive const buttons = document.querySelectorAll('.neumorphic-btn'); buttons.forEach(button => { button.addEventListener('mousedown', () => { button.classList.add('active'); }); button.addEventListener('mouseup', () => { button.classList.remove('active'); }); button.addEventListener('mouseleave', () => { button.classList.remove('active'); }); }); // Animate sliders const sliders = document.querySelectorAll('.neumorphic-slider'); sliders.forEach(slider => { slider.addEventListener('input', () => { // You could update display values here based on slider position }); }); }); </script> </body> </html>
4
+ this is the proper UI, dont change the layout just follow these style conventions <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lyria Model Control Interface</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> :root { --primary-bg: #f0f0f0; --shadow-light: rgba(255, 255, 255, 0.8); --shadow-dark: rgba(0, 0, 0, 0.1); --display-color: #00ff88; --text-muted: #777777; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(145deg, #e8e8e8, #f5f5f5); min-height: 100vh; padding: 2rem; color: #333; } .neumorphic { background: linear-gradient(145deg, #f0f0f0, #e0e0e0); border-radius: 16px; box-shadow: -8px -8px 16px var(--shadow-light), 8px 8px 16px var(--shadow-dark); } .neumorphic-inset { background: linear-gradient(145deg, #e0e0e0, #f0f0f0); border-radius: 16px; box-shadow: inset -4px -4px 8px var(--shadow-light), inset 4px 4px 8px var(--shadow-dark); } .neumorphic-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -4px -4px 8px var(--shadow-light), 4px 4px 8px var(--shadow-dark); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .neumorphic-btn:active { box-shadow: inset -4px -4px 8px var(--shadow-light), inset 4px 4px 8px var(--shadow-dark); } .neumorphic-btn:hover { transform: translateY(-2px); box-shadow: -6px -6px 12px var(--shadow-light), 6px 6px 12px var(--shadow-dark); } .neumorphic-knob { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -6px -6px 12px var(--shadow-light), 6px 6px 12px var(--shadow-dark); position: relative; cursor: pointer; } .knob-indicator { position: absolute; width: 2px; height: 15px; background-color: var(--text-muted); top: 5px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); } .neumorphic-slider { -webkit-appearance: none; width: 4px; height: 80px; background: linear-gradient(145deg, #e0e0e0, #f0f0f0); box-shadow: inset -2px -2px 4px var(--shadow-light), inset 2px 2px 4px var(--shadow-dark); border-radius: 2px; outline: none; } .neumorphic-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #f0f0f0, #e0e0e0); box-shadow: -2px -2px 4px var(--shadow-light), 2px 2px 4px var(--shadow-dark); cursor: pointer; } .display { background-color: #1a1a1a; color: var(--display-color); font-family: monospace; font-size: 14px; padding: 8px 12px; border-radius: 8px; box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.05), inset 4px 4px 8px rgba(0, 0, 0, 0.3); text-align: center; min-height: 36px; display: flex; align-items: center; justify-content: center; } .waveform { height: 60px; width: 100%; position: relative; overflow: hidden; } .waveform-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--display-color); animation: wave 2s infinite ease-in-out; } @keyframes wave { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.5); } } .module { opacity: 0; transform: translateY(20px); animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .patch-point { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(145deg, #e0e0e0, #f0f0f0); box-shadow: -2px -2px 4px var(--shadow-light), 2px 2px 4px var(--shadow-dark); cursor: pointer; transition: all 0.2s ease; } .patch-point:hover { transform: scale(1.2); } .patch-point.active { background: var(--display-color); box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); } @media (max-width: 768px) { .module-grid { grid-template-columns: 1fr !important; } } </style> </head> <body class="flex flex-col items-center"> <div class="max-w-5xl w-full"> <h1 class="text-2xl font-light tracking-widest text-center mb-8 text-gray-700">LYRIA MODEL CONTROL INTERFACE</h1> <div class="module-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> <!-- Oscillator Module --> <div class="module p-5 neumorphic" style="animation-delay: 100ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OSCILLATOR</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" id="osc-freq-indicator"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">FREQUENCY</span> <div class="display w-full">440 Hz</div> <div class="flex space-x-6 mt-2"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">WAVE</span> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-30deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DETUNE</span> </div> </div> </div> </div> <!-- Filter Module --> <div class="module p-5 neumorphic" style="animation-delay: 200ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">FILTER</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(60deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">CUTOFF</span> <div class="flex space-x-6"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider" id="filter-res-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">RES</span> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider" style="transform: rotate(180deg);"></div> <span class="text-xs uppercase tracking-wider text-gray-500">DRIVE</span> </div> </div> <div class="display w-full mt-2">LPF 12dB</div> </div> </div> <!-- Envelope Module --> <div class="module p-5 neumorphic" style="animation-delay: 300ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">ENVELOPE</h2> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(20deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">ATTACK</span> <div class="display text-xs">25ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DECAY</span> <div class="display text-xs">120ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">SUSTAIN</span> <div class="display text-xs">75%</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-15deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">RELEASE</span> <div class="display text-xs">300ms</div> </div> </div> </div> <!-- LFO Module --> <div class="module p-5 neumorphic" style="animation-delay: 400ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LFO</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(90deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">RATE</span> <div class="waveform neumorphic-inset"> <div class="waveform-line"></div> </div> <div class="flex space-x-4 mt-2"> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> </div> <div class="display w-full mt-2">SINE 2.5Hz</div> </div> </div> <!-- Effects Module --> <div class="module p-5 neumorphic" style="animation-delay: 500ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">EFFECTS</h2> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">DELAY</span> <div class="display text-xs">250ms</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-knob"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(-45deg);"></div> </div> <span class="text-xs uppercase tracking-wider text-gray-500">REVERB</span> <div class="display text-xs">1.2s</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-slider"></div> <span class="text-xs uppercase tracking-wider text-gray-500">CHORUS</span> <div class="display text-xs">OFF</div> </div> <div class="flex flex-col items-center space-y-2"> <div class="neumorphic-btn"></div> <span class="text-xs uppercase tracking-wider text-gray-500">DIST</span> <div class="display text-xs">OFF</div> </div> </div> </div> <!-- Output Module --> <div class="module p-5 neumorphic" style="animation-delay: 600ms"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OUTPUT</h2> <div class="flex flex-col items-center space-y-4"> <div class="neumorphic-slider w-full" style="height: 120px;"></div> <span class="text-xs uppercase tracking-wider text-gray-500">VOLUME</span> <div class="waveform neumorphic-inset w-full"> <div class="waveform-line" style="animation-delay: 0.5s;"></div> <div class="waveform-line" style="height: 1px; bottom: 50%; transform: translateY(-50%); animation: none; background-color: rgba(0, 255, 136, 0.3);"></div> </div> <div class="flex space-x-4 mt-2"> <button class="neumorphic-btn"></button> <button class="neumorphic-btn"></button> <div class="display px-4">OUT L/R</div> </div> </div> </div> </div> <!-- Patch Bay --> <div class="neumorphic p-6 mb-8"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">PATCH BAY</h2> <div class="grid grid-cols-8 gap-4"> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> <div class="patch-point"></div> </div> </div> <!-- Model Controls --> <div class="neumorphic p-6"> <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LYRIA MODEL CONTROLS</h2> <div class="flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0"> <div class="flex-1"> <div class="flex items-center space-x-4 mb-4"> <div class="neumorphic-btn"></div> <span class="text-sm text-gray-700">Enable Model</span> </div> <div class="flex items-center space-x-4 mb-4"> <div class="neumorphic-slider" style="width: 100%; height: 8px;"></div> <span class="text-sm text-gray-700">Creativity</span> </div> </div> <div class="flex-1"> <div class="grid grid-cols-2 gap-4"> <div class="flex flex-col"> <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TEMPERATURE</span> <div class="neumorphic-knob mx-auto"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div> </div> </div> <div class="flex flex-col"> <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TOP P</span> <div class="neumorphic-knob mx-auto"> <div class="knob-indicator" style="transform: translateX(-50%) rotate(75deg);"></div> </div> </div> </div> </div> <div class="flex-1"> <div class="display h-full flex items-center justify-center">MODEL READY</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Make knobs draggable const knobs = document.querySelectorAll('.neumorphic-knob'); knobs.forEach(knob => { const indicator = knob.querySelector('.knob-indicator'); let isDragging = false; let startY, startRotation; knob.addEventListener('mousedown', (e) => { isDragging = true; startY = e.clientY; startRotation = parseFloat(indicator.style.transform.replace('translateX(-50%) rotate(', '').replace('deg)', '')) || 0; knob.style.cursor = 'grabbing'; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const deltaY = e.clientY - startY; let newRotation = startRotation + deltaY; // Limit rotation between -135 and 135 degrees newRotation = Math.max(-135, Math.min(135, newRotation)); indicator.style.transform = `translateX(-50%) rotate(${newRotation}deg)`; }); document.addEventListener('mouseup', () => { isDragging = false; knob.style.cursor = 'pointer'; }); }); // Make patch points clickable const patchPoints = document.querySelectorAll('.patch-point'); patchPoints.forEach(point => { point.addEventListener('click', () => { point.classList.toggle('active'); }); }); // Make buttons interactive const buttons = document.querySelectorAll('.neumorphic-btn'); buttons.forEach(button => { button.addEventListener('mousedown', () => { button.classList.add('active'); }); button.addEventListener('mouseup', () => { button.classList.remove('active'); }); button.addEventListener('mouseleave', () => { button.classList.remove('active'); }); }); // Animate sliders const sliders = document.querySelectorAll('.neumorphic-slider'); sliders.forEach(slider => { slider.addEventListener('input', () => { // You could update display values here based on slider position }); }); }); </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=222tuesday/interface-contrtol" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
5
+ keep everything the same, but add visualizers