|
<!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> |
