| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MelodyAI - Create Music with AI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #6b21a8 0%, #2563eb 100%); |
| } |
| |
| .music-card:hover .play-button { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .waveform { |
| height: 40px; |
| background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%); |
| background-size: 200% 100%; |
| animation: wave 2s linear infinite; |
| border-radius: 4px; |
| } |
| |
| @keyframes wave { |
| 0% { background-position: 0% 50%; } |
| 100% { background-position: 200% 50%; } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .recording { |
| animation: pulse 1.5s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } |
| } |
| |
| .progress-bar { |
| height: 6px; |
| background-color: #e2e8f0; |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background-color: #6b21a8; |
| width: 0%; |
| transition: width 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <nav class="bg-white shadow-sm"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <svg class="h-8 w-8 text-purple-600" viewBox="0 0 24 24" fill="currentColor"> |
| <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> |
| </svg> |
| <span class="ml-2 text-xl font-bold text-gray-900">MelodyAI</span> |
| </div> |
| </div> |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> |
| <div class="ml-4 relative flex-shrink-0"> |
| <div class="rounded-full bg-gray-200 h-8 w-8 flex items-center justify-center"> |
| <i class="fas fa-user text-gray-600"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="text-center mb-12"> |
| <h1 class="text-3xl font-bold text-gray-900 mb-2">Create Your AI Music</h1> |
| <p class="text-gray-600">Describe your song or hum a melody, and our AI will generate a complete musical composition.</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-6"> |
| |
| <div class="flex border-b border-gray-200"> |
| <button id="text-tab" class="px-4 py-2 font-medium text-sm border-b-2 border-purple-500 text-purple-600">Text Prompt</button> |
| <button id="voice-tab" class="px-4 py-2 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700">Voice/Hum</button> |
| </div> |
| |
| |
| <div id="text-content" class="mt-6"> |
| <div class="mb-4"> |
| <label for="prompt" class="block text-sm font-medium text-gray-700 mb-2">Describe your song</label> |
| <textarea id="prompt" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. A cheerful pop song about summer love with acoustic guitar and upbeat drums"></textarea> |
| </div> |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6"> |
| <div> |
| <label for="genre" class="block text-sm font-medium text-gray-700 mb-2">Genre</label> |
| <select id="genre" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500"> |
| <option value="pop">Pop</option> |
| <option value="rock">Rock</option> |
| <option value="electronic">Electronic</option> |
| <option value="hiphop">Hip Hop</option> |
| <option value="jazz">Jazz</option> |
| <option value="classical">Classical</option> |
| <option value="custom">Custom</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="mood" class="block text-sm font-medium text-gray-700 mb-2">Mood</label> |
| <select id="mood" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500"> |
| <option value="happy">Happy</option> |
| <option value="energetic">Energetic</option> |
| <option value="chill">Chill</option> |
| <option value="romantic">Romantic</option> |
| <option value="melancholic">Melancholic</option> |
| <option value="custom">Custom</option> |
| </select> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="instruments" class="block text-sm font-medium text-gray-700 mb-2">Instruments (optional)</label> |
| <input type="text" id="instruments" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. piano, electric guitar, synthesizer"> |
| </div> |
| |
| <div class="flex justify-center"> |
| <button id="generate-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold flex items-center"> |
| <i class="fas fa-magic mr-2"></i> Generate Music |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="voice-content" class="mt-6 hidden"> |
| <div class="text-center mb-6"> |
| <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white rounded-full h-16 w-16 flex items-center justify-center mx-auto"> |
| <i class="fas fa-microphone text-xl"></i> |
| </button> |
| <p id="record-status" class="mt-2 text-sm text-gray-600">Click to record your melody</p> |
| </div> |
| |
| <div class="mb-6"> |
| <label class="block text-sm font-medium text-gray-700 mb-2">Describe what you're humming (optional)</label> |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="e.g. A sad violin melody"> |
| </div> |
| |
| <div class="flex justify-center"> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold flex items-center"> |
| <i class="fas fa-magic mr-2"></i> Generate from Voice |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="progress-section" class="mt-8 bg-white rounded-xl shadow-md overflow-hidden hidden"> |
| <div class="p-6"> |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Generating your music...</h3> |
| |
| <div class="progress-bar mb-4"> |
| <div id="progress-fill" class="progress-fill"></div> |
| </div> |
| |
| <div class="flex justify-between text-sm text-gray-600 mb-6"> |
| <span>0%</span> |
| <span id="progress-percent">0%</span> |
| <span>100%</span> |
| </div> |
| |
| <div class="text-center"> |
| <p class="text-gray-600">This usually takes about 30-60 seconds. You can leave this page and we'll notify you when it's ready.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="results-section" class="mt-8 hidden"> |
| <h3 class="text-xl font-bold text-gray-900 mb-4">Your AI-Generated Music</h3> |
| |
| <div class="grid grid-cols-1 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 bg-gray-100 rounded-lg h-16 w-16 flex items-center justify-center"> |
| <i class="fas fa-music text-gray-500 text-xl"></i> |
| </div> |
| <div class="ml-4 flex-grow"> |
| <h4 class="font-medium">Summer Breeze (Version 1)</h4> |
| <p class="text-sm text-gray-500">Pop • 2:45</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-purple-600 hover:text-purple-800"> |
| <i class="fas fa-play-circle text-2xl"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> |
| <div class="p-4 flex items-center"> |
| <div class="flex-shrink-0 bg-gray-100 rounded-lg h-16 w-16 flex items-center justify-center"> |
| <i class="fas fa-music text-gray-500 text-xl"></i> |
| </div> |
| <div class="ml-4 flex-grow"> |
| <h4 class="font-medium">Summer Breeze (Version 2)</h4> |
| <p class="text-sm text-gray-500">Pop • 3:12</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-purple-600 hover:text-purple-800"> |
| <i class="fas fa-play-circle text-2xl"></i> |
| </button> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-between"> |
| <button class="text-purple-600 hover:text-purple-800 font-medium"> |
| <i class="fas fa-redo mr-2"></i> Regenerate |
| </button> |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-full text-sm font-medium"> |
| Save to Library |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-50 mt-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="border-t border-gray-200 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm">© 2023 MelodyAI. All rights reserved.</p> |
| <div class="mt-4 md:mt-0 flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('text-tab').addEventListener('click', function() { |
| document.getElementById('text-content').classList.remove('hidden'); |
| document.getElementById('voice-content').classList.add('hidden'); |
| this.classList.add('border-purple-500', 'text-purple-600'); |
| this.classList.remove('border-transparent', 'text-gray-500'); |
| document.getElementById('voice-tab').classList.add('border-transparent', 'text-gray-500'); |
| document.getElementById('voice-tab').classList.remove('border-purple-500', 'text-purple-600'); |
| }); |
| |
| document.getElementById('voice-tab').addEventListener('click', function() { |
| document.getElementById('voice-content').classList.remove('hidden'); |
| document.getElementById('text-content').classList.add('hidden'); |
| this.classList.add('border-purple-500', 'text-purple-600'); |
| this.classList.remove('border-transparent', 'text-gray-500'); |
| document.getElementById('text-tab').classList.add('border-transparent', 'text-gray-500'); |
| document.getElementById('text-tab').classList.remove('border-purple-500', 'text-purple-600'); |
| }); |
| |
| |
| const recordBtn = document.getElementById('record-btn'); |
| const recordStatus = document.getElementById('record-status'); |
| let isRecording = false; |
| |
| recordBtn.addEventListener('click', function() { |
| isRecording = !isRecording; |
| |
| if (isRecording) { |
| this.classList.add('recording'); |
| recordStatus.textContent = 'Recording... Click to stop'; |
| } else { |
| this.classList.remove('recording'); |
| recordStatus.textContent = 'Click to record your melody'; |
| } |
| }); |
| |
| |
| document.getElementById('generate-btn').addEventListener('click', function() { |
| const prompt = document.getElementById('prompt').value.trim(); |
| |
| if (!prompt) { |
| alert('Please describe your song before generating'); |
| return; |
| } |
| |
| |
| document.getElementById('progress-section').classList.remove('hidden'); |
| |
| |
| let progress = 0; |
| const progressInterval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| |
| document.getElementById('progress-fill').style.width = `${progress}%`; |
| document.getElementById('progress-percent').textContent = `${Math.floor(progress)}%`; |
| |
| if (progress === 100) { |
| clearInterval(progressInterval); |
| |
| |
| setTimeout(() => { |
| document.getElementById('progress-section').classList.add('hidden'); |
| document.getElementById('results-section').classList.remove('hidden'); |
| }, 500); |
| } |
| }, 500); |
| }); |
| |
| |
| function animateWaveforms() { |
| document.querySelectorAll('.waveform').forEach(wave => { |
| const duration = Math.random() * 1 + 1.5; |
| wave.style.animationDuration = `${duration}s`; |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', animateWaveforms); |
| </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=batnyan/mmmm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
