Hugging Face's logo

Spaces:
222tuesday
/
interface-contrtol
Running

App Files Community
222tuesday commited on
Commit
ef2ee67
·
verified ·
1 Parent(s): f3e076f

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +469 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Interface Contrtol
3
- emoji: 🏢
4
  colorFrom: red
5
  colorTo: yellow
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: interface-contrtol
3
+ emoji: 🐳
4
  colorFrom: red
5
  colorTo: yellow
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,469 @@
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
+ @media (max-width: 768px) {
177
+ .module-grid {
178
+ grid-template-columns: 1fr !important;
179
+ }
180
+ }
181
+ </style>
182
+ </head>
183
+ <body class="flex flex-col items-center">
184
+ <div class="max-w-5xl w-full">
185
+ <h1 class="text-2xl font-light tracking-widest text-center mb-8 text-gray-700">LYRIA MODEL CONTROL INTERFACE</h1>
186
+
187
+ <div class="module-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
188
+ <!-- Oscillator Module -->
189
+ <div class="module p-5 neumorphic" style="animation-delay: 100ms">
190
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OSCILLATOR</h2>
191
+ <div class="flex flex-col items-center space-y-4">
192
+ <div class="neumorphic-knob">
193
+ <div class="knob-indicator" id="osc-freq-indicator"></div>
194
+ </div>
195
+ <span class="text-xs uppercase tracking-wider text-gray-500">FREQUENCY</span>
196
+ <div class="display w-full">440 Hz</div>
197
+
198
+ <div class="flex space-x-6 mt-2">
199
+ <div class="flex flex-col items-center space-y-2">
200
+ <div class="neumorphic-knob">
201
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div>
202
+ </div>
203
+ <span class="text-xs uppercase tracking-wider text-gray-500">WAVE</span>
204
+ </div>
205
+ <div class="flex flex-col items-center space-y-2">
206
+ <div class="neumorphic-knob">
207
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-30deg);"></div>
208
+ </div>
209
+ <span class="text-xs uppercase tracking-wider text-gray-500">DETUNE</span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Filter Module -->
216
+ <div class="module p-5 neumorphic" style="animation-delay: 200ms">
217
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">FILTER</h2>
218
+ <div class="flex flex-col items-center space-y-4">
219
+ <div class="neumorphic-knob">
220
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(60deg);"></div>
221
+ </div>
222
+ <span class="text-xs uppercase tracking-wider text-gray-500">CUTOFF</span>
223
+
224
+ <div class="flex space-x-6">
225
+ <div class="flex flex-col items-center space-y-2">
226
+ <div class="neumorphic-slider" id="filter-res-slider"></div>
227
+ <span class="text-xs uppercase tracking-wider text-gray-500">RES</span>
228
+ </div>
229
+ <div class="flex flex-col items-center space-y-2">
230
+ <div class="neumorphic-slider" style="transform: rotate(180deg);"></div>
231
+ <span class="text-xs uppercase tracking-wider text-gray-500">DRIVE</span>
232
+ </div>
233
+ </div>
234
+
235
+ <div class="display w-full mt-2">LPF 12dB</div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Envelope Module -->
240
+ <div class="module p-5 neumorphic" style="animation-delay: 300ms">
241
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">ENVELOPE</h2>
242
+ <div class="grid grid-cols-2 gap-4">
243
+ <div class="flex flex-col items-center space-y-2">
244
+ <div class="neumorphic-knob">
245
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(20deg);"></div>
246
+ </div>
247
+ <span class="text-xs uppercase tracking-wider text-gray-500">ATTACK</span>
248
+ <div class="display text-xs">25ms</div>
249
+ </div>
250
+ <div class="flex flex-col items-center space-y-2">
251
+ <div class="neumorphic-knob">
252
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(45deg);"></div>
253
+ </div>
254
+ <span class="text-xs uppercase tracking-wider text-gray-500">DECAY</span>
255
+ <div class="display text-xs">120ms</div>
256
+ </div>
257
+ <div class="flex flex-col items-center space-y-2">
258
+ <div class="neumorphic-slider"></div>
259
+ <span class="text-xs uppercase tracking-wider text-gray-500">SUSTAIN</span>
260
+ <div class="display text-xs">75%</div>
261
+ </div>
262
+ <div class="flex flex-col items-center space-y-2">
263
+ <div class="neumorphic-knob">
264
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-15deg);"></div>
265
+ </div>
266
+ <span class="text-xs uppercase tracking-wider text-gray-500">RELEASE</span>
267
+ <div class="display text-xs">300ms</div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- LFO Module -->
273
+ <div class="module p-5 neumorphic" style="animation-delay: 400ms">
274
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LFO</h2>
275
+ <div class="flex flex-col items-center space-y-4">
276
+ <div class="neumorphic-knob">
277
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(90deg);"></div>
278
+ </div>
279
+ <span class="text-xs uppercase tracking-wider text-gray-500">RATE</span>
280
+
281
+ <div class="waveform neumorphic-inset">
282
+ <div class="waveform-line"></div>
283
+ </div>
284
+
285
+ <div class="flex space-x-4 mt-2">
286
+ <button class="neumorphic-btn"></button>
287
+ <button class="neumorphic-btn"></button>
288
+ <button class="neumorphic-btn"></button>
289
+ </div>
290
+
291
+ <div class="display w-full mt-2">SINE 2.5Hz</div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Effects Module -->
296
+ <div class="module p-5 neumorphic" style="animation-delay: 500ms">
297
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">EFFECTS</h2>
298
+ <div class="grid grid-cols-2 gap-4">
299
+ <div class="flex flex-col items-center space-y-2">
300
+ <div class="neumorphic-knob">
301
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div>
302
+ </div>
303
+ <span class="text-xs uppercase tracking-wider text-gray-500">DELAY</span>
304
+ <div class="display text-xs">250ms</div>
305
+ </div>
306
+ <div class="flex flex-col items-center space-y-2">
307
+ <div class="neumorphic-knob">
308
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(-45deg);"></div>
309
+ </div>
310
+ <span class="text-xs uppercase tracking-wider text-gray-500">REVERB</span>
311
+ <div class="display text-xs">1.2s</div>
312
+ </div>
313
+ <div class="flex flex-col items-center space-y-2">
314
+ <div class="neumorphic-slider"></div>
315
+ <span class="text-xs uppercase tracking-wider text-gray-500">CHORUS</span>
316
+ <div class="display text-xs">OFF</div>
317
+ </div>
318
+ <div class="flex flex-col items-center space-y-2">
319
+ <div class="neumorphic-btn"></div>
320
+ <span class="text-xs uppercase tracking-wider text-gray-500">DIST</span>
321
+ <div class="display text-xs">OFF</div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Output Module -->
327
+ <div class="module p-5 neumorphic" style="animation-delay: 600ms">
328
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">OUTPUT</h2>
329
+ <div class="flex flex-col items-center space-y-4">
330
+ <div class="neumorphic-slider w-full" style="height: 120px;"></div>
331
+ <span class="text-xs uppercase tracking-wider text-gray-500">VOLUME</span>
332
+
333
+ <div class="waveform neumorphic-inset w-full">
334
+ <div class="waveform-line" style="animation-delay: 0.5s;"></div>
335
+ <div class="waveform-line" style="height: 1px; bottom: 50%; transform: translateY(-50%); animation: none; background-color: rgba(0, 255, 136, 0.3);"></div>
336
+ </div>
337
+
338
+ <div class="flex space-x-4 mt-2">
339
+ <button class="neumorphic-btn"></button>
340
+ <button class="neumorphic-btn"></button>
341
+ <div class="display px-4">OUT L/R</div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Patch Bay -->
348
+ <div class="neumorphic p-6 mb-8">
349
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">PATCH BAY</h2>
350
+ <div class="grid grid-cols-8 gap-4">
351
+ <div class="patch-point"></div>
352
+ <div class="patch-point"></div>
353
+ <div class="patch-point"></div>
354
+ <div class="patch-point"></div>
355
+ <div class="patch-point"></div>
356
+ <div class="patch-point"></div>
357
+ <div class="patch-point"></div>
358
+ <div class="patch-point"></div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Model Controls -->
363
+ <div class="neumorphic p-6">
364
+ <h2 class="text-xs uppercase tracking-wider font-medium text-gray-500 mb-4">LYRIA MODEL CONTROLS</h2>
365
+ <div class="flex flex-col md:flex-row md:space-x-6 space-y-4 md:space-y-0">
366
+ <div class="flex-1">
367
+ <div class="flex items-center space-x-4 mb-4">
368
+ <div class="neumorphic-btn"></div>
369
+ <span class="text-sm text-gray-700">Enable Model</span>
370
+ </div>
371
+ <div class="flex items-center space-x-4 mb-4">
372
+ <div class="neumorphic-slider" style="width: 100%; height: 8px;"></div>
373
+ <span class="text-sm text-gray-700">Creativity</span>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="flex-1">
378
+ <div class="grid grid-cols-2 gap-4">
379
+ <div class="flex flex-col">
380
+ <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TEMPERATURE</span>
381
+ <div class="neumorphic-knob mx-auto">
382
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(30deg);"></div>
383
+ </div>
384
+ </div>
385
+ <div class="flex flex-col">
386
+ <span class="text-xs uppercase tracking-wider text-gray-500 mb-2">TOP P</span>
387
+ <div class="neumorphic-knob mx-auto">
388
+ <div class="knob-indicator" style="transform: translateX(-50%) rotate(75deg);"></div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="flex-1">
395
+ <div class="display h-full flex items-center justify-center">MODEL READY</div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+
401
+ <script>
402
+ document.addEventListener('DOMContentLoaded', function() {
403
+ // Make knobs draggable
404
+ const knobs = document.querySelectorAll('.neumorphic-knob');
405
+ knobs.forEach(knob => {
406
+ const indicator = knob.querySelector('.knob-indicator');
407
+ let isDragging = false;
408
+ let startY, startRotation;
409
+
410
+ knob.addEventListener('mousedown', (e) => {
411
+ isDragging = true;
412
+ startY = e.clientY;
413
+ startRotation = parseFloat(indicator.style.transform.replace('translateX(-50%) rotate(', '').replace('deg)', '')) || 0;
414
+ knob.style.cursor = 'grabbing';
415
+ });
416
+
417
+ document.addEventListener('mousemove', (e) => {
418
+ if (!isDragging) return;
419
+
420
+ const deltaY = e.clientY - startY;
421
+ let newRotation = startRotation + deltaY;
422
+
423
+ // Limit rotation between -135 and 135 degrees
424
+ newRotation = Math.max(-135, Math.min(135, newRotation));
425
+
426
+ indicator.style.transform = `translateX(-50%) rotate(${newRotation}deg)`;
427
+ });
428
+
429
+ document.addEventListener('mouseup', () => {
430
+ isDragging = false;
431
+ knob.style.cursor = 'pointer';
432
+ });
433
+ });
434
+
435
+ // Make patch points clickable
436
+ const patchPoints = document.querySelectorAll('.patch-point');
437
+ patchPoints.forEach(point => {
438
+ point.addEventListener('click', () => {
439
+ point.classList.toggle('active');
440
+ });
441
+ });
442
+
443
+ // Make buttons interactive
444
+ const buttons = document.querySelectorAll('.neumorphic-btn');
445
+ buttons.forEach(button => {
446
+ button.addEventListener('mousedown', () => {
447
+ button.classList.add('active');
448
+ });
449
+
450
+ button.addEventListener('mouseup', () => {
451
+ button.classList.remove('active');
452
+ });
453
+
454
+ button.addEventListener('mouseleave', () => {
455
+ button.classList.remove('active');
456
+ });
457
+ });
458
+
459
+ // Animate sliders
460
+ const sliders = document.querySelectorAll('.neumorphic-slider');
461
+ sliders.forEach(slider => {
462
+ slider.addEventListener('input', () => {
463
+ // You could update display values here based on slider position
464
+ });
465
+ });
466
+ });
467
+ </script>
468
+ <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>
469
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ i want to hook this up to the lyria model, and also, this isnt a modular synth. Here's a detailed UI prompt for Gemini 2.5 to generate your neumorphic modular synthesizer interface: UI Generation Prompt: Create a modern neumorphic modular synthesizer interface with these exact specifications: Color Palette & Base Design: Background: Light gray gradient (#e8e8e8 to #f5f5f5) Primary surface: #f0f0f0 to #e0e0e0 gradient Monochromatic grayscale only (no colors except dark green #00ff88 for displays) Soft, minimalist aesthetic with clean typography Neumorphic Design Rules: All elements use dual shadow system: Light shadow: -8px -8px 16px rgba(255,255,255,0.8) (top-left highlight) Dark shadow: 8px 8px 16px rgba(0,0,0,0.1) (bottom-right depth) Raised elements (knobs, buttons): outset shadows for protruding effect Recessed elements (displays, sliders): inset shadows for sunken effect Border radius: 16px for modules, 50% for circular controls, 8px for displays Subtle gradients on all surfaces (145deg angle preferred) Interactive hover states increase shadow intensity by 1.5x Active/pressed states use inset shadows to simulate depression Layout Structure: Main container: 1400px max-width, centered, 24px border radius Module grid: CSS Grid, auto-fit columns (280px minimum), 25px gaps 6 modules total: Oscillator, Filter, Envelope, LFO, Effects, Output Patch bay at bottom: 8-column grid of circular connection points Control Elements: Knobs: 50px diameter circles with thin indicator lines (2px width, 15px height) Sliders: 4px wide tracks, 80px tall, with 16px circular handles Buttons: 40px diameter circles with subtle press animations All controls have 8px spacing, centered alignment Labels: 9px uppercase text, #777 color, 0.5px letter spacing Interactive Behaviors: Knobs rotate 270° range (-135° to +135°) with mouse drag Sliders move vertically with percentage positioning Buttons toggle between raised/pressed neumorphic states Hover effects: 2px upward translation + enhanced shadows Smooth cubic-bezier transitions (0.4, 0, 0.2, 1) for all animations Display Elements: Dark LCD-style displays: #1a1a1a background, #00ff88 text color Monospace font family, 14px size, centered text Inset shadows for recessed screen appearance Waveform visualizers with animated green lines Typography: Headers: 11px uppercase, 500 weight, #888 color, 1px letter spacing Main title: 18px, 300 weight, 3px letter spacing Control labels: 9px uppercase, 400 weight, #777 color Font stack: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif Responsive Design: Mobile breakpoint at 768px Single column layout on mobile Maintain neumorphic shadows at all screen sizes Touch-friendly control sizing (minimum 44px touch targets) Animation Details: Staggered module appearance: 100ms delays, 0.6s duration Knob rotation: 0.3s ease-out transitions Hover states: 0.2s ease transitions Active button pulsing: 2s infinite opacity animation (0.3 to 1.0) Generate clean, semantic HTML with embedded CSS and JavaScript for full interactivity. Ensure pixel-perfect neumorphic shadows and professional modular synthesizer aesthetic.