Spaces:
Running
Running
| <html><head><base href="https://websim.ai"><title>Udio - AI-Powered Music Creation Studio</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #1a1a1a; | |
| color: #e0e0e0; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background: linear-gradient(45deg, #3a1c71, #d76d77, #ffaf7b); | |
| color: #fff; | |
| text-align: center; | |
| padding: 40px 0; | |
| border-radius: 0 0 15px 15px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: 3.5em; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .tagline { | |
| font-size: 1.3em; | |
| margin-top: 10px; | |
| font-weight: 300; | |
| } | |
| .main-content { | |
| background-color: #2a2a2a; | |
| border-radius: 15px; | |
| padding: 30px; | |
| margin-top: 30px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| } | |
| .generator-interface { | |
| display: grid; | |
| gap: 25px; | |
| } | |
| label { | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| display: block; | |
| color: #b0b0b0; | |
| } | |
| input[type="text"], select, textarea { | |
| width: 100%; | |
| padding: 12px; | |
| background-color: #3a3a3a; | |
| border: 1px solid #4a4a4a; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| color: #e0e0e0; | |
| transition: all 0.3s ease; | |
| } | |
| input[type="text"]:focus, select:focus, textarea:focus { | |
| outline: none; | |
| border-color: #d76d77; | |
| box-shadow: 0 0 0 2px rgba(215, 109, 119, 0.2); | |
| } | |
| button { | |
| background: linear-gradient(45deg, #3a1c71, #d76d77); | |
| color: #fff; | |
| border: none; | |
| padding: 14px 25px; | |
| font-size: 18px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 600; | |
| } | |
| button:hover { | |
| background: linear-gradient(45deg, #4a2c81, #e77d87); | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.2); | |
| } | |
| .output { | |
| margin-top: 40px; | |
| padding: 25px; | |
| background-color: #3a3a3a; | |
| border: 1px solid #4a4a4a; | |
| border-radius: 12px; | |
| } | |
| .track { | |
| background-color: #2a2a2a; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| } | |
| .track-controls { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 10px; | |
| } | |
| .track-controls button { | |
| padding: 8px 15px; | |
| font-size: 14px; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 50px; | |
| color: #888; | |
| font-size: 0.9em; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .generating { | |
| animation: pulse 1.5s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Udio</h1> | |
| <p class="tagline">AI-Powered Music Creation Studio</p> | |
| </header> | |
| <div class="container"> | |
| <div class="main-content"> | |
| <h2>Compose Your Masterpiece</h2> | |
| <p>Welcome to Udio, where AI meets creativity. Describe your musical vision, and watch as our advanced algorithms bring it to life!</p> | |
| <div class="generator-interface"> | |
| <div> | |
| <label for="prompt">Describe Your Track:</label> | |
| <textarea id="prompt" rows="4" placeholder="E.g., A futuristic electro-pop track with pulsing synths, ethereal vocals, and a driving beat inspired by cyberpunk aesthetics"></textarea> | |
| </div> | |
| <div> | |
| <label for="genre">Primary Genre:</label> | |
| <select id="genre"> | |
| <option value="electro-pop">Electro-Pop</option> | |
| <option value="synthwave">Synthwave</option> | |
| <option value="future-bass">Future Bass</option> | |
| <option value="lo-fi">Lo-Fi</option> | |
| <option value="tech-house">Tech House</option> | |
| <option value="ambient">Ambient</option> | |
| <option value="trap">Trap</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="mood">Mood:</label> | |
| <select id="mood"> | |
| <option value="euphoric">Euphoric</option> | |
| <option value="melancholic">Melancholic</option> | |
| <option value="energetic">Energetic</option> | |
| <option value="chill">Chill</option> | |
| <option value="dark">Dark</option> | |
| <option value="uplifting">Uplifting</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="bpm">Tempo (BPM):</label> | |
| <input type="text" id="bpm" placeholder="E.g., 128"> | |
| </div> | |
| <div> | |
| <label for="key">Key:</label> | |
| <select id="key"> | |
| <option value="C">C</option> | |
| <option value="C#">C#</option> | |
| <option value="D">D</option> | |
| <option value="D#">D#</option> | |
| <option value="E">E</option> | |
| <option value="F">F</option> | |
| <option value="F#">F#</option> | |
| <option value="G">G</option> | |
| <option value="G#">G#</option> | |
| <option value="A">A</option> | |
| <option value="A#">A#</option> | |
| <option value="B">B</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="duration">Duration:</label> | |
| <select id="duration"> | |
| <option value="short">Short (1 minute)</option> | |
| <option value="medium">Medium (2-3 minutes)</option> | |
| <option value="long">Full Track (3-5 minutes)</option> | |
| </select> | |
| </div> | |
| <button onclick="generateMusic()">Generate Track</button> | |
| </div> | |
| <div id="output" class="output" style="display: none;"> | |
| <h3>Your AI-Generated Composition</h3> | |
| <div id="tracks-container"></div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2024 Udio AI Music Studio. All rights reserved.</p> | |
| <p>Powered by cutting-edge machine learning and deep neural networks.</p> | |
| <p>Udio respects intellectual property rights. Generated music is for personal and educational use only. Commercial use may require additional licensing.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| function generateMusic() { | |
| const prompt = document.getElementById('prompt').value; | |
| const genre = document.getElementById('genre').value; | |
| const mood = document.getElementById('mood').value; | |
| const bpm = document.getElementById('bpm').value; | |
| const key = document.getElementById('key').value; | |
| const duration = document.getElementById('duration').value; | |
| const button = document.querySelector('button'); | |
| button.textContent = 'Generating...'; | |
| button.classList.add('generating'); | |
| button.disabled = true; | |
| // Simulate API call and music generation process | |
| setTimeout(() => { | |
| const output = document.getElementById('output'); | |
| output.style.display = 'block'; | |
| const tracksContainer = document.getElementById('tracks-container'); | |
| tracksContainer.innerHTML = ''; // Clear previous tracks | |
| // Generate multiple tracks | |
| const trackTypes = ['Main Mix', 'Instrumental', 'Acapella', 'Remix Stems']; | |
| trackTypes.forEach(type => { | |
| const track = document.createElement('div'); | |
| track.className = 'track'; | |
| track.innerHTML = ` | |
| <h4>${type}</h4> | |
| <audio controls> | |
| <source src="https://websim.ai/audio/udio_${genre}_${mood}_${duration}_${type.toLowerCase().replace(' ', '_')}.mp3" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <div class="track-controls"> | |
| <button onclick="downloadTrack('${type}')">Download</button> | |
| <button onclick="shareTrack('${type}')">Share</button> | |
| </div> | |
| `; | |
| tracksContainer.appendChild(track); | |
| }); | |
| button.textContent = 'Generate Track'; | |
| button.classList.remove('generating'); | |
| button.disabled = false; | |
| // Smooth scroll to the output | |
| output.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| }, 8000); // Simulating 8 seconds of generation time | |
| } | |
| function downloadTrack(trackType) { | |
| alert(`Downloading ${trackType}... (This is a simulation)`); | |
| } | |
| function shareTrack(trackType) { | |
| alert(`Sharing ${trackType}... (This is a simulation)`); | |
| } | |
| </script> | |
| </body> | |
| </html> |