Spaces:
Running
Running
| <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 ; | |
| } | |
| } | |
| </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> |